### Installation Documentation

Source: https://github.com/riipandi/twistail/blob/main/website/public/llms.txt

Detailed documentation for the Installation process of Twistail UI. Guides users through setting up the library in their projects.

```markdown
[Installation Documentation](https://twistail.com/llms-full.txt)
```

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

### Example Prompts for AI Assistants

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/llms.mdx

These are example prompts that can be used with AI coding assistants to get help with implementing Twistail UI components. They demonstrate how to ask for specific component implementations or layouts.

```markdown
"I'm using Twistail UI. Can you help me implement a form with Input, Select, and Button components?"

"Using Twistail UI, how would I create a responsive layout with Card components?"

"I need to implement a Dialog component from Twistail UI with custom styling. Can you show me how?"
```

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

### Install Twistail

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/blog/introduction-to-twistail.mdx

Installs the Twistail library using npm.

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

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

### Callout Usage Example (NPM)

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/callout.mdx

Example of how to import and use the Callout component when installed via NPM.

```tsx
import { Callout } from 'twistail-react/callout'
```

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

### Install Dependencies

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/install/index.mdx

Installs core UI components and related libraries using npm.

```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
```

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

### Install Twistail Utils

Source: https://github.com/riipandi/twistail/blob/main/packages/utils/README.md

Instructions for installing the twistail-utils package using npm, pnpm, and yarn.

```sh
# Install with npm
npm install twistail-utils

# Install with pnpm
pnpm add twistail-utils

# Install with yarn
yarn add twistail-utils
```

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

### Install Twistail React

Source: https://github.com/riipandi/twistail/blob/main/packages/ui-react/README.md

Instructions for installing the Twistail React library using npm, pnpm, or yarn.

```sh
# Install with npm
npm install twistail-react

# Install with pnpm
pnpm add twistail-react

# Install with yarn
yarn add twistail-react
```

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

### Install Twistail CLI

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/cli/index.mdx

Installs the Twistail CLI globally using npm. This command is essential for using the CLI on your system.

```bash
npm install -g twistail
```

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

### Toast Usage Example

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/toast.mdx

Demonstrates how to import and use the Toast and Toaster components in a React application. Includes examples for both internal copy-paste and npm installations.

```tsx
import { Toaster, toast, type ToasterProps } from '#/components/toast'

```

```tsx
import { Toaster, toast, type ToasterProps } from 'twistail-react/toast'

```

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

### Install Radix UI dependency

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/collapsible.mdx

Install Radix UI, which is a dependency for the Collapsible component.

```package-install
npm install radix-ui
```

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

### Theme CSS Styles

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/install/index.mdx

Configures theme-specific CSS variables and styles for UI components.

```css
/* styles/theme.css */
/* Add theme styles here */
```

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

### Install and Run Twistail CLI with npx

Source: https://github.com/riipandi/twistail/blob/main/packages/cli/README.md

This snippet demonstrates how to execute the latest version of the Twistail CLI using `npx`, a package runner tool that comes with npm.

```sh
npx twistail@latest
```

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

### Bar List Usage Examples

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/bar-list.mdx

Demonstrates how to import and use the Bar List component in a React application, showing both internal (copy-paste) and npm installation methods.

```tsx
import { BarList } from '#/components/bar-list'
```

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

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

### Progress Bar NPM Import Example

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/progress-bar.mdx

Shows how to import the Progress Bar component when installed via npm, typically from a package like 'twistail-react'.

```tsx
import { ProgressBar } from 'twistail-react/progress-bar'

```

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

### Prompting AI with Documentation Reference

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/llms.mdx

This example shows how to prompt an AI assistant to use specific documentation, like the Twistail UI documentation found at a given URL, to help implement a component.

```markdown
"Please refer to https://twistail.com/llms-full.txt for the Twistail UI documentation and help me implement a Dropdown Menu component."
```

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

### Twistail Component Documentation Links

Source: https://github.com/riipandi/twistail/blob/main/website/public/llms.txt

Provides links to detailed documentation for various UI components within the Twistail framework. Each link points to a resource containing specific implementation details, usage examples, and API references for the respective component.

```APIDOC
Breadcrumb Documentation: https://twistail.com/llms-full.txt
Command Documentation: https://twistail.com/llms-full.txt
Menubar Documentation: https://twistail.com/llms-full.txt
Navigation Menu Documentation: https://twistail.com/llms-full.txt
Pagination Documentation: https://twistail.com/llms-full.txt
Tab Navigation Documentation: https://twistail.com/llms-full.txt
Tabs Documentation: https://twistail.com/llms-full.txt
Accordion Documentation: https://twistail.com/llms-full.txt
Alert Dialog Documentation: https://twistail.com/llms-full.txt
Context Menu Documentation: https://twistail.com/llms-full.txt
Dialog Documentation: https://twistail.com/llms-full.txt
Drawer Documentation: https://twistail.com/llms-full.txt
Dropdown Menu Documentation: https://twistail.com/llms-full.txt
Hover Card Documentation: https://twistail.com/llms-full.txt
Popover Documentation: https://twistail.com/llms-full.txt
Tooltip Documentation: https://twistail.com/llms-full.txt
Badge Documentation: https://twistail.com/llms-full.txt
Skeleton Documentation: https://twistail.com/llms-full.txt
Toast Documentation: https://twistail.com/llms-full.txt
Area Chart Documentation: https://twistail.com/llms-full.txt
Bar Chart Documentation: https://twistail.com/llms-full.txt
Bar List Documentation: https://twistail.com/llms-full.txt
Category Bar Documentation: https://twistail.com/llms-full.txt
Combo Chart Documentation: https://twistail.com/llms-full.txt
Donut Chart Documentation: https://twistail.com/llms-full.txt
Line Chart Documentation: https://twistail.com/llms-full.txt
Progress Bar Documentation: https://twistail.com/llms-full.txt
Progress Circle Documentation: https://twistail.com/llms-full.txt
Spark Chart Documentation: https://twistail.com/llms-full.txt
Tracker Documentation: https://twistail.com/llms-full.txt
```

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

### Install and Run Twistail CLI with pnpm dlx

Source: https://github.com/riipandi/twistail/blob/main/packages/cli/README.md

This snippet shows how to run the latest version of the Twistail CLI using `pnpm dlx`, a command for executing packages from the npm registry with pnpm.

```sh
pnpm dlx twistail@latest
```

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

### Motion CSS Styles

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/install/index.mdx

Includes CSS for animations and transitions used within the UI components.

```css
/* styles/motion.css */
/* Add motion styles here */
```

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

### Global CSS Styles

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/install/index.mdx

Defines global CSS styles for the application, including resets and base typography.

```css
/* styles/global.css */
/* Add global styles here */
```

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

### Menubar Usage (NPM)

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/menubar.mdx

Demonstrates how to import and use the Menubar component and its sub-components when installed via NPM.

```tsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
} from 'twistail-react/menubar'
```

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

### Twistail Project Setup with Turborepo

Source: https://github.com/riipandi/twistail/blob/main/README.md

This snippet highlights the use of Turborepo for building the Twistail project, indicating a monorepo structure for managing multiple packages and applications efficiently. Turborepo is a high-performance build system for JavaScript and TypeScript codebases.

```Shell
# Example of Turborepo usage (conceptual, not directly in provided text)
# Assumes Turborepo is configured in package.json scripts
# e.g., "build": "turbo run build"
```

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

### Tooltip Usage Example

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/tooltip.mdx

Demonstrates how to use the Tooltip component with its trigger and content elements in a React application.

```tsx
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipArrow,
} from '#/components/tooltip';

export default function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger>Hover Me</TooltipTrigger>
      <TooltipContent>
        <TooltipArrow />
        Add to library
      </TooltipContent>
    </Tooltip>
  );
}

```

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

### Progress Bar Usage Example

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/progress-bar.mdx

Demonstrates how to import and use the Progress Bar component in a React application, showcasing basic functionality.

```tsx
import { ProgressBar } from '#/components/progress-bar'

export default function Preview() {
  return (
    <div className="flex w-full flex-col gap-4">
      <ProgressBar value={33} />
      <ProgressBar value={66} max={100} />
      <ProgressBar value={100} />
      <ProgressBar value={50} variant="success" />
      <ProgressBar value={75} variant="warning" />
      <ProgressBar value={25} variant="error" />
      <ProgressBar value={90} size="lg" />
      <ProgressBar value={10} size="sm" />
      <ProgressBar animated={false} value={40} />
      <ProgressBar label="Loading..." value={80} />
    </div>
  )
}

```

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

### Twistail Compatibility with Existing Tailwind Setup

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/index.mdx

Confirms that Twistail is designed to integrate smoothly with existing Tailwind CSS projects, leveraging Tailwind Variants for compatibility with standard Tailwind configurations. It allows for gradual adoption and use with custom components.

```html
<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>
```

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

### Tooltip Component Files

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/tooltip.mdx

Provides the core TypeScript and CSS files for the Tooltip component, essential for manual installation and understanding the component's structure.

```tsx
import {
  Tooltip as TooltipPrimitive,
  TooltipTrigger,
  TooltipContent,
  TooltipPortal,
  TooltipProvider,
} from '@radix-ui/react-tooltip';
import * as React from 'react';

import { cn } from '#/lib/utils';

const TooltipProvider = TooltipPrimitive.Provider;

const Tooltip = TooltipPrimitive.Root;

const TooltipTrigger = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
>(({ className, children, asChild, ...props }, ref) => (
  <TooltipPrimitive.Trigger
    ref={ref}
    className={cn(className)}
    asChild={asChild}
    {...props}
  >
    {children}
  </TooltipPrimitive.Trigger>
));
TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 10, side = 'top', align = 'center', hideArrow, ...props }, ref) => (
  <TooltipPrimitive.Portal>
    <TooltipPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      side={side}
      align={align}
      className={cn(
        'tw-z-50 tw-overflow-hidden tw-rounded-md tw-border tw-bg-popover tw-px-3 tw-py-1.5 tw-text-sm tw-text-popover-foreground tw-shadow-md data-[state=delayed-open]:tw-animate-in data-[state=closed]:tw-animate-out data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2',
        className
      )}
      {...props}
    >
      <div className='tw-flex tw-items-center tw-gap-1'>
        {props.children}
        {!hideArrow && (
          <div
            className='tw-h-2 tw-w-2 tw-rotate-45 tw-rounded-tl-sm tw-bg-popover data-[side=bottom]:tw-translate-y-0.5 data-[side=left]:tw-translate-x-0.5 data-[side=right]:tw-translate-x-0.5 data-[side=top]:tw-translate-y-0.5'
            data-side={side}
          />
        )}
      </div>
    </TooltipPrimitive.Content>
  </TooltipPrimitive.Portal>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;

const TooltipArrow = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Arrow>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
>(({ className, ...props }, ref) => (
  <TooltipPrimitive.Arrow
    ref={ref}
    className={cn('tw-fill-popover', className)}
    {...props}
  />
));
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow };

```

```ts
import { tv } from 'tailwind-variants';

export const tooltipVariants = tv({
  base: [
    'tw-inline-flex',
    'tw-items-center',
    'tw-justify-center',
    'tw-rounded-md',
    'tw-border',
    'tw-border-neutral-200',
    'tw-bg-white',
    'tw-px-3',
    'tw-py-1.5',
    'tw-text-sm',
    'tw-font-medium',
    'tw-text-neutral-900',
    'tw-shadow-sm',
    'tw-outline-none',
    'tw-transition-opacity',
    'data-[state=delayed-open]:tw-animate-in',
    'data-[state=closed]:tw-animate-out',
    'data-[side=bottom]:tw-slide-in-from-top-2',
    'data-[side=left]:tw-slide-in-from-right-2',
    'data-[side=right]:tw-slide-in-from-left-2',
    'data-[side=top]:tw-slide-in-from-bottom-2',
  ],
  variants: {
    variant: {
      default: [
        'tw-border-neutral-200',
        'tw-bg-white',
        'tw-text-neutral-900',
      ],
      destructive: [
        'tw-border-red-500',
        'tw-bg-red-50',
        'tw-text-red-700',
      ],
      outline: [
        'tw-border-neutral-200',
        'tw-bg-transparent',
        'tw-text-neutral-900',
      ],
    },
  },
  defaultVariants: {
    variant: 'default',
  },
});

export const tooltipContentVariants = tv({
  base: [
    'tw-z-50',
    'tw-overflow-hidden',
    'tw-rounded-md',
    'tw-border',
    'tw-bg-popover',
    'tw-px-3',
    'tw-py-1.5',
    'tw-text-sm',
    'tw-text-popover-foreground',
    'tw-shadow-md',
  ],
  variants: {
    variant: {
      default: [
        'tw-border-neutral-200',
        'tw-bg-white',
        'tw-text-neutral-900',
      ],
      destructive: [
        'tw-border-red-500',
        'tw-bg-red-50',
        'tw-text-red-700',
      ],
      outline: [
        'tw-border-neutral-200',
        'tw-bg-transparent',
        'tw-text-neutral-900',
      ],
    },
  },
  defaultVariants: {
    variant: 'default',
  },
});

export const tooltipArrowVariants = tv({
  base: [
    'tw-fill-popover',
  ],
  variants: {
    variant: {
      default: ['tw-fill-white'],
      destructive: ['tw-fill-red-50'],
      outline: ['tw-fill-transparent'],
    },
  },
  defaultVariants: {
    variant: 'default',
  },
});

```

```ts
export * from './tooltip';

```

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

### Introduction Documentation

Source: https://github.com/riipandi/twistail/blob/main/website/public/llms.txt

Detailed documentation for the Introduction section of Twistail UI. Covers the foundational aspects and overview of the library.

```markdown
[Introduction Documentation](https://twistail.com/llms-full.txt)
```

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

### Tracker Component Usage - NPM Import

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/tracker.mdx

Example of how to import the Tracker component after installing it via npm.

```tsx
import { Tracker } from 'twistail-react/tracker'
```

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

### Blockquote Usage - NPM Import

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/blockquote.mdx

Example of how to import and use the Blockquote component when installed via npm.

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

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

### Blockquote Usage - Internal Import

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/blockquote.mdx

Example of how to import and use the Blockquote component when using copy-paste installation.

```tsx
import { Blockquote, BlockquoteAuthor } from '#/components/blockquote'
```

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

### Storybook Introduction Configuration

Source: https://github.com/riipandi/twistail/blob/main/packages/ui-react/src/stories/introduction.mdx

This snippet configures the Storybook documentation page for the Twistail UI introduction. It sets the title to 'Introduction' and hides the canvas preview and toolbar for a cleaner documentation view.

```javascript
import { Meta } from '@storybook/blocks'

<Meta
  title="Introduction"
  parameters={{
    viewMode: 'docs',
    previewTabs: { canvas: { hidden: true } },
    toolbar: { hidden: true }
  }}
/>
```

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

### Tabs Component Usage

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/tabs.mdx

Demonstrates how to import and use the Tabs component in a React application, with examples for both internal copy-paste and npm installations.

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from '#/components/tabs'

```

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from 'twistail-react/tabs'

```

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

### Twistail Inspirations and Key Differences

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/index.mdx

Acknowledges Tremor and shadcn/ui as inspirations for Twistail's design philosophies and component structures. Highlights key differences including separated style files, Lucide icons, Tailwind Variants integration, and a curated blend of design elements.

```html
## 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.
```

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

### Twistail Suitability for Production

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/index.mdx

Confirms Twistail's suitability for production, citing thorough testing for accessibility, performance, and cross-browser compatibility. Its customizable nature and the use of Tailwind Variants ensure consistent styling.

```html
<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>
```

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

### Complete Twistail UI Documentation

Source: https://github.com/riipandi/twistail/blob/main/website/public/llms.txt

Provides the complete Twistail UI documentation, including all general content, components, type helpers, and utilities. This is a comprehensive resource for understanding and using the library.

```markdown
[Complete documentation](https://twistail.com/llms.txt)
```

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

### Callout Usage Example (Internal)

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/callout.mdx

Example of how to import and use the Callout component when using the internal copy-paste method.

```tsx
import { Callout } from '#/components/callout'
```

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

### Theming Documentation

Source: https://github.com/riipandi/twistail/blob/main/website/public/llms.txt

Detailed documentation for Theming in Twistail UI. Explains how to customize the appearance and styles of the components.

```markdown
[Theming Documentation](https://twistail.com/llms-full.txt)
```

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

### Form Component Imports (NPM)

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/form.mdx

How to import the Form component when installed via NPM.

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

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

### Twistail vs. shadcn/ui Comparison

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/index.mdx

Details the key differences between Twistail and shadcn/ui, emphasizing Twistail's use of Tailwind Variants for a more powerful, type-safe API for component styling, including complex variant combinations and responsive styles.

```html
<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>
```

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

### Slider Usage Example

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/slider.mdx

Demonstrates how to import and use the Slider component in a React application.

```tsx
import { Slider } from '#/components/slider'

// Or if using npm package:
// import { Slider } from 'twistail-react/slider'

<Slider defaultValue={[50]} max={100} step={1} />

```

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

### Release Process

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/contributing-guidelines.mdx

Explains the versioning strategy used for releases in the Twistail project, adhering to semantic versioning principles.

```markdown
New releases follow semantic versioning:
- Major: Breaking changes
- Minor: New features
- Patch: Bug fixes
```

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

### Components Documentation

Source: https://github.com/riipandi/twistail/blob/main/website/public/llms.txt

Detailed documentation for all Components available in Twistail UI. This section provides an overview of the component library.

```markdown
[Components Documentation](https://twistail.com/llms-full.txt)
```

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

### Development Guidelines

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/contributing-guidelines.mdx

Outlines the best practices for developers contributing to the Twistail project, focusing on code quality, maintainability, and collaboration.

```markdown
- Write clear commit messages
- Add tests for new features
- Update documentation
- Follow code style guidelines
- Keep changes focused and atomic
```

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

### Command Component Imports (NPM)

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/command.mdx

Demonstrates how to import the Command component and its sub-components when installed via npm.

```tsx
import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
} from 'twistail-react/command'
```

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

### Text Component Imports

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/text.mdx

Demonstrates how to import the Text component into your project, showing both internal and npm installation methods.

```tsx
import { Text } from '#/components/text'
```

```tsx
import { Text } from 'twistail-react/text'
```

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

### Twistail Core Principles

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/index.mdx

Highlights the foundational technologies and core values of the Twistail component library, including its reliance on Tailwind Variants, accessibility standards, developer experience, design flexibility, and separation of concerns.

```react
/**
 * Core Principles of Twistail:
 * - Tailwind Variants for advanced styling control
 * - Accessibility First (WCAG guidelines, WAI-ARIA patterns)
 * - Developer Experience (Intuitive APIs, TypeScript definitions)
 * - Design Flexibility (Adaptable to unique design systems)
 * - Separation of Concerns (CSS separated from component logic)
 */
```

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

### Twistail Open Source Licensing

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/index.mdx

Explains that Twistail is licensed under both Apache License 2.0 and MIT license, offering flexibility for different project needs. It also points to the license files in the repository for more details.

```html
<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>
```

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

### Dropdown Menu Anatomy Example

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/docs/components/dropdown-menu.mdx

Illustrates the complete structure and available elements within the Dropdown Menu component.

```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>
```

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

### Basic Button Usage

Source: https://github.com/riipandi/twistail/blob/main/website/src/content/blog/introduction-to-twistail.mdx

Demonstrates how to use the Button component from the twistail-react library to create a primary button.

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

function MyComponent() {
  return (
    <Button variant="primary">
      Get Started
    </Button>
  )
}
```