### Install Radix Direction Package

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/getting-started/rtl-setup.mdx

Instructions for installing the `@radix-ui/react-direction` package using common JavaScript package managers.

```sh
pnpm add @radix-ui/react-direction
# or
npm install @radix-ui/react-direction
# or
yarn add @radix-ui/react-direction
```

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

### Install Toggle Component Dependencies

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/toggle.mdx

Instructions for installing the necessary dependencies for the Toggle component, covering both manual npm installation of core libraries and a CLI-based approach using `hextaui` for quick setup.

```package-install
npm install @radix-ui/react-toggle class-variance-authority
```

```package-install
npx hextaui@latest add toggle
```

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

### Display HextaUI Installation Options with DocsInstallationCard (JSX)

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/getting-started/installation.mdx

This JSX snippet demonstrates how to use the custom `DocsInstallationCard` component to present various framework installation options (Next.js, Vite, Astro) within a responsive grid layout. It imports React icons for visual representation and the `DocsInstallationCard` component to create clickable cards that navigate to detailed installation guides.

```JSX
import { RiNextjsFill } from "react-icons/ri";
import { SiVite } from "react-icons/si";
import { SiAstro } from "react-icons/si";

import { DocsInstallationCard } from "@/components/other/docs-installation-card.tsx";

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <DocsInstallationCard 
        title="Next.js"
        logo={<RiNextjsFill size={50} />}
        url="/docs/ui/installation/nextjs"
        goal="nextjs_installation"
    />
    <DocsInstallationCard 
        title="Vite"
        logo={<SiVite size={50} />}
        url="/docs/ui/installation/vite"
        goal="vite_installation"
    />
    <DocsInstallationCard 
        title="Astro"
        logo={<SiAstro size={50} />}
        url="/docs/ui/installation/astro"
        goal="astro_installation"
    />
</div>
```

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

### Install Kbd Component via Hextaui CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/kbd.mdx

Provides the command to install the `Kbd` component directly using the `hextaui` command-line interface, simplifying the setup process.

```shell
npx hextaui@latest add kbd
```

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

### Install Hextaui Select Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/select.mdx

Command-line interface instruction to add the `select` component from the `hextaui` library to your project using `npx`. This simplifies the setup process by automating component file generation.

```cli
npx hextaui@latest add select
```

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

### Install Input Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/input.mdx

Command-line interface instruction to add the Input component to a project using the `npx hextaui` package manager. This simplifies the setup process for integrating the component.

```package-install
npx hextaui@latest add input
```

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

### Install Loader Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/loader.mdx

Installs the `Loader` component into a project using the `hextaui` CLI tool, simplifying the setup process.

```package-install
npx hextaui@latest add loader
```

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

### Install Progress Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/progress.mdx

Provides the command-line instruction to quickly add the `Progress` component to your project using the `hextaui` package manager, streamlining the setup process.

```cli
npx hextaui@latest add progress
```

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

### Install Dependencies for Manual Modal Setup

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/modal.mdx

This command installs the necessary npm packages required for manually setting up the HextaUI Modal component. It includes `@radix-ui/react-dialog` for the base dialog primitive, `motion` for animations, and `lucide-react` for icons.

```npm
npm install @radix-ui/react-dialog motion lucide-react
```

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

### CLI Installation for Cursor Component (shadcn/ui)

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/og-blocks/animation/cursor.mdx

This command provides a convenient way to add the cursor component to a project using the `shadcn/ui` CLI. It fetches the component from a specified URL, streamlining the setup process.

```cli
npx shadcn@latest add "https://21st.dev/r/hextaui/cursor"
```

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

### Install Tooltip Component via Hextaui CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/tooltip.mdx

This command uses the Hextaui CLI to automatically add the Tooltip component to your project, simplifying the installation process compared to manual setup.

```npx
npx hextaui@latest add tooltip
```

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

### CLI Installation for HextaUI DatePicker

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/date-picker.mdx

This command-line interface snippet demonstrates how to quickly add the DatePicker component to your project using the `npx hextaui` package manager, streamlining the setup process.

```cli
npx hextaui@latest add date-picker
```

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

### Install InputOTP Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/input-otp.mdx

This command utilizes `npx` to quickly add the `input-otp` component from the `hextaui` library to your project. It streamlines the integration process, allowing developers to easily incorporate the component without manual setup.

```cli
npx hextaui@latest add input-otp
```

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

### Install FileUpload Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/file-upload.mdx

Command-line instruction to add the `file-upload` component to your project using the `npx hextaui` utility, streamlining the installation process.

```cli
npx hextaui@latest add file-upload
```

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

### Wrap Application with DirectionProvider

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/getting-started/rtl-setup.mdx

Example of a React component demonstrating how to wrap an application layout with `DirectionProvider` from `@radix-ui/react-direction`. It shows how to manage and provide the layout direction ('ltr' or 'rtl') via React context and includes a toggle button for dynamic direction switching.

```tsx
"use client";

import { useState } from "react";
import { DirectionProvider } from "@radix-ui/react-direction";

export const Layout = ({ children }) => {
  const [direction, setDirection] = useState<"ltr" | "rtl">("ltr");

  const toggleDirection = () => {
    setDirection((prev) => (prev === "ltr" ? "rtl" : "ltr"));
  };

  return (
    // 1. Radix's provider makes the direction available via React context.
    <DirectionProvider dir={direction}>
      {/* 2. The `dir` attribute on a DOM element tells the browser and CSS how to render content. */}
      <div dir={direction}>
        <header className="p-4 border-b">
          <button
            onClick={toggleDirection}
            className="px-3 py-1 border rounded"
          >
            Toggle to {direction === "ltr" ? "RTL" : "LTR"}
          </button>
        </header>
        <main className="p-4">
          {children}
        </main>
      </div>
    </DirectionProvider>
  );
};
```

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

### Basic Kbd Component Example

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/kbd.mdx

A simple example demonstrating the default rendering of the `Kbd` component within a sentence, showing 'Press Enter to submit' to illustrate its inline usage.

```tsx
<div className="flex flex-wrap gap-2 items-center">
  <span>Press</span>
  <Kbd>Enter</Kbd>
  <span>to submit</span>
</div>
```

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

### Install Resizable Panel Dependencies (NPM)

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/resizable.mdx

Installs the necessary `react-resizable-panels` and `lucide-react` packages. These dependencies are crucial for the functionality and iconography of the resizable panel components.

```package-install
npm install react-resizable-panels lucide-react
```

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

### Install Pagination Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/pagination.mdx

This command-line instruction demonstrates how to add the 'pagination' component to your project using the hextaui CLI tool, simplifying the installation process.

```CLI
npx hextaui@latest add pagination
```

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

### Install Toast Component via Hextaui CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/toast.mdx

Command to quickly add the toast component to a project using the `hextaui` command-line interface, simplifying the installation process.

```package-install
npx hextaui@latest add toast
```

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

### Install Expandable Tabs via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/og-blocks/application/expandable-tabs.mdx

Command-line instruction to add the `expandable-tabs` component to a project using the `shadcn` CLI tool, simplifying the installation process.

```package-install
npx shadcn@latest add "https://21st.dev/r/hextaui/expandable-tabs"
```

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

### Shining Text Component CLI Installation

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/og-blocks/text/shining-text.mdx

Command-line interface command to add the `ShiningText` component to a project using the shadcn/ui CLI, simplifying the installation process.

```cli
npx shadcn@latest add "https://21st.dev/r/hextaui/shining-text"
```

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

### Get Color Format Placeholder Text

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/color-picker.mdx

Provides example placeholder strings for different color input formats (hex, rgb, hsl, hsv, oklch, lab). This is useful for UI elements that require format-specific examples to guide user input.

```typescript
export function getFormatPlaceholder(format: ColorFormat): string {
  switch (format) {
    case "hex":
      return "#3b82f6";
    case "rgb":
      return "rgb(59, 130, 246)";
    case "hsl":
      return "hsl(220, 91%, 64%)";
    case "hsv":
      return "hsv(220, 76%, 96%)";
    case "oklch":
      return "oklch(65% 0.15 230)";
    case "lab":

```

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

### Initialize HextaUI in the project

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/installation/vite.mdx

Runs the HextaUI initialization command using `npx`, which sets up necessary configurations and files for HextaUI to function correctly within your project.

```shell
npx hextaui@latest init
```

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

### Install SpotlightCard via Shadcn CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/og-blocks/animation/spotlight-card.mdx

This command demonstrates how to add the SpotlightCard component to your project using the `shadcn/ui` CLI. This method simplifies the installation process by automatically adding the component's code and dependencies to your project.

```shell
npx shadcn@latest add "https://21st.dev/r/hextaui/spotlight-card"
```

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

### Create a New Next.js Project

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/installation/nextjs.mdx

This command initializes a new Next.js application using `create-next-app`. It's recommended to enable TypeScript and Tailwind CSS during the setup process for compatibility with HextaUI.

```package-install
npx create-next-app@latest my-nextjs-app
```

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

### Install InfiniteTextMarquee via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/og-blocks/animation/infinite-text-marquee.mdx

Instructions for installing the `InfiniteTextMarquee` component using a command-line interface tool, likely `shadcn/ui`'s `npx shadcn@latest add` command. This method fetches the component from a specified URL, simplifying integration.

```shell
npx shadcn@latest add "https://21st.dev/r/hextaui/infinite-text-marquee"
```

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

### Install ScrollArea Component (Hextaui CLI)

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/scroll-area.mdx

Instructions for installing the ScrollArea component using the Hextaui CLI tool, simplifying the setup process by adding the component directly to your project.

```shell
npx hextaui@latest add scroll-area
```

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

### Install Animated Dock Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/og-blocks/application/animated-dock.mdx

This command provides a convenient way to install the `AnimatedDock` component using a command-line interface tool, likely `shadcn/ui`'s `add` command. It streamlines the process of integrating the component into a project by fetching it from a specified URL.

```package-install
npx shadcn@latest add "https://21st.dev/r/hextaui/animated-dock"
```

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

### Install Marquee Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/marquee.mdx

Command-line interface command to add the Marquee component to your project using the `hextaui` package manager. This simplifies the setup process by automatically installing dependencies and adding the component files.

```bash
npx hextaui@latest add marquee
```

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

### CLI Installation of Hextaui Drawer Component

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/drawer.mdx

This command-line interface (CLI) instruction uses `npx` to add the `drawer` component from the `hextaui` library to a project. It's a quick way to integrate the component without manual file creation.

```bash
npx hextaui@latest add drawer
```

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

### Install Avatar Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/avatar.mdx

This command demonstrates how to add the Avatar component to your project using the `npx hextaui` CLI tool. It fetches the latest version of the component and integrates it into your project setup, simplifying the installation process.

```CLI
npx hextaui@latest add avatar
```

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

### Simple MenuBar Example

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/menubar.mdx

Provides a straightforward example of a MenuBar with multiple top-level menus, each containing basic menu items and separators. This demonstrates common menu structures for 'File', 'Edit', and 'Help' options.

```tsx
import {
  MenuBar,
  MenuBarMenu,
  MenuBarTrigger,
  MenuBarContent,
  MenuBarItem,
  MenuBarSeparator
} from "@/components/ui/MenuBar";

<MenuBar>
  <MenuBarMenu>
    <MenuBarTrigger>File</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem>New</MenuBarItem>
      <MenuBarItem>Open</MenuBarItem>
      <MenuBarItem>Save</MenuBarItem>
      <MenuBarSeparator />
      <MenuBarItem>Exit</MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>

  <MenuBarMenu>
    <MenuBarTrigger>Edit</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem>Undo</MenuBarItem>
      <MenuBarItem>Redo</MenuBarItem>
      <MenuBarSeparator />
      <MenuBarItem>Cut</MenuBarItem>
      <MenuBarItem>Copy</MenuBarItem>
      <MenuBarItem>Paste</MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>

  <MenuBarMenu>
    <MenuBarTrigger>Help</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem>Documentation</MenuBarItem>
      <MenuBarItem>Support</MenuBarItem>
      <MenuBarSeparator />
      <MenuBarItem>About</MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>
</MenuBar>
```

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

### Complete Basic HextaUI Sidebar Component Example

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/sidebar.mdx

A comprehensive example demonstrating a full `Sidebar` setup with header, body, items, and content area, including state management for collapse. This snippet provides a runnable basic implementation of the HextaUI sidebar within a React component.

```tsx
"use client";

import * as React from "react";
import {
  Sidebar,
  SidebarBody,
  SidebarItem,
  SidebarContent,
  SidebarHeader,
  SidebarText,
} from "./sidebar";
import { cn } from "@/lib/utils";
import { Home, Search, Settings, FileText } from "lucide-react";

export function SidebarBasic() {
  const [collapsed, setCollapsed] = React.useState(false);

return (

<div className="relative h-screen w-full flex overflow-hidden rounded-ele border border-border">
<Sidebar
        position="relative"
        collapsed={collapsed}
        onCollapsedChange={setCollapsed}
      >
<SidebarHeader>
<img
            className="rounded-ele bg-background border border-border shrink-0"
            src="https://api.dicebear.com/9.x/micah/svg?seed=Sara"
            width={35}
            height={35}
          />
<SidebarText className="font-semibold text-lg">HextaUI</SidebarText>
</SidebarHeader>

        <SidebarBody>
          <SidebarItem id="home" label="Home" icon={Home} />
          <SidebarItem id="search" label="Search" icon={Search} />
          <SidebarItem id="documents" label="Documents" icon={FileText} />
          <SidebarItem id="settings" label="Settings" icon={Settings} />
        </SidebarBody>
      </Sidebar>

      <SidebarContent
        sidebarCollapsed={collapsed}
        position="relative"
        className="p-6"
      >
        <div className="space-y-4">
          <h1 className="text-2xl font-bold">Welcome to HextaUI</h1>
          <p className="text-muted-foreground">
            This is the main content area. The sidebar will affect the width of this content.
          </p>
        </div>
      </SidebarContent>
    </div>

);
}
```

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

### Initialize HextaUI in Next.js Project

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/installation/nextjs.mdx

This command runs the HextaUI initialization script, setting up necessary configurations and files within your project. It's a crucial step after installation to properly integrate HextaUI.

```package-install
npx hextaui@latest init
```

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

### Basic Usage of Tabs Component in React

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/tabs.mdx

Demonstrates a minimal example of integrating the `TabsWithContent` component into a React functional component. This shows how to render the component within a default export for a simple setup.

```tsx
export default function MyComponent() {
  return <TabsWithContent />;
}
```

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

### Create a new React project with Vite

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/installation/vite.mdx

This command initializes a new React project using Vite, prompting for project setup details like framework choice (e.g., React + TypeScript).

```shell
npm create vite@latest
```

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

### Install Chip Component via Hextaui CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/chip.mdx

This command provides a convenient way to add the `Chip` component to your project using the `hextaui` command-line interface. It simplifies the installation process by automating dependency management and file placement.

```package-install
npx hextaui@latest add chip
```

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

### Install Tabs Component via Shadcn CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/tabs.mdx

Command-line interface instruction to add the `Tabs` component from the shadcn UI library to a project. This simplifies component integration by automating the download and setup process.

```cli
npx shadcn@latest add "https://ui.shadcn.com/docs/components/tabs"
```

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

### Install Accordion Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/accordion.mdx

This command uses `npx` to add the Accordion component from the `hextaui` library to the current project. It's a convenient way to integrate the component without manual setup.

```shell
npx hextaui@latest add accordion
```

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

### Install Skeleton UI Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/skeleton.mdx

This command-line interface (CLI) snippet demonstrates how to add the `skeleton` component to a project using `npx` and the `hextaui` package manager, simplifying the installation process.

```package-install
npx hextaui@latest add skeleton
```

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

### MenuBar with Icons, Shortcuts, and Submenus

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/menubar.mdx

Illustrates a more complex MenuBar setup, incorporating icons, keyboard shortcuts, and nested submenus for enhanced functionality. This example showcases 'File', 'Edit', and 'Settings' menus with advanced features.

```tsx
import {
  MenuBar,
  MenuBarMenu,
  MenuBarTrigger,
  MenuBarContent,
  MenuBarItem,
  MenuBarSeparator,
  MenuBarSub,
  MenuBarSubTrigger,
  MenuBarSubContent
} from "@/components/ui/MenuBar";
import { File, Edit, Settings, Plus, Save } from "lucide-react";

<MenuBar>
  <MenuBarMenu>
    <MenuBarTrigger icon={File}>File</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem icon={Plus} shortcut="⌘N">
        New File
      </MenuBarItem>
      <MenuBarItem icon={Save} shortcut="⌘S">
        Save
      </MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>

  <MenuBarMenu>
    <MenuBarTrigger icon={Edit}>Edit</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem shortcut="⌘Z">Undo</MenuBarItem>
      <MenuBarItem shortcut="⌘Y">Redo</MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>

  <MenuBarMenu>
    <MenuBarTrigger icon={Settings}>Settings</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarSub>
        <MenuBarSubTrigger>Preferences</MenuBarSubTrigger>
        <MenuBarSubContent>
          <MenuBarItem>Theme</MenuBarItem>
          <MenuBarItem>Language</MenuBarItem>
        </MenuBarSubContent>
      </MenuBarSub>
    </MenuBarContent>
  </MenuBarMenu>
</MenuBar>
```

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

### Basic Breadcrumb Component Usage in TSX

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/breadcrumb.mdx

This example shows the fundamental structure for rendering a simple Breadcrumb navigation with a home link and a current page indicator using HextaUI components. It illustrates the minimal setup required.

```tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

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

### Install Label component via Hextaui CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/label.mdx

Command-line instruction to add the `Label` component to a project using the `hextaui` CLI tool, simplifying the installation process.

```package-install
npx hextaui@latest add label
```

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

### Install AnimatedUnderline Component via Shadcn CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/og-blocks/text/animated-underline.mdx

Instructions for adding the `AnimatedUnderline` component to a project using the `shadcn/ui` CLI, referencing a specific remote URL for automated installation.

```shell
npx shadcn@latest add "https://21st.dev/r/hextaui/animated-underline"
```

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

### Basic Usage of GradientBeam Component

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/og-blocks/animation/gradient-beam.mdx

Illustrates a simple JSX example of how to instantiate and use the `GradientBeam` component with essential `width`, `height`, and `path` props. This snippet demonstrates the minimal setup required to render the component.

```tsx
<GradientBeam width={200} height={100} path="M0,50 Q150,0 300,50" />
```

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

### Manual Installation of Chip Component Dependencies

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/chip.mdx

This section provides instructions for manually installing the necessary npm packages required for the `Chip` component to function correctly. It specifies `class-variance-authority` for styling and `lucide-react` for icon support.

```package-install
npm install class-variance-authority lucide-react
```

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

### Install PostCard Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/og-blocks/application/post-card.mdx

Instructions to install the `PostCard` component using a command-line interface tool, likely `shadcn/ui`'s `npx` command for adding components.

```package-install
npx shadcn@latest add "https://21st.dev/r/hextaui/post-card"
```

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

### Apply Directional Styles with Tailwind CSS

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/getting-started/rtl-setup.mdx

Examples demonstrating how to apply direction-specific styles using Tailwind CSS. This includes using `rtl:` variants for conditional styling, such as flipping an icon or adjusting the translation of a UI element based on the layout direction.

```tsx
// Example: An icon that should always point "forward".
import { ChevronRightIcon } from '@heroicons/react/20/solid';

<ChevronRightIcon className="size-4 rtl:-scale-x-100" />
```

```tsx
// A thumb element inside a Switch component
<div
  className="h-4 w-4 rounded-full bg-white shadow transition-transform
             data-[state=checked]:translate-x-4
             rtl:data-[state=checked]:-translate-x-4
             data-[state=unchecked]:translate-x-0"
/>
```

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

### Install Hextaui Card Component via CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/card.mdx

This command uses the `hextaui` command-line interface to automatically add the `Card` component to your project. This is a streamlined alternative to manual installation.

```shell
npx hextaui@latest add card
```

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

### Basic Usage of TagInput Component with State

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/tag-input.mdx

This example illustrates the fundamental setup for using the `TagInput` component. It demonstrates how to manage the list of tags using React's `useState` hook and pass the `tags` array and `onTagsChange` callback as props to the component.

```tsx
const [tags, setTags] = useState<string[]>([]);

<TagInput
  tags={tags}
  onTagsChange={setTags}
  placeholder="Type and press Enter..."
/>
```

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

### Calendar Date Range Selection

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/calendar.mdx

This TypeScript React example demonstrates how to configure the Calendar component for selecting a range of dates. It uses `mode="range"` along with `selectedRange` and `onSelectRange` props to manage the start and end dates of the selected range.

```tsx
function CalendarRangeExample() {
      const [range, setRange] = React.useState<{ from: Date; to?: Date }>();

      return (
        <Calendar
          mode="range"
          selectedRange={range}
          onSelectRange={setRange}
        />
      );
    }
```

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

### Implementing a Basic Data Table in TypeScript React

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/table.mdx

This snippet demonstrates how to create a data table using the `DataTable` and `DataTableColumn` components in a TypeScript React application. It defines columns with sorting, filtering, and custom rendering capabilities, and populates the table with sample user data. This example showcases the setup for a responsive and feature-rich table.

```tsx
import { DataTable, DataTableColumn } from "@/components/ui/Table";
import { Badge } from "@/components/ui/Badge";

const usersData = [
  {
    id: "1",
    name: "John Doe",
    email: "john@example.com",
    role: "Admin",
    status: "active",
    joinDate: "2024-01-15"
  },
  // ... more data
];

const columns: DataTableColumn<User>[] = [
  {
    key: "name",
    header: "Name",
    sortable: true,
    filterable: true
  },
  {
    key: "email",
    header: "Email",
    sortable: true,
    filterable: true
  },
  {
    key: "role",
    header: "Role",
    sortable: true,
    filterable: true
  },
  {
    key: "status",
    header: "Status",
    render: (value) => (
      <Badge variant={value === "active" ? "default" : "secondary"}>
        {value}
      </Badge>
    )
  },
  {
    key: "joinDate",
    header: "Join Date",
    sortable: true
  }
];

<DataTable
  data={usersData}
  columns={columns}
  searchPlaceholder="Search users..."
  itemsPerPage={5}
/>
```

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

### Real-world Chip Component Usage Examples

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/chip.mdx

Illustrates practical applications of the `Chip` component for common UI patterns like product tags, selected filters, and event attendees. Shows how to combine different sizes, variants, and dismissible features.

```tsx
import { Award, Star, Tag, User } from "lucide-react";

<div className="space-y-6">
  <div>
    <h4 className="text-sm font-medium mb-3">Product Tags</h4>
    <div className="flex gap-2 flex-wrap">
      <Chip icon={Award} variant="default" size="sm">New</Chip>
      <Chip icon={Star} variant="secondary" size="sm">Bestseller</Chip>
      <Chip icon={Tag} variant="outline" size="sm">Sale</Chip>
      <Chip variant="destructive" size="sm">Limited</Chip>
    </div>
  </div>

  <div>
    <h4 className="text-sm font-medium mb-3">Selected Filters</h4>
    <div className="flex gap-2 flex-wrap">
      <Chip variant="outline" dismissible>Price: $50-100</Chip>
      <Chip variant="outline" dismissible>Brand: Nike</Chip>
      <Chip variant="outline" dismissible>Color: Blue</Chip>
      <Chip variant="outline" dismissible>Size: Medium</Chip>
    </div>
  </div>

  <div>
    <h4 className="text-sm font-medium mb-3">Event Attendees</h4>
    <div className="flex gap-2 flex-wrap">
      <Chip icon={User} variant="secondary" size="sm" dismissible>
        Sarah Wilson
      </Chip>
      <Chip icon={User} variant="secondary" size="sm" dismissible>
        Mike Johnson
      </Chip>
      <Chip icon={User} variant="secondary" size="sm" dismissible>
        Anna Davis
      </Chip>
      <Chip variant="ghost" size="sm" className="cursor-pointer">
        +5 more
      </Chip>
    </div>
  </div>
</div>
```

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

### Install class-variance-authority Dependency

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/card.mdx

This command installs the `class-variance-authority` package, a required dependency for the Hextaui Card component, using npm. This step is part of the manual installation process.

```shell
npm install class-variance-authority
```

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

### Install Dependencies

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/pagination.mdx

Installs necessary dependencies for the Hexta UI pagination component using npm.

```package-install
npm install class-variance-authority lucide-react
```

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

### Install Sidebar Component via Hextaui CLI

Source: https://github.com/preetsuthar17/hextaui/blob/master/content/docs/ui/components/sidebar.mdx

This command demonstrates how to quickly add the `sidebar` component to your project using the Hextaui CLI. It leverages `npx` to execute the `hextaui` package directly, streamlining the installation process for specific UI components.

```Shell
npx hextaui@latest add sidebar
```