### Install Prerequisites

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/theme-unify.mdx

Install the necessary reablocks and Tailwind CSS dependencies.

```bash
npm install reablocks
npm install -D tailwindcss @tailwindcss/postcss postcss postcss-nested postcss-preset-env
```

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

### Initialize Reablocks via CLI

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Run this command in the project root to start the interactive setup process.

```sh
npx reablocks-cli@latest init
```

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

### Install dependencies

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Run this command within the project directory to install all required packages.

```bash
npm install
```

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

### Install Reablocks skills via npx

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/skills.mdx

The recommended quick installation method to fetch and install the latest skills automatically.

```bash
npx skills add reaviz/skills
```

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

### Install tw-colors Plugin

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/migration.mdx

Command to install the required dependency for managing multiple themes.

```shell
npm i -D tw-colors
```

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

### Start Storybook

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Launches the local development server, typically accessible at http://localhost:9009.

```bash
npm start
```

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

### Install Tanstack Table

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/recipes/table.mdx

Install the required dependency for the data table model.

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

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

### Basic Menu Example

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layers/menu.mdx

Displays a simple list of menu items.

```tsx
<StoryRenderer path="components/Menu.story.tsx" name="Simple" storybookKey="components-layers-menu--simple" />
```

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

### Render Input Value Initialization

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/form/input.mdx

Displays examples for setting placeholders and default values.

```tsx
<StoryRenderer path="components/Input.story.tsx" name="Placeholder" storybookKey="components-form-input--placeholder" />
```

```tsx
<StoryRenderer path="components/Input.story.tsx" name="DefaultValue" storybookKey="components-form-input--default-value" />
```

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

### Chip Customization Examples

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/chip.mdx

Examples showing how to customize Chip colors, sizes, and icon adornments.

```tsx
<StoryRenderer path="components/Chip.story.tsx" name="Colors" storybookKey="components-elements-chip--colors" />
```

```tsx
<StoryRenderer path="components/Chip.story.tsx" name="Sizes" storybookKey="components-elements-chip--sizes" />
```

```tsx
<StoryRenderer path="components/Chip.story.tsx" name="Adornment" storybookKey="components-elements-chip--adornment" />
```

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

### Quick Start with cn

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/utils/cn.mdx

Demonstrates basic usage for merging classes and handling conditional logic.

```tsx
import { cn } from 'reablocks';

cn('px-4 py-2', 'px-6');
// → 'py-2 px-6'  (px-4 is dropped because px-6 wins)

cn('text-sm', isActive && 'font-bold text-primary', { 'opacity-50': disabled });
// → 'text-sm font-bold text-primary'  (when isActive=true, disabled=false)
```

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

### Calendar Initialization and Display Options

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/form/calendar.mdx

Examples for setting default values, labels, and multi-view layouts.

```tsx
<StoryRenderer path="components/Calendar.story.tsx" name="DefaultValue" storybookKey="components-form-calendar--default-value" />
```

```tsx
<StoryRenderer path="components/Calendar.story.tsx" name="WithLabels" storybookKey="components-form-calendar--with-labels" />
```

```tsx
<StoryRenderer path="components/Calendar.story.tsx" name="Range" storybookKey="components-form-calendar--range" />
```

```tsx
<StoryRenderer path="components/Calendar.story.tsx" name="Multiview" storybookKey="components-form-calendar--multiview" />
```

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

### Install Tailwind CSS Variables

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/migration.mdx

Install the required dependency for Tailwind CSS variable support.

```shell
  npm install -D @mertasan/tailwindcss-variables
```

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

### Quick Start Field implementation

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layout/field.mdx

Basic usage of the Field component with a label and hint.

```tsx
import { Field, Input } from 'reablocks';

export default function App() {
  return (
    <Field label="Email" hint="We'll never share your email.">
      <Input placeholder="you@example.com" />
    </Field>
  );
}
```

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

### Quick Start Skeleton Implementation

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/skeleton.mdx

Basic implementation of the Skeleton component with animation enabled.

```tsx
import { Skeleton } from 'reablocks';

export default function App() {
  return (
    <div className="w-[300px]">
      <Skeleton animated className="h-5" />
    </div>
  );
}
```

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

### Install Zod and Resolvers

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/recipes/forms.mdx

Install the necessary dependencies to enable Zod validation with react-hook-form.

```shell
npm install zod @hookform/resolvers
```

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

### Basic Tooltip Example

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layers/tooltip.mdx

Displays a simple tooltip implementation.

```tsx
<StoryRenderer path="components/Tooltip.story.tsx" name="Simple" storybookKey="components-layers-tooltip--simple" />
```

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

### Quick Start NavigationBar

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layout/navigation.mdx

Basic implementation of a navigation bar with multiple buttons.

```tsx
import { NavigationBar, NavigationButton } from 'reablocks';

export default function App() {
  return (
    <NavigationBar>
      <NavigationButton>
        Home
      </NavigationButton>
      <NavigationButton>
        Tickets
      </NavigationButton>
    </NavigationBar>
  );
}
```

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

### Quick Start Button Usage

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/button.mdx

Basic implementation of the Button component by importing it from the reablocks library.

```tsx
import { Button } from 'reablocks';

export default function App() {
  return <Button>Click Me</Button>
}
```

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

### Global Overlay Story Examples

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/utils/overlay.mdx

Examples of using the GlobalOverlay component for interactive elements like dialogs.

```tsx
<StoryRenderer 
  path="components/GlobalOverlay.story.tsx" 
  name="ClickToOpen" 
/>
```

```tsx
<StoryRenderer 
  path="components/Dialog.story.tsx" 
  name="DialogExample" 
/>
```

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

### Quick Start Kbd Component

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/kbd.mdx

Basic implementation of the Kbd component using the keycode prop.

```tsx
import { Kbd } from 'reablocks';

export default function App() {
  return <Kbd keycode="option+m"></Kbd>
}
```

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

### Install Reablocks package

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Add the Reablocks dependency to your project.

```sh
npm install reablocks --save
```

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

### Install Tailwind CSS dependencies

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Install the required Tailwind CSS packages for your project.

```sh
npm install tailwindcss @tailwindcss/cli
```

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

### Verify installation with Claude Code

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/skills.mdx

Ask Claude Code about a component to verify that the skill files have been loaded correctly.

```text
> How do I use the reablocks Select component?
```

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

### Connected Overlay Story Examples

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/utils/overlay.mdx

Examples of using the ConnectedOverlay component for menus, tooltips, and other anchor-relative elements.

```tsx
<StoryRenderer 
  path="components/GlobalOverlay.story.tsx" 
  name="Simple" 
/>
```

```tsx
<StoryRenderer 
  path="components/ConnectedOverlay.story.tsx" 
  name="TooltipExample" 
/>
```

```tsx
<StoryRenderer 
  path="components/ConnectedOverlay.story.tsx" 
  name="MenuExample" 
/>
```

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

### Quick Start IconButton

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/icon-button.mdx

Basic implementation of the IconButton component.

```tsx
import { IconButton } from 'reablocks';

export default function App() {
  return <IconButton>©</IconButton>
}
```

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

### Quick Start Chip Implementation

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/chip.mdx

Basic usage of the Chip component imported from reablocks.

```tsx
import { Chip } from 'reablocks';

export default function App() {
  return <Chip>Active</Chip>
}
```

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

### Quick Start Badge Implementation

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/badge.mdx

Basic usage of the Badge component by importing it from reablocks and providing a content prop.

```tsx
import { Badge } from 'reablocks';

export default function App() {
  return <Badge content="9" />
}
```

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

### Quick Start Typography Usage

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/typography/typography.mdx

Import components from reablocks to render semantic text elements.

```tsx
import { H1, P, Muted } from 'reablocks';

export default function App() {
  return (
    <>
      <H1>Welcome</H1>
      <P>Build beautiful interfaces with reablocks.</P>
      <Muted>Last updated today.</Muted>
    </>
  );
}
```

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

### Prompting Agents with DESIGN.md

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/advanced/design-md.mdx

Example prompt for requesting UI components while instructing the agent to adhere to the design system.

```text
> Using the design system in DESIGN.md, build a settings card with a
  text input, a toggle row, and primary/secondary action buttons.
```

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

### Quick Start HighlightedText

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/highlighted-text.mdx

Import the component and provide the text as children along with the search keyword.

```tsx
import { HighlightedText } from 'reablocks';

export default function App() {
  return <HighlightedText search="block">reablocks</HighlightedText>;
}
```

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

### Custom Animation Tooltip Example

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layers/tooltip.mdx

Demonstrates how to apply custom animations using the animation and animationViewChange props.

```tsx
<StoryRenderer path="components/Tooltip.story.tsx" name="CustomAnimation" storybookKey="components-layers-tooltip--custom-animation" />
```

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

### Quick Start DotsLoader

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/loader.mdx

Basic implementation of the DotsLoader component imported from the reablocks library.

```tsx
import { DotsLoader } from 'reablocks';

export default function App() {
  return <DotsLoader />
}
```

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

### Quick Start AvatarGroup

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/avatar-group.mdx

Basic implementation showing how to import and nest Avatar components within an AvatarGroup.

```tsx
import { AvatarGroup, Avatar } from 'reablocks';

export default function App() {
  return (
    <AvatarGroup>
      <Avatar name="Ben Franklin" />
      <Avatar name="Teddy Roosevelt" />
      <Avatar name="Bugs Bunny" />
    </AvatarGroup>
  )
}
```

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

### Install Reablocks skills at user level

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/skills.mdx

Make skills available across all personal projects by symlinking them into the global ~/.claude/skills/ directory.

```bash
mkdir -p ~/.claude/skills

# Symlink the library
ln -s /path/to/reaviz/skills/reablocks ~/.claude/skills/reablocks
```

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

### Basic Dialog Story

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layers/dialog.mdx

Renders a simple dialog example from the storybook.

```tsx
<StoryRenderer path="components/Dialog.story.tsx" name="Simple" storybookKey="components-layers-dialog--simple" />
```

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

### MFA Authenticator Story

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/blocks/authentication/mfa.mdx

Renders the MFA authenticator setup component.

```tsx
<StoryRenderer path="blocks/Mfa.story.tsx" name="MfaAuthenticator"/>
```

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

### Quick Start with useInfinityList Hook

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/infinity-list.mdx

Initializes the Infinity List functionality by providing an array of items to the useInfinityList hook.

```typescript
import { useMemo } from 'react';
import { useInfinityList } from 'reablocks';

export default function App() {
  const items = useMemo(() => [...Array(30).keys()], []);
  const { data, hasMore, showNext } = useInfinityList({ items });

  return (
    <div>
      {data.map(i => (
        <div key={i}>Item {i}</div>
      ))}
      {hasMore && <button onClick={() => showNext()}>Show More</button>}
    </div>
  );
}
```

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

### Quick Start Avatar Implementation

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/avatar.mdx

Basic usage of the Avatar component by importing it from reablocks and providing a name prop.

```tsx
import { Avatar } from 'reablocks';

export default function App() {
  return <Avatar name="Teddy Roosevelt" />
}
```

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

### Basic Textarea Usage

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/form/textarea.mdx

A minimal setup for a standard multiline text input field.

```tsx
<StoryRenderer path="components/Textarea.story.tsx" name="Basic" storybookKey="components-form-textarea--basic" />
```

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

### Quick Start Duration Component

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/duration.mdx

Basic implementation of the Duration component using a millisecond value.

```tsx
import { Duration } from 'reablocks';

export default function App() {
  return (
    <Duration value="123459101" />
  );
}
```

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

### Install Reablocks skills at project level

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/skills.mdx

Use this method to share skills across a team by committing them to version control within the project's .claude/skills/ directory.

```bash
# From your project root
mkdir -p .claude/skills

# Symlink the reablocks skill tree
ln -s /path/to/reaviz/skills/reablocks .claude/skills/reablocks
```

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

### Quick Start Sort Component

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/sort.mdx

Basic implementation requiring the direction state and an onSort callback function.

```typescript
import { useState } from 'react';
import { Sort } from 'reablocks';

export default function App() {
  const [dir, setDir] = useState<SortDirection>('asc');
  return <Sort direction={dir} onSort={setDir}>
    Age
  </Sort>;
}
```

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

### Define Button Theme Sizes

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/theme-unify.mdx

Example of referencing detail tier variables within a component theme definition.

```ts
// excerpt from ButtonTheme.ts
sizes: {
  small:  'h-(--buttons-details-height-core-icon-sm) text-xs px-(--buttons-details-horizontal-padding-sm)',
  medium: 'h-(--buttons-details-height-core-icon-md) text-sm px-(--buttons-details-horizontal-padding-md)',
  large:  'h-(--buttons-details-height-core-icon-lg) text-base px-(--buttons-details-horizontal-padding-lg)',
},
```

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

### Quick Start DateFormat

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/date-format.mdx

Basic implementation of the DateFormat component using a date string and a specific format pattern.

```tsx
import { DateFormat } from 'reablocks';

export default function App() {
  return (
    <DateFormat
      date="2022-05-25T16:03:12.2085"
      format="MM/dd/yyyy hh:mm"
    />
  );
}
```

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

### Quick Start DataSize Component

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/data-size.mdx

Basic implementation of the DataSize component by passing a byte value to the value prop.

```tsx
import { DataSize } from 'reablocks';

export default function App() {
  return (
    <DataSize value={324344535345232482} />
  );
}
```

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

### Textarea Value Initialization

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/form/textarea.mdx

Set default values or placeholder text to guide user input.

```tsx
<StoryRenderer path="components/Textarea.story.tsx" name="DefaultValue" storybookKey="components-form-textarea--default-value" />
```

```tsx
<StoryRenderer path="components/Textarea.story.tsx" name="Placeholder" storybookKey="components-form-textarea--placeholder" />
```

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

### Dialog with Footer and Custom Header Story

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layers/dialog.mdx

Renders a dialog example featuring a footer and custom header.

```tsx
<StoryRenderer path="components/Dialog.story.tsx" name="Footer" storybookKey="components-layers-dialog--footer" />
```

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

### Skeleton Storybook Renderers

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/skeleton.mdx

Various storybook examples demonstrating different states and configurations of the Skeleton component.

```tsx
<StoryRenderer path="components/Skeleton.story.tsx" name="Simple" storybookKey="components-elements-skeleton--simple" />
```

```tsx
<StoryRenderer path="components/Skeleton.story.tsx" name="Animated" storybookKey="components-elements-skeleton--animated" />
```

```tsx
<StoryRenderer path="components/Skeleton.story.tsx" name="Sizes" storybookKey="components-elements-skeleton--sizes" />
```

```tsx
<StoryRenderer path="components/Skeleton.story.tsx" name="CustomStyles" storybookKey="components-elements-skeleton--custom-styles" />
```

```tsx
<StoryRenderer path="components/Skeleton.story.tsx" name="Variants" storybookKey="components-elements-skeleton--variants" />
```

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

### Full Table Implementation with Sorting and Pagination

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/recipes/table.mdx

A complete example integrating TanStack Table with reablocks Pager and Sort components.

```tsx
import { useState } from 'react';
import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
  type SortingState
} from '@tanstack/react-table';
import { Pager, Sort } from 'reablocks';

type User = { id: string; name: string; email: string; age: number };

const columnHelper = createColumnHelper<User>();

const columns = [
  columnHelper.accessor('name', { header: 'Name' }),
  columnHelper.accessor('email', { header: 'Email' }),
  columnHelper.accessor('age', { header: 'Age' })
];

export const UserTable = ({ data }: { data: User[] }) => {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });

  const table = useReactTable({
    data,
    columns,
    state: { sorting, pagination },
    onSortingChange: setSorting,
    onPaginationChange: setPagination,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel()
  });

  return (
    <div className="flex flex-col gap-4">
      <table className="w-full border-collapse">
        <thead>
          {table.getHeaderGroups().map(group => (
            <tr key={group.id} className="border-b border-panel-accent">
              {group.headers.map(header => {
                const sorted = header.column.getIsSorted();
                const canSort = header.column.getCanSort();
                const label = flexRender(
                  header.column.columnDef.header,
                  header.getContext()
                );

                return (
                  <th key={header.id} className="text-left p-2">
                    {canSort ? (
                      <Sort
                        direction={sorted === false ? 'asc' : sorted}
                        onSort={() => header.column.toggleSorting()}
                      >
                        {label}
                      </Sort>
                    ) : (
                      label
                    )}
                  </th>
                );
              })}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id} className="border-b border-panel-accent">
              {row.getVisibleCells().map(cell => (
                <td key={cell.id} className="p-2">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      <div className="flex justify-end">
        <Pager
          page={table.getState().pagination.pageIndex}
          size={table.getState().pagination.pageSize}
          total={data.length}
          onPageChange={pageIndex => table.setPageIndex(pageIndex)}
          displayMode="all"
        />
      </div>
    </div>
  );
};
```

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

### Configure CSS entry point

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/theme-unify.mdx

The index.css file serves as the entry point. Import order is critical: light and dark themes must precede root variables, and tw.css must be imported last.

```css
@import "./common.css";
@import "./light.css";
@import "./dark.css";
@import "./root.css";
@import "./tw.css";
```

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

### Implement Input Adornments

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/form/input.mdx

Adds icons or text at the start or end of the input field using the start and end props.

```tsx
<Input start={<SearchIcon />} placeholder="Search..." />
<Input end={<span>USD</span>} type="number" />
```

```tsx
<StoryRenderer path="components/Input.story.tsx" name="StartEndAdorment" storybookKey="components-form-input--start-end-adorment" />
```

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

### Initialize ThemeProvider

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Wrap the application with the ThemeProvider component to provide theme tokens to all components.

```tsx
import { ThemeProvider, theme } from 'reablocks';

// NOTE: You can extend 'theme' with your own custom theme tokens.

export const App = () => (
  <ThemeProvider theme={theme}>
    <YourComponents />
  </ThemeProvider>
);
```

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

### Disabled Tooltip Example

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layers/tooltip.mdx

Displays a tooltip in a disabled state.

```tsx
<StoryRenderer path="components/Tooltip.story.tsx" name="Disabled" storybookKey="components-layers-tooltip--disabled" />
```

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

### Clone the repository

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Use this command to download the project source code to your local machine.

```bash
git clone git@github.com:reaviz/reablocks.git
```

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

### Import prebuilt Reablocks styles

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Include this in your app entry file if you are using the default theme without customization.

```ts
import "reablocks/index.css";
```

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

### Complete .storybook/preview.jsx configuration

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/storybook.mdx

The full configuration file combining imports, decorators, and parameters for Reablocks integration.

```jsx
import { DocsContainer } from '@storybook/addon-docs';
import { ThemeProvider } from 'reablocks';
import { theme } from '[INSERT_PATH_TO_YOUR_THEME]';

export const decorators = [
  Story => (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  )
];

export const parameters = {
  layout: 'centered',
  docs: {
    container: ({ context, children }) => (
      <DocsContainer context={context}>
        <ThemeProvider theme={theme}>
          {children}
        </ThemeProvider>
      </DocsContainer>
    )
  },
  controls: {
    hideNoControlsWarning: true
  }
};
```

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

### Configuring global Storybook parameters

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/storybook.mdx

Set global layout and documentation container settings, including wrapping the DocsContainer with the ThemeProvider.

```jsx
export const parameters = {
  layout: 'centered',
  docs: {
    container: ({ context, children }) => (
      <DocsContainer context={context}>
        <ThemeProvider theme={theme}>
          {children}
        </ThemeProvider>
      </DocsContainer>
    )
  },
  controls: {
    hideNoControlsWarning: true
  }
};
```

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

### Plugin Import Comparison

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/migration.mdx

Comparison between incorrect and correct plugin registration methods for Storybook compatibility.

```js
{
  plugins: [
    require('@mertasan/tailwindcss-variables')
  ]
}
```

```js
import tailwindcssVariables from '@mertasan/tailwindcss-variables';

{
  plugins: [
    tailwindcssVariables
  ]
}
```

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

### Custom Animation Dialog Story

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layers/dialog.mdx

Renders a dialog example demonstrating custom animation props.

```tsx
<StoryRenderer path="components/Dialog.story.tsx" name="CustomAnimation" storybookKey="components-layers-dialog--custom-animation" />
```

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

### Configure ThemeProvider at App Root

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/theme-unify.mdx

Wrap the application with the ThemeProvider and import the theme and CSS layers.

```tsx
// src/index.tsx
import { ThemeProvider } from 'reablocks';
import { theme } from 'shared/utils/Theme';

import './assets/styles/index.css'; // pulls in all CSS layers

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>
```

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

### Add Icons to Buttons

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/button.mdx

Usage of start and end props to include icons within a button.

```tsx
<Button start={<SearchIcon />}>Search</Button>
<Button end={<ArrowRightIcon />}>Next</Button>
```

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

### Define primitive and component tokens

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/theme-unify.mdx

The root.css file contains raw palette values, spacing, sizing, corner radius, and per-component detail tokens.

```css
:root,
:host {
  /* Colors */
  --color-blue-hyperstream-500: #3476ff;
  --color-blue-hyperstream-600: #105eff;
  /* …more brand scales… */

  /* Spacing */
  --spacing-padding-base: 16px;

  /* Corner radius */
  --corner-radius-primary: 6px;

  /* Per-component detail — the Unify differentiator */
  --buttons-details-height-core-icon-lg:   var(--sizing-size-tokens-base);
  --inputs-details-corner-radius-primary:  var(--corner-radius-primary);
  --tabs-details-stroke-width-underline-lg: 2px;
  /* …more per-component detail tokens */
}
```

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

### Run Tailwind migration command

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/migration.mdx

Execute the official Tailwind CSS upgrade tool to migrate class names.

```shell
npx @tailwindcss/upgrade
```

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

### Render Table Header

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/recipes/table.mdx

Example of mapping through header groups to render the sortable headers in a table structure.

```tsx
<thead>
  {table.getHeaderGroups().map(group => (
    <tr key={group.id}>
      {group.headers.map(header => (
        <th key={header.id} className="text-left p-2">
          <SortableHeader column={header.column}>
            {flexRender(header.column.columnDef.header, header.getContext())}
          </SortableHeader>
        </th>
      ))}
    </tr>
  ))}
</thead>
```

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

### Render Select with Adornments

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/form/select.mdx

Use the start and end props to render custom content before or after the input field.

```tsx
<Select start={<SearchIcon />} placeholder="Search a country..." options={options} />
```

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

### Basic Drawer Implementation

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layers/drawer.mdx

Compose a drawer using the Drawer component and its optional slot components.

```tsx
import { Drawer, DrawerHeader, DrawerContent, DrawerFooter } from 'reablocks';

<Drawer open={open} onClose={() => setOpen(false)}>
  <DrawerHeader>Drawer Title</DrawerHeader>
  <DrawerContent>
    {/* Your content here */}
  </DrawerContent>
  <DrawerFooter>
    {/* Footer actions here */}
  </DrawerFooter>
</Drawer>
```

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

### Implement a spring-driven drop-in Dialog

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/custom-animations.mdx

Demonstrates overriding default Dialog animations with a custom spring-based drop-in effect using the animation prop.

```tsx
import { useState } from 'react';
import { Button, Dialog, DialogHeader, DialogContent } from 'reablocks';

export const DropDialog = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        animation={{
          initial: { opacity: 0, y: -40, scale: 0.96 },
          animate: { opacity: 1, y: 0, scale: 1 },
          exit: { opacity: 0, y: -40, scale: 0.96 },
          transition: { type: 'spring', stiffness: 260, damping: 22 }
        }}
      >
        <DialogHeader>Heads up</DialogHeader>
        <DialogContent>
          The dialog dropped in from the top. Try closing it — it'll exit the
          same way.
        </DialogContent>
      </Dialog>
    </>
  );
};
```

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

### Configure Button Sizes

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/button.mdx

Theme configuration for button dimensions and associated icon padding.

```javascript
{
    sizes: {
      small: 'text-sm px-2 py-1 leading-[normal]',
      medium: 'text-base px-4 py-2 leading-[normal]',
      large: 'text-xl px-5 py-2.5 leading-[normal]'
    }
    iconSizes: {
      small: 'p-1',
      medium: 'p-2',
      large: 'p-2.5'
    }
}
```

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

### Inline Input API Documentation

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/form/inline-input.mdx

Displays the available properties and configuration options for the InlineInput component.

```tsx
<TSDocProps name="InlineInput" />
```

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

### Quick Start Pluralize Usage

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/pluralize.mdx

Basic implementation of the Pluralize component requiring the count and singular word form.

```tsx
import { Pluralize } from 'reablocks';

export default function App() {
  return <Pluralize count={20} singular="Apple" />
}
```

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

### Build for distribution

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Executes the Rollup build process to generate the distribution files in the dist folder.

```bash
npm run build
```

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

### Configure Storybook Decorators

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Add the ThemeProvider to Storybook decorators to ensure components are rendered with the correct theme context.

```javascript
import type { Preview } from "@storybook/react";
import { ThemeProvider, theme } from "reablocks";

export const decorators = [
  Story => (
    // NOTE: You can extend 'theme' with your own custom theme tokens.
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  )
];

const preview: Preview = {
  // Your other configurations here too
  decorators: [withProvider],
};
```

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

### Initialize Table Model

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/recipes/table.mdx

Define the data structure and column configuration using Tanstack Table's column helper.

```tsx
import { useState } from 'react';
import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
  type SortingState
} from '@tanstack/react-table';
import { Pager, Sort } from 'reablocks';

type User = { id: string; name: string; email: string; age: number };

const columnHelper = createColumnHelper<User>();

const columns = [
  columnHelper.accessor('name', { header: 'Name' }),
  columnHelper.accessor('email', { header: 'Email' }),
  columnHelper.accessor('age', { header: 'Age' })
];
```

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

### Quick Start Ellipsis

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/ellipsis.mdx

Basic implementation requiring the value and limit props to truncate a string by character count.

```tsx
import { Ellipsis } from 'reablocks';

export default function App() {
  const longString = "Integer a aliquet ligula. Fusce vel eros libero. Sed dictum tincidunt hendrerit. Integer id neque faucibus, imperdiet purus dapibus, rutrum tellus. Nullam facilisis odio sit amet metus efficitur.";

  return (
    <Ellipsis
      value={longString}
      limit={100}
    />
  );
}
```

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

### Configure CSS Import Order

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/theme-unify.mdx

Ensure overrides are applied correctly by importing the overrides file after the root CSS file.

```css
@import "./root.css";
@import "./overrides.css";  /* must come after root.css */
@import "./tw.css";
```

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

### Configure Icon Adornments

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/button.mdx

Theme configuration for icon layout and sizing within buttons.

```javascript
{
    adornment: {
    base: "flex",
    start: "pr-1",
    end: "pl-1",
    sizes: {
      small: "[&>svg]:w-3 [&>svg]:h-3",
      medium: "[&>svg]:w-4 [&>svg]:h-4",
      large" "[&>svg]:w-5 [&>svg]:h-5"
    }
  }
}
```

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

### Quick Start Redact Component

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/redact.mdx

Basic implementation of the Redact component by importing it from reablocks and providing a value prop.

```tsx
import { Redact } from 'reablocks';

export default function App() {
  return <Redact value="Don't tell!" />
}
```

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

### Step API Documentation

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layout/stepper.mdx

Displays the API documentation for the Step component.

```tsx
<TSDocProps name="Step" />
```

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

### Update ThemeProvider

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/migration.mdx

Apply the new theme to the application via the ThemeProvider.

```diff
import { projectNameTheme } from './path_to_theme/theme.ts';

- <ThemeProvider theme={oldTheme}>
+ <ThemeProvider theme={projectNameTheme}>
```

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

### Configure Custom Themes in Tailwind

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/migration.mdx

Example of defining light and dark themes within the tailwind.config.js file using the createThemes plugin.

```tsx
import plugin from 'tailwindcss/plugin';
import { createThemes } from 'tw-colors';

const colorPalette = {
  // Define your color palette here
};

const config: Config = {
  darkMode: 'selector',
  plugins: [
    createThemes({
      light: {
        primary: {
          DEFAULT: colorPalette.blue[500],
          active: colorPalette.blue[500],
          hover: colorPalette.blue[400],
          inactive: colorPalette.gray[500]
        }
        // etc...
      },
      dark: {
        primary: {
          DEFAULT: colorPalette.blue[500],
          active: colorPalette.blue[500],
          hover: colorPalette.blue[600],
          inactive: colorPalette.blue[200]
        }
        // etc...
      }
    })
  ]
};
```

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

### Toggle themes at runtime

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/theme-unify.mdx

Apply a theme by setting a class or data-theme attribute on a wrapping element.

```html
<html class="theme-dark">  <!-- or class="theme-light" -->
<html data-theme="dark">    <!-- equivalent -->
```

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

### Implement Tab Adornments

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layout/tabs.mdx

Use start and end props to add icons or badges to tabs. This feature is available from version 10.0.0.

```tsx
<TabList>
  <Tab start={<InboxIcon />}>Inbox</Tab>
  <Tab end={<Badge>12</Badge>}>Notifications</Tab>
</TabList>
```

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

### Defining Storybook decorators

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/storybook.mdx

Use the ThemeProvider as a decorator to wrap all stories with your design tokens.

```jsx
export const decorators = [
  Story => (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  )
];
```

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

### Implement a rotating and scaling Dialog

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/custom-animations.mdx

Shows a Dialog animation configuration using rotation and scaling properties with a spring transition.

```tsx
import { Dialog, DialogHeader, DialogContent } from 'reablocks';

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  animation={{
    initial: { opacity: 0, scale: 0.5, rotate: -10 },
    animate: { opacity: 1, scale: 1, rotate: 0 },
    exit: { opacity: 0, scale: 0.5, rotate: 10 },
    transition: { duration: 0.4, type: 'spring', stiffness: 150 }
  }}
>
  <DialogHeader>Custom Animation Dialog</DialogHeader>
  <DialogContent>
    {/* Your content here */}
  </DialogContent>
</Dialog>
```

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

### Create an Icon Loader

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/theme-icons.mdx

Uses Vite's glob import to dynamically load SVG files and convert them into lazy-loaded React components.

```tsx
import React from 'react';

const iconPaths = import.meta.glob('./*.svg');

export const icons = Object.keys(iconPaths).map(key => ({
  name: key.replace('.svg', '').replace('./', ''),
  component: React.lazy(async () => {
    const lazy: any = await iconPaths[key]();
    return { default: lazy.ReactComponent };
  })
}));
```

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

### Implement Theme Blocks in a Storybook Story

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/theme-block.mdx

Demonstrates how to use theme block components within a Storybook story, utilizing decorators to extract and provide theme tokens.

```tsx
import React from 'react';
import {
  TypographyBlocks,
  ColorBlocks,
  SpacingBlocks,
  BorderBlocks,
  ShadowBlocks,
  ThemeProvider,
  theme,
  useTheme,
  extractTheme
} from 'reablocks';

const { theme: TWConfig } = resolveConfig(tailwindConfig);

export default {
  title: 'Components/Theme',
  decorators: [
    Story => {
      const { tokens } = useTheme();

      const {
        colors,
        borderRadius,
        boxShadow,
        spacing,
        fontFamily,
        fontSize,
        fontWeight
      } = extractTheme(tokens);

      return (
        <div style={{ width: '95vw' }}>
          <Story
            colors={colors}
            borderRadius={borderRadius}
            boxShadow={boxShadow}
            spacing={spacing}
            fontFamily={fontFamily}
            fontSize={fontSize}
            fontWeight={fontWeight}
          />
        </div>
      );
    }
  ]
};


export const Colors = (_: unknown, { colors }) => {
  return <ColorBlocks colors={colors} />;
};

export const Typography = (
  __: unknown,
  { fontFamily, fontSize, fontWeight }
) => (
  <TypographyBlocks
    families={fontFamily}
    sizes={fontSize}
    weights={fontWeight}
  />
);

export const Spacings = (__: unknown, { spacing }) => (
  <SpacingBlocks spacings={spacing} />
);

export const Borders = (_: unknown, { borderRadius }) => (
  <BorderBlocks borders={borderRadius} />
);

export const Shadows = (_: unknown, { boxShadow }) => (
  <ShadowBlocks shadows={boxShadow} />
);

export const Components = () => {
  const { theme } = useTheme();
  return <ComponentBlocks components={theme.components} />;
};

export const Icons = () => (
  <>
    <h2>Icon Block Helper ( icons not included )</h2>
    <IconBlocks
      icons={[
        {
          name: 'favorite',
          src: favoriteIcon
        },
        {
          name: 'another favorite',
          src: favoriteIcon
        }
      ]}
    />
  </>
);
```

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

### Import the composed theme

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/theme/theme-unify.mdx

Import the pre-built TypeScript theme bundle into your application.

```tsx
import { theme } from './themeUnify';
```

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

### Import Tailwind CSS

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/setup.mdx

Add the Tailwind directive to your main CSS file.

```bash
@import "tailwindcss";
```

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

### Implement a basic Pager component

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/pager.mdx

Initializes a Pager with page, size, total, and onPageChange props to manage state.

```tsx
import { useState } from 'react';
import { Pager } from 'reablocks';

export default function App() {
  const [page, setPage] = useState<number>(0);

  return (
    <Pager
      page={page}
      size={10}
      total={100}
      onPageChange={setPage}
      displayMode="pages"
    />
  );
}
```

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

### Importing Reablocks modules for Storybook

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/getting-started/storybook.mdx

Import the necessary components and your custom theme file to configure the Storybook preview environment.

```jsx
import { DocsContainer } from '@storybook/addon-docs';
import { ThemeProvider } from 'reablocks';
import { theme } from '[INSERT_PATH_TO_YOUR_THEME]';
```

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

### useInfinityList

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/data/infinity-list.mdx

A hook to manage progressive data loading for large lists.

```APIDOC
## useInfinityList

### Description
A hook that manages a dataset and provides methods to progressively load more items.

### Parameters
- **items** (Array) - Required - The full dataset to be managed.

### Returns
- **data** (Array) - The current subset of items to display.
- **hasMore** (Boolean) - Indicates if there are more items available to load.
- **showNext** (Function) - A function to trigger the loading of the next batch of items.
```

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

### Generate IDs with useId

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/utils/id.mdx

Demonstrates both auto-generating an ID and providing a custom deterministic ID string.

```jsx
// Auto generate one...
const id = useId();

// Provide your own...
const myId = useId('foo-1');
```

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

### Configure Claude Code for DESIGN.md

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/advanced/design-md.mdx

Add this instruction to your CLAUDE.md file to ensure the agent references the design tokens during UI generation.

```markdown
@DESIGN.md
Always follow the design tokens in DESIGN.md when generating or editing UI.
Use only colors, fonts, spacing, and radii defined there — never invent values.
```

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

### Menu API Documentation

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layers/menu.mdx

Displays the API properties for the Menu component.

```tsx
<TSDocProps name="Menu" />
```

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

### Command Palette API Documentation

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/elements/command-palette.mdx

Displays the available properties and types for the CommandPalette component.

```tsx
<TSDocProps name="CommandPalette" />
```

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

### Initialize Notifications Provider

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/layers/notification.mdx

Wrap the application with the Notifications provider to enable notification functionality.

```jsx
import { Notifications } from 'reablocks';

const App = () => {
  return (
    <div className='app-container'>
      <Notifications>
        <Application />
       </Notifications>
    </div>
  );
};
```

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

### useTheme()

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/utils/theme.mdx

The useTheme hook returns the global theme object, containing all available theme options and component-specific style definitions.

```APIDOC
## useTheme()

### Description
Retrieves the global theme object from the reablocks context. This allows components to access defined theme properties for styling.

### Usage
```jsx
import { useTheme } from 'reablocks';

const theme = useTheme();
```

### Returns
- **theme** (Object) - An object containing the global theme configuration, including nested component theme definitions (e.g., theme.button, theme.input).
```

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

### Date Input with Presets

Source: https://github.com/reaviz/reablocks-website/blob/master/src/content/docs/components/form/date-input.mdx

Configures the date input to include a list of selectable date presets using the presets prop.

```tsx
<StoryRenderer path="components/DateInput.story.tsx" name="Preset" storybookKey="components-form-date-input--with-presets" />
```