Reshaped

https://reshaped.so/docs/getting-started/overview
Admin
Reshaped is a professionally crafted design system providing component libraries for React and...
Tokens:93,332
Snippets:774
Trust Score:7.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start the React application

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/cra

Runs the Create React App project locally using the start script.

```Shell
npm run start
```

--------------------------------

### Create a new Remix project

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/remix

Start a new Remix project using the `create-remix` command-line tool.

```Shell
npx create-remix@latest
```

--------------------------------

### Start Storybook Development Server

Source: https://reshaped.so/docs/getting-started/overview/getting-started/source-code

Starts the Storybook environment, providing all component examples. It includes an accessibility plugin and custom controls for content direction and color mode. Storybook is built using Vite.

```bash
yarn dev
```

--------------------------------

### Start Remix development server

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/remix

Run the Remix application locally in development mode.

```Shell
npm run dev
```

--------------------------------

### Start Next.js Application Locally

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/next

Runs the Next.js development server locally using npm, allowing you to preview the application.

```bash
npm run dev
```

--------------------------------

### Start Vite Development Server

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/vite

Executes the `npm run dev` command to start the local development server for your Vite project. This allows you to view and test your application in a browser.

```bash
npm run dev
```

--------------------------------

### Install Webpack project dependencies with NPM

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/webpack

Initialize a new project and install essential dependencies for a Webpack setup, including React, Webpack tools, and loaders for TypeScript and CSS. This provides a foundation for building a modern web application.

```bash
mkdir my-reshaped-app
cd my-reshaped-app
npm install react react-dom
npm install --dev webpack webpack-cli webpack-dev-server css-loader postcss-loader mini-css-extract-plugin ts-loader typescript html-webpack-plugin @types/react @types/react-dom
```

--------------------------------

### Run Webpack development server locally

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/webpack

Execute the npm run start command to launch the Webpack development server. This allows you to view and test your application locally during development.

```bash
npm run start
```

--------------------------------

### Add NPM scripts for Webpack build and serve

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/webpack

Update your package.json with start and build scripts. These scripts simplify running the Webpack development server and creating production-ready builds of your application.

```json
{
  "scripts": {
    "start": "webpack serve",
    "build": "webpack"
  }
}
```

--------------------------------

### Pagination Component Basic Setup

Source: https://reshaped.so/docs/getting-started/overview/changelog/v2

Shows a simple example of the new Pagination component, configured with a total number of pages and custom accessibility labels for navigation buttons.

```JSX
<Pagination total={10} previousAriaLabel="Back" nextAriaLabel="Forward" />
```

--------------------------------

### Import and use Reshaped components

Source: https://reshaped.so/docs/getting-started/overview/getting-started/react/installation

Demonstrates how to import Reshaped components like Button and Container, along with the Reshaped provider, and apply a theme. This setup ensures CSS tree-shaking works as expected, only importing CSS for components you're using.

```javascript
import { Button, Container, Reshaped } from "reshaped";
import "reshaped/themes/slate/theme.css";

const App = () => {
  return (
    <Reshaped theme="slate">
      <Container width="652px">
        <Button href="/">Get started</Button>
      </Container>
    </Reshaped>
  );
};
```

--------------------------------

### Import and use Reshaped components in App.tsx

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/cra

Demonstrates importing core Reshaped components and their theme, then rendering a basic example in a React component.

```TypeScript
import { Button, Container, Reshaped } from "reshaped";
import "reshaped/themes/slate/theme.css";

const App = () => {
  return (
    <Reshaped theme="slate">
      <Container width="652px">
        <Button href="/">Get started</Button>
      </Container>
    </Reshaped>
  );
};
```

--------------------------------

### Install Reshaped via npm

Source: https://reshaped.so/docs/getting-started/overview/getting-started/react/installation

Install the latest version of the Reshaped UI library using npm.

```bash
npm install reshaped
```

--------------------------------

### Install Project Dependencies with Yarn

Source: https://reshaped.so/docs/getting-started/overview/getting-started/source-code

To set up the project, navigate to the project directory and run Yarn to install all required dependencies. Yarn is the default package manager used for this project.

```bash
yarn
```

--------------------------------

### Implement system dark mode detection

Source: https://reshaped.so/docs/getting-started/overview/getting-started/react/installation

Use an inline script that accesses browser APIs to detect the user's system color mode preference and apply it to the data-rs-color-mode attribute on the <html> element. This example also integrates with local storage for persistent user preference.

```javascript
<script
  dangerouslySetInnerHTML={{
    __html: `
      const matcher = window.matchMedia("(prefers-color-scheme: dark)");
      const systemColorMode = matcher.matches ? "dark" : "light";
      const storedColorMode = localStorage.getItem("__reshaped-mode");

      document.documentElement.setAttribute("data-rs-color-mode", storedColorMode || systemColorMode);
      matcher.addEventListener("change", () => {
        document.documentElement.setAttribute("data-rs-color-mode", systemColorMode);
      });
  `
  }}
/>
```

--------------------------------

### Install Reshaped package

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/remix

Install the latest version of the Reshaped UI library from npm.

```Shell
npm install reshaped
```

--------------------------------

### Install Reshaped Package via npm

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/next

Installs the latest version of the Reshaped UI library into the project dependencies using npm.

```bash
npm install reshaped
```

--------------------------------

### Install Reshaped package

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/cra

Installs the latest version of the Reshaped package from NPM.

```Shell
npm install reshaped
```

--------------------------------

### Add Reshaped Components to a Next.js Page

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/next

Demonstrates how to import and use Reshaped components like `Button` and `View` within a Next.js page (`page.tsx`), providing a basic example of UI integration.

```typescript
import { Button, View } from "reshaped";

export default function Home() {
  return (
    <View padding={4}>
      <Button href="https://reshaped.so">Click me</Button>
    </View>
  );
}
```

--------------------------------

### Create a new React App project

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/cra

Initializes a new Create React App project, with an option for TypeScript.

```Shell
npx create-react-app my-project
cd my-project
```

```Shell
npx create-react-app my-project --template typescript
cd my-project
```

--------------------------------

### Integrate Lucide Icons with Reshaped Components

Source: https://reshaped.so/docs/getting-started/overview/getting-started/react/installation

Example demonstrating how to import and use Lucide icons, such as `HouseIcon`, directly within Reshaped's `Icon` and `Button` components for visual representation.

```jsx
import { HouseIcon } from "react-feather";
import { Icon, Button } from "reshaped";

const Component = () => {
  return (
    <>
      <Icon svg={HouseIcon} />
      <Button icon={HouseIcon}>Homepage</Button>
    </>
  );
};
```

--------------------------------

### Install Reshaped UI library via NPM

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/webpack

Add the Reshaped UI library to your project by installing its latest version from NPM. This step makes Reshaped components available for use in your application.

```bash
npm install reshaped
```

--------------------------------

### Integrate and Use Reshaped Components in React App

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/vite

Demonstrates how to import core Reshaped components like `Button` and `Container`, along with a theme, into a React application. It shows a basic example of wrapping components with `Reshaped` provider and rendering them.

```typescript
import { Button, Container, Reshaped } from "reshaped";
import "reshaped/themes/slate/theme.css";

const App = () => {
  return (
    <Reshaped theme="slate">
      <Container width="652px">
        <Button href="/">Get started</Button>
      </Container>
    </Reshaped>
  );
};

export default App;
```

--------------------------------

### Tabs Component Basic Structure

Source: https://reshaped.so/docs/getting-started/overview/changelog/v0

An incomplete example showing the basic structure for a Tabs component, including 'defaultActiveId' and the start of 'Tabs.List'.

```JSX
<Tabs defaultActiveId="1">
  <Tabs.List>
```

--------------------------------

### Install Recharts Package

Source: https://reshaped.so/docs/getting-started/overview/getting-started/guidelines/recharts

Installs the Recharts library into your project using npm, alongside the Reshaped package.

```bash
npm install recharts
```

--------------------------------

### Install TanStack React Table Package

Source: https://reshaped.so/docs/getting-started/overview/getting-started/guidelines/tanstack-table

Use npm to install the @tanstack/react-table package, which provides the core functionalities for building tables in React applications.

```bash
npm install @tanstack/react-table
```

--------------------------------

### Install Lucide React for Reshaped Icons

Source: https://reshaped.so/docs/getting-started/overview/getting-started/react/installation

Install the `lucide-react` npm package, which is recommended for easily integrating Lucide icons into Reshaped components without manual SVG handling.

```bash
npm install lucide-react
```

--------------------------------

### Create Next.js Project with create-next-app

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/next

Initializes a new Next.js application using `create-next-app` and navigates into the project directory. It's recommended to accept default CLI options for TypeScript and App directory support.

```bash
npx create-next-app@latest my-reshaped-app
cd my-reshaped-app
```

--------------------------------

### Generate theme colors with custom starting values

Source: https://reshaped.so/docs/getting-started/overview/tokens/theming/generating-themes

This example shows how to extend the color generation by providing initial hex values for other supported color types like critical, positive, and neutral. This allows for more control over the generated palette while still leveraging the helper's automatic adjustments.

```javascript
const colors = generateThemeColors({
  primary: "#...",
  critical: "#...",
  positive: "#...",
  neutral: "#..."
});
```

--------------------------------

### Install Craco for custom CRA configuration

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/cra

Installs Craco as a development dependency to enable custom configurations in Create React App.

```Shell
npm install -D @craco/craco
```

--------------------------------

### Install Reshaped UI Package

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/vite

Installs the latest version of the Reshaped UI library from the npm registry into your project's dependencies. This makes the components available for use.

```bash
npm install reshaped
```

--------------------------------

### Progress Component Usage Example

Source: https://reshaped.so/docs/getting-started/overview/changelog/v0

Illustrates how to use the new Progress component to display task status or other numerical values. Examples show different 'value' and 'color' properties.

```JSX
<View width="300px" maxWidth="100%" gap={3}>
  <Progress value={25} color="primary" />
  <Progress value={50} color="critical" />
  <Progress value={75} color="positive" />
</View>
```

--------------------------------

### Update Next.js Configuration for Reshaped

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/next

Modifies `next.config.js` to enable ESM transpiling and optimize package imports for the Reshaped library, improving build efficiency.

```javascript
const nextConfig = {
  transpilePackages: ["reshaped"],
  experimental: {
    optimizePackageImports: ["reshaped"]
  }
};
```

--------------------------------

### Switch Component API Reference

Source: https://reshaped.so/docs/getting-started/overview/components/switch

Detailed API documentation for the `Switch` component, outlining its available properties, their types, and descriptions. This includes properties for basic setup, state management, and visual customization.

```APIDOC
SwitchProps:
  name: string
    Description: Required property for form fields, identifies the switch.
  onChange: ({ value: boolean }) => void
    Description: Callback function triggered when the switch state changes. Provides the new boolean value.
  children: ReactNode
    Description: The label content displayed alongside the switch.
  reversed: boolean
    Description: Optional flag to change the label position to the end side of the element.
  size: 'small' | 'medium' | 'large'
    Description: Defines the visual size of the switch. Defaults to 'medium'.
  defaultChecked: boolean
    Description: Sets the initial checked state for an uncontrolled switch.
  checked: boolean
    Description: Controls the checked state for a controlled switch. Requires onChange for updates.
  disabled: boolean
    Description: Renders the switch in a non-interactive, disabled state.
```

--------------------------------

### Create Vite Project with React Template (JavaScript)

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/vite

Initializes a new Vite project using the React template and navigates into the project directory. This command is specifically for JavaScript-based projects.

```bash
npm init vite@latest my-reshaped-app --template react
cd my-reshaped-app
```

--------------------------------

### Configure HTML for Reshaped SSR

Source: https://reshaped.so/docs/getting-started/overview/getting-started/react/installation

To avoid flash of unstyled content (FOUC) or other style differences between server and browser rendering, add default dir, data-rs-theme, and data-rs-color-mode attributes to the <html> element.

```html
<!-- RTL with light mode -->
<html dir="rtl" data-rs-theme="slate" data-rs-color-mode="light" />

<!-- LTR with dark mode -->
<html data-rs-theme="slate" data-rs-color-mode="dark" />
```

--------------------------------

### Configure PostCSS with Reshaped

Source: https://reshaped.so/docs/getting-started/overview/getting-started/react/installation

Create a postcss.config.js file in your project root to import Reshaped's PostCSS configuration. This config includes custom media queries, autoprefixer, and cssnano for build optimizations, and can be extended with your own plugins.

```javascript
const { config } = require("reshaped/config/postcss");
module.exports = config;
```

--------------------------------

### Overlay Component for Media Cards

Source: https://reshaped.so/docs/getting-started/overview/changelog/v0

Shows an example of the Overlay component, designed for building media cards by displaying text content on top of an image. It demonstrates setting position and background content.

```JSX
<View borderRadius="medium" overflow="hidden" width="300px" maxWidth="100%">
  <Overlay
    position="bottom"
    backgroundSlot={
      <View aspectRatio={16 / 9}>
        <img src="/img/examples/architecture-1.webp" alt="Example" />
      </View>
    }
  >
    <Text variant="body-strong-2">Architecture photos</Text>
  </Overlay>
</View>
```

--------------------------------

### Configure PostCSS for Reshaped

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/next

Creates a `postcss.config.js` file at the project root to re-export Reshaped's PostCSS configuration, enabling proper styling.

```javascript
const { config } = require("reshaped/config/postcss");
module.exports = config;
```

--------------------------------

### Use Reshaped components in Remix

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/remix

Demonstrates how to import and use Reshaped UI components like `Button` and `View` within a Remix application.

```JavaScript
import { Button, View } from "reshaped";

export default function Home() {
  return (
    <View padding={4}>
      <Button href="https://reshaped.so">Click me</Button>
    </View>
  );
}
```

--------------------------------

### Update Next.js Examples: Use ESM Build

Source: https://reshaped.so/docs/getting-started/overview/changelog/v1

Public Next.js examples and documentation have been updated to utilize the ESM (ECMAScript Module) build of the library, moving away from the pre-compiled version for better module compatibility.

```Next.js
Integration: Next.js
Build Type: ESM (ECMAScript Module)
Previous Build: Pre-compiled
Impact: Improved module compatibility
```

--------------------------------

### Configure PostCSS for Reshaped

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/cra

Creates a postcss.config.js file to re-export Reshaped's PostCSS configuration.

```JavaScript
const { config } = require("reshaped/config/postcss");
module.exports = config;
```

--------------------------------

### Reshaped Button Component Example

Source: https://reshaped.so/docs/getting-started/overview/changelog/v0

Example of using the Reshaped Button component with primary color and an icon for instant delivery. This snippet demonstrates basic component usage within a JSX-like context.

```HTML/JSX
<Button color="primary" icon={ActivityIcon}>
  Instant delivery
</Button>
```

--------------------------------

### Reshaped View Utility Basic Layout Example

Source: https://reshaped.so/docs/getting-started/overview/changelog/v1

Demonstrates the basic usage of the new View utility component, showcasing its ability to combine layout and styling properties. This example creates a simple layout with two rows, each containing an icon-like element and a growing text placeholder, illustrating a common UI pattern.

```JSX
<View width="200px" maxWidth="100%" gap={2}>
  <View direction="row" gap={2} align="center">
    <View
      width="32px"
      height="32px"
      borderRadius="medium"
      backgroundColor="primary"
    />
    <View.Item grow>
      <View height="12px" backgroundColor="neutral" borderRadius="medium" />
    </View.Item>
  </View>
  <View direction="row" gap={2} align="center">
    <View
      width="32px"
      height="32px"
      borderRadius="medium"
      backgroundColor="primary"
    />
    <View.Item grow>
      <View height="12px" backgroundColor="neutral" borderRadius="medium" />
    </View.Item>
  </View>
</View>
```

--------------------------------

### Install Reshaped React Package via NPM

Source: https://reshaped.so/docs/getting-started/overview/changelog/v2

This snippet demonstrates the command to install the Reshaped React package using npm. The package is now freely available, enabling developers to integrate Reshaped components into their projects.

```bash
npm install reshaped
```

--------------------------------

### Use Reshaped as a Pre-built Webpack Bundle

Source: https://reshaped.so/docs/getting-started/overview/getting-started/react/installation

Demonstrates how to import Reshaped components, CSS, and themes from a pre-built Webpack bundle. This approach is suitable for environments where ESM builds are not feasible, ensuring correct component rendering and styling.

```jsx
import { Button, Container, Reshaped } from "reshaped/bundle";
import "reshaped/bundle.css";
import "reshaped/themes/slate/theme.css";

const App = () => {
  return (
    <Reshaped theme="slate">
      <Container width="652px">
        <Button href="/">Get started</Button>
      </Container>
    </Reshaped>
  );
};
```

--------------------------------

### Update package.json scripts to use Craco

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/cra

Modifies the "scripts" section in package.json to use Craco commands instead of default Create React App scripts.

```JSON
{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}
```

--------------------------------

### APIDOC: Documentation Updates

Source: https://reshaped.so/docs/getting-started/overview/changelog/v1

Updates to the project documentation, covering recently released CSS modules support in Remix, Figma core concepts, and an interactive example for the Dismissible utility.

```APIDOC
* Added documentation for the recently released CSS modules support in Remix, which now allows you to use our ESM build
* Added documentation about a few Figma core concepts we use when building Reshaped components
* Updated Dismissible utility documentation with an interactive example
```

--------------------------------

### Configure Craco for PostCSS file mode

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/cra

Creates a craco.config.js file to enable PostCSS file mode, allowing custom PostCSS configurations.

```JavaScript
module.exports = {
  style: {
    postcss: {
      mode: "file"
    }
  }
};
```

--------------------------------

### Example React View Component Usage

Source: https://reshaped.so/docs/getting-started/overview/changelog/v2

An example of using a `View` component with `direction` and `gap` props, likely from a React-based UI library like Reshaped. This snippet demonstrates basic layout composition.

```jsx
<View direction="row" gap={4}>
```

--------------------------------

### Autocomplete Basic Usage Example

Source: https://reshaped.so/docs/getting-started/overview/components/autocomplete

A basic example demonstrating how to use the Autocomplete component with static options. It shows how to manage the component's value using React state and the onChange handler, always rendering the same passed items and autocompleting the field upon selection.

```jsx
function Component() {
  const [value, setValue] = React.useState("");
  const options = ["Pizza", "Pie", "Ice-cream"];

  const handleChange: AutocompleteProps["onChange"] = (args) =>
    setValue(args.value);

  return (
    <Autocomplete
      name="fruit"
      placeholder="Pick your food"
      value={value}
      onChange={handleChange}
    >
      {options.map((option) => (
        <Autocomplete.Item key={option} value={option}>
          {option}
        </Autocomplete.Item>
      ))}
    </Autocomplete>
  );
}
```

--------------------------------

### Basic useHotkeys Hook Usage

Source: https://reshaped.so/docs/getting-started/overview/hooks/use-hotkeys

Illustrates the fundamental usage of `useHotkeys` by passing an object where keys are hotkey strings and values are callback functions. It shows examples for both single hotkeys and multiple hotkeys (separated by commas) triggering the same callback.

```JavaScript
// Single hotkey
useHotkeys({ n: createNewTask });

// An array of hotkeys for the same callback
useHotkey({ "n, t": createNewTask });
```

--------------------------------

### Create Vite Project with React TypeScript Template

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/vite

Initializes a new Vite project using the React TypeScript template and navigates into the project directory. This command is specifically for TypeScript-based projects.

```bash
npm init vite@latest my-reshaped-app --template react-ts
cd my-reshaped-app
```

--------------------------------

### Set up Webpack configuration for Reshaped project

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/webpack

Define your webpack.config.js to include necessary loaders and plugins for CSS, TypeScript, and HTML processing. This comprehensive configuration handles asset bundling, module resolution, and sets up a development server for efficient development.

```javascript
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: path.resolve(__dirname, "src/index.tsx"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-[hash].js",
  },
  resolve: {
    modules: ["node_modules"],
    extensions: [".ts", ".tsx", ".js", ".css"],
  },
  performance: {
    hints: false,
  },
  optimization: {
    splitChunks: {
      minSize: 10000,
      maxSize: 250000,
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false,
            },
          },
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /\.ts(x?)$/,
        use: ["ts-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Reshaped Webpack Example",
      template: path.resolve(__dirname, "src/index.html")
    }),
    new MiniCssExtractPlugin()
  ],
  devServer: {
    compress: true,
    port: 4000
  }
};
```

--------------------------------

### Configure Calendar Week Start Day

Source: https://reshaped.so/docs/getting-started/overview/components/calendar

Shows how to change the first day of the week in the Calendar component by setting the `firstWeekDay` property. For example, setting it to `0` makes the week start with Sunday.

```JavaScript
<Calendar defaultMonth={new Date(2023, 11)} firstWeekDay={0} />
```

--------------------------------

### Configure PostCSS with custom theme media CSS

Source: https://reshaped.so/docs/getting-started/overview/getting-started/react/installation

If you're generating a theme that modifies the default viewport breakpoints, pass the path to the generated media.css file to the PostCSS config using the alternative getConfig function.

```javascript
const path = require("path");
const { getConfig } = require("reshaped/config/postcss");

module.exports = getConfig({
  themeMediaCSSPath: path.resolve(__dirname, "src/themes/my-theme/media.css")
});
```

--------------------------------

### Example: Programmatic Focus Ring Control with useKeyboardMode

Source: https://reshaped.so/docs/getting-started/overview/hooks/use-keyboard-mode

This example illustrates how `useKeyboardMode` can be integrated into a component composition, specifically for a `Canvas` and a `Panel`. It demonstrates how to programmatically `disable` focus rings for the `Canvas` and `enable`/`activate`/`deactivate` them based on user interactions with the `Panel`, providing granular control over UI focus.

```JavaScript
const Canvas = () => {
  const keyboardMode = useKeyboardMode();

  useEffect(() => {
    keyboardMode.disable();
  }, [keyboardMode]);
};

const Panel = () => {
  const keyboardMode = useKeyboardMode();

  const handleOpen = () => {
    keyboardMode.enable();
    keyboardMode.activate();
  };

  const handleClose = () => {
    keyboardMode.deactivate();
    keyboardMode.disable();
  };
};
```

--------------------------------

### Integrate Reshaped Provider in Remix root

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/remix

Wrap the application's `Outlet` with the `Reshaped` provider in `app/root.tsx`. Import the desired theme and add theming attributes to the `<html>` element for Server-Side Rendering (SSR) support.

```TypeScript
import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration
} from "@remix-run/react";
import { Reshaped } from "reshaped";
import "reshaped/themes/slate/theme.css";

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

export default function App() {
  return (
    <html lang="en" data-rs-theme="slate" data-rs-color-mode="light">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Reshaped theme="slate">
          <Outlet />
        </Reshaped>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}
```

--------------------------------

### Basic ContextMenu Implementation

Source: https://reshaped.so/docs/getting-started/overview/components/context-menu

This example shows the fundamental structure of a ContextMenu. It wraps a simple View component that acts as the right-click trigger, and contains two basic menu items within ContextMenu.Content.

```jsx
<ContextMenu>
  <View
    height={50}
    width={50}
    backgroundColor="neutral-faded"
    borderRadius="medium"
    justify="center"
    align="center"
  />

  <ContextMenu.Content>
    <ContextMenu.Item>Action 1</ContextMenu.Item>
    <ContextMenu.Item>Action 2</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu>
```

--------------------------------

### Example Usage of useHandlerRef with useEffect

Source: https://reshaped.so/docs/getting-started/overview/hooks/use-handler-ref

This example demonstrates how to integrate `useHandlerRef` within a React functional component. It illustrates how the hook provides a stable ref (`onMountRef`) for an external handler (`onMount`), allowing it to be safely used as a dependency in `React.useEffect` without causing unnecessary re-renders due to handler identity changes.

```JavaScript
const Component = ({ onMount }) => {
  const onMountRef = useHandlerRef(onMount);

  React.useEffect(() => {
    onMountRef.current();
  }, [onMountRef]);
};
```

--------------------------------

### Configuring Server-Side Rendering Defaults

Source: https://reshaped.so/docs/getting-started/overview/getting-started/react/core-concepts

Provides examples of setting default values for color mode and content direction in the HTML tag when using server-side rendering, as these values are not accessible during SSR.

```html
<!-- RTL with light mode -->
<html dir="rtl" data-rs-theme="slate" data-rs-color-mode="light" />

<!-- LTR with dark mode -->
<html data-rs-theme="slate" data-rs-color-mode="dark" />
```

--------------------------------

### Generate Custom Themes with Dynamic Colors

Source: https://reshaped.so/docs/getting-started/overview/changelog/v2

Provides an example of dynamically generating a custom theme using `getThemeCSS` and `generateThemeColors` based on a primary hex color. The generated CSS is then applied, and components are rendered within the custom theme.

```jsx
function Demo() {
  const colors = ["#5a58f2", "#2563eb", "#0891b2", "#34d399", "#facc15", "#d97706", "#be185d"];
  const [hex, setHex] = React.useState(colors[0]);

  const css = getThemeCSS("myTheme", {
    color: generateThemeColors({ primary: hex }),
  });

  return (
    <>
      {css && <style>{css}</style>}
      <Theme name="myTheme">
        <View gap={4}>

```

--------------------------------

### Basic Scrim Usage with Background Slot

Source: https://reshaped.so/docs/getting-started/overview/components/scrim

Illustrates the default behavior of the Scrim component, covering the background area and centering its content. This example includes an image within the `backgroundSlot`.

```jsx
<Scrim
  backgroundSlot={
    <View aspectRatio={16 / 9}>
      <Image src="/img/examples/image-retina.webp" width="100%" />
    </View>
  }
>
  Scrim content
</Scrim>
```

--------------------------------

### Example of Nested View and Stack Utility Usage

Source: https://reshaped.so/docs/getting-started/overview/changelog/v0

Demonstrates the refactored `View` component (formerly `Stack`) with nested structures, showcasing `gap`, `direction`, `backgroundColor`, `height`, `width`, and `View.Item` with `grow` property for flexible layouts.

```JSX
<View gap={2}>
  <View backgroundColor="neutral-faded" height={10} />

  <View direction="row" gap={2}>
    <View backgroundColor="neutral-faded" height={10} />
    <View.Item grow>
      <View backgroundColor="neutral-faded" height={10} />
    </View.Item>
    <View backgroundColor="neutral-faded" height={10} />
  </View>

  <View direction="row" gap={2}>
    <View width="200px">
      <View backgroundColor="neutral-faded" height={10} />
    </View>
    <View.Item grow>
      <View backgroundColor="neutral-faded" height={10} />
    </View.Item>
  </View>
</View>
```

--------------------------------

### Tailwind v4 CSS Import for Theming

Source: https://reshaped.so/docs/getting-started/overview/changelog

Demonstrates how to import the generated 'tailwind.css' file containing design token definitions into a Tailwind v4 setup for seamless theming.

```CSS
@import "tailwindcss";
@import "reshaped/themes/reshaped/tailwind.css";
```

--------------------------------

### Configure PostCSS for Reshaped Styling

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/vite

Creates a `postcss.config.js` file in the project root. This configuration re-exports Reshaped's default PostCSS settings, which are essential for proper styling and theme application.

```javascript
export { config as default } from "reshaped/config/postcss.js";
```

--------------------------------

### Implement Modal with Swipe-to-Close Behavior

Source: https://reshaped.so/docs/getting-started/overview/changelog/v2

Shows an example of a Modal component that can be closed via touch swipe events on mobile devices. It uses a `useToggle` hook to manage the modal's active state and positions the modal at the start.

```jsx
function Example() {
  const { active, activate, deactivate } = useToggle(false);

  return (
    <>
      <Button onClick={activate}>Open modal</Button>
      <Modal active={active} onClose={deactivate} position="start">
        Modal content
      </Modal>
    </>
  );
}
```

--------------------------------

### Create Reshaped App Component for Client-Side Features

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/next

Defines a client-side React component (`App.tsx`) that wraps the application with the `Reshaped` provider, enabling global features like theming and notifications. It imports the default 'slate' theme.

```typescript
"use client";

import type { ReactNode } from "react";
import { Reshaped } from "reshaped";
import "reshaped/themes/slate/theme.css";

const App = ({ children }: { children: ReactNode }) => {
  return <Reshaped theme="slate">{children}</Reshaped>;
};

export default App;
```

--------------------------------

### Update Next.js Root Layout with Reshaped App Component

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/next

Modifies `layout.tsx` to integrate the `App` component, apply default theme settings, and include a font. It sets the HTML `lang`, `data-rs-theme`, and `data-rs-color-mode` attributes.

```typescript
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import App from "@/components/App";

const inter = Inter({
  subsets: ["latin"]
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app"
};

export default function RootLayout({
  children
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" data-rs-theme="slate" data-rs-color-mode="dark">
      <body>
        <App>{children}</App>
      </body>
    </html>
  );
}
```

--------------------------------

### Run Unit and Browser Tests

Source: https://reshaped.so/docs/getting-started/overview/getting-started/source-code

Executes unit tests for utilities using Vitest and component tests using @storybook/experimental-addon-test. Pre-written tests for included components can be modified. Component tests are also accessible within the Storybook environment.

```bash
yarn test:unit
yarn test:browser
```

--------------------------------

### Autocomplete Multiline Start Slot Example

Source: https://reshaped.so/docs/getting-started/overview/components/autocomplete

Shows how to use the multiline flag with the startSlot property to display multiple selected values as badges that wrap onto the next line. This is useful for displaying a list of selected items within the input field, enhancing usability for multi-selection scenarios.

```jsx
function Component() {
  const options = ["Salad", "Quinoa", "Beans"];

  return (
    <View width="280px">
      <Autocomplete
        name="food"
        placeholder="Pick your favorite food"
        startSlot={[
          <Badge size="small">Cinnamon bun</Badge>,
          <Badge size="small">Pasta</Badge>,
          <Badge size="small">Ice-cream</Badge>,
          <Badge size="small">Pizza</Badge>,
        ]}
        defaultValue="Pineapple"
        multiline
      >
        {options.map((option) => {
          return (
            <Autocomplete.Item key={option} value={option}>
              {option}
            </Autocomplete.Item>
          );
        })}
      </Autocomplete>
    </View>
  );
}
```

--------------------------------

### Configure PostCSS for Reshaped integration

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/webpack

Create a postcss.config.js file in your project's root directory. This configuration re-exports Reshaped's default PostCSS settings, ensuring proper styling for the UI components.

```javascript
const { config } = require("reshaped/config/postcss");
module.exports = config;
```

--------------------------------

### Build Reshaped Project

Source: https://reshaped.so/docs/getting-started/overview/getting-started/source-code

This script builds the entire project, including ESM and CommonJS outputs for components, CLI, library bundle, styles, themes, and Storybook. It uses Vite for the library and Storybook, TSC for ESM/CommonJS, PostCSS/CSS Modules for CSS, and a custom Node CLI for themes. Individual parts can be built separately for specific testing.

```bash
yarn build
```

--------------------------------

### Integrate and use Reshaped components in React

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/webpack

Import core Reshaped components like Button and Container into your React application. Wrap your application content with the Reshaped component and apply a theme to enable styling and functionality.

```tsx
import { Button, Container, Reshaped } from "reshaped";
import "reshaped/themes/slate/theme.css";

const App = () => {
  return (
    <Reshaped theme="slate">
      <Container width="652px">
        <Button href="/">Get started</Button>
      </Container>
    </Reshaped>
  );
};
```

--------------------------------

### Configure PostCSS for Reshaped in Remix

Source: https://reshaped.so/docs/getting-started/overview/getting-started/integrations/remix

Create a `postcss.config.js` file in the project root to re-export Reshaped's PostCSS configuration, using ESM imports as Remix projects typically use `type: "module"`.

```JavaScript
import { config } from "reshaped/config/postcss.js";
export default config;
```

--------------------------------

### Run Visual Regression Tests with Chromatic

Source: https://reshaped.so/docs/getting-started/overview/getting-started/source-code

Executes visual regression tests using Chromatic, where each component story in Storybook automatically becomes a screenshot test. Requires a Chromatic token from a `.chromatic` file, which is not included in the source code and must be generated by the user.

```bash
yarn test:vrt
```

--------------------------------

### Apply Responsive Grid Layouts with Reshaped

Source: https://reshaped.so/docs/getting-started/overview/utilities/grid

All Grid layout properties support responsive syntax, which means you can pass an object with values and control its rendering based on the viewport size. We're using a mobile-first approach, which means that you don't have to define a value for every single viewport. Instead, you only need to define the values at which they change, and the component will apply them from smallest to largest. For example, if you pass { s: 2, l: 3 }, Grid will switch to 3-column layout starting from large screen size.

```jsx
<Grid columns={{ s: 2, l: 3 }} gap={4}>
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
</Grid>
```

--------------------------------

### Rendering Single and Combined Hotkeys

Source: https://reshaped.so/docs/getting-started/overview/components/hotkey

This example illustrates the flexible usage of the `Hotkey` component to display both individual keys (e.g., '⌘K') and combinations of keys (e.g., 'Shift + P'). It shows how to structure these within a `View` component for proper layout.

```JSX
<View gap={4} align="start">
  <Hotkey>⌘K</Hotkey>
  <View direction="row" gap={1} align="center">
    <Hotkey>Shift</Hotkey>
    <Text variant="body-3" weight="medium">
      +
    </Text>
    <Hotkey>P</Hotkey>
  </View>
</View>
```

--------------------------------

### Example Usage of useScrollLock Hook

Source: https://reshaped.so/docs/getting-started/overview/hooks/use-scroll-lock

This example illustrates how to integrate `useScrollLock` into a React functional component. It shows how to destructure `scrollLocked`, `lockScroll`, and `unlockScroll` from the hook and use them with buttons to control page scrolling.

```javascript
function Example() {
  const { scrollLocked, lockScroll, unlockScroll } = useScrollLock();

  return (
    <View gap={3} direction="row">
      <Button onClick={() => lockScroll()}>Lock scroll</Button>
      <Button onClick={() => unlockScroll()}>Unlock scroll</Button>
    </View>
  );
}
```

--------------------------------

### Release Project Package

Source: https://reshaped.so/docs/getting-started/overview/getting-started/source-code

Provides scripts for releasing the package, typically for internal use. Users may need to customize these scripts to publish to an internal NPM registry instead of generating a .tgz file.

```bash
yarn release
```

--------------------------------

### React Component Example with useToggle Hook

Source: https://reshaped.so/docs/getting-started/overview/hooks/use-toggle

This example illustrates the practical application of the `useToggle` hook within a React functional component. It shows how to destructure `active`, `activate`, and `deactivate` from the hook, and how to use them to control the visibility of a `Modal` component based on button clicks.

```React
function Example() {
  const { active, activate, deactivate } = useToggle(false);

  return (
    <>
      <Button onClick={activate}>Open modal</Button>
      <Modal active={active} onClose={deactivate}>
        Modal content
      </Modal>
    </>
  );
}
```

--------------------------------

### Reshaped ScrollArea Utility Example with Card

Source: https://reshaped.so/docs/getting-started/overview/changelog/v2

This example demonstrates how to use the new Reshaped ScrollArea utility within a Card component. It configures the ScrollArea to display scrollbars on hover and allows for both horizontal and vertical scrolling, useful for non-standard or compact scrollable regions.

```JSX
<View width="300px">
  <Card height="200px" padding={0}>
    <ScrollArea scrollbarDisplay="hover">
      <View height="300px" width="150%" align="center" justify="center">
        Text content
      </View>
    </ScrollArea>
  </Card>
</View>
```

--------------------------------

### Reshaped Toast Component Usage Example

Source: https://reshaped.so/docs/getting-started/overview/changelog/v1

Illustrates how to use the Toast component to display notification messages. This example shows a button that, when clicked, triggers a toast notification with a custom text and an icon, demonstrating a typical user interaction flow.

```JSX
function Preview() {
  const toast = useToast();

  return (
    <Button
      onClick={() => toast.show({ text: 'Account created', icon: ActivityIcon })}
    >
      Create an account
    </Button>
  )
}
```

--------------------------------

### Accordion Controlled State Example

Source: https://reshaped.so/docs/getting-started/overview/utilities/accordion

This example demonstrates how to use the Accordion component as a controlled component. By using the `active` property, you gain complete manual control over the content's visibility. The `onToggle` handler must be used to update the component's state, allowing for custom logic to be executed before state changes.

```JSX
<Accordion
  active
  onToggle={() => {
    /* Change the state here */
  }}
>
  <Accordion.Trigger>
    <View backgroundColor="neutral-faded" height="32px" borderRadius="small" />
  </Accordion.Trigger>
  <Accordion.Content>
    <View paddingTop={4}>
      <View
        backgroundColor="neutral-faded"
        height="80px"
        borderRadius="small"
      />
    </View>
  </Accordion.Content>
</Accordion>
```

--------------------------------

### Integrate FileUpload Component with Drag-and-Drop

Source: https://reshaped.so/docs/getting-started/overview/changelog/v2

Illustrates the usage of the new FileUpload component, allowing users to drop files or browse. It demonstrates how to compose the FileUpload component with other UI elements like Icon and Link for a custom layout.

```jsx
<View width="300px" maxWidth="100%">
  <FileUpload name="file">
    <View gap={2}>
      <Icon svg={IconMic} size={6} />
      <View.Item>
        Drop files to attach, or{" "}
        <FileUpload.Trigger>
          <Link variant="plain">browse</Link>
        </FileUpload.Trigger>
      </View.Item>
    </View>
  </FileUpload>
</View>
```

--------------------------------

### React Example for Reshaped UI Badge Component Enhancements

Source: https://reshaped.so/docs/getting-started/overview/changelog/v2

Illustrates the new `large` size, `icon` support, and interactive properties (`onDismiss`, `onClick`) of the Reshaped UI Badge component. Shows two examples: a dismissible 'In progress' badge and an interactive 'Locals favorite' badge with an icon, demonstrating its expanded versatility.

```javascript
<View gap={2} direction="row">
  <Badge size="large" onDismiss={() => {}} color="positive">
    In progress
  </Badge>
  <Badge icon={IconHeart} color="primary" variant="faded" size="large" onClick={() => {}}>
    Locals favorite
  </Badge>
</View>
```

--------------------------------

### Basic Usage of Reshaped Provider

Source: https://reshaped.so/docs/getting-started/overview/utilities/reshaped

Illustrates how to wrap an entire application with the Reshaped provider to enable global event listeners and provide access to Reshaped context hooks, setting a root theme for the application.

```javascript
import { Reshaped } from "reshaped";
import "reshaped/themes/slate/theme.css";

const App = () => {
  return <Reshaped theme="slate">My application</Reshaped>;
};
```

--------------------------------

### MenuItem Component Properties

Source: https://reshaped.so/docs/getting-started/overview/components/menu-item

Documentation for the properties available on the MenuItem component, inferred from usage examples.

```APIDOC
MenuItemProps:
  children: React.ReactNode (Main content of the menu item)
  onClick: () => void (Callback function triggered on click, renders as <button>)
  href: string (URL for navigation, renders as <a>)
  attributes: React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> (Additional HTML attributes for the underlying element)
  color: 'critical' | 'neutral' | 'default' (Background highlight color, e.g., for critical actions)
  selected: boolean (Indicates if the item is currently selected, useful for pickers/selection menus)
  disabled: boolean (Prevents user interaction with the item)
  size: 'small' | 'medium' | 'large' (Controls spacing and dimensions of the item)
  startSlot: React.ReactNode (Content displayed at the beginning of the item)
  endSlot: React.ReactNode (Content displayed at the end of the item)
  icon: React.ComponentType<any> (An icon component to display, overrides `startSlot` if both are used)
  roundedCorners: boolean (Applies border-radius when MenuItem is used as a standalone component)
  size (responsive): { s?: 'small' | 'medium' | 'large', m?: 'small' | 'medium' | 'large', l?: 'small' | 'medium' | 'large', xl?: 'small' | 'medium' | 'large' } (Responsive control for size based on viewport)
  roundedCorners (responsive): { s?: boolean, m?: boolean, l?: boolean, xl?: boolean } (Responsive control for rounded corners based on viewport)
```

--------------------------------

### Avatar Color Variants

Source: https://reshaped.so/docs/getting-started/overview/components/avatar

Examples of applying different color tokens as Avatar backgrounds for initials and icon fallbacks, including faded variants.

```jsx
<View gap={3}>
  <View direction="row" gap={3}>
    <Avatar color="neutral" initials="RS" />
    <Avatar color="positive" initials="RS" />
    <Avatar color="warning" initials="RS" />
    <Avatar color="critical" initials="RS" />
    <Avatar color="primary" initials="RS" />
  </View>

  <View direction="row" gap={3}>
    <Avatar color="neutral" variant="faded" initials="RS" />
    <Avatar color="positive" variant="faded" initials="RS" />
    <Avatar color="warning" variant="faded" initials="RS" />
    <Avatar color="critical" variant="faded" initials="RS" />
    <Avatar color="primary" variant="faded" initials="RS" />
  </View>
</View>
```

--------------------------------

### Accordion Utility Basic Usage Example

Source: https://reshaped.so/docs/getting-started/overview/changelog/v1

Demonstrates the basic usage of the new Accordion utility, showing how to structure the trigger and content components within a View container. The Accordion supports any content type and allows any component as a trigger.

```jsx
<View height="120px" width="300px" maxWidth="100%">
  <Accordion>
    <Accordion.Trigger>
      <View backgroundColor="neutral-faded" height={10} />
    </Accordion.Trigger>
    <Accordion.Content>
      <View paddingTop={4}>
        <View backgroundColor="neutral-faded" height={10} />
      </View>
    </Accordion.Content>
  </Accordion>
</View>
```

--------------------------------

### Setting Toast Position

Source: https://reshaped.so/docs/getting-started/overview/components/toast

Illustrates how to change the display position of a toast using the `position` property, for example, setting it to 'top' instead of the default 'bottom-end'.

```JavaScript
function Component() {
  const toast = useToast();

  return (
    <Button
      onClick={() => {
        const id = toast.show({
          text: "Notification sent",
          icon: CheckCheckIcon,
          actionsSlot: <Button onClick={() => toast.hide(id)}>Undo</Button>,
          position: "top",
        });
      }}
    >
      Show notification
    </Button>
  );
}
```

--------------------------------

### Positioning Scrim Content

Source: https://reshaped.so/docs/getting-started/overview/components/scrim

Demonstrates how to use the `position` property to control the alignment of the Scrim's content. This example positions the content at the bottom of the scrim.

```jsx
<Scrim
  position="bottom"
  backgroundSlot={
    <View aspectRatio={16 / 9}>
      <Image src="/img/examples/image-retina.webp" width="100%" />
    </View>
  }
>
  <Text variant="featured-3" weight="bold">
    Image title
  </Text>
</Scrim>
```
Tokens:
Raw