file: docs/changelog.mdx
meta: {
  "title": "Changelog",
  "description": "Latest updates to the Twistail UI library.",
  "full": false
}

## v0.11.0 (2025/03/30)

* New component: [ProgressCircle](/docs/components/progress-circle) component.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.10.0 (2025/03/30)

* New component: [ProgressBar](/docs/components/progress-bar) component.
* Updated fumadocs to v5.2.0.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.9.0 (2025/03/29)

* New component: [BarList](/docs/components/bar-list) component.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.8.2 (2025/03/28)

* Changes: use `hideArrow` props instead of `showArrow` on [Tooltip](/docs/components/tooltip) component.
* Minor fixes on documentation command navigation.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.8.1 (2025/03/28)

* Fix [Tracker](/docs/components/tracker) component to hide arrow.
* Changes: use `hideArrow` props instead of `showArrow` on [Tracker](/docs/components/tracker) component.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.8.0 (2025/03/28)

* New component: [Tracker](/docs/components/tracker) component (adopted from Tremor).

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.7.0 (2025/03/27)

* New component: [Datetime Picker](/docs/components/datetime-picker) component.
* Changes: [Input](/docs/components/input) component use `containerClassName` instead of `className`
* Fixes: improved styling for [Calendar](/docs/components/calendar) component.

**Contributors:**
[@riipandi](https://github.com/riipandi)

**Credits:**

* [datetime-picker](https://shadcnui-expansions.typeart.cc/docs/datetime-picker) by [shadcn-ui expansions](https://shadcnui-expansions.typeart.cc).
* [shadcn-datetime-picker](https://github.com/huybuidac/shadcn-datetime-picker) by [Bui Dac Huy](https://github.com/huybuidac).

***

## v0.6.0 (2025/03/27)

* New component: [Blockquote](/docs/components/blockquote) component.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.5.5 (2025/03/27)

* Changes: auto resize [Textarea](/docs/components/textarea) height based on content.

**Contributors:**
[@riipandi](https://github.com/riipandi)

**Credits:**
[shadcnui-expansions](https://shadcnui-expansions.typeart.cc/docs/autosize-textarea)

***

## v0.5.4 (2025/03/27)

* Updated license information for [twistail-react](https://www.npmjs.com/package/twistail-react) package.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.5.3 (2025/03/27)

* Changes: split [Sidebar](/docs/components/sidebar) component files.
* Move sidebar width variables to CSS variables.
* Move sidebar cookies parameters to SidebarProvider props.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.5.2 (2025/03/26)

* Changes: add `compact` variant to [Dialog](/docs/components/dialog) component.
* Changes: add `DialogDivider` variant to [Dialog](/docs/components/dialog) component.
* Changes: add `compact` variant to [Alert Dialog](/docs/components/alert-dialog) component.
* Changes: add `DialogDivider` variant to [Alert Dialog](/docs/components/alert-dialog) component.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.5.1 (2025/03/26)

* Refactor [Card](/docs/components/card) component composition.

```tsx
<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
  </CardHeader>
  <CardDivider />
  <CardContent />
  <CardDivider />
  <CardFooter />
</Card>
```

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.5.0 (2025/03/26)

* New component: [Description List](/docs/components/description-list) component.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.4.0 (2025/03/26)

* New component: [Split Pane](/docs/components/split-pane) component.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.3.0 (2025/03/25)

* New component: [Calendar](/docs/components/calendar) component.
* Changes: add `hideChevrons` props to [Listbox](/docs/components/listbox) component.
* Changes: remove `clx` from [Kbd](/docs/components/kbd) component.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.2.1 (2025/03/24)

* Fix missing export form Form component in `twistail-react`

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.2.0 (2025/03/24)

* Add [Form](/docs/components/form) component (preview).
* Docs: reorginize component stories (storybook).
* Docs: change imports based on component name.

<Callout type="warn" title="Attention">
  Form component is still in preview. It may change in the future.
</Callout>

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.1.2 (2025/03/22)

* Add `info` variant to [Badge](/docs/components/badge) component.
* Set default variant to [Badge](/docs/components/badge) component to `neutral`.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.1.1 (2025/03/22)

Minor updates: exporting `ToasterProps` from [Toast](/docs/components/toast) component.

**Contributors:**
[@riipandi](https://github.com/riipandi)

***

## v0.1.0 (2025/03/21)

This is the initial release of the Twistail UI library. It includes the following components:

* `Accordion` (based on Tremor)
* `AlertDialog` (based on shadcn/ui)
* `AspectRatio` (based on shadcn/ui)
* `Avatar` (based on shadcn/ui)
* `Badge` (based on Tremor)
* `Button` (based on Tremor)
* `Breadcrumb` (based on shadcn/ui)
* `Callout` (based on Tremor)
* `Card` (based on Tremor)
* `Checkbox` (based on Tremor)
* `Collapsible` (based on shadcn/ui)
* `Combobox` (based on shadcn/ui)
* `Command` (based on shadcn/ui)
* `ContextMenu` (based on shadcn/ui)
* `Dialog` (based on Tremor)
* `Divider` (based on Tremor)
* `Drawer` (based on Tremor and shadcn/ui)
* `DropdownMenu` (based on Tremor)
* `Heading` (adapted from Catalyst)
* `HoverCard` (based on shadcn/ui)
* `Input` (based on Tremor)
* `InputPin` (based on Tremor)
* `Kbd` (based on Wedges)
* `Label` (based on Tremor)
* `Listbox` (based on Tremor)
* `Menubar` (based on shadcn/ui)
* `MultiSelect` (based on sersavan/shadcn-multi-select-component)
* `Navigation Menu` (based on shadcn/ui)
* `Pagination` (based on shadcn/ui)
* `Popover` (based on Tremor)
* `RadioCardGroup` (based on Tremor)
* `Radiogroup` (based on Tremor)
* `ScrollArea` (based on shadcn/ui)
* `Select` (based on Tremor)
* `Sidebar` (based on shadcn/ui)
* `Skeleton` (based on shadcn/ui)
* `Slider` (based on Tremor)
* `Switch` (based on Tremor)
* `Table` (based on Tremor)
* `TabNavigation` (based on Tremor)
* `Tabs` (based on Tremor)
* `Text` (adapted from Catalyst)
* `Textarea` (based on Tremor)
* `Toast` (based on shadcn/ui Sonner)
* `Toggle` (based on Tremor)
* `Tooltip` (based on Tremor and shadcn/ui)


file: docs/index.mdx
meta: {
  "title": "Introduction",
  "full": false
}

<Callout type="warn" title="Attention">
  This documentation is still in progress. Some components may not be fully documented yet.
</Callout>

Twistail is a thoughtfully crafted component library designed for modern React applications.
Built on the foundation of Radix UI Primitives, Tailwind CSS v4, Tailwind Variants, and TypeScript,
it offers a comprehensive suite of accessible, customizable, and type-safe components to
streamline your development process.

## Core Principles

* **Tailwind Variants** - Leveraging the power of Tailwind Variants for advanced styling control
* **Accessibility First** - Every component adheres to WCAG guidelines and WAI-ARIA patterns
* **Developer Experience** - Intuitive APIs with comprehensive TypeScript definitions
* **Design Flexibility** - Easily adapt components to match your unique design system
* **Separation of Concerns** - CSS files are separated from component logic for improved maintainability and readability

## Why Twistail?

Twistail stands out from other component libraries like shadcn/ui by fully embracing
[**Tailwind Variants**](https://www.tailwind-variants.org/) - a powerful utility that
combines Tailwind's flexibility with a first-class variant API. This key difference provides:

* **Superior Variant Management** - Create complex component states with a clean, declarative API
* **Responsive Variants** - Easily define different styles across breakpoints
* **Slot-based Styling** - Apply styles to specific parts of components with precision
* **Conflict Resolution** - Automatic handling of conflicting Tailwind classes
* **Type Safety** - Full TypeScript integration for autocomplete and error prevention

<Cards>
  <Card href="/docs/install" title="Installation">
    Quick setup guide to integrate Twistail into your project.
  </Card>

  <Card href="/docs/theming" title="Theming">
    Learn how to customize and extend component styles with Tailwind Variants.
  </Card>

  <Card href="/docs/components" title="Components">
    Browse our component library with usage examples.
  </Card>

  <Card href="/docs/contributing-guidelines" title="Contributing">
    Learn how to contribute to the Twistail project.
  </Card>
</Cards>

## Design Philosophy

Twistail follows a component architecture that maximizes the benefits of Tailwind Variants while
separating styling from logic. This approach offers:

* **Improved Readability** - Cleaner component files with variant definitions clearly separated
* **Enhanced Maintainability** - Style variants can be modified without affecting component logic
* **Better Collaboration** - Designers can work on style variants while developers focus on functionality
* **Simplified Theming** - Create theme variants with minimal code duplication
* **Consistent API** - Uniform pattern for handling component variations across the library

This architecture creates a more sustainable and flexible codebase that scales with your project's complexity.

## FAQs

<Accordions type="single">
  <Accordion title="Is Twistail open source?">
    Twistail is licensed under a dual license: [Apache License 2.0](https://www.tldrlegal.com/license/apache-license-2-0-apache-2-0)
    and [MIT license](https://www.tldrlegal.com/license/mit-license). This means you
    can choose either license based on your project's needs. The dual licensing
    provides flexibility for both commercial and open-source projects. Copyrights
    in the project are retained by their contributors. For more details,
    you can refer to the [LICENSE-APACHE](https://github.com/riipandi/twistail/blob/main/LICENSE-APACHE)
    and [LICENSE-MIT](https://github.com/riipandi/twistail/blob/main/LICENSE-MIT) files in the repository.
  </Accordion>

  <Accordion title="How does Twistail differ from shadcn/ui?">
    The key difference is our integration of Tailwind Variants. While `shadcn/ui`
    uses [Class Variance Authority](https://cva.style/docs), Twistail leverages
    Tailwind Variants to provide a more powerful, type-safe API for component styling.
    This allows for more complex variant combinations, better handling of responsive
    styles, and cleaner component code. Additionally, our separation of styling
    from component logic creates a more maintainable architecture.
  </Accordion>

  <Accordion title="What benefits does Tailwind Variants provide?">
    Tailwind Variants enhances the Tailwind experience by providing a first-class variant API.
    This means you can define component variants (like size, color, state) in a structured
    way with TypeScript support. It efficiently handles class merging, prevents style
    conflicts, and enables slot-based styling for complex components. The result is
    cleaner code, better developer experience, and more maintainable styling.
  </Accordion>

  <Accordion title="Why does Twistail separate CSS from component files?">
    Separating CSS from component logic improves maintainability and readability of
    the codebase. This approach makes it easier to update styles without touching
    component logic, simplifies debugging of styling issues, and creates a cleaner
    development experience. When combined with Tailwind Variants, this separation
    becomes even more powerful, allowing for sophisticated styling patterns without
    cluttering component files.
  </Accordion>

  <Accordion title="Can I use Twistail with my existing Tailwind setup?">
    Yes! Twistail is designed to work seamlessly with existing Tailwind CSS projects.
    Our components use Tailwind Variants which is compatible with standard Tailwind
    configurations. You can gradually adopt Twistail components alongside your
    existing UI elements and even leverage Tailwind Variants for your custom components.
  </Accordion>

  <Accordion title="Can I use Twistail with Tailwind CSS v3?">
    Twistail is primarily designed and optimized for Tailwind CSS v4. While it can be used with
    Tailwind CSS v3, some adjustments may be necessary, and you might encounter styling issues
    due to breaking changes introduced in Tailwind CSS v4. For the best experience and to avoid
    potential styling problems, we recommend using Twistail with Tailwind CSS v4. If you're using
    Tailwind CSS v3, be prepared to make some adaptations to ensure proper component rendering.
  </Accordion>

  <Accordion title="Is Twistail suitable for production applications?">
    Absolutely. Twistail is built with production use cases in mind. Our components
    are thoroughly tested for accessibility, performance, and cross-browser compatibility.
    Even better, Twistail components are designed to be highly customizable. The use of Tailwind Variants
    also ensures consistent styling behavior across different environments and browsers.
  </Accordion>
</Accordions>

## Acknowledgements

Twistail is a thoughtful blend of design philosophies from two exceptional UI libraries:

* **[Tremor](https://tremor.so/)**: Many of Twistail's foundational components draw heavy inspiration from Tremor's well-crafted designs. We've reimagined these components with our own architectural approach while respecting Tremor's excellent work.

* **[shadcn/ui](https://ui.shadcn.com/)**: Twistail incorporates design patterns and component structures from shadcn/ui, adapting them to fit seamlessly with the Twistail ecosystem.

Key differences that set Twistail apart include:

* Separation of style files for each component, improving organization and customization
* Use of [Lucide icons](https://lucide.dev/) instead of Remix Icons (used by Tremor)
* Integration of Tailwind Variants for enhanced styling capabilities
* A carefully curated blend of design elements from both inspirational libraries

We're grateful to these projects for their contributions to the React and Tailwind ecosystem, and for providing the foundation upon which Twistail builds its unique identity.

## Join the Community

Twistail is more than just a component library - it's a growing community of developers building better user interfaces with modern tools like Tailwind Variants. Connect with us:

* Star our [GitHub repository](https://github.com/riipandi/twistail)
* Follow us for updates and announcements
* Share your projects built with Twistail

We're excited to see what you create!


file: docs/theming.mdx
meta: {
  "title": "Theming",
  "full": false
}

Learn how to customize the look and feel of your app.

<Callout type="warn" title="Work in Progress">
  This documentation not available yet. Please check back later.
</Callout>


file: docs/cli/index.mdx
meta: {
  "title": "Twistail CLI",
  "full": false
}

A CLI for managing UI components in your project.

<Callout type="warn" title="Attention">
  This utility is still in development.
</Callout>

```package-install
npm install -g twistail
```


file: docs/components/accordion.mdx
meta: {
  "title": "Accordion",
  "full": false
}

A vertically stacked set of interactive headings that each reveal a section of content.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-accordion--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/accordion#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/accordion" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/accordion/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import {
      Accordion,
      AccordionContent,
      AccordionItem,
      AccordionTrigger,
    } from 'twistail-react/accordion'

    export default function AccordionDemo() {
      return (
        <Accordion type="single" className="mx-auto w-md" collapsible>
          <AccordionItem value="item-1">
            <AccordionTrigger>In the app</AccordionTrigger>
            <AccordionContent>
              <ol className="flex flex-col gap-2">
                <li>
                  <span className="font-semibold text-gray-900 dark:text-gray-50">Step 1:</span> Tap the
                  Inbox icon and then tap Add receipts.
                </li>
                <li>
                  <span className="font-semibold text-gray-900 dark:text-gray-50">Step 2:</span> Tap the
                  + symbol to attach a photo or PDF of the receipt for our system to match.
                </li>
              </ol>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-2">
            <AccordionTrigger>Via browser extension</AccordionTrigger>
            <AccordionContent>
              <ol className="flex flex-col gap-2">
                <li>
                  <span className="font-semibold text-gray-900 dark:text-gray-50">Step 1:</span>{' '}
                  <span className="underline">Download</span> the browser extension for Chrome or
                  Safari. (Firefox support is coming soon.)
                </li>
                <li>
                  <span className="font-semibold text-gray-900 dark:text-gray-50">Step 2:</span> Click
                  the extension icon at the top of your browser. Under the Receipts tab, upload an image
                  or click Screenshot current tab to automatically attach the receipt to the expense.
                </li>
              </ol>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-3" disabled>
            <AccordionTrigger>Via email forwarding</AccordionTrigger>
            <AccordionContent>
              Yes! You can animate the Accordion with CSS or JavaScript.
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add accordion
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['accordion.tsx', 'accordion.css.ts', 'index.ts']}>
      <Tab value="accordion.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/accordion/accordion.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/accordion/accordion.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="accordion.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/accordion/accordion.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/accordion/accordion.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/accordion/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/accordion/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Accordion,
      AccordionContent,
      AccordionItem,
      AccordionTrigger
    } from '#/components/accordion'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Accordion,
      AccordionContent,
      AccordionItem,
      AccordionTrigger
    } from 'twistail-react/accordion'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-accordion--docs) for more examples.

## Anatomy

```tsx
<Accordion>
  <AccordionItem>
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
</Accordion>
```


file: docs/components/alert-dialog.mdx
meta: {
  "title": "Alert Dialog",
  "full": false
}

A modal dialog that interrupts the user with important content and expects a response.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-alert-dialog--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/alert-dialog" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/alert-dialog/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import {
      AlertDialog,
      AlertDialogAction,
      AlertDialogCancel,
      AlertDialogContent,
      AlertDialogDescription,
      AlertDialogFooter,
      AlertDialogHeader,
      AlertDialogTitle,
      AlertDialogTrigger,
    } from 'twistail-react/alert-dialog'

    export default function AlertDialogDemo() {
      return (
        <AlertDialog>
          <AlertDialogTrigger className="cursor-pointer hover:underline">
            Show Dialog
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
              <AlertDialogDescription>
                This action cannot be undone. This will permanently delete your account and remove your
                data from our servers.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancel</AlertDialogCancel>
              <AlertDialogAction>Continue</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add alert-dialog
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['alert-dialog.tsx', 'alert-dialog.css.ts', 'index.ts']}>
      <Tab value="alert-dialog.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/alert-dialog/alert-dialog.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/alert-dialog/alert-dialog.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="alert-dialog.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/alert-dialog/alert-dialog.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/alert-dialog/alert-dialog.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/alert-dialog/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/alert-dialog/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      AlertDialog,
      AlertDialogPortal,
      AlertDialogTrigger,
      AlertDialogContent,
      AlertDialogHeader,
      AlertDialogFooter,
      AlertDialogTitle,
      AlertDialogDescription,
      AlertDialogAction,
      AlertDialogCancel,
      AlertDialogDivider,
    } from '#/components/alert-dialog'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      AlertDialog,
      AlertDialogPortal,
      AlertDialogTrigger,
      AlertDialogContent,
      AlertDialogHeader,
      AlertDialogFooter,
      AlertDialogTitle,
      AlertDialogDescription,
      AlertDialogAction,
      AlertDialogCancel,
      AlertDialogDivider,
    } from 'twistail-react/alert-dialog'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-alert-dialog--docs) for more examples.

## Anatomy

```tsx
<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogPortal>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle />
        <AlertDialogDescription />
      </AlertDialogHeader>
      <AlertDialogDivider />
      <AlertDialogFooter>
        <AlertDialogCancel />
        <AlertDialogAction />
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialogPortal>
</AlertDialog>
```


file: docs/components/area-chart.mdx
meta: {
  "title": "Area Chart",
  "full": false
}

A chart that displays quantitative data using a filled area below a line, useful for showing volume or cumulative values over time.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-area-chart--default" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://recharts.org/en-US/api" external>
    Recharts Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/area-chart" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/area-chart/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    // import { AreaChart } from 'twistail-react/area-chart'

    export default function Demo() {
      return null
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add area-chart
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['area-chart.tsx', 'area-chart.css.ts', 'index.ts']}>
      <Tab value="area-chart.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/area-chart/area-chart.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/area-chart/area-chart.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="area-chart.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/area-chart/area-chart.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/area-chart/area-chart.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/area-chart/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/area-chart/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {} from '#/components/area-chart'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {} from 'twistail-react/area-chart'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-area-chart--default) for more examples.

## Anatomy

```tsx
// WIP
```


file: docs/components/aspect-ratio.mdx
meta: {
  "title": "Aspect Ratio",
  "full": false
}

Maintains a consistent width-to-height ratio for content as it resizes.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-aspect-ratio--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/aspect-ratio#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/aspect-ratio" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/aspect-ratio/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import Image from 'next/image'
    import { AspectRatio } from 'twistail-react/aspect-ratio'

    export default function AspectRatioDemo() {
      return (
        <div className="w-[480px]">
          <AspectRatio ratio={16 / 9} className="border border-white bg-muted">
            <Image
              src="https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80"
              className="size-full rounded-md object-cover"
              alt="Pict by Alvaro Pinot"
            />
          </AspectRatio>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add aspect-ratio
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['aspect-ratio.tsx', 'aspect-ratio.css.ts', 'index.ts']}>
      <Tab value="aspect-ratio.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/aspect-ratio/aspect-ratio.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/aspect-ratio/aspect-ratio.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="aspect-ratio.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/aspect-ratio/aspect-ratio.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/aspect-ratio/aspect-ratio.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/aspect-ratio/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/aspect-ratio/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { AspectRatio } from '#/components/aspect-ratio'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { AspectRatio } from 'twistail-react/aspect-ratio'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-aspect-ratio--docs) for more examples.

## Anatomy

```tsx
<AspectRatio />
```


file: docs/components/avatar.mdx
meta: {
  "title": "Avatar",
  "full": false
}

An image element with a fallback for representing the user.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-avatar--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/avatar#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/avatar" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/avatar/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from 'twistail-react/avatar'
    import { getInitials } from 'twistail-utils'

    const users = [
      {
        name: 'Robert Wilson',
        role: 'Designer',
        image: 'https://api.dicebear.com/9.x/adventurer/svg?seed=Robert&backgroundColor=ffdfbf',
      },
      {
        name: 'Jocelyn Davis',
        role: 'Developer',
        image: 'https://api.dicebear.com/9.x/adventurer/svg?seed=Jocelyn&backgroundColor=ffdfbf',
      },
      {
        name: 'Jack Brown',
        role: 'Manager',
        image: 'https://api.dicebear.com/9.x/adventurer/svg?seed=Jack&backgroundColor=ffdfbf',
      },
      {
        name: 'Liliana Johnson',
        role: 'Marketing',
      },
    ]

    export default function AvatarDemo() {
      return (
        <AvatarGroup max={3}>
          {users.map((user) => (
            <Avatar key={user.name}>
              <AvatarImage src={user.image} alt={user.name} />
              <AvatarFallback>{getInitials(user.name)}</AvatarFallback>
            </Avatar>
          ))}
        </AvatarGroup>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add avatar
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['avatar.tsx', 'avatar.css.ts', 'index.ts']}>
      <Tab value="avatar.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/avatar/avatar.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/avatar/avatar.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="avatar.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/avatar/avatar.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/avatar/avatar.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/avatar/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/avatar/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Avatar, AvatarImage, AvatarFallback, AvatarGroup } from '#/components/avatar'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Avatar, AvatarImage, AvatarFallback, AvatarGroup } from 'twistail-react/avatar'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-avatar--docs) for more examples.

## Anatomy

```tsx
<AvatarGroup>
  <Avatar>
    <AvatarImage />
    <AvatarFallback />
  </Avatar>
</AvatarGroup>
```


file: docs/components/badge.mdx
meta: {
  "title": "Badge",
  "full": false
}

A small visual indicator for highlighting status, categories, or labels.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-badge--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/badge" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/badge/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Badge } from 'twistail-react/badge'

    export default function BadgeDemo() {
      return (
        <div className="flex flex-wrap gap-4">
          <Badge>Default</Badge>
          <Badge variant="primary">Primary</Badge>
          <Badge variant="success">Success</Badge>
          <Badge variant="error">Error</Badge>
          <Badge variant="warning">Warning</Badge>
          <Badge variant="info">Info</Badge>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add badge
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['badge.tsx', 'badge.css.ts', 'index.ts']}>
      <Tab value="badge.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/badge/badge.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/badge/badge.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="badge.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/badge/badge.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/badge/badge.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/badge/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/badge/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Badge } from '#/components/badge'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Badge } from 'twistail-react/badge'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-badge--docs) for more examples.


file: docs/components/bar-chart.mdx
meta: {
  "title": "Bar Chart",
  "full": false
}

A chart that presents categorical data with rectangular bars proportional to the values they represent.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-bar-chart--default" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://recharts.org/en-US/api" external>
    Recharts Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/bar-chart" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/bar-chart/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    // import { BarChart } from 'twistail-react/bar-chart'

    export default function Demo() {
      return null
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add bar-chart
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['bar-chart.tsx', 'bar-chart.css.ts', 'index.ts']}>
      <Tab value="bar-chart.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/bar-chart/bar-chart.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/bar-chart/bar-chart.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="bar-chart.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/bar-chart/bar-chart.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/bar-chart/bar-chart.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/bar-chart/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/bar-chart/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {} from '#/components/bar-chart'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {} from 'twistail-react/bar-chart'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-bar-chart--default) for more examples.

## Anatomy

```tsx
// WIP
```


file: docs/components/bar-list.mdx
meta: {
  "title": "Bar List (preview)",
  "full": false
}

A component that combines a list with horizontal bars to visualize comparative values across categories.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-bar-list--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://recharts.org/en-US/api" external>
    Recharts Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/bar-list" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/bar-list/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { BarList } from 'twistail-react/bar-list'

    export default function BarListDemo() {
      const basicData = [
        { title: '/home', value: 843, maxValue: 1000 },
        { title: '/imprint', value: 46, maxValue: 1000 },
        { title: '/cancellation', value: 3, maxValue: 1000 },
        { title: '/blocks', value: 108, maxValue: 1000 },
        { title: '/documentation', value: 384, maxValue: 1000 },
      ]

      const dataWithSubtitles = basicData.map((item) => ({
        ...item,
        subtitle: `${Math.round((item.value / item.maxValue) * 100)}% of total traffic`,
      }))

      return (
        <div className="mx-auto w-full max-w-lg">
          <BarList data={dataWithSubtitles} />
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add bar-list
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['bar-list.tsx', 'bar-list.css.ts', 'index.ts']}>
      <Tab value="bar-list.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/bar-list/bar-list.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/bar-list/bar-list.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="bar-list.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/bar-list/bar-list.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/bar-list/bar-list.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/bar-list/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/bar-list/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { BarList } from '#/components/bar-list'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { BarList } from 'twistail-react/bar-list'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-bar-list--docs) for more examples.

## Props

### BarListProps

<TypeTable
  type={{
  data: {
    description: 'Array of bar items to be displayed',
    type: 'BarItemProps[]',
    default: '[]',
  },
  size: {
    description: 'Size of the bar list items',
    type: 'sm | md | lg',
    default: 'md',
  },
  variant: {
    description: 'Color variant of the bars',
    type: 'default | success | warning | destructive | info',
    default: 'default',
  },
  hideValue: {
    description: 'Whether to hide the value labels',
    type: 'boolean',
    default: 'false',
  },
  hideTooltip: {
    description: 'Whether to hide tooltips',
    type: 'boolean',
    default: 'false',
  },
  hideArrow: {
    description: 'Whether to hide tooltip arrows',
    type: 'boolean',
    default: 'false',
  },
  interactive: {
    description: 'Whether the bars are interactive (clickable)',
    type: 'boolean',
    default: 'false',
  },
  valueFormatter: {
    description: 'Function to format values (applied to all items without their own formatValue)',
    type: '(value: number) => string',
    default: undefined,
  },
  onValueChange: {
    description: 'Callback function when an item is clicked',
    type: '(item: BarItemProps) => void',
    default: undefined,
  },
  sortOrder: {
    description: 'Sort order for the data',
    type: 'ascending | descending | none',
    default: 'none',
  },
  showAnimation: {
    description: 'Whether to show animation when the component mounts',
    type: 'boolean',
    default: 'false',
  },
  className: {
    description: 'Additional CSS class for the bar list container',
    type: 'string',
    default: undefined,
  },
}}
/>

### BarItemProps

<TypeTable
  type={{
  id: {
    description: 'Unique identifier for the item (used as key)',
    type: 'string | number',
    default: undefined,
  },
  title: {
    description: 'Title text for the bar item',
    type: 'string',
    default: 'required',
  },
  subtitle: {
    description: 'Optional subtitle text displayed below the title',
    type: 'string',
    default: undefined,
  },
  value: {
    description: 'Numeric value represented by the bar',
    type: 'number',
    default: 'required',
  },
  maxValue: {
    description: 'Maximum value for calculating the bar width percentage',
    type: 'number',
    default: '100 or auto-calculated from max value in data',
  },
  color: {
    description: 'Custom color for the bar (overrides variant)',
    type: 'string',
    default: undefined,
  },
  tooltip: {
    description: 'Content to display in the tooltip',
    type: 'string | React.ReactNode',
    default: undefined,
  },
  formatValue: {
    description: 'Function to format the displayed value',
    type: '(value: number) => string',
    default: undefined,
  },
  onClick: {
    description: 'Callback function when the item is clicked',
    type: '() => void',
    default: undefined,
  },
  href: {
    description: 'URL to navigate to when the item title is clicked',
    type: 'string',
    default: undefined,
  },
}}
/>


file: docs/components/blockquote.mdx
meta: {
  "title": "Blockquote",
  "full": false
}

A styled container for quoting content from another source, typically used for testimonials or citations.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-blockquote--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/blockquote" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/blockquote/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 p-10 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Blockquote, BlockquoteAuthor } from 'twistail-react/blockquote'

    export default function BlockquoteDemo() {
      return (
        <Blockquote>
          The science of operations, as derived from mathematics more especially, is a science of
          itself, and has its own abstract truth and value.
          <BlockquoteAuthor>Ada Lovelace</BlockquoteAuthor>
        </Blockquote>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add blockquote
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['blockquote.tsx', 'blockquote.css.ts', 'index.ts']}>
      <Tab value="blockquote.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/blockquote/blockquote.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/blockquote/blockquote.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="blockquote.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/blockquote/blockquote.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/blockquote/blockquote.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/blockquote/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/blockquote/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Blockquote, BlockquoteAuthor } from '#/components/blockquote'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Blockquote, BlockquoteAuthor } from 'twistail-react/blockquote'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-blockquote--docs) for more examples.


file: docs/components/breadcrumb.mdx
meta: {
  "title": "Breadcrumb",
  "full": false
}

A navigation aid that helps users understand their location within a website hierarchy.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-breadcrumb--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/breadcrumb" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/breadcrumb/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import {
      Breadcrumb,
      BreadcrumbEllipsis,
      BreadcrumbItem,
      BreadcrumbLink,
      BreadcrumbList,
      BreadcrumbPage,
      BreadcrumbSeparator,
    } from 'twistail-react/breadcrumb'

    export default function BreadcrumbDemo() {
      return (
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Dashboard</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbEllipsis />
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Settings</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Account</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Security</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add breadcrumb
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['breadcrumb.tsx', 'breadcrumb.css.ts', 'index.ts']}>
      <Tab value="breadcrumb.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/breadcrumb/breadcrumb.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/breadcrumb/breadcrumb.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="breadcrumb.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/breadcrumb/breadcrumb.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/breadcrumb/breadcrumb.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/breadcrumb/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/breadcrumb/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Breadcrumb,
      BreadcrumbList,
      BreadcrumbItem,
      BreadcrumbLink,
      BreadcrumbPage,
      BreadcrumbSeparator,
      BreadcrumbEllipsis,
    } from '#/components/breadcrumb'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Breadcrumb,
      BreadcrumbList,
      BreadcrumbItem,
      BreadcrumbLink,
      BreadcrumbPage,
      BreadcrumbSeparator,
      BreadcrumbEllipsis,
    } from 'twistail-react/breadcrumb'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-breadcrumb--docs) for more examples.


file: docs/components/button.mdx
meta: {
  "title": "Button",
  "full": false
}

An interactive element that triggers an action when clicked or pressed.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-button--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/button" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/button/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Button } from 'twistail-react/button'

    export default function ButtonDemo() {
      return (
        <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
          <Button>Primary</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="destructive">Destructive</Button>
          <Button variant="success">Success</Button>
          <Button variant="warning">Warning</Button>
          <Button variant="info">Info</Button>
          <Button variant="outline">Outline</Button>
          <Button variant="ghost">Ghost</Button>
          <Button variant="link">Link</Button>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add button
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['button.tsx', 'button.css.ts', 'index.ts']}>
      <Tab value="button.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/button/button.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/button/button.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="button.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/button/button.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/button/button.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/button/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/button/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Button } from '#/components/button'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Button } from 'twistail-react/button'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-button--docs) for more examples.

## Props

<TypeTable
  type={{
  variant: {
    description: 'Variant of the button',
    type: 'ButtonStyles["variant"]',
    default: 'primary',
  },
  size: {
    description: 'Size of the button',
    type: 'ButtonStyles["size"]',
    default: 'md',
  },
  isLoading: {
    description: 'Whether the button is loading',
    type: 'boolean',
    default: 'false',
  },
  loadingText: {
    description: 'Custom text to display when the button is loading',
    type: 'string',
    default: null,
  },
}}
/>


file: docs/components/calendar.mdx
meta: {
  "title": "Calendar",
  "full": false
}

A foundational date display component that serves as the basis for building date pickers, allowing users to navigate and select dates or date ranges.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-calendar--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://daypicker.dev/docs/anatomy" external>
    React Daypicker
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/calendar" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/calendar/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as React from 'react'
    import { Calendar } from 'twistail-react/calendar'

    export default function CalendarDemo() {
      const [date, setDate] = React.useState<Date | undefined>(undefined)
      return (
        <div className="flex flex-col items-center gap-y-4">
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
            className="rounded-lg border border-border shadow-xs"
          />
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add calendar
  ``` */}

## Manual Installation

Twistail Calendar component is built on [React DayPicker v9](https://daypicker.dev/upgrading), offering
enhanced functionality and improved performance compared to the [shadcn/ui Calendar](https://ui.shadcn.com/docs/components/calendar)
and [Tremor Calendar](https://tremor.so/docs/inputs/calendar) component which uses the older React DayPicker v8.

This newer implementation maintains full compatibility with our design system while leveraging the
latest features from the DayPicker library.

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui tailwind-variants lucide-react date-fns react-day-picker
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['calendar.tsx', 'calendar.css.ts', 'index.ts']}>
      <Tab value="calendar.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/calendar/calendar.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/calendar/calendar.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="calendar.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/calendar/calendar.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/calendar/calendar.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/calendar/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/calendar/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Calendar } from '#/components/calendar'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Calendar } from 'twistail-react/calendar'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-calendar--docs) for more examples.


file: docs/components/callout.mdx
meta: {
  "title": "Calllout",
  "full": false
}

A highlighted message that attracts attention to important information.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-callout--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/callout" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/callout/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 p-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as Lucide from 'lucide-react'
    import { Callout } from 'twistail-react/callout'

    export default function CalloutDemo() {
      return (
        <Callout
          title="Sales Performance"
          icon={<Lucide.Info className="mr-1.5 size-5 shrink-0 p-0.5" />}
        >
          System Update: Enhanced Salesforce and Dynamics 365 integration now delivers key sales
          performance metrics directly to your dashboard for improved target achievement.
        </Callout>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add callout
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['callout.tsx', 'callout.css.ts', 'index.ts']}>
      <Tab value="callout.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/callout/callout.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/callout/callout.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="callout.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/callout/callout.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/callout/callout.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/callout/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/callout/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Callout } from '#/components/callout'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Callout } from 'twistail-react/callout'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-callout--docs) for more examples.


file: docs/components/card.mdx
meta: {
  "title": "Card",
  "full": false
}

A flexible container for grouping related content and actions.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-card--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/card" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/card/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Button } from 'twistail-react/button'
    import {
      Card,
      CardContent,
      CardDescription,
      CardDivider,
      CardFooter,
      CardHeader,
      CardTitle,
    } from 'twistail-react/card'
    import { Text } from 'twistail-react/text'

    export default function CardDemo() {
      return (
        <Card className="w-full max-w-lg">
          <CardHeader spacing="compact">
            <CardTitle>Compact Card</CardTitle>
            <CardDescription>This card uses compact spacing for all sections</CardDescription>
          </CardHeader>
          <CardDivider spacing="compact" />
          <CardContent spacing="compact">
            <Text size="sm" className="leading-relaxed">
              The compact spacing variant reduces padding in all card sections, making it more suitable
              for dense UIs or when space is limited.
            </Text>
          </CardContent>
          <CardDivider spacing="compact" />
          <CardFooter spacing="compact">
            <Button variant="outline" size="sm" className="w-full">
              Close
            </Button>
            <Button size="sm" className="w-full">
              I Agree
            </Button>
          </CardFooter>
        </Card>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add card
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['card.tsx', 'card.css.ts', 'index.ts']}>
      <Tab value="card.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/card/card.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/card/card.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="card.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/card/card.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/card/card.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/card/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/card/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Card,
      CardHeader,
      CardTitle,
      CardDescription,
      CardContent,
      CardFooter,
      CardDivider
    } from '#/components/card'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Card,
      CardHeader,
      CardTitle,
      CardDescription,
      CardContent,
      CardFooter,
      CardDivider
    } from 'twistail-react/card'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-card--docs) for more examples.

## Anatomy

```tsx
<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
  </CardHeader>
  <CardDivider />
  <CardContent />
  <CardDivider />
  <CardFooter />
</Card>
```


file: docs/components/category-bar.mdx
meta: {
  "title": "Category Bar",
  "full": false
}

A component for displaying categorized data with visual indicators of distribution or proportion.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-category-bar--default" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://recharts.org/en-US/api" external>
    Recharts Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/category-bar" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/category-bar/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    // import { CategoryBar } from 'twistail-react/category-bar'

    export default function Demo() {
      return null
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add category-bar
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['category-bar.tsx', 'category-bar.css.ts', 'index.ts']}>
      <Tab value="category-bar.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/category-bar/category-bar.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/category-bar/category-bar.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="category-bar.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/category-bar/category-bar.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/category-bar/category-bar.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/category-bar/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/category-bar/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {} from '#/components/category-bar'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {} from 'twistail-react/category-bar'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-category-bar--default) for more examples.

## Anatomy

```tsx
// WIP
```


file: docs/components/checkbox.mdx
meta: {
  "title": "Checkbox",
  "full": false
}

A control that allows users to select multiple options from a set.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-checkbox--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/checkbox#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/checkbox" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/checkbox/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Checkbox } from 'twistail-react/checkbox'
    import { Label } from 'twistail-react/label'

    export default function CheckboxDemo() {
      return (
        <form className="flex items-center gap-2">
          <Checkbox />
          <Label disabled>I agree with the terms</Label>
        </form>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add checkbox
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['checkbox.tsx', 'checkbox.css.ts', 'index.ts']}>
      <Tab value="checkbox.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/checkbox/checkbox.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/checkbox/checkbox.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="checkbox.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/checkbox/checkbox.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/checkbox/checkbox.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/checkbox/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/checkbox/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Checkbox } from '#/components/checkbox'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Checkbox } from 'twistail-react/checkbox'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-checkbox--docs) for more examples.

## Anatomy

```tsx
<Checkbox />
```


file: docs/components/collapsible.mdx
meta: {
  "title": "Collapsible",
  "full": false
}

A component that can be expanded or collapsed to show or hide content.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-collapsible--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/collapsible#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/collapsible" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/collapsible/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as Lucide from 'lucide-react'
    import { Button } from 'twistail-react/button'
    import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'twistail-react/collapsible'

    export default function CollapsibleDemo() {
      return (
        <Collapsible className="w-[350px] space-y-2" defaultOpen>
          <div className="flex w-full items-center justify-between space-x-4 pr-0 pl-4">
            <h4 className="font-semibold text-sm">@riipandi starred 3 repositories</h4>
            <CollapsibleTrigger asChild>
              <Button variant="ghost" size="sm" className="w-9 p-0">
                <Lucide.ChevronsUpDown className="size-4" />
                <span className="sr-only">Toggle</span>
              </Button>
            </CollapsibleTrigger>
          </div>
          <CollapsibleContent className="space-y-2">
            <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
            <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
            <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
          </CollapsibleContent>
        </Collapsible>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add collapsible
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['collapsible.tsx', 'collapsible.css.ts', 'index.ts']}>
      <Tab value="collapsible.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/collapsible/collapsible.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/collapsible/collapsible.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="collapsible.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/collapsible/collapsible.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/collapsible/collapsible.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/collapsible/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/collapsible/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Collapsible,
      CollapsibleTrigger,
      CollapsibleContent
    } from '#/components/collapsible'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Collapsible,
      CollapsibleTrigger,
      CollapsibleContent
    } from 'twistail-react/collapsible'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-collapsible--docs) for more examples.

## Anatomy

```tsx
<Collapsible>
  <CollapsibleTrigger/>
  <CollapsibleContent />
</Collapsible>
```


file: docs/components/combo-chart.mdx
meta: {
  "title": "Combo Chart",
  "full": false
}

A hybrid chart that combines multiple chart types (like bar and line) to compare different data series with different scales.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-combo-chart--default" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://recharts.org/en-US/api" external>
    Recharts Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/combo-chart" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/combo-chart/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    // import { ComboChart } from 'twistail-react/combo-chart'

    export default function Demo() {
      return null
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add combo-chart
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['combo-chart.tsx', 'combo-chart.css.ts', 'index.ts']}>
      <Tab value="combo-chart.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/combo-chart/combo-chart.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/combo-chart/combo-chart.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="combo-chart.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/combo-chart/combo-chart.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/combo-chart/combo-chart.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/combo-chart/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/combo-chart/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {} from '#/components/combo-chart'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {} from 'twistail-react/combo-chart'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-combo-chart--default) for more examples.

## Anatomy

```tsx
// WIP
```


file: docs/components/combobox.mdx
meta: {
  "title": "Combobox",
  "full": false
}

A combination of a text input and a dropdown list for selecting from predefined options.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-combobox--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/popover#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/combobox" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/combobox/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { useState } from 'react'
    import { Combobox } from 'twistail-react/combobox'

    const frameworks = [
      { value: 'next.js', label: 'Next.js' },
      { value: 'remix', label: 'Remix' },
      { value: 'astro', label: 'Astro', disabled: true },
      { value: 'react', label: 'React' },
      { value: 'vue', label: 'Vue' },
      { value: 'solid', label: 'Solid' },
    ]

    export default function ComboboxDemo() {
      const [value, setValue] = useState('')
      return (
        <div className="flex w-[200px] flex-col gap-3">
          <Combobox options={frameworks} onValueChange={setValue} />
          <div className="px-1 text-sm">
            Selected value: <span className="font-semibold">{value || 'none'}</span>
          </div>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add combobox
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['combobox.tsx', 'combobox.css.ts', 'index.ts']}>
      <Tab value="combobox.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/combobox/combobox.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/combobox/combobox.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="combobox.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/combobox/combobox.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/combobox/combobox.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/combobox/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/combobox/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Combobox } from '#/components/combobox'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Combobox } from 'twistail-react/combobox'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-combobox--docs) for more examples.


file: docs/components/command.mdx
meta: {
  "title": "Command",
  "full": false
}

A keyboard-centric interface for navigating and taking actions quickly.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-command--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/command" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/command/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as Lucide from 'lucide-react'
    import {
      Command,
      CommandEmpty,
      CommandGroup,
      CommandInput,
      CommandItem,
      CommandList,
      CommandSeparator,
      CommandShortcut,
    } from 'twistail-react/command'

    export default function CommandDemo() {
      return (
        <Command className="w-[460px] rounded-lg border shadow-md">
          <CommandInput placeholder="Type a command or search..." />
          <CommandList className="min-w-[420px]">
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem>
                <Lucide.Calendar className="mr-2 size-4" strokeWidth={2} />
                <span>Calendar</span>
              </CommandItem>
              <CommandItem>
                <Lucide.Smile className="mr-2 size-4" strokeWidth={2} />
                <span>Search Emoji</span>
              </CommandItem>
              <CommandItem>
                <Lucide.Calculator className="mr-2 size-4" strokeWidth={2} />
                <span>Calculator</span>
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Settings">
              <CommandItem>
                <Lucide.User className="mr-2 size-4" strokeWidth={2} />
                <span>Profile</span>
                <CommandShortcut>⌘P</CommandShortcut>
              </CommandItem>
              <CommandItem>
                <Lucide.CreditCard className="mr-2 size-4" strokeWidth={2} />
                <span>Billing</span>
                <CommandShortcut>⌘B</CommandShortcut>
              </CommandItem>
              <CommandItem>
                <Lucide.Settings className="mr-2 size-4" strokeWidth={2} />
                <span>Settings</span>
                <CommandShortcut>⌘S</CommandShortcut>
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add command
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui cmdk
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['command.tsx', 'command.css.ts', 'index.ts']}>
      <Tab value="command.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/command/command.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/command/command.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="command.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/command/command.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/command/command.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/command/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/command/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Command,
      CommandDialog,
      CommandInput,
      CommandList,
      CommandEmpty,
      CommandGroup,
      CommandItem,
      CommandShortcut,
      CommandSeparator,
    } from '#/components/command'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Command,
      CommandDialog,
      CommandInput,
      CommandList,
      CommandEmpty,
      CommandGroup,
      CommandItem,
      CommandShortcut,
      CommandSeparator,
    } from 'twistail-react/command'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-command--docs) for more examples.


file: docs/components/context-menu.mdx
meta: {
  "title": "Context Menu",
  "full": false
}

A menu that appears upon user interaction, typically right-clicking, providing contextual actions.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/layout-components-context-menu--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/context-menu#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/context-menu" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/context-menu/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as Lucide from 'lucide-react'
    import { useState } from 'react'
    import {
      ContextMenu,
      ContextMenuCheckboxItem,
      ContextMenuContent,
      ContextMenuGroup,
      ContextMenuItem,
      ContextMenuRadioGroup,
      ContextMenuRadioItem,
      ContextMenuSeparator,
      ContextMenuSubMenu,
      ContextMenuSubMenuContent,
      ContextMenuSubMenuTrigger,
      ContextMenuTrigger,
    } from 'twistail-react/context-menu'

    export default function ContextMenuDemo() {
      const [position, setPosition] = useState('bottom')
      const [showStatusBar, setShowStatusBar] = useState<boolean>(true)
      const [showActivityBar, setShowActivityBar] = useState<boolean>(false)
      const [showPanel, setShowPanel] = useState<boolean>(false)

      return (
        <ContextMenu>
          <ContextMenuTrigger className="flex h-[250px] w-[400px] items-center justify-center rounded-md border border-dashed text-sm">
            Right click here
          </ContextMenuTrigger>
          <ContextMenuContent className="w-64">
            <ContextMenuGroup>
              <ContextMenuItem shortcut="⌘S" inset>
                Account Settings
              </ContextMenuItem>
            </ContextMenuGroup>

            <ContextMenuSeparator />

            <ContextMenuGroup>
              <ContextMenuItem hint="Pro" inset>
                Manage workspace
              </ContextMenuItem>

              <ContextMenuSubMenu>
                <ContextMenuSubMenuTrigger inset>Invite users</ContextMenuSubMenuTrigger>
                <ContextMenuSubMenuContent>
                  <ContextMenuItem>
                    <span className="flex items-center gap-x-2">
                      <Lucide.MailPlus className="size-4 text-inherit" />
                      <span>Email</span>
                    </span>
                  </ContextMenuItem>

                  <ContextMenuSubMenu>
                    <ContextMenuSubMenuTrigger>
                      <span className="flex items-center gap-x-2">
                        <Lucide.MessageSquare className="size-4 text-inherit" />
                        <span>Message</span>
                      </span>
                    </ContextMenuSubMenuTrigger>
                    <ContextMenuSubMenuContent>
                      <ContextMenuItem>
                        <span className="flex items-center gap-x-2">
                          <Lucide.MessageCircle className="size-4 text-inherit" />
                          <span>Whatsapp</span>
                        </span>
                      </ContextMenuItem>
                      <ContextMenuItem>
                        <span className="flex items-center gap-x-2">
                          <Lucide.Send className="size-4 text-inherit" />
                          <span>Telegram</span>
                        </span>
                      </ContextMenuItem>
                      <ContextMenuItem>
                        <span className="flex items-center gap-x-2">
                          <Lucide.MessagesSquare className="size-4 text-inherit" />
                          <span>Discord</span>
                        </span>
                      </ContextMenuItem>
                      <ContextMenuItem>
                        <span className="flex items-center gap-x-2">
                          <Lucide.Slack className="size-4 text-inherit" />
                          <span>Slack</span>
                        </span>
                      </ContextMenuItem>
                    </ContextMenuSubMenuContent>
                  </ContextMenuSubMenu>
                  <ContextMenuSeparator />
                  <ContextMenuItem>
                    <span className="flex items-center gap-x-2">
                      <Lucide.CirclePlus className="size-4 text-inherit" />
                      <span>More...</span>
                    </span>
                  </ContextMenuItem>
                </ContextMenuSubMenuContent>
              </ContextMenuSubMenu>
            </ContextMenuGroup>

            <ContextMenuSeparator />
            <ContextMenuRadioGroup value={position} onValueChange={setPosition}>
              <ContextMenuRadioItem value="alpha" hint="A-Z">
                Alphabetical
              </ContextMenuRadioItem>
              <ContextMenuRadioItem value="alpha-reverse" hint="Z-A">
                Reverse Alphabetical
              </ContextMenuRadioItem>
              <ContextMenuRadioItem value="asc" hint="1-99">
                Created at
              </ContextMenuRadioItem>
            </ContextMenuRadioGroup>
            <ContextMenuSeparator />

            <ContextMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
              Public
            </ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem checked={showActivityBar} onCheckedChange={setShowActivityBar}>
              Private
            </ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel} disabled>
              Restricted
            </ContextMenuCheckboxItem>

            <ContextMenuSeparator />

            <ContextMenuItem>
              <span className="flex items-center gap-x-2">
                <Lucide.Activity className="size-4 text-inherit" />
                <span>Support</span>
              </span>
            </ContextMenuItem>
            <ContextMenuItem shortcut="⇧⌘Q">
              <span className="flex items-center gap-x-2">
                <Lucide.LogOut className="size-4 text-inherit" />
                <span>Sign out</span>
              </span>
            </ContextMenuItem>
          </ContextMenuContent>
        </ContextMenu>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add context-menu
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['context-menu.tsx', 'context-menu.css.ts', 'index.ts']}>
      <Tab value="context-menu.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/context-menu/context-menu.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/context-menu/context-menu.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="context-menu.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/context-menu/context-menu.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/context-menu/context-menu.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/context-menu/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/context-menu/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      ContextMenu,
      ContextMenuTrigger,
      ContextMenuContent,
      ContextMenuItem,
      ContextMenuCheckboxItem,
      ContextMenuRadioItem,
      ContextMenuLabel,
      ContextMenuSeparator,
      ContextMenuIconWrapper,
      ContextMenuGroup,
      ContextMenuPortal,
      ContextMenuSubMenu,
      ContextMenuSubMenuContent,
      ContextMenuSubMenuTrigger,
      ContextMenuRadioGroup,
    } from '#/components/context-menu'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      ContextMenu,
      ContextMenuTrigger,
      ContextMenuContent,
      ContextMenuItem,
      ContextMenuCheckboxItem,
      ContextMenuRadioItem,
      ContextMenuLabel,
      ContextMenuSeparator,
      ContextMenuIconWrapper,
      ContextMenuGroup,
      ContextMenuPortal,
      ContextMenuSubMenu,
      ContextMenuSubMenuContent,
      ContextMenuSubMenuTrigger,
      ContextMenuRadioGroup,
    } from 'twistail-react/context-menu'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/layout-components-context-menu--docs) for more examples.

## Anatomy

```tsx
<ContextMenu>
  <ContextMenuTrigger />

  <ContextMenuPortal>
    <ContextMenuContent>
      <ContextMenuLabel />
      <ContextMenuItem />

      <ContextMenuGroup>
        <ContextMenuItem />
      </ContextMenuGroup>

      <ContextMenuCheckboxItem>
        <ContextMenuItemIndicator />
      </ContextMenuCheckboxItem>

      <ContextMenuRadioGroup>
        <ContextMenuRadioItem>
          <ContextMenuItemIndicator />
        </ContextMenuRadioItem>
      </ContextMenuRadioGroup>

      <ContextMenuSub>
        <ContextMenuSubTrigger />
        <ContextMenuPortal>
          <ContextMenuSubContent />
        </ContextMenuPortal>
      </ContextMenuSub>

      <ContextMenuSeparator />
    </ContextMenuContent>
  </ContextMenuPortal>
</ContextMenu>
```


file: docs/components/datetime-picker.mdx
meta: {
  "title": "Datetime Picker",
  "full": false
}

A component that allows users to select both date and time values through an intuitive interface, supporting various formats and time zones.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-datetime-picker" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://daypicker.dev/docs/anatomy" external>
    React Daypicker
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/datetime-picker" external>
    Source
  </BadgeLink>
</Badges>

***

## Single Datetime Picker

import DemoSingle from '#/demo/datetime-picker/preview-single'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-10 not-prose">
    <DemoSingle />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { SingleDatePicker } from 'twistail-react/datetime-picker'

    export default function SingleDatePickerDemo() {
      return <SingleDatePicker internalPresets withTimePicker />
    }

    ```
  </Tab>
</Tabs>

## Range Datetime Picker

import DemoRange from '#/demo/datetime-picker/preview-range'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-10 not-prose">
    <DemoRange />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { RangeDatePicker } from 'twistail-react/datetime-picker'

    export default function RangeDatePickerDemo() {
      return <RangeDatePicker inlinePresets internalPresets withTimePicker />
    }

    ```
  </Tab>
</Tabs>

## Time Picker

import DemoTimePicker from '#/demo/datetime-picker/preview-time'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-10 not-prose">
    <DemoTimePicker />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as React from 'react'
    import { TimePicker } from 'twistail-react/datetime-picker'

    export default function TimePickerDemo() {
      const [date, setDate] = React.useState<Date>(new Date())

      const handleDateChange = (newDate: Date | undefined) => {
        if (newDate) {
          setDate(newDate)
        }
      }

      return (
        <div className="rounded-md border p-2">
          <TimePicker date={date} onChange={handleDateChange} />
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add datetime-picker
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui lucide-react date-fns react-day-picker
    ```
  </Step>

  <Step>
    ### Date Picker Component

    <Tabs items={['single-datepicker.tsx', 'range-datepicker.tsx', 'datetime-picker.css.ts', 'index.ts']}>
      <Tab value="single-datepicker.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/datetime-picker/single-datepicker.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/datetime-picker/single-datepicker.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="range-datepicker.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/datetime-picker/range-datepicker.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/datetime-picker/range-datepicker.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="datetime-picker.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/datetime-picker/datetime-picker.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/datetime-picker/datetime-picker.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/datetime-picker/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/datetime-picker/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### Time Picker Component

    <Tabs items={['time-picker.tsx', 'time-utils.ts']}>
      <Tab value="time-picker.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/datetime-picker/time-picker.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/datetime-picker/time-picker.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="time-utils.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/datetime-picker/time-utils.ts",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/datetime-picker/time-utils.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { RangeDatePicker, SingleDatePicker, TimePicker } from '#/components/datetime-picker'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { RangeDatePicker, SingleDatePicker, TimePicker } from 'twistail-react/datetime-picker'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-datetime-picker) for more examples.

## Credits

* [datetime-picker](https://shadcnui-expansions.typeart.cc/docs/datetime-picker) by [shadcn-ui expansions](https://shadcnui-expansions.typeart.cc), licensed under [MIT License](https://github.com/hsuanyi-chou/shadcn-ui-expansions/blob/main/LICENSE.md).
* [shadcn-datetime-picker](https://github.com/huybuidac/shadcn-datetime-picker) by [Bui Dac Huy](https://github.com/huybuidac).


file: docs/components/description-list.mdx
meta: {
  "title": "Description List",
  "full": false
}

A component for displaying name-value pairs in a structured format.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-description-list--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/description-list" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/description-list/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import {
      DescriptionDetails,
      DescriptionList,
      DescriptionTerm,
    } from 'twistail-react/description-list'

    export default function DescriptionListDemo() {
      return (
        <DescriptionList className="w-full max-w-sm">
          <DescriptionTerm>Name</DescriptionTerm>
          <DescriptionDetails>John Doe</DescriptionDetails>

          <DescriptionTerm>Email</DescriptionTerm>
          <DescriptionDetails>john.doe@example.com</DescriptionDetails>

          <DescriptionTerm>Position</DescriptionTerm>
          <DescriptionDetails>Software Engineer</DescriptionDetails>

          <DescriptionTerm>Department</DescriptionTerm>
          <DescriptionDetails>Engineering</DescriptionDetails>

          <DescriptionTerm>Location</DescriptionTerm>
          <DescriptionDetails>San Francisco, CA</DescriptionDetails>
        </DescriptionList>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add description-list
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['description-list.tsx', 'description-list.css.ts', 'index.ts']}>
      <Tab value="description-list.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/description-list/description-list.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/description-list/description-list.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="description-list.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/description-list/description-list.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/description-list/description-list.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/description-list/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/description-list/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      DescriptionList,
      DescriptionTerm,
      DescriptionDetails,
    } from '#/components/description-list'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      DescriptionList,
      DescriptionTerm,
      DescriptionDetails,
    } from 'twistail-react/description-list'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-description-list--docs) for more examples.

## Props

<TypeTable
  type={{
  variant: {
    description: 'Variant of the component',
    type: 'DescriptionListStyles["variant"]',
    default: 'default',
  },
  size: {
    description: 'Size of the component',
    type: 'DescriptionListStyles["size"]',
    default: 'md',
  },
}}
/>


file: docs/components/dialog.mdx
meta: {
  "title": "Dialog",
  "full": false
}

A modal window that appears in front of app content to provide critical information or request user input.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-dialog--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/dialog#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/dialog" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/dialog/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Button } from 'twistail-react/button'
    import {
      Dialog,
      DialogClose,
      DialogContent,
      DialogDescription,
      DialogDivider,
      DialogFooter,
      DialogHeader,
      DialogTitle,
      DialogTrigger,
    } from 'twistail-react/dialog'

    export default function DialogDemo() {
      return (
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="outline">Terms & Conditions</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle>Terms of Service</DialogTitle>
              <DialogDescription>
                Please read our terms and conditions carefully before proceeding.
              </DialogDescription>
            </DialogHeader>
            <DialogDivider />
            <div className="max-h-[200px] overflow-y-auto text-sm">
              <p className="mb-4">
                By accessing or using our services, you agree to be bound by these Terms of Service. If
                you do not agree to these terms, please do not use our services.
              </p>
              <p>
                We reserve the right to modify these terms at any time. Your continued use of our
                services following any changes constitutes your acceptance of the new Terms of Service.
              </p>
            </div>
            <DialogDivider />
            <DialogFooter>
              <DialogClose asChild>
                <Button className="w-full sm:w-fit" variant="outline">
                  Decline
                </Button>
              </DialogClose>
              <DialogClose asChild>
                <Button className="w-full sm:w-fit">Accept</Button>
              </DialogClose>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add dialog
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['dialog.tsx', 'dialog.css.ts', 'index.ts']}>
      <Tab value="dialog.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/dialog/dialog.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/dialog/dialog.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="dialog.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/dialog/dialog.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/dialog/dialog.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/dialog/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/dialog/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Dialog,
      DialogClose,
      DialogContent,
      DialogDescription,
      DialogFooter,
      DialogHeader,
      DialogPortal,
      DialogTitle,
      DialogTrigger,
      DialogDivider,
    } from '#/components/dialog'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Dialog,
      DialogClose,
      DialogContent,
      DialogDescription,
      DialogFooter,
      DialogHeader,
      DialogPortal,
      DialogTitle,
      DialogTrigger,
      DialogDivider,
    } from 'twistail-react/dialog'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-dialog--docs) for more examples.

## Anatomy

```tsx
<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogHeader>
      <DialogTitle />
      <DialogDescription />
    </DialogHeader>
    <DialogDivider />
    <DialogFooter>
      <DialogClose />
    </DialogFooter>
  </DialogContent>
</Dialog>
```


file: docs/components/divider.mdx
meta: {
  "title": "Divider",
  "full": false
}

A visual separator used to create a division between content sections.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-divider--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/divider" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/divider/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Divider } from 'twistail-react/divider'

    export default function DividerDemo() {
      return (
        <div className="w-[320px]">
          <div className="space-y-1">
            <h4 className="font-medium text-sm leading-none">Radix Primitives</h4>
            <p className="text-muted-foreground text-sm">An open-source UI component library.</p>
          </div>
          <Divider className="my-4" />
          <div className="flex h-5 items-center space-x-4 text-sm">
            <div>Blog</div>
            <Divider orientation="vertical" className="mr-4" />
            <div>Docs</div>
            <Divider orientation="vertical" className="mr-4" />
            <div>Source</div>
          </div>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add divider
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['divider.tsx', 'divider.css.ts', 'index.ts']}>
      <Tab value="divider.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/divider/divider.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/divider/divider.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="divider.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/divider/divider.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/divider/divider.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/divider/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/divider/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Divider } from '#/components/divider'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Divider } from 'twistail-react/divider'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-divider--docs) for more examples.

## Anatomy

```tsx
<Divider />
```


file: docs/components/donut-chart.mdx
meta: {
  "title": "Donut Chart",
  "full": false
}

A circular chart with a hole in the center that shows the proportional composition of a dataset.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-donut-chart--default" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://recharts.org/en-US/api" external>
    Recharts Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/donut-chart" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/donut-chart/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    // import { DonutChart } from 'twistail-react/donut-chart'

    export default function Demo() {
      return null
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add donut-chart
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['donut-chart.tsx', 'donut-chart.css.ts', 'index.ts']}>
      <Tab value="donut-chart.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/donut-chart/donut-chart.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/donut-chart/donut-chart.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="donut-chart.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/donut-chart/donut-chart.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/donut-chart/donut-chart.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/donut-chart/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/donut-chart/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {} from '#/components/donut-chart'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {} from 'twistail-react/donut-chart'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-donut-chart--default) for more examples.

## Anatomy

```tsx
// WIP
```


file: docs/components/drawer.mdx
meta: {
  "title": "Drawer",
  "full": false
}

A panel that slides in from the edge of the screen, typically containing navigation or supplementary content.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-drawer--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/dialog#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/drawer" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/drawer/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Button } from 'twistail-react/button'
    import {
      Drawer,
      DrawerBody,
      DrawerClose,
      DrawerContent,
      DrawerDescription,
      DrawerFooter,
      DrawerHeader,
      DrawerTitle,
      DrawerTrigger,
    } from 'twistail-react/drawer'

    export default function DrawerDemo() {
      return (
        <Drawer>
          <DrawerTrigger asChild>
            <Button variant="secondary">Open Drawer</Button>
          </DrawerTrigger>
          <DrawerContent className="sm:max-w-lg">
            <DrawerHeader>
              <DrawerTitle>Account Created Successfully</DrawerTitle>
              <DrawerDescription className="mt-1 text-sm">
                Your account has been created successfully. You can now login to your account. For more
                information, please contact us.
              </DrawerDescription>
            </DrawerHeader>
            <DrawerBody className="py-4">
              This is they body of the drawer, content goes here.
            </DrawerBody>
            <DrawerFooter className="mt-6">
              <DrawerClose asChild>
                <Button className="mt-2 w-full sm:mt-0 sm:w-fit" variant="secondary">
                  Go back
                </Button>
              </DrawerClose>
              <DrawerClose asChild>
                <Button className="w-full sm:w-fit">Ok, got it!</Button>
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add drawer
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['drawer.tsx', 'drawer.css.ts', 'index.ts']}>
      <Tab value="drawer.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/drawer/drawer.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/drawer/drawer.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="drawer.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/drawer/drawer.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/drawer/drawer.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/drawer/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/drawer/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Drawer,
      DrawerBody,
      DrawerClose,
      DrawerContent,
      DrawerDescription,
      DrawerFooter,
      DrawerHeader,
      DrawerPortal,
      DrawerTitle,
      DrawerTrigger,
    } from '#/components/drawer'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Drawer,
      DrawerBody,
      DrawerClose,
      DrawerContent,
      DrawerDescription,
      DrawerFooter,
      DrawerHeader,
      DrawerPortal,
      DrawerTitle,
      DrawerTrigger,
    } from 'twistail-react/drawer'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-drawer--docs) for more examples.


file: docs/components/dropdown-menu.mdx
meta: {
  "title": "Dropdown Menu",
  "full": false
}

A toggleable menu that displays a list of actions or options.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-dropdown-menu--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/dropdown-menu" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/dropdown-menu/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Button } from 'twistail-react/button'
    import {
      DropdownMenu,
      DropdownMenuContent,
      DropdownMenuGroup,
      DropdownMenuItem,
      DropdownMenuLabel,
      DropdownMenuSeparator,
      DropdownMenuSubMenu,
      DropdownMenuSubMenuContent,
      DropdownMenuSubMenuTrigger,
      DropdownMenuTrigger,
    } from 'twistail-react/dropdown-menu'

    export default function DropdownMenuDemo() {
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="secondary">Open</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuGroup>
              <DropdownMenuItem shortcut="⇧⌘P">Profile</DropdownMenuItem>
              <DropdownMenuItem disabled shortcut="⌘B">
                Billing
              </DropdownMenuItem>
              <DropdownMenuItem shortcut="⌘S">Settings</DropdownMenuItem>
              <DropdownMenuItem shortcut="⌘K">Shortcuts</DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem hint="Pro">Team</DropdownMenuItem>
              <DropdownMenuSubMenu>
                <DropdownMenuSubMenuTrigger>Invite users</DropdownMenuSubMenuTrigger>
                <DropdownMenuSubMenuContent>
                  <DropdownMenuItem>Email</DropdownMenuItem>
                  <DropdownMenuItem>Message</DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>More...</DropdownMenuItem>
                </DropdownMenuSubMenuContent>
              </DropdownMenuSubMenu>
              <DropdownMenuItem shortcut="⌘+T">New Team</DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add dropdown-menu
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['dropdown-menu.tsx', 'dropdown-menu.css.ts', 'index.ts']}>
      <Tab value="dropdown-menu.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/dropdown-menu/dropdown-menu.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/dropdown-menu/dropdown-menu.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="dropdown-menu.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/dropdown-menu/dropdown-menu.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/dropdown-menu/dropdown-menu.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/dropdown-menu/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/dropdown-menu/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      DropdownMenu,
      DropdownMenuTrigger,
      DropdownMenuSubMenuTrigger,
      DropdownMenuSubMenu,
      DropdownMenuSubMenuContent,
      DropdownMenuGroup,
      DropdownMenuContent,
      DropdownMenuItem,
      DropdownMenuRadioGroup,
      DropdownMenuRadioItem,
      DropdownMenuCheckboxItem,
      DropdownMenuIconWrapper,
      DropdownMenuLabel,
      DropdownMenuSeparator,
      DropdownMenuPortal,
    } from '#/components/dropdown-menu'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      DropdownMenu,
      DropdownMenuTrigger,
      DropdownMenuSubMenuTrigger,
      DropdownMenuSubMenu,
      DropdownMenuSubMenuContent,
      DropdownMenuGroup,
      DropdownMenuContent,
      DropdownMenuItem,
      DropdownMenuRadioGroup,
      DropdownMenuRadioItem,
      DropdownMenuCheckboxItem,
      DropdownMenuIconWrapper,
      DropdownMenuLabel,
      DropdownMenuSeparator,
      DropdownMenuPortal,
    } from 'twistail-react/dropdown-menu'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-dropdown-menu--docs) for more examples.

## Anatomy

```tsx
<DropdownMenu>
  <DropdownMenuTrigger />

  <DropdownMenuPortal>
    <DropdownMenuContent>
      <DropdownMenuLabel />
      <DropdownMenuItem />

      <DropdownMenuGroup>
        <DropdownMenuItem />
      </DropdownMenuGroup>

      <DropdownMenuCheckboxItem>
        <DropdownMenuItemIndicator />
      </DropdownMenuCheckboxItem>

      <DropdownMenuRadioGroup>
        <DropdownMenuRadioItem>
          <DropdownMenuItemIndicator />
        </DropdownMenuRadioItem>
      </DropdownMenuRadioGroup>

      <DropdownMenuSub>
        <DropdownMenuSubTrigger />
        <DropdownMenuPortal>
          <DropdownMenuSubContent />
        </DropdownMenuPortal>
      </DropdownMenuSub>

      <DropdownMenuSeparator />
      <DropdownMenuArrow />
    </DropdownMenuContent>
  </DropdownMenuPortal>
</DropdownMenu>
```


file: docs/components/form.mdx
meta: {
  "title": "Form (preview)",
  "full": false
}

Build forms with the Radix UI Form component, supports built-in validation and custom validation.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-form--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/form#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/form" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/form/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import {
      Form,
      FormControl,
      FormField,
      FormLabel,
      FormMessage,
      FormSubmit,
    } from 'twistail-react/form'

    export default function FormDemo() {
      return (
        <Form className="w-md rounded-lg border border-border p-6 shadow-sm">
          <h2 className="mb-6 font-semibold text-xl">Contact Us</h2>

          <FormField className="mb-4" name="name">
            <FormLabel className="text-foreground/80">Full Name</FormLabel>
            <FormControl
              asChild
              className="mt-1.5 border-input/50 bg-muted/30 focus-visible:bg-background"
            >
              <input type="text" placeholder="Your name" required />
            </FormControl>
            <FormMessage match="valueMissing">Please enter your name</FormMessage>
          </FormField>

          <FormField className="mb-4" name="email">
            <FormLabel className="text-foreground/80">Email Address</FormLabel>
            <FormControl
              asChild
              className="mt-1.5 border-input/50 bg-muted/30 focus-visible:bg-background"
            >
              <input type="email" placeholder="your.email@example.com" required />
            </FormControl>
            <FormMessage match="valueMissing">Please enter your email</FormMessage>
            <FormMessage match="typeMismatch">Please provide a valid email</FormMessage>
          </FormField>

          <FormField className="mb-4" name="subject">
            <FormLabel className="text-foreground/80">Subject</FormLabel>
            <FormControl
              asChild
              className="mt-1.5 border-input/50 bg-muted/30 focus-visible:bg-background"
            >
              <select required defaultValue="">
                <option value="" disabled>
                  Select a subject
                </option>
                <option value="general">General Inquiry</option>
                <option value="support">Technical Support</option>
                <option value="billing">Billing Question</option>
                <option value="other">Other</option>
              </select>
            </FormControl>
            <FormMessage match="valueMissing">Please select a subject</FormMessage>
          </FormField>

          <FormField className="mb-6" name="message">
            <FormLabel className="text-foreground/80">Message</FormLabel>
            <FormControl
              asChild
              className="mt-1.5 min-h-[120px] border-input/50 bg-muted/30 focus-visible:bg-background"
            >
              <textarea placeholder="Your message here..." required />
            </FormControl>
            <FormMessage match="valueMissing">Please enter your message</FormMessage>
          </FormField>

          <FormSubmit className="w-full">Send Message</FormSubmit>
        </Form>
      )
    }

    ```
  </Tab>
</Tabs>

<Callout type="warn" title="Attention">
  At the moment, the Form component is still in preview mode. It is not recommended to use it in production.
  Use with caution. We will continue to improve the component and add more features in the future.
</Callout>

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/layout-components-form--docs) for more examples.

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add form
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['form.tsx', 'form.css.ts', 'index.ts']}>
      <Tab value="form.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/form/form.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/form/form.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="form.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/form/form.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/form/form.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/form/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/form/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Form,
      FormField,
      FormLabel,
      FormControl,
      FormMessage,
      FormValidityState,
      FormSubmit
    } from '#/components/form'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Form,
      FormField,
      FormLabel,
      FormControl,
      FormMessage,
      FormValidityState,
      FormSubmit
    } from 'twistail-react/form'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-form--docs) for more examples.

## Anatomy

```tsx
<Form>
  <FormField>
    <FormLabel />
    <FormControl />
    <FormMessage />
    <FormValidityState />
  </FormField>

  <FormMessage />
  <FormValidityState />

  <FormSubmit />
</Form>
```


file: docs/components/heading.mdx
meta: {
  "title": "Heading",
  "full": false
}

A text element used for section titles with various importance levels.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-heading--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/heading" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/heading/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Heading } from 'twistail-react/heading'

    export default function HeadingDemo() {
      return (
        <div className="flex flex-col gap-4">
          <Heading level="h1">Heading Level 1</Heading>
          <Heading level="h2">Heading Level 2</Heading>
          <Heading level="h3">Heading Level 3</Heading>
          <Heading level="h4">Heading Level 4</Heading>
          <Heading level="h5">Heading Level 5</Heading>
          <Heading level="h6">Heading Level 6</Heading>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add heading
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['heading.tsx', 'heading.css.ts', 'index.ts']}>
      <Tab value="heading.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/heading/heading.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/heading/heading.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="heading.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/heading/heading.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/heading/heading.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/heading/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/heading/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Heading } from '#/components/heading'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Heading } from 'twistail-react/heading'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-heading--docs) for more examples.


file: docs/components/hover-card.mdx
meta: {
  "title": "Hover Card",
  "full": false
}

A card that appears when hovering over a trigger element to display additional information.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-hover-card--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/hover-card#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/hover-card" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/hover-card/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as Lucide from 'lucide-react'
    import { Avatar, AvatarFallback, AvatarImage } from 'twistail-react/avatar'
    import { Button } from 'twistail-react/button'
    import { HoverCard, HoverCardContent, HoverCardTrigger } from 'twistail-react/hover-card'
    import { getInitials } from 'twistail-utils'

    export default function HoverCardDemo() {
      return (
        <HoverCard>
          <HoverCardTrigger asChild>
            <Button variant="link">@riipandi</Button>
          </HoverCardTrigger>
          <HoverCardContent className="w-80">
            <div className="flex items-center justify-between space-x-4">
              <Avatar className="size-14">
                <AvatarImage src="https://github.com/riipandi.png" />
                <AvatarFallback>{getInitials('Aris Ripandi')}</AvatarFallback>
              </Avatar>
              <div className="space-y-1">
                <h4 className="font-semibold text-sm">Aris Ripandi</h4>
                <p className="text-sm">Web artisan and tech enthusiast.</p>
                <div className="flex items-center pt-2">
                  <Lucide.CalendarDays className="mr-2 h-4 w-4 opacity-70" strokeWidth={1.5} />
                  <span className="text-muted-foreground text-xs">Joined 13 years ago</span>
                </div>
              </div>
            </div>
          </HoverCardContent>
        </HoverCard>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add hover-card
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['hover-card.tsx', 'hover-card.css.ts', 'index.ts']}>
      <Tab value="hover-card.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/hover-card/hover-card.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/hover-card/hover-card.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="hover-card.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/hover-card/hover-card.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/hover-card/hover-card.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/hover-card/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/hover-card/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      HoverCard,
      HoverCardTrigger,
      HoverCardContent,
      HoverCardPortal
    } from '#/components/hover-card'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      HoverCard,
      HoverCardTrigger,
      HoverCardContent,
      HoverCardPortal
    } from 'twistail-react/hover-card'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-hover-card--docs) for more examples.

## Anatomy

```tsx
<HoverCard>
  <HoverCardTrigger />
  <HoverCardPortal>
    <HoverCardContent>
      <HoverCardArrow />
    </HoverCardContent>
  </HoverCardPortal>
</HoverCard>
```


file: docs/components/index.mdx
meta: {
  "title": "Components",
  "full": false
}

Twistail offers a collection of foundational UI components designed with accessibility,
customization, and developer experience in mind. Each component is built to seamlessly
integrate into your projects while maintaining consistent behavior across different
environments.

## Layout Components

* [Aspect Ratio](/docs/components/aspect-ratio) - Maintains a consistent width-to-height ratio for content as it resizes.
* [Card](/docs/components/card) - A flexible container for grouping related content and actions.
* [Collapsible](/docs/components/collapsible) - A component that can be expanded or collapsed to show or hide content.
* [Divider](/docs/components/divider) - A visual separator used to create a division between content sections.
* [Scroll Area](/docs/components/scroll-area) - A custom scrollable container with cross-browser compatibility and customizable scrollbars.
* [Sidebar](/docs/components/sidebar) - A navigation component that is typically used to display a list of links or other content.
* [Split Pane](/docs/components/split-pane) - A resizable panel that divides content into two adjustable sections.
* [Table](/docs/components/table) - A component for displaying structured data in rows and columns.

## Display & Typography

* [Avatar](/docs/components/avatar) - An image element with a fallback for representing the user.
* [Blockquote](/docs/components/blockquote) - A styled container for quoting content from another source, typically used for testimonials or citations.
* [Callout](/docs/components/callout) - A highlighted message that attracts attention to important information.
* [Description List](/docs/components/description-list) - A component for displaying name-value pairs in a structured format.
* [Heading](/docs/components/heading) - A text element used for section titles with various importance levels.
* [Kbd](/docs/components/kbd) - Represents keyboard input or keyboard shortcuts in documentation.
* [Text](/docs/components/text) - A versatile typography component for displaying text with various styles and sizes.

## Form Components

* [Button](/docs/components/button) - An interactive element that triggers an action when clicked or pressed.
* [Calendar](/docs/components/calendar) - A foundational date display component that serves as the basis for building date pickers, allowing users to navigate and select dates or date ranges.
* [Checkbox](/docs/components/checkbox) - A control that allows users to select multiple options from a set.
* [Combobox](/docs/components/combobox) - A combination of a text input and a dropdown list for selecting from predefined options.
* [Datetime Picker](/docs/components/datetime-picker) - A component that allows users to select both date and time values through an intuitive interface, supporting various formats and time zones.
* [Form](/docs/components/form) - Build forms with the Radix UI Form component, supports built-in validation and custom validation.
* [Input PIN](/docs/components/input-pin) - A specialized input for entering PIN codes or verification numbers.
* [Input](/docs/components/input) - A form control that allows users to enter text data.
* [Label](/docs/components/label) - A text descriptor for form elements that improves accessibility and usability.
* [Listbox](/docs/components/listbox) - A custom select component that allows users to select item from a list of options.
* [Multi Select](/docs/components/multi-select) - A form control that allows users to select multiple options from a dropdown list.
* [Radio Card Group](/docs/components/radio-card-group) - A group of selectable card options where only one option can be selected at a time.
* [Radio Group](/docs/components/radio-group) - A set of radio buttons where users can select only one option from multiple choices.
* [Select](/docs/components/select) - A vanilla select component with custom styling for a consistent look and feel.
* [Slider](/docs/components/slider) - An input control that allows users to select a value from a specified range by dragging a handle.
* [Switch](/docs/components/switch) - A toggle control that allows users to turn an option on or off, similar to a checkbox.
* [Textarea](/docs/components/textarea) - A multi-line text input control that allows users to enter longer text content.
* [Toggle](/docs/components/toggle) - A two-state button that can be either on or off, typically used for enabling/disabling features.

## Navigation Components

* [Breadcrumb](/docs/components/breadcrumb) - A navigation aid that helps users understand their location within a website hierarchy.
* [Command](/docs/components/command) - A keyboard-centric interface for navigating and taking actions quickly.
* [Menubar](/docs/components/menubar) - A horizontal navigation component typically found at the top of applications.
* [Navigation Menu](/docs/components/navigation-menu) - A hierarchical navigation component for complex site structures.
* [Pagination](/docs/components/pagination) - A navigation system that helps users move through multiple pages of content.
* [Tab Navigation](/docs/components/tab-navigation) - A navigation component that organizes content into multiple tabs, showing one section at a time.
* [Tabs](/docs/components/tabs) - A set of layered sections of content that display one panel at a time.

## Disclosure Components

* [Accordion](/docs/components/accordion) - A vertically stacked set of interactive headings that each reveal a section of content.
* [Alert Dialog](/docs/components/alert-dialog) - A modal dialog that interrupts the user with important content and expects a response.
* [Context Menu](/docs/components/context-menu) - A menu that appears upon user interaction, typically right-clicking, providing contextual actions.
* [Dialog](/docs/components/dialog) - A modal window that appears in front of app content to provide critical information or request user input.
* [Drawer](/docs/components/drawer) - A panel that slides in from the edge of the screen, typically containing navigation or supplementary content.
* [Dropdown Menu](/docs/components/dropdown-menu) - A toggleable menu that displays a list of actions or options.
* [Hover Card](/docs/components/hover-card) - A card that appears when hovering over a trigger element to display additional information.
* [Popover](/docs/components/popover) - A floating element that displays contextual information or UI related to a trigger element.
* [Tooltip](/docs/components/tooltip) - A small informational popup that appears when users hover over or focus on an element.

## Feedback Components

* [Badge](/docs/components/badge) - A small visual indicator for highlighting status, categories, or labels.
* [Skeleton](/docs/components/skeleton) - A placeholder UI used to indicate that content is loading, improving perceived performance.
* [Toast](/docs/components/toast) - A brief, non-intrusive notification that appears temporarily to provide feedback.

## Data Visualization Components

* [Area Chart](/docs/components/area-chart) - A chart that displays quantitative data using a filled area below a line, useful for showing volume or cumulative values over time.
* [Bar Chart](/docs/components/bar-chart) - A chart that presents categorical data with rectangular bars proportional to the values they represent.
* [Bar List](/docs/components/bar-list) - A component that combines a list with horizontal bars to visualize comparative values across categories.
* [Category Bar](/docs/components/category-bar) - A component for displaying categorized data with visual indicators of distribution or proportion.
* [Combo Chart](/docs/components/combo-chart) - A hybrid chart that combines multiple chart types (like bar and line) to compare different data series with different scales.
* [Donut Chart](/docs/components/donut-chart) - A circular chart with a hole in the center that shows the proportional composition of a dataset.
* [Line Chart](/docs/components/line-chart) - A chart that displays information as a series of data points connected by straight line segments.
* [Progress Bar](/docs/components/progress-bar) - A visual indicator showing the completion progress of an operation or task.
* [Progress Circle](/docs/components/progress-circle) - A circular progress indicator that visualizes completion percentage in a compact format.
* [Spark Chart](/docs/components/spark-chart) - A small, simple, word-sized chart that shows the general trend of a measurement without axes or coordinates.
* [Tracker](/docs/components/tracker) - A component that visualizes progress through a series of steps or stages in a process.


file: docs/components/input-pin.mdx
meta: {
  "title": "Input PIN",
  "full": false
}

A specialized input for entering PIN codes or verification numbers.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-input-pin--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://input-otp.rodz.dev" external>
    Input OTP Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/input-pin" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/input-pin/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { InputPin, InputPinGroup, InputPinSlot } from 'twistail-react/input-pin'

    export default function InputPinDemo() {
      return (
        <InputPin maxLength={4} inputSize="lg">
          <InputPinGroup>
            <InputPinSlot index={0} />
            <InputPinSlot index={1} />
            <InputPinSlot index={2} />
            <InputPinSlot index={3} />
          </InputPinGroup>
        </InputPin>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add input-pin
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['input-pin.tsx', 'input-pin.css.ts', 'index.ts']}>
      <Tab value="input-pin.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/input-pin/input-pin.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/input-pin/input-pin.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="input-pin.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/input-pin/input-pin.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/input-pin/input-pin.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/input-pin/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/input-pin/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      InputPin,
      InputPinGroup,
      InputPinSlot,
      InputPinSeparator
    } from '#/components/input-pin'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      InputPin,
      InputPinGroup,
      InputPinSlot,
      InputPinSeparator
    } from 'twistail-react/input-pin'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-input-pin--docs) for more examples.


file: docs/components/input.mdx
meta: {
  "title": "Input",
  "full": false
}

A form control that allows users to enter text data.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-input--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/form#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/input" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/input/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Input } from 'twistail-react/input'

    export default function InputDemo() {
      return (
        <div className="flex w-xs flex-col gap-2">
          <Input placeholder="Enter password" id="password" name="password" type="password" />
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add input
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['input.tsx', 'input.css.ts', 'index.ts']}>
      <Tab value="input.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/input/input.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/input/input.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="input.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/input/input.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/input/input.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/input/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/input/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Input } from '#/components/input'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Input } from 'twistail-react/input'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-input--docs) for more examples.


file: docs/components/kbd.mdx
meta: {
  "title": "Kbd",
  "full": false
}

Represents keyboard input or keyboard shortcuts in documentation.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/story/base-components-command--with-trigger" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/kbd" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/kbd/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Kbd } from 'twistail-react/kbd'

    export default function KbdDemo() {
      return (
        <div className="flex flex-col gap-4">
          <Kbd keys={['ctrl', 'command', 'option']} size="md">
            J
          </Kbd>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add kbd
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['kbd.tsx', 'kbd.css.ts', 'index.ts']}>
      <Tab value="kbd.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/kbd/kbd.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/kbd/kbd.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="kbd.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/kbd/kbd.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/kbd/kbd.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/kbd/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/kbd/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Kbd } from '#/components/kbd'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Kbd } from 'twistail-react/kbd'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/story/base-components-command--with-trigger) for more examples.

## Credits

This component is based on [Wedges Kbd](https://github.com/lmsqueezy/wedges/tree/main/packages/wedges/src/components/Kbd)
by LemonSqueezy, licensed under [MIT License](https://github.com/lmsqueezy/wedges/blob/main/LICENSE).


file: docs/components/label.mdx
meta: {
  "title": "Label",
  "full": false
}

A text descriptor for form elements that improves accessibility and usability.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-label--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/label#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/label" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/label/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Checkbox } from 'twistail-react/checkbox'
    import { Label } from 'twistail-react/label'

    export default function LabelDemo() {
      return (
        <form className="flex items-center gap-2">
          <Checkbox id="r1" />
          <Label htmlFor="r1">Accept terms and conditions</Label>
        </form>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add label
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['label.tsx', 'label.css.ts', 'index.ts']}>
      <Tab value="label.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/label/label.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/label/label.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="label.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/label/label.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/label/label.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/label/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/label/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Label } from '#/components/label'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Label } from 'twistail-react/label'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-label--docs) for more examples.

## Anatomy

```tsx
<Label />
```


file: docs/components/line-chart.mdx
meta: {
  "title": "Line Chart",
  "full": false
}

A chart that displays information as a series of data points connected by straight line segments.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-line-chart--default" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://recharts.org/en-US/api" external>
    Recharts Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/line-chart" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/line-chart/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    // import { LineChart } from 'twistail-react/line-chart'

    export default function Demo() {
      return null
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add line-chart
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['line-chart.tsx', 'line-chart.css.ts', 'index.ts']}>
      <Tab value="line-chart.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/line-chart/line-chart.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/line-chart/line-chart.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="line-chart.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/line-chart/line-chart.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/line-chart/line-chart.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/line-chart/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/line-chart/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {} from '#/components/line-chart'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {} from 'twistail-react/line-chart'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-line-chart--default) for more examples.

## Anatomy

```tsx
// WIP
```


file: docs/components/listbox.mdx
meta: {
  "title": "Listbox",
  "full": false
}

A custom select component that allows users to select item from a list of options.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-listbox--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/select#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/listbox" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/listbox/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import {
      Listbox,
      ListboxContent,
      ListboxItem,
      ListboxTrigger,
      ListboxValue,
    } from 'twistail-react/listbox'

    const data = [
      {
        value: 'dress-shirt-striped',
        label: 'Striped Dress Shirt',
      },
      {
        value: 'relaxed-button-down',
        label: 'Relaxed Fit Button Down',
      },
      {
        value: 'slim-button-down',
        label: 'Slim Fit Button Down',
      },
      {
        value: 'dress-shirt-solid',
        label: 'Solid Dress Shirt',
        disabled: true,
      },
      {
        value: 'dress-shirt-check',
        label: 'Check Dress Shirt',
      },
    ]

    export default function ListboxDemo() {
      return (
        <Listbox>
          <ListboxTrigger className="w-64">
            <ListboxValue placeholder="Listbox" />
          </ListboxTrigger>
          <ListboxContent>
            {data.map((item) => (
              <ListboxItem key={item.value} value={item.value}>
                {item.label}
              </ListboxItem>
            ))}
          </ListboxContent>
        </Listbox>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add listbox
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['listbox.tsx', 'listbox.css.ts', 'index.ts']}>
      <Tab value="listbox.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/listbox/listbox.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/listbox/listbox.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="listbox.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/listbox/listbox.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/listbox/listbox.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/listbox/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/listbox/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Listbox,
      ListboxContent,
      ListboxGroup,
      ListboxGroupLabel,
      ListboxItem,
      ListboxPortal,
      ListboxSeparator,
      ListboxTrigger,
      ListboxValue,
    } from '#/components/listbox'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Listbox,
      ListboxContent,
      ListboxGroup,
      ListboxGroupLabel,
      ListboxItem,
      ListboxPortal,
      ListboxSeparator,
      ListboxTrigger,
      ListboxValue,
    } from 'twistail-react/listbox'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-listbox--docs) for more examples.


file: docs/components/menubar.mdx
meta: {
  "title": "Menubar",
  "full": false
}

A horizontal navigation component typically found at the top of applications.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/layout-components-menubar--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/menubar#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/menubar" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/menubar/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as Lucide from 'lucide-react'
    import { useState } from 'react'
    import {
      Menubar,
      MenubarCheckboxItem,
      MenubarContent,
      MenubarGroup,
      MenubarItem,
      MenubarMenu,
      MenubarRadioGroup,
      MenubarRadioItem,
      MenubarSeparator,
      MenubarSub,
      MenubarSubContent,
      MenubarSubTrigger,
      MenubarTrigger,
    } from 'twistail-react/menubar'

    export default function MenubarDemo() {
      const [position, setPosition] = useState('benoit')
      const [showBookmarksBar, setShowBookmarksBar] = useState<boolean>(true)
      const [showFullURLs, setShowFullURLs] = useState<boolean>(true)
      const [showDeveloperTools, setShowDeveloperTools] = useState<boolean>(false)

      return (
        <Menubar>
          <MenubarMenu>
            <MenubarTrigger>File</MenubarTrigger>
            <MenubarContent>
              <MenubarGroup>
                <MenubarItem shortcut="⌘T">New Tab</MenubarItem>
                <MenubarItem shortcut="⌘N">New Window</MenubarItem>
                <MenubarItem disabled>New Incognito Window</MenubarItem>
              </MenubarGroup>
              <MenubarSeparator />
              <MenubarGroup>
                <MenubarSub>
                  <MenubarSubTrigger>Share</MenubarSubTrigger>
                  <MenubarSubContent>
                    <MenubarItem>
                      <span className="flex items-center gap-x-2">
                        <Lucide.Mail className="size-4 text-inherit" />
                        <span>Email link</span>
                      </span>
                    </MenubarItem>
                    <MenubarItem>
                      <span className="flex items-center gap-x-2">
                        <Lucide.MessageSquare className="size-4 text-inherit" />
                        <span>Messages</span>
                      </span>
                    </MenubarItem>
                    <MenubarSub>
                      <MenubarSubTrigger>
                        <span className="flex items-center gap-x-2">
                          <Lucide.Share2 className="size-4 text-inherit" />
                          <span>Social</span>
                        </span>
                      </MenubarSubTrigger>
                      <MenubarSubContent>
                        <MenubarItem>
                          <span className="flex items-center gap-x-2">
                            <Lucide.Twitter className="size-4 text-inherit" />
                            <span>Twitter</span>
                          </span>
                        </MenubarItem>
                        <MenubarItem>
                          <span className="flex items-center gap-x-2">
                            <Lucide.Facebook className="size-4 text-inherit" />
                            <span>Facebook</span>
                          </span>
                        </MenubarItem>
                      </MenubarSubContent>
                    </MenubarSub>
                  </MenubarSubContent>
                </MenubarSub>
              </MenubarGroup>
              <MenubarSeparator />
              <MenubarItem shortcut="⌘P">Print...</MenubarItem>
              <MenubarItem shortcut="⌘Q">Exit</MenubarItem>
            </MenubarContent>
          </MenubarMenu>

          <MenubarMenu>
            <MenubarTrigger>Edit</MenubarTrigger>
            <MenubarContent>
              <MenubarItem shortcut="⌘Z">Undo</MenubarItem>
              <MenubarItem shortcut="⇧⌘Z">Redo</MenubarItem>
              <MenubarSeparator />
              <MenubarSub>
                <MenubarSubTrigger>Find</MenubarSubTrigger>
                <MenubarSubContent>
                  <MenubarItem shortcut="⌘F">Find...</MenubarItem>
                  <MenubarItem shortcut="⌘G">Find Next</MenubarItem>
                  <MenubarItem shortcut="⇧⌘G">Find Previous</MenubarItem>
                </MenubarSubContent>
              </MenubarSub>
              <MenubarSeparator />
              <MenubarItem shortcut="⌘X">Cut</MenubarItem>
              <MenubarItem shortcut="⌘C">Copy</MenubarItem>
              <MenubarItem shortcut="⌘V">Paste</MenubarItem>
            </MenubarContent>
          </MenubarMenu>

          <MenubarMenu>
            <MenubarTrigger>View</MenubarTrigger>
            <MenubarContent>
              <MenubarCheckboxItem
                checked={showBookmarksBar}
                onCheckedChange={setShowBookmarksBar}
                shortcut="⌘B"
              >
                Always Show Bookmarks Bar
              </MenubarCheckboxItem>
              <MenubarCheckboxItem checked={showFullURLs} onCheckedChange={setShowFullURLs}>
                Always Show Full URLs
              </MenubarCheckboxItem>
              <MenubarCheckboxItem
                checked={showDeveloperTools}
                onCheckedChange={setShowDeveloperTools}
                shortcut="⌥⌘I"
              >
                Developer Tools
              </MenubarCheckboxItem>
              <MenubarSeparator />
              <MenubarItem inset shortcut="⌘R">
                Reload
              </MenubarItem>
              <MenubarItem disabled inset shortcut="⇧⌘R">
                Force Reload
              </MenubarItem>
              <MenubarSeparator />
              <MenubarItem inset shortcut="F11">
                Toggle Fullscreen
              </MenubarItem>
              <MenubarSeparator />
              <MenubarItem inset>Hide Sidebar</MenubarItem>
            </MenubarContent>
          </MenubarMenu>

          <MenubarMenu>
            <MenubarTrigger>Profiles</MenubarTrigger>
            <MenubarContent>
              <MenubarRadioGroup value={position} onValueChange={setPosition}>
                <MenubarRadioItem value="andy" hint="Admin">
                  Andy
                </MenubarRadioItem>
                <MenubarRadioItem value="benoit" hint="Owner">
                  Benoit
                </MenubarRadioItem>
                <MenubarRadioItem value="luis" hint="Member">
                  Luis
                </MenubarRadioItem>
              </MenubarRadioGroup>
              <MenubarSeparator />
              <MenubarItem inset>Edit...</MenubarItem>
              <MenubarSeparator />
              <MenubarItem inset>
                <span className="flex items-center gap-x-2">
                  <Lucide.UserPlus className="size-4 text-inherit" />
                  <span>Add Profile...</span>
                </span>
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
        </Menubar>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add menubar
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['menubar.tsx', 'menubar.css.ts', 'index.ts']}>
      <Tab value="menubar.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/menubar/menubar.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/menubar/menubar.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="menubar.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/menubar/menubar.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/menubar/menubar.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/menubar/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/menubar/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Menubar,
      MenubarMenu,
      MenubarTrigger,
      MenubarContent,
      MenubarItem,
      MenubarSeparator,
      MenubarLabel,
      MenubarCheckboxItem,
      MenubarRadioGroup,
      MenubarRadioItem,
      MenubarPortal,
      MenubarSubContent,
      MenubarSubTrigger,
      MenubarGroup,
      MenubarSub,
    } from '#/components/menubar'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Menubar,
      MenubarMenu,
      MenubarTrigger,
      MenubarContent,
      MenubarItem,
      MenubarSeparator,
      MenubarLabel,
      MenubarCheckboxItem,
      MenubarRadioGroup,
      MenubarRadioItem,
      MenubarPortal,
      MenubarSubContent,
      MenubarSubTrigger,
      MenubarGroup,
      MenubarSub,
    } from 'twistail-react/menubar'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/layout-components-menubar--docs) for more examples.

## Anatomy

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarPortal>
      <MenubarContent>
        <MenubarLabel />
        <MenubarItem />

        <MenubarGroup>
          <MenubarItem />
        </MenubarGroup>

        <MenubarCheckboxItem>
          <MenubarItemIndicator />
        </MenubarCheckboxItem>

        <MenubarRadioGroup>
          <MenubarRadioItem>
            <MenubarItemIndicator />
          </MenubarRadioItem>
        </MenubarRadioGroup>

        <MenubarSub>
          <MenubarSubTrigger />
          <MenubarPortal>
            <MenubarSubContent />
          </MenubarPortal>
        </MenubarSub>

        <MenubarSeparator />
        <MenubarArrow />
      </MenubarContent>
    </MenubarPortal>
  </MenubarMenu>
</Menubar>
```


file: docs/components/multi-select.mdx
meta: {
  "title": "Multi Select",
  "full": false
}

A form control that allows users to select multiple options from a dropdown list.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-multi-select--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/popover#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/multi-select" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/multi-select/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { MultiSelect } from 'twistail-react/multi-select'

    const languages = [
      {
        value: 'javascript',
        label: 'JavaScript',
      },
      {
        value: 'typescript',
        label: 'TypeScript',
      },
      {
        value: 'python',
        label: 'Python',
      },
      {
        value: 'rust',
        label: 'Rust',
      },
      {
        value: 'go',
        label: 'Go',
      },
    ]

    export default function MultiSelectDemo() {
      const handleChange = (value: string[]) => {
        console.info('Selected values:', value)
      }

      return (
        <div className="w-[360px]">
          <MultiSelect
            options={languages}
            placeholder="Choose programming languages"
            onValueChange={handleChange}
            maxCount={3}
          />
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add multi-select
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['multi-select.tsx', 'multi-select.css.ts', 'index.ts']}>
      <Tab value="multi-select.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/multi-select/multi-select.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/multi-select/multi-select.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="multi-select.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/multi-select/multi-select.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/multi-select/multi-select.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/multi-select/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/multi-select/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { MultiSelect } from '#/components/multi-select'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { MultiSelect } from 'twistail-react/multi-select'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-multi-select--docs) for more examples.

## Credits

This component is based on [Multi-Select Component](https://github.com/sersavan/shadcn-multi-select-component)
by `sersavan`, licensed under [MIT License](https://github.com/sersavan/shadcn-multi-select-component/blob/main/LICENSE).


file: docs/components/navigation-menu.mdx
meta: {
  "title": "Navigation Menu",
  "full": false
}

A hierarchical navigation component for complex site structures.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/layout-components-navigation-menu--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/navigation-menu#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/navigation-menu" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/navigation-menu/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-start justify-start gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as React from 'react'
    import {
      NavigationMenu,
      NavigationMenuContent,
      NavigationMenuItem,
      NavigationMenuLink,
      NavigationMenuList,
      NavigationMenuTrigger,
      navigationMenuStyles,
    } from 'twistail-react/navigation-menu'
    import { clx } from 'twistail-utils'

    const components: { title: string; href: string; description: string }[] = [
      {
        title: 'Alert Dialog',
        href: '#',
        description: `A modal dialog that interrupts the user with important content and expects a response.`,
      },
      {
        title: 'Hover Card',
        href: '#',
        description: 'For sighted users to preview content available behind a link.',
      },
      {
        title: 'Progress',
        href: '#',
        description: `Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.`,
      },
      {
        title: 'Scroll-area',
        href: '#',
        description: 'Visually or semantically separates content.',
      },
      {
        title: 'Tabs',
        href: '#',
        description: `A set of layered sections of content—known as tab panels—that are displayed one at a time.`,
      },
      {
        title: 'Tooltip',
        href: '#',
        description: `A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.`,
      },
    ]

    const Logo = ({ className }: { className?: string }) => (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={176}
        height={40}
        fill="none"
        viewBox="0 0 176 40"
        className={className}
      >
        <path
          fill="#283841"
          fillRule="evenodd"
          d="M15 28a5 5 0 0 1-5-5V0H0v23c0 8.284 6.716 15 15 15h11V28H15ZM45 10a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-19 9C26 8.507 34.507 0 45 0s19 8.507 19 19-8.507 19-19 19-19-8.507-19-19ZM153 10a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9Zm-19 9c0-10.493 8.507-19 19-19s19 8.507 19 19-8.507 19-19 19-19-8.507-19-19ZM85 0C74.507 0 66 8.507 66 19s8.507 19 19 19h28c1.969 0 3.868-.3 5.654-.856L124 40l5.768-10.804A19.007 19.007 0 0 0 132 20.261V19c0-10.493-8.507-19-19-19H85Zm37 19a9 9 0 0 0-9-9H85a9 9 0 1 0 0 18h28a9 9 0 0 0 9-8.93V19Z"
          clipRule="evenodd"
        />
        <path fill="#283841" d="M176 2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" />
      </svg>
    )

    const ListItem = React.forwardRef<React.ComponentRef<'a'>, React.ComponentPropsWithoutRef<'a'>>(
      ({ className, title, children, ...props }, forwardedRef) => {
        return (
          <li>
            <NavigationMenuLink asChild>
              <a
                ref={forwardedRef}
                className={clx(
                  'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none',
                  'transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
                  className
                )}
                {...props}
              >
                <div className="font-medium text-sm leading-none">{title}</div>
                <p className="line-clamp-2 text-muted-foreground text-sm leading-snug">{children}</p>
              </a>
            </NavigationMenuLink>
          </li>
        )
      }
    )

    ListItem.displayName = 'ListItem'

    export default function NavigationMenuDemo() {
      return (
        <NavigationMenu className="z-[999] mx-auto">
          <NavigationMenuList className="gap-2">
            <NavigationMenuItem>
              <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
              {/* FIXME: The content has wrong position */}
              <NavigationMenuContent>
                <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[580px] lg:grid-cols-[.75fr_1fr]">
                  <li className="row-span-3">
                    <NavigationMenuLink className="flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md">
                      <Logo className="h-4 w-fit" />
                      <div className="mt-4 mb-2 font-medium text-lg">Twistail</div>
                      <p className="text-muted-foreground text-sm leading-tight">
                        Modular and extensible copy-paste React UI components powered by Radix UI and
                        Tailwind CSS.
                      </p>
                    </NavigationMenuLink>
                  </li>
                  <ListItem href="#" title="Introduction">
                    Re-usable components built using Radix UI and Tailwind CSS.
                  </ListItem>
                  <ListItem href="#" title="Installation">
                    How to install dependencies and structure your app.
                  </ListItem>
                  <ListItem href="#" title="Typography">
                    Styles for headings, paragraphs, lists...etc
                  </ListItem>
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Components</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
                  {components.map((component) => (
                    <ListItem key={component.title} title={component.title} href={component.href}>
                      {component.description}
                    </ListItem>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink className={navigationMenuStyles().trigger()}>
                Documentation
              </NavigationMenuLink>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add navigation-menu
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['navigation-menu.tsx', 'navigation-menu.css.ts', 'index.ts']}>
      <Tab value="navigation-menu.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/navigation-menu/navigation-menu.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/navigation-menu/navigation-menu.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="navigation-menu.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/navigation-menu/navigation-menu.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/navigation-menu/navigation-menu.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/navigation-menu/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/navigation-menu/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      NavigationMenu,
      NavigationMenuList,
      NavigationMenuItem,
      NavigationMenuContent,
      NavigationMenuTrigger,
      NavigationMenuLink,
      NavigationMenuIndicator,
      NavigationMenuViewport,
    } from '#/components/navigation-menu'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      NavigationMenu,
      NavigationMenuList,
      NavigationMenuItem,
      NavigationMenuContent,
      NavigationMenuTrigger,
      NavigationMenuLink,
      NavigationMenuIndicator,
      NavigationMenuViewport,
    } from 'twistail-react/navigation-menu'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/layout-components-navigation-menu--docs) for more examples.

## Anatomy

```tsx
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent>
        <NavigationMenuLink />
      </NavigationMenuContent>
    </NavigationMenuItem>

    <NavigationMenuItem>
      <NavigationMenuLink />
    </NavigationMenuItem>

    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent>
        <NavigationMenuSub>
          <NavigationMenuList />
          <NavigationMenuViewport />
        </NavigationMenuSub>
      </NavigationMenuContent>
    </NavigationMenuItem>

    <NavigationMenuIndicator />
  </NavigationMenuList>

  <NavigationMenuViewport />
</NavigationMenu>
```


file: docs/components/pagination.mdx
meta: {
  "title": "Pagination",
  "full": false
}

A navigation system that helps users move through multiple pages of content.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-pagination--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/pagination" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/pagination/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import {
      Pagination,
      PaginationContent,
      PaginationEllipsis,
      PaginationItem,
      PaginationLink,
      PaginationNext,
      PaginationPrevious,
    } from 'twistail-react/pagination'

    // Helper function to render pagination items
    const renderPaginationItems = (activeIndex = 2) => {
      const pages = [1, 2, 3, null, 8, 9, 10] // null represents ellipsis

      return (
        <>
          <PaginationItem>
            <PaginationPrevious href="#" />
          </PaginationItem>
          {pages.map((page) => (
            <PaginationItem key={page}>
              {page === null ? (
                <PaginationEllipsis />
              ) : (
                <PaginationLink href="#" isActive={page === activeIndex}>
                  {page}
                </PaginationLink>
              )}
            </PaginationItem>
          ))}
          <PaginationItem>
            <PaginationNext href="#" />
          </PaginationItem>
        </>
      )
    }

    export default function PaginationDemo() {
      return (
        <Pagination>
          <PaginationContent>{renderPaginationItems()}</PaginationContent>
        </Pagination>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add pagination
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['pagination.tsx', 'pagination.css.ts', 'index.ts']}>
      <Tab value="pagination.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/pagination/pagination.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/pagination/pagination.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="pagination.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/pagination/pagination.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/pagination/pagination.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/pagination/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/pagination/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Pagination,
      PaginationContent,
      PaginationEllipsis,
      PaginationItem,
      PaginationLink,
      PaginationNext,
      PaginationPrevious,
    } from '#/components/pagination'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Pagination,
      PaginationContent,
      PaginationEllipsis,
      PaginationItem,
      PaginationLink,
      PaginationNext,
      PaginationPrevious,
    } from 'twistail-react/pagination'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-pagination--docs) for more examples.


file: docs/components/popover.mdx
meta: {
  "title": "Popover",
  "full": false
}

A floating element that displays contextual information or UI related to a trigger element.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-popover--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/popover#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/popover" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/popover/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Button } from 'twistail-react/button'
    import { Input } from 'twistail-react/input'
    import { Label } from 'twistail-react/label'
    import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from 'twistail-react/popover'

    export default function PopoverDemo() {
      return (
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline">Open Form</Button>
          </PopoverTrigger>
          <PopoverContent className="p-0">
            <form>
              <div className="flex flex-col gap-2 p-2">
                <label htmlFor="number">Salary</label>
                <Input id="number" name="number" type="number" placeholder="$100K" />
              </div>
              <div className="flex flex-col gap-2 p-2">
                <Label htmlFor="name">Name</Label>
                <Input id="name" name="name" type="text" placeholder="Emma" />
              </div>
              <div className="flex items-center gap-2 border-gray-200 border-t p-2 dark:border-gray-800">
                <PopoverClose asChild>
                  <Button className="w-full" variant="secondary" size="sm">
                    Clear
                  </Button>
                </PopoverClose>
                <Button className="mx-auto w-full" type="submit" size="sm">
                  Apply
                </Button>
              </div>
            </form>
          </PopoverContent>
        </Popover>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add popover
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['popover.tsx', 'popover.css.ts', 'index.ts']}>
      <Tab value="popover.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/popover/popover.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/popover/popover.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="popover.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/popover/popover.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/popover/popover.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/popover/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/popover/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Popover,
      PopoverAnchor,
      PopoverClose,
      PopoverContent,
      PopoverTrigger,
      PopoverPortal
    } from '#/components/popover'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Popover,
      PopoverAnchor,
      PopoverClose,
      PopoverContent,
      PopoverTrigger,
      PopoverPortal
    } from 'twistail-react/popover'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-popover--docs) for more examples.

## Anatomy

```tsx
<Popover>
  <PopoverTrigger />
  <PopoverAnchor />
  <PopoverPortal>
    <PopoverContent>
      <PopoverClose />
      <PopoverArrow />
    </PopoverContent>
  </PopoverPortal>
</Popover>
```


file: docs/components/progress-bar.mdx
meta: {
  "title": "Progress Bar",
  "full": false
}

A visual indicator showing the completion progress of an operation or task.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-progress-bar--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/progress" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/progress-bar" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/progress-bar/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as React from 'react'
    import { ProgressBar } from 'twistail-react/progress-bar'

    export default function ProgressBarDemo() {
      const [progress, setProgress] = React.useState(0)

      React.useEffect(() => {
        const timer = setTimeout(() => {
          setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10))
        }, 1000)
        return () => clearTimeout(timer)
      }, [progress])

      return (
        <div className="mx-auto w-full max-w-lg space-y-4">
          <ProgressBar value={progress} label={`${progress}%`} />
          <p className="text-muted-foreground text-sm">
            Progress automatically increments every second
          </p>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add progress-bar
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['progress-bar.tsx', 'progress-bar.css.ts', 'index.ts']}>
      <Tab value="progress-bar.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/progress-bar/progress-bar.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/progress-bar/progress-bar.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="progress-bar.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/progress-bar/progress-bar.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/progress-bar/progress-bar.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/progress-bar/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/progress-bar/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { ProgressBar } from '#/components/progress-bar'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { ProgressBar } from 'twistail-react/progress-bar'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-progress-bar--docs) for more examples.

## Props

<TypeTable
  type={{
  value: {
    description: 'Current progress value',
    type: 'number',
    default: '0',
  },
  max: {
    description: 'Maximum progress value',
    type: 'number',
    default: '100',
  },
  variant: {
    description: 'Visual style variant of the progress bar',
    type: 'default | neutral | success | warning | error',
    default: 'default',
  },
  size: {
    description: 'Size of the progress bar',
    type: 'sm | md | lg',
    default: 'md',
  },
  animated: {
    description: 'Whether to animate progress changes',
    type: 'boolean',
    default: 'true',
  },
  label: {
    description: 'Optional label to display next to the progress bar',
    type: 'string',
    default: undefined,
  },
  labelId: {
    description: 'ID for the label element (for accessibility)',
    type: 'string',
    default: undefined,
  },
  className: {
    description: 'Additional CSS class for the progress bar container',
    type: 'string',
    default: undefined,
  },
}}
/>


file: docs/components/progress-circle.mdx
meta: {
  "title": "Progress Circle",
  "full": false
}

A circular progress indicator that visualizes completion percentage in a compact format.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-progress-circle--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/progress-circle" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/progress-circle/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { ProgressCircle } from 'twistail-react/progress-circle'

    export default function ProgressCircleDemo() {
      return (
        <div className="flex flex-wrap gap-6">
          <div className="flex flex-col items-center gap-2">
            <ProgressCircle value={65} variant="default">
              <span className="font-medium text-sm">65%</span>
            </ProgressCircle>
            <span className="text-sm">Default</span>
          </div>
          <div className="flex flex-col items-center gap-2">
            <ProgressCircle value={65} variant="neutral">
              <span className="font-medium text-sm">65%</span>
            </ProgressCircle>
            <span className="text-sm">Neutral</span>
          </div>
          <div className="flex flex-col items-center gap-2">
            <ProgressCircle value={65} variant="warning">
              <span className="font-medium text-sm">65%</span>
            </ProgressCircle>
            <span className="text-sm">Warning</span>
          </div>
          <div className="flex flex-col items-center gap-2">
            <ProgressCircle value={65} variant="error">
              <span className="font-medium text-sm">65%</span>
            </ProgressCircle>
            <span className="text-sm">Error</span>
          </div>
          <div className="flex flex-col items-center gap-2">
            <ProgressCircle value={65} variant="success">
              <span className="font-medium text-sm">65%</span>
            </ProgressCircle>
            <span className="text-sm">Success</span>
          </div>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add progress-circle
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['progress-circle.tsx', 'progress-circle.css.ts', 'index.ts']}>
      <Tab value="progress-circle.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/progress-circle/progress-circle.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/progress-circle/progress-circle.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="progress-circle.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/progress-circle/progress-circle.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/progress-circle/progress-circle.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/progress-circle/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/progress-circle/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { ProgressCircle } from '#/components/progress-circle'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { ProgressCircle } from 'twistail-react/progress-circle'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-progress-circle--docs) for more examples.

## Props

<TypeTable
  type={{
  value: {
    description: 'Current progress value',
    type: 'number',
    default: '0',
  },
  max: {
    description: 'Maximum progress value',
    type: 'number',
    default: '100',
  },
  variant: {
    description: 'Visual style variant of the progress circle',
    type: 'default | neutral | success | warning | error',
    default: 'default',
  },
  radius: {
    description: 'Radius of the circle in pixels',
    type: 'number',
    default: '32',
  },
  strokeWidth: {
    description: 'Width of the progress stroke in pixels',
    type: 'number',
    default: '6',
  },
  animated: {
    description: 'Whether to animate progress changes',
    type: 'boolean',
    default: 'true',
  },
  children: {
    description: 'Content to display in the center of the circle',
    type: 'React.ReactNode',
    default: undefined,
  },
  className: {
    description: 'Additional CSS class for the progress circle container',
    type: 'string',
    default: undefined,
  },
}}
/>

## Credits

This component is based on [Progress Circle](https://tremor.so/docs/visualizations/progress-circle)
by [Tremor](https://tremor.so), licensed under [Apache License 2.0](https://github.com/tremorlabs/tremor/blob/main/LICENSE).


file: docs/components/radio-card-group.mdx
meta: {
  "title": "Radio Card Group",
  "full": false
}

A group of selectable card options where only one option can be selected at a time.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-radio-card-group--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/radio-group#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/radio-card-group" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/radio-card-group/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { RadioCardGroup, RadioCardIndicator, RadioCardItem } from 'twistail-react/radio-card-group'

    export default function RadioCardGroupDemo() {
      return (
        <RadioCardGroup className="w-full max-w-sm">
          <RadioCardItem value="1">
            <div className="flex items-center gap-3">
              <RadioCardIndicator />
              <span>Software Engineer</span>
            </div>
          </RadioCardItem>
          <RadioCardItem value="2">
            <div className="flex items-center gap-3">
              <RadioCardIndicator />
              <span>Platform Engineer</span>
            </div>
          </RadioCardItem>
          <RadioCardItem value="3">
            <div className="flex items-center gap-3">
              <RadioCardIndicator />
              <span>Hardware Engineer</span>
            </div>
          </RadioCardItem>
        </RadioCardGroup>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add radio-card-group
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['radio-card-group.tsx', 'radio-card-group.css.ts', 'index.ts']}>
      <Tab value="radio-card-group.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/radio-card-group/radio-card-group.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/radio-card-group/radio-card-group.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="radio-card-group.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/radio-card-group/radio-card-group.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/radio-card-group/radio-card-group.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/radio-card-group/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/radio-card-group/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      RadioCardGroup,
      RadioCardIndicator,
      RadioCardItem
    } from '#/components/radio-card-group'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      RadioCardGroup,
      RadioCardIndicator,
      RadioCardItem
    } from 'twistail-react/radio-card-group'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-radio-card-group--docs) for more examples.


file: docs/components/radio-group.mdx
meta: {
  "title": "Radio Group",
  "full": false
}

A set of radio buttons where users can select only one option from multiple choices.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-radio-group--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/radio-group#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/radio-group" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/radio-group/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Label } from 'twistail-react/label'
    import { RadioGroup, RadioGroupItem } from 'twistail-react/radio-group'

    export default function RadioGroupDemo() {
      return (
        <div className="flex justify-center">
          <RadioGroup>
            <div className="flex items-center gap-x-3">
              <RadioGroupItem value="1" id="radio_1" />
              <Label htmlFor="radio_1">First come first serve</Label>
            </div>
            <div className="flex items-center gap-x-3">
              <RadioGroupItem value="2" id="radio_2" />
              <Label htmlFor="radio_2">By appointment</Label>
            </div>
            <div className="flex items-center gap-x-3">
              <RadioGroupItem value="3" id="radio_3" />
              <Label htmlFor="radio_3">By time window</Label>
            </div>
          </RadioGroup>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add radio-group
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['radio-group.tsx', 'radio-group.css.ts', 'index.ts']}>
      <Tab value="radio-group.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/radio-group/radio-group.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/radio-group/radio-group.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="radio-group.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/radio-group/radio-group.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/radio-group/radio-group.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/radio-group/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/radio-group/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { RadioGroup, RadioGroupItem } from '#/components/radio-group'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { RadioGroup, RadioGroupItem } from 'twistail-react/radio-group'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-radio-group--docs) for more examples.

## Anatomy

```tsx
<RadioGroup>
  <RadioGroupItem>
    <RadioGroupIndicator />
  </RadioGroupItem>
</RadioGroup>
```


file: docs/components/scroll-area.mdx
meta: {
  "title": "Scroll Area",
  "full": false
}

A custom scrollable container with cross-browser compatibility and customizable scrollbars.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-scroll-area--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/scroll-area#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/scroll-area" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/scroll-area/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Divider } from 'twistail-react/divider'
    import { ScrollArea } from 'twistail-react/scroll-area'
    import { clx } from 'twistail-utils'

    const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)

    export default function ScrollareaDemo() {
      return (
        <ScrollArea className="h-72 w-48 rounded-md border">
          <div className="p-4">
            <h4 className="mb-4 font-semibold text-sm leading-none">Tags</h4>
            {tags.map((tag, index) => (
              <div key={tag}>
                <div className="text-sm">{tag}</div>
                <Divider className={clx(index < tags.length - 1 ? 'block' : 'hidden', 'my-2')} />
              </div>
            ))}
          </div>
        </ScrollArea>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add scroll-area
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['scroll-area.tsx', 'scroll-area.css.ts', 'index.ts']}>
      <Tab value="scroll-area.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/scroll-area/scroll-area.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/scroll-area/scroll-area.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="scroll-area.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/scroll-area/scroll-area.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/scroll-area/scroll-area.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/scroll-area/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/scroll-area/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { ScrollArea, ScrollBar } from '#/components/scroll-area'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { ScrollArea, ScrollBar } from 'twistail-react/scroll-area'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-scroll-area--docs) for more examples.

## Anatomy

```tsx
<ScrollArea>
  <ScrollAreaViewport />
  <ScrollAreaScrollbar orientation="horizontal">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
  <ScrollAreaCorner />
</ScrollArea>
```


file: docs/components/select.mdx
meta: {
  "title": "Select",
  "full": false
}

A vanilla select component with custom styling for a consistent look and feel.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-select--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/select#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/select" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/select/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Select } from 'twistail-react/select'

    export default function SelectDemo() {
      return (
        <Select className="w-56">
          <option value="0-18">18 and under</option>
          <option value="19-39">19 to 39</option>
          <option value="40-64">40 to 64</option>
          <option value="65-infinity">65 and over</option>
        </Select>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add select
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['select.tsx', 'select.css.ts', 'index.ts']}>
      <Tab value="select.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/select/select.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/select/select.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="select.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/select/select.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/select/select.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/select/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/select/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Select } from '#/components/select'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Select } from 'twistail-react/select'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-select--docs) for more examples.

## Anatomy

```tsx
<Select>
  <SelectTrigger>
    <SelectValue />
    <SelectIcon />
  </SelectTrigger>

  <SelectPortal>
    <SelectContent>
      <SelectScrollUpButton />
      <SelectViewport>
        <SelectItem>
          <SelectItemText />
          <SelectItemIndicator />
        </SelectItem>

        <SelectGroup>
          <SelectLabel />
          <SelectItem>
            <SelectItemText />
            <SelectItemIndicator />
          </SelectItem>
        </SelectGroup>

        <SelectSeparator />
      </SelectViewport>
      <SelectScrollDownButton />
      <SelectArrow />
    </SelectContent>
  </SelectPortal>
</Select>
```


file: docs/components/sidebar.mdx
meta: {
  "title": "Sidebar",
  "full": false
}

A navigation component that is typically used to display a list of links or other content.
It is often used on websites and applications to help users navigate through the site or application.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/layout-components-sidebar--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/sidebar" external>
    Source
  </BadgeLink>
</Badges>

***

<Tabs items={['Preview']}>
  <Tab value="Preview" className="h-[480px] p-0 not-prose overflow-auto">
    <iframe src="https://storybook.twistail.com/iframe.html?globals=backgrounds.grid:!false&args=&id=layout-components-sidebar--default" className="size-full" allowFullScreen />
  </Tab>
</Tabs>

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/layout-components-sidebar--docs) for more examples.

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add sidebar
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['main', 'context', 'layout','menu', 'sidebar.css.ts', 'index.ts']}>
      <Tab value="main">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/sidebar/sidebar-main.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/sidebar/sidebar-main.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="context">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/sidebar/sidebar-context.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/sidebar/sidebar-context.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="layout">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/sidebar/sidebar-layout.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/sidebar/sidebar-layout.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="menu">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/sidebar/sidebar-menu.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/sidebar/sidebar-menu.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="sidebar.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/sidebar/sidebar.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/sidebar/sidebar.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/sidebar/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/sidebar/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Sidebar,
      SidebarContent,
      SidebarFooter,
      SidebarGroup,
      SidebarGroupAction,
      SidebarGroupContent,
      SidebarGroupLabel,
      SidebarHeader,
      SidebarInput,
      SidebarInset,
      SidebarMenu,
      SidebarMenuAction,
      SidebarMenuBadge,
      SidebarMenuButton,
      SidebarMenuItem,
      SidebarMenuSkeleton,
      SidebarMenuSub,
      SidebarMenuSubButton,
      SidebarMenuSubItem,
      SidebarProvider,
      SidebarRail,
      SidebarSeparator,
      SidebarTrigger,
      useSidebar,
    } from '#/components/sidebar'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Sidebar,
      SidebarContent,
      SidebarFooter,
      SidebarGroup,
      SidebarGroupAction,
      SidebarGroupContent,
      SidebarGroupLabel,
      SidebarHeader,
      SidebarInput,
      SidebarInset,
      SidebarMenu,
      SidebarMenuAction,
      SidebarMenuBadge,
      SidebarMenuButton,
      SidebarMenuItem,
      SidebarMenuSkeleton,
      SidebarMenuSub,
      SidebarMenuSubButton,
      SidebarMenuSubItem,
      SidebarProvider,
      SidebarRail,
      SidebarSeparator,
      SidebarTrigger,
      useSidebar,
    } from 'twistail-react/sidebar'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/layout-components-sidebar--docs) for more examples.


file: docs/components/skeleton.mdx
meta: {
  "title": "Skeleton",
  "full": false
}

A placeholder UI used to indicate that content is loading, improving perceived performance.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-skeleton--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/skeleton" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/skeleton/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Skeleton } from 'twistail-react/skeleton'

    export default function SkeletonDemo() {
      return (
        <div className="flex items-center space-x-4">
          <Skeleton className="size-12 rounded-full" />
          <div className="space-y-2">
            <Skeleton className="h-4 w-[250px]" />
            <Skeleton className="h-4 w-[200px]" />
          </div>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add skeleton
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['skeleton.tsx', 'skeleton.css.ts', 'index.ts']}>
      <Tab value="skeleton.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/skeleton/skeleton.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/skeleton/skeleton.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="skeleton.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/skeleton/skeleton.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/skeleton/skeleton.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/skeleton/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/skeleton/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Skeleton } from '#/components/skeleton'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Skeleton } from 'twistail-react/skeleton'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-skeleton--docs) for more examples.


file: docs/components/slider.mdx
meta: {
  "title": "Slider",
  "full": false
}

An input control that allows users to select a value from a specified range by dragging a handle.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-slider--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/slider#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/slider" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/slider/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Slider } from 'twistail-react/slider'

    export default function SliderDemo() {
      return (
        <div className="flex w-full max-w-sm flex-col items-center justify-center">
          <Slider defaultValue={[55]} />
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add slider
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['slider.tsx', 'slider.css.ts', 'index.ts']}>
      <Tab value="slider.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/slider/slider.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/slider/slider.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="slider.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/slider/slider.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/slider/slider.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/slider/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/slider/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Slider } from '#/components/slider'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Slider } from 'twistail-react/slider'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-slider--docs) for more examples.

## Anatomy

```tsx
<Slider>
  <SliderTrack>
    <SliderRange />
  </SliderTrack>
  <SliderThumb />
</Slider>
```


file: docs/components/spark-chart.mdx
meta: {
  "title": "Spark Chart",
  "full": false
}

A small, simple, word-sized chart that shows the general trend of a measurement without axes or coordinates.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-spark-chart--default" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://recharts.org/en-US/api" external>
    Recharts Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/spark-chart" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/spark-chart/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    // import { SparkChart } from 'twistail-react/spark-chart'

    export default function Demo() {
      return null
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add spark-chart
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['spark-chart.tsx', 'spark-chart.css.ts', 'index.ts']}>
      <Tab value="spark-chart.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/spark-chart/spark-chart.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/spark-chart/spark-chart.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="spark-chart.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/spark-chart/spark-chart.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/spark-chart/spark-chart.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/spark-chart/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/spark-chart/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {} from '#/components/spark-chart'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {} from 'twistail-react/spark-chart'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-spark-chart--default) for more examples.

## Anatomy

```tsx
// WIP
```


file: docs/components/split-pane.mdx
meta: {
  "title": "Split Pane",
  "full": false
}

A resizable panel that divides content into two adjustable sections.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/layout-components-split-pane--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://allotment.mulberryhousesoftware.com/docs/allotment" external>
    Allotment
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/split-pane" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/split-pane/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Split, SplitPane, SplitPanel } from 'twistail-react/split-pane'
    import { clx } from 'twistail-utils'
    import 'allotment/dist/style.css'

    export default function SplitPaneDemo() {
      return (
        <div className="h-[300px] w-full max-w-lg rounded-lg">
          <Split snap>
            <SplitPane>
              <Content id="1" colorClass="bg-primary" />
            </SplitPane>
            <SplitPane>
              <Split vertical>
                <SplitPane>
                  <Content id="2" colorClass="bg-accent" />
                </SplitPane>
                <SplitPane>
                  <Split>
                    <SplitPane>
                      <Content id="3" colorClass="bg-destructive" />
                    </SplitPane>
                    <SplitPane>
                      <Content id="4" colorClass="bg-success" />
                    </SplitPane>
                  </Split>
                </SplitPane>
              </Split>
            </SplitPane>
          </Split>
        </div>
      )
    }

    const Content = ({ id, colorClass }: { id: string; colorClass: string }) => {
      return (
        <SplitPanel className={clx('flex items-center justify-center', colorClass)}>
          <div className="font-semibold text-lg text-white">{id}</div>
        </SplitPanel>
      )
    }

    ```
  </Tab>
</Tabs>

This component is built on top of [Allotment](https://allotment.mulberryhousesoftware.com/?utm_source=twistail.com\&utm_medium=website\&utm_campaign=docs),
a lightweight (*250 KB unpacked size*) and flexible solution for resizable panels. While shadcn/ui uses
[react-resizable-panel](https://github.com/bvaughn/react-resizable-panels) (*1.01 MB unpacked size*),
we opted for Allotment which provides similar core functionality:

* Proportional layout support
* Snap-to-zero capability
* Panel visibility control
* Minimum and maximum size constraints
* Nested layout support

We chose Allotment after encountering the "*Max Depth Exceeded*" error with react-resizable-panels
during drag operations in complex layouts (see [issue #456](https://github.com/bvaughn/react-resizable-panels/issues/456)).

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add split-pane
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui lucide-react allotment
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['split-pane.tsx', 'split-pane.css.ts', 'index.ts']}>
      <Tab value="split-pane.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/split-pane/split-pane.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/split-pane/split-pane.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="split-pane.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/split-pane/split-pane.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/split-pane/split-pane.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/split-pane/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/split-pane/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Split, SplitPane, SplitPanel } from '#/components/split-pane'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Split, SplitPane, SplitPanel } from 'twistail-react/split-pane'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/layout-components-split-pane--docs) for more examples.

## Anatomy

```tsx
<Split>
  <SplitPane>
    <SplitPanel />
  </SplitPane>
</Split>
```


file: docs/components/switch.mdx
meta: {
  "title": "Switch",
  "full": false
}

A toggle control that allows users to turn an option on or off, similar to a checkbox.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-switch--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/switch#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/switch" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/switch/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Switch } from 'twistail-react/switch'

    export default function SwitchDemo() {
      return <Switch />
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add switch
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['switch.tsx', 'switch.css.ts', 'index.ts']}>
      <Tab value="switch.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/switch/switch.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/switch/switch.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="switch.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/switch/switch.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/switch/switch.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/switch/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/switch/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Switch } from '#/components/switch'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Switch } from 'twistail-react/switch'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-switch--docs) for more examples.

## Anatomy

```tsx
<Switch>
  <SwitchThumb />
</Switch>
```


file: docs/components/tab-navigation.mdx
meta: {
  "title": "Tab Navigation",
  "full": false
}

A navigation component that organizes content into multiple tabs, showing one section at a time.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-tab-navigation--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/navigation-menu#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/tab-navigation" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/tab-navigation/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { TabNavigation, TabNavigationLink } from 'twistail-react/tab-navigation'

    export default function TabNavigationDemo() {
      return (
        <div className="flex w-full max-w-sm flex-col items-center justify-center">
          <TabNavigation>
            <TabNavigationLink href="#" active>
              Home
            </TabNavigationLink>
            <TabNavigationLink href="#">Balances</TabNavigationLink>
            <TabNavigationLink href="#">Transactions</TabNavigationLink>
            <TabNavigationLink href="#" disabled>
              Customers
            </TabNavigationLink>
          </TabNavigation>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add tab-navigation
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['tab-navigation.tsx', 'tab-navigation.css.ts', 'index.ts']}>
      <Tab value="tab-navigation.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tab-navigation/tab-navigation.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/tab-navigation/tab-navigation.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="tab-navigation.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tab-navigation/tab-navigation.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/tab-navigation/tab-navigation.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tab-navigation/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/tab-navigation/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { TabNavigation, TabNavigationLink } from '#/components/tab-navigation'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { TabNavigation, TabNavigationLink } from 'twistail-react/tab-navigation'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-tab-navigation--docs) for more examples.


file: docs/components/table.mdx
meta: {
  "title": "Table",
  "full": false
}

A component for displaying structured data in rows and columns.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-table--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://tanstack.com/table/latest/docs/introduction" external>
    TanStack Table Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/table" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/table/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 p-8 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import {
      Table,
      TableBody,
      TableCaption,
      TableCell,
      TableFoot,
      TableHead,
      TableHeaderCell,
      TableRoot,
      TableRow,
    } from 'twistail-react/table'

    const data: Array<{
      id: number
      name: string
      sales: string
      region: string
      status: string
      deltaType: string
      hours: number
    }> = [
      {
        id: 1,
        name: 'Peter Doe',
        sales: '1.000.000',
        region: 'Region A',
        status: 'overperforming',
        deltaType: 'moderateIncrease',
        hours: 100,
      },
      {
        id: 2,
        name: 'Jon Doe',
        sales: '2.202.000',
        region: 'Region B',
        status: 'overperforming',
        deltaType: 'moderateIncrease',
        hours: 110,
      },
      {
        id: 3,
        name: 'Peter Doe',
        sales: '1.505.000',
        region: 'Region C',
        status: 'underperforming',
        deltaType: 'moderateDecrease',
        hours: 90,
      },
      {
        id: 4,
        name: 'Employee 4',
        sales: '500000',
        region: 'Region D',
        status: 'overperforming',
        deltaType: 'moderateDecrease',
        hours: 92,
      },
      {
        id: 5,
        name: 'Employee 5',
        sales: '600000',
        region: 'Region E',
        status: 'underperforming',
        deltaType: 'moderateDecrease',
        hours: 95,
      },
      {
        id: 6,
        name: 'Employee 6',
        sales: '700000',
        region: 'Region F',
        status: 'overperforming',
        deltaType: 'moderateIncrease',
        hours: 98,
      },
      {
        id: 7,
        name: 'Employee 7',
        sales: '800000',
        region: 'Region G',
        status: 'underperforming',
        deltaType: 'moderateDecrease',
        hours: 101,
      },
      {
        id: 8,
        name: 'Employee 8',
        sales: '900000',
        region: 'Region H',
        status: 'overperforming',
        deltaType: 'moderateDecrease',
        hours: 104,
      },
    ]

    export default function TableDemo() {
      return (
        <TableRoot>
          <Table>
            <TableCaption>A list of your recent invoices.</TableCaption>
            <TableHead>
              <TableRow>
                <TableHeaderCell>Name</TableHeaderCell>
                <TableHeaderCell className="text-right">Sales ($)</TableHeaderCell>
                <TableHeaderCell>Region</TableHeaderCell>
                <TableHeaderCell>Status</TableHeaderCell>
                <TableHeaderCell className="text-right">Working Hours (h)</TableHeaderCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.map((item) => (
                <TableRow key={item.id}>
                  <TableCell>{item.name}</TableCell>
                  <TableCell className="text-right">{item.sales}</TableCell>
                  <TableCell>{item.region}</TableCell>
                  <TableCell>{item.status}</TableCell>
                  <TableCell className="text-right">{item.hours}</TableCell>
                </TableRow>
              ))}
            </TableBody>
            <TableFoot>
              <TableRow>
                <TableHeaderCell colSpan={2} scope="row" className="text-right">
                  4642
                </TableHeaderCell>
                <TableHeaderCell colSpan={3} scope="row" className="text-right">
                  15h
                </TableHeaderCell>
              </TableRow>
            </TableFoot>
          </Table>
        </TableRoot>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add table
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['table.tsx', 'table.css.ts', 'index.ts']}>
      <Tab value="table.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/table/table.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/table/table.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="table.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/table/table.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/table/table.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/table/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/table/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Table,
      TableBody,
      TableCaption,
      TableCell,
      TableFoot,
      TableHead,
      TableHeaderCell,
      TableRoot,
      TableRow,
    } from '#/components/table'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Table,
      TableBody,
      TableCaption,
      TableCell,
      TableFoot,
      TableHead,
      TableHeaderCell,
      TableRoot,
      TableRow,
    } from 'twistail-react/table'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-table--docs) for more examples.


file: docs/components/tabs.mdx
meta: {
  "title": "Tabs",
  "full": false
}

A set of layered sections of content that display one panel at a time.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-tabs--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/tabs#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/tabs" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/tabs/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Tabs, TabsContent, TabsList, TabsTrigger } from 'twistail-react/tabs'
    import { Text } from 'twistail-react/text'

    export default function TabsDemo() {
      return (
        <div className="flex w-full max-w-md flex-col items-center justify-center">
          <Tabs defaultValue="tab1">
            <TabsList>
              <TabsTrigger value="tab1">Returns</TabsTrigger>
              <TabsTrigger value="tab2">Shipping</TabsTrigger>
            </TabsList>
            <div className="mt-4 ml-2">
              <TabsContent value="tab1">
                <Text size="sm" className="leading-7">
                  You have 60 days from the time we&apos;ve shipped your order to return any part of it
                  to us for a refund, provided it is still in its original, unused condition: we do not
                  accept returns of used items.
                </Text>
              </TabsContent>
              <TabsContent value="tab2">
                <Text size="sm" className="leading-7">
                  No return authorization (RMA) is required. If you are within the United States, a
                  pre-paid shipping label will be generated. For direct returns, a flat fee of $10 is
                  deducted from your return for shipping and processing costs.
                </Text>
              </TabsContent>
            </div>
          </Tabs>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add tabs
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['tabs.tsx', 'tabs.css.ts', 'index.ts']}>
      <Tab value="tabs.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tabs/tabs.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/tabs/tabs.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="tabs.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tabs/tabs.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/tabs/tabs.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tabs/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/tabs/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Tabs, TabsContent, TabsList, TabsTrigger } from '#/components/tabs'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Tabs, TabsContent, TabsList, TabsTrigger } from 'twistail-react/tabs'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-tabs--docs) for more examples.

## Anatomy

```tsx
<Tabs>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsContent />
</Tabs>
```


file: docs/components/text.mdx
meta: {
  "title": "Text",
  "full": false
}

A versatile typography component for displaying text with various styles and sizes.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-text--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/text" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/text/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Text } from 'twistail-react/text'

    export default function TextDemo() {
      return (
        <div className="flex w-full flex-col justify-center gap-4">
          <Text align="center" size="xs">
            Extra Small Text
          </Text>
          <Text align="center" size="sm">
            Small Text
          </Text>
          <Text align="center" size="md">
            Medium Text
          </Text>
          <Text align="center" size="lg">
            Large Text
          </Text>
          <Text align="center" size="xl">
            Extra Large Text
          </Text>
          <Text align="center" size="2xl">
            2XL Text
          </Text>
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add text
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['text.tsx', 'text.css.ts', 'index.ts']}>
      <Tab value="text.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/text/text.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/text/text.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="text.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/text/text.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/text/text.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/text/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/text/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Text } from '#/components/text'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Text } from 'twistail-react/text'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-text--docs) for more examples.


file: docs/components/textarea.mdx
meta: {
  "title": "Textarea",
  "full": false
}

A multi-line text input control that allows users to enter longer text content.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-textarea--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/form#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/textarea" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/textarea/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Textarea } from 'twistail-react/textarea'

    export default function TextareaDemo() {
      return (
        <div className="flex w-full max-w-sm flex-col items-center justify-center">
          <Textarea placeholder="Write something..." maxHeight={200} autoResize />
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add textarea
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['textarea.tsx', 'textarea.css.ts', 'index.ts']}>
      <Tab value="textarea.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/textarea/textarea.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/textarea/textarea.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="textarea.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/textarea/textarea.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/textarea/textarea.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/textarea/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/textarea/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Textarea, useTextArea } from '#/components/textarea'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Textarea, useTextArea } from 'twistail-react/textarea'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-textarea--docs) for more examples.

## Credits

This component is based on [autosize-textarea](https://shadcnui-expansions.typeart.cc/docs/autosize-textarea)
by [shadcn-ui expansions](https://shadcnui-expansions.typeart.cc), licensed under [MIT License](https://github.com/hsuanyi-chou/shadcn-ui-expansions/blob/main/LICENSE.md).


file: docs/components/toast.mdx
meta: {
  "title": "Toast",
  "full": false
}

A brief, non-intrusive notification that appears temporarily to provide feedback.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-toast--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://sonner.emilkowal.ski/getting-started" external>
    Sonner Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/toast" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/toast/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Button } from 'twistail-react/button'
    import { toast } from 'twistail-react/toast'

    export default function ToastDemo() {
      return (
        <Button
          variant="outline"
          onClick={() => {
            toast('Event has been created', {
              description: 'March 03, 2025 at 9:00 AM',
              position: 'top-center',
            })
          }}
        >
          Show Toast
        </Button>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add toast
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['toast.tsx', 'toast.css.ts', 'index.ts']}>
      <Tab value="toast.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/toast/toast.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/toast/toast.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="toast.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/toast/toast.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/toast/toast.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/toast/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/toast/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ### Add the Toaster component

    ```tsx
    import { Toaster } from 'twistail-react/toast'

    export default function RootLayout({ children }: Readonly<React.PropsWithChildren>) {
      return (
        <html lang="en">
          <body>
            <main>{children}</main>
            <Toaster position="bottom-right" />
          </body>
        </html>
      )
    }

    ```
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Toaster, toast, type ToasterProps } from '#/components/toast'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Toaster, toast, type ToasterProps } from 'twistail-react/toast'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-toast--docs) for more examples.


file: docs/components/toggle.mdx
meta: {
  "title": "Toggle",
  "full": false
}

A two-state button that can be either on or off, typically used for enabling/disabling features.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-toggle--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/toggle#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/toggle" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/toggle/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import * as Lucide from 'lucide-react'
    import { Toggle } from 'twistail-react/toggle'

    export default function ToggleDemo() {
      return (
        <Toggle aria-label="Toggle star">
          <Lucide.Star className="pointer-events-none size-4 shrink-0" />
        </Toggle>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add toggle
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['toggle.tsx', 'toggle.css.ts', 'index.ts']}>
      <Tab value="toggle.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/toggle/toggle.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/toggle/toggle.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="toggle.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/toggle/toggle.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/toggle/toggle.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/toggle/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/toggle/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Toggle, ToggleGroup, ToggleGroupItem } from '#/components/toggle'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Toggle, ToggleGroup, ToggleGroupItem } from 'twistail-react/toggle'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-toggle--docs) for more examples.

## Anatomy

```tsx
<ToggleGroup>
  <ToggleGroupItem />
</ToggleGroup>
```


file: docs/components/tooltip.mdx
meta: {
  "title": "Tooltip",
  "full": false
}

A small informational popup that appears when users hover over or focus on an element.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/base-components-tooltip--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/tooltip" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/tooltip/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-20 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Text } from 'twistail-react/text'
    import { Tooltip, TooltipContent, TooltipTrigger } from 'twistail-react/tooltip'

    export default function TooltipDemo() {
      return (
        <Tooltip>
          <TooltipTrigger>
            <Text>Show tooltip</Text>
          </TooltipTrigger>
          <TooltipContent content="Are you ready to build something amazing with Twistail?" />
        </Tooltip>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add tooltip
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['tooltip.tsx', 'tooltip.css.ts', 'index.ts']}>
      <Tab value="tooltip.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tooltip/tooltip.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/tooltip/tooltip.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="tooltip.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tooltip/tooltip.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/tooltip/tooltip.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tooltip/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/tooltip/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import {
      Tooltip,
      TooltipTrigger,
      TooltipContent,
      TooltipPortal
    } from '#/components/tooltip'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import {
      Tooltip,
      TooltipTrigger,
      TooltipContent,
      TooltipPortal
    } from 'twistail-react/tooltip'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/base-components-tooltip--docs) for more examples.

## Anatomy

```tsx
<Tooltip>
  <TooltipTrigger />
  <TooltipContent />
</Tooltip>
```

## Props

<TypeTable
  type={{
  delayDuration: {
    description: 'Delay duration before the tooltip appears',
    type: 'number',
    default: '150',
  },
  defaultOpen: {
    description: 'Whether the tooltip is open by default',
    type: 'boolean',
    default: 'false',
  },
  open: {
    description: 'Controlled open state of the tooltip',
    type: 'boolean',
    default: undefined,
  },
  onOpenChange: {
    description: 'Callback called when the open state changes',
    type: '(open: boolean) => void',
    default: undefined,
  },
}}
/>

### TooltipContent Props

<TypeTable
  type={{
  content: {
    description: 'Content displayed inside the tooltip',
    type: 'React.ReactNode',
    default: undefined,
  },
  side: {
    description: 'Position of the tooltip relative to the trigger',
    type: 'top | right | bottom | left',
    default: 'top',
  },
  sideOffset: {
    description: 'Distance from the trigger',
    type: 'number',
    default: '10',
  },
  align: {
    description: 'Alignment of the tooltip relative to the trigger',
    type: 'start | center | end',
    default: 'center',
  },
  hideArrow: {
    description: 'Hide the tooltip arrow',
    type: 'boolean',
    default: 'false',
  },
  className: {
    description: 'Additional CSS class for the tooltip content',
    type: 'string',
    default: undefined,
  },
}}
/>

### TooltipTrigger Props

<TypeTable
  type={{
  asChild: {
    description: 'Use the child element as the trigger',
    type: 'boolean',
    default: 'false',
  },
  onClick: {
    description: 'Handler for click events on the trigger',
    type: 'React.MouseEventHandler<HTMLButtonElement>',
    default: undefined,
  },
}}
/>


file: docs/components/tracker.mdx
meta: {
  "title": "Tracker",
  "full": false
}

A component that visualizes progress through a series of steps or stages in a process.

<Badges>
  <BadgeLink href="https://storybook.twistail.com/?path=/docs/visualizations-tracker--docs" external>
    Storybook
  </BadgeLink>

  <BadgeLink href="https://www.radix-ui.com/primitives/docs/utilities/slot" external>
    Radix UI Docs
  </BadgeLink>

  <BadgeLink href="https://github.com/riipandi/twistail/tree/main/packages/ui-react/src/components/tracker" external>
    Source
  </BadgeLink>
</Badges>

***

import Demo from '#/demo/tracker/preview'

<Tabs items={['Preview', 'Code']}>
  <Tab value="Preview" className="rounded-b-xl flex min-h-44 flex-wrap items-center justify-center gap-4 py-10 not-prose">
    <Demo />
  </Tab>

  <Tab value="Code">
    ```tsx
    'use client'

    import { Tracker } from 'twistail-react/tracker'

    const data = [
      {
        key: 'item-1',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-2',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-3',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-4',
        color: 'bg-red-600',
        tooltip: 'Failed',
      },
      {
        key: 'item-5',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-6',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-7',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-8',
        color: 'bg-red-600',
        tooltip: 'Failed',
      },
      {
        key: 'item-9',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-10',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-11',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-12',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-13',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-14',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-15',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-16',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-17',
        color: 'bg-yellow-600',
        tooltip: 'Warning',
      },
      {
        key: 'item-18',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-19',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
      {
        key: 'item-20',
        color: 'bg-emerald-600',
        tooltip: 'Completed',
      },
    ]

    export default function TrackerDemo() {
      return (
        <div className="w-full max-w-lg rounded-md">
          <Tracker data={data} className="mx-auto" />
        </div>
      )
    }

    ```
  </Tab>
</Tabs>

## Automatic Installation

<Callout type="warn">
  This method is still working on progress, please use manual installation for now.
</Callout>

{/* ```package-install
  npx twistail add tracker
  ``` */}

## Manual Installation

<Steps>
  <Step>
    ### Install dependencies

    ```package-install
    npm install radix-ui
    ```
  </Step>

  <Step>
    ### Copy the code

    <Tabs items={['tracker.tsx', 'tracker.css.ts', 'index.ts']}>
      <Tab value="tracker.tsx">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tracker/tracker.tsx",
          "codeblock": { "lang": "tsx", "meta": "title=\"components/tracker/tracker.tsx\"" }
        }
        ```
      </Tab>

      <Tab value="tracker.css.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tracker/tracker.css.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/tracker/tracker.css.ts\"" }
        }
        ```
      </Tab>

      <Tab value="index.ts">
        ```json doc-gen:file
        {
          "file": "../packages/ui-react/src/components/tracker/index.ts",
          "codeblock": { "lang": "ts", "meta": "title=\"components/tracker/index.ts\"" }
        }
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

### Imports

<Tabs items={['internal (copy-paste)', 'npm']}>
  <Tab value="internal (copy-paste)">
    ```tsx
    import { Tracker } from '#/components/tracker'
    ```
  </Tab>

  <Tab value="npm">
    ```tsx
    import { Tracker } from 'twistail-react/tracker'
    ```
  </Tab>
</Tabs>

### Example

Browse the [Storybook](https://storybook.twistail.com/?path=/docs/visualizations-tracker--docs) for more examples.

## Props

<TypeTable
  type={{
  data: {
    description: 'Array of tracker block data to be displayed',
    type: 'TrackerBlockProps[]',
    default: '[]',
  },
  size: {
    description: 'Size of the tracker component',
    type: 'sm | md | lg',
    default: 'md',
  },
  hoverEffect: {
    description: 'Enable hover effect on tracker blocks',
    type: 'boolean',
    default: false,
  },
  hideArrow: {
    description: 'Hide arrow on tooltips',
    type: 'boolean',
    default: 'false',
  },
  defaultBackgroundColor: {
    description: 'Default background color for blocks without specified color',
    type: 'string',
    default: 'bg-muted',
  },
  emptyColor: {
    description: 'Color to use when data is empty',
    type: 'string',
    default: 'bg-muted/30',
  },
  className: {
    description: 'Additional CSS class for the tracker container',
    type: 'string',
    default: undefined,
  },
}}
/>


file: docs/install/index.mdx
meta: {
  "title": "Installation",
  "description": "Learn how to install and configure Twistail UI components.",
  "full": false
}

## Dependencies

```package-install
npm install radix-ui tailwind-variants lucide-react sonner next-themes cmdk \
input-otp date-fns react-day-picker recharts allotment
```

```package-install
npm install -D tailwindcss @tailwindcss/postcss postcss postcss-load-config
```

## Tailwind CSS

<Tabs items={['global.css', 'theme.css', 'motion.css']}>
  <Tab value="global.css">
    ```json doc-gen:file
    {
      "file": "../packages/ui-react/src/styles/global.css",
      "codeblock": { "lang": "css", "meta": "title=\"styles/global.css\"" }
    }
    ```
  </Tab>

  <Tab value="theme.css">
    ```json doc-gen:file
    {
      "file": "../packages/ui-react/src/styles/theme.css",
      "codeblock": { "lang": "css", "meta": "title=\"styles/theme.css\"" }
    }
    ```
  </Tab>

  <Tab value="motion.css">
    ```json doc-gen:file
    {
      "file": "../packages/ui-react/src/styles/motion.css",
      "codeblock": { "lang": "css", "meta": "title=\"styles/motion.css\"" }
    }
    ```
  </Tab>
</Tabs>

## Folder Structure

<Files className="font-mono">
  <Folder name="components" defaultOpen>
    <Folder name="accordion" defaultOpen>
      <File name="accordion.tsx" />

      <File name="accordion.css.ts" />

      <File name="index.ts" />
    </Folder>

    <Folder name="avatar">
      <File name="avatar.tsx" />

      <File name="avatar.css.ts" />

      <File name="index.ts" />
    </Folder>

    <Folder name="...component">
      <File name="component.tsx" />

      <File name="component.css.ts" />

      <File name="index.ts" />
    </Folder>
  </Folder>

  <Folder name="styles" defaultOpen>
    <File name="global.css" />

    <File name="theme.css" />
  </Folder>

  <File name="package.json" />
</Files>


file: docs/install/nextjs.mdx
meta: {
  "title": "Next.js",
  "full": false
}

<Callout type="warn" title="Attention">
  This documentation is still in progress. Please check back later.
</Callout>


file: docs/install/react-router.mdx
meta: {
  "title": "React Router",
  "full": false
}

<Callout type="warn" title="Attention">
  This documentation is still in progress. Please check back later.
</Callout>


file: docs/install/tanstack-start.mdx
meta: {
  "title": "TanStack Start",
  "full": false
}

<Callout type="warn" title="Attention">
  This documentation is still in progress. Please check back later.
</Callout>


file: docs/install/vite.mdx
meta: {
  "title": "Vite",
  "full": false
}

<Callout type="warn" title="Attention">
  This documentation is still in progress. Please check back later.
</Callout>