HextaUI

https://www.hextaui.com/docs/ui/getting-started/introduction
Admin
HextaUI is a complete design system providing modern, responsive, and customizable UI components...
Tokens:229,600
Snippets:832
Trust Score:6.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize HextaUI in Project

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

This command uses `npx` to execute the `hextaui` package's `init` command without requiring a global installation. The `init` command typically sets up necessary configurations or files for HextaUI within your project, preparing it for component usage.

```Shell
npx hextaui@latest init
```

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

### Install HextaUI Package

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

This command installs the latest version of the HextaUI library as a project dependency. HextaUI provides a collection of UI components for building web applications. This step is a prerequisite for using HextaUI components in your project.

```Shell
npm install hextaui@latest
```

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

### Install HextaUI Skeleton Components

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/skeleton

Command to add the Skeleton components to your project using `npx` for quick setup.

```Shell
npx hextaui@latest add skeleton
```

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

### HextaUI Sidebar Installation Command

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/sidebar

This command provides a quick way to add the HextaUI sidebar components to your project using `npx`. It streamlines the setup process by automatically installing and configuring the necessary files.

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

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

### Create a new React project with Vite

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

This command initializes a new Vite project. Follow the interactive prompts and select 'React + Typescript' as the framework to set up your project.

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

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

### Install Hextaui Tree Component

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/tree

This command uses `npx` to quickly add the `tree` component from the `hextaui` library to your project. It streamlines the setup process for integrating the component.

```shell
npx hextaui@latest add tree
```

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

### Full Basic HextaUI Sidebar Component Example

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/sidebar

This comprehensive example provides a complete, runnable React component demonstrating a basic HextaUI sidebar setup. It includes imports, state management, a header with an image and text, multiple navigation items with icons, and a main content area that adjusts based on the sidebar's collapsed state, showcasing a typical application layout.

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

);
}
```

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

### Add Specific HextaUI Component

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

This command uses `npx` to run the `hextaui` package's `add` command, specifically for the 'button' component. It adds the `Button` component's files to your project, making it available for import and use. This allows for selective inclusion of components.

```Shell
npx hextaui@latest add button
```

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

### Install Node.js Type Definitions for Vite

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

This command installs the `@types/node` package as a development dependency. It provides TypeScript type definitions for Node.js APIs, which helps resolve type-related errors in Vite projects, especially when dealing with path resolution or Node.js built-in modules.

```Shell
npm install -D @types/node
```

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

### Install Accordion Component via CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/accordion

Provides the command-line instruction to add the Accordion component to a project using the `hextaui` CLI tool, simplifying the setup process.

```Shell
npx hextaui@latest add accordion
```

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

### Install Radix Direction Package

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/getting-started/rtl-setup

Instructions for installing the `@radix-ui/react-direction` package, which provides the core context provider and hook for managing layout direction in React applications. This package is essential for enabling RTL support.

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

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

### Install Tailwind CSS and its Vite plugin

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

This command installs the core Tailwind CSS package along with `@tailwindcss/vite`, which is the necessary plugin for integrating Tailwind CSS into a Vite project.

```npm
npm install npm install tailwindcss @tailwindcss/vite
```

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

### Install HextaUI Command Menu Component via CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/command-menu

This command uses `npx` to add the `command-menu` component from the `hextaui` library to your project. It's the recommended and quickest way to integrate the component without manual setup, ensuring you get the latest version.

```Shell
npx hextaui@latest@latest add command-menu
```

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

### Install Marquee Component via Hextaui CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/marquee

Command-line instruction to add the Marquee component to a project using the `npx hextaui` utility, simplifying the setup process.

```Shell
npx hextaui@latest add marquee
```

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

### Install TagInput Component with npx

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/tag-input

Provides the command-line instruction to add the `tag-input` component to your project using `npx` from the `hextaui` library, simplifying the setup process.

```shell
npx hextaui@latest add tag-input
```

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

### Skeleton Card Layouts Example

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/skeleton

Provides examples of `SkeletonCard` usage with different configurations (e.g., with/without image, header, or footer) to simulate various card layouts during loading.

```HTML
<div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2">
  {/* Full card with image, header, content, and footer */}
  <SkeletonCard />

  {/* Card without image */}
  <SkeletonCard showImage={false} />
</div>
<div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-4">
  {/* Card without footer */}
  <SkeletonCard showFooter={false} />

  {/* Card without header */}
  <SkeletonCard showHeader={false} />

  {/* Card with only content */}
  <SkeletonCard showImage={false} showFooter={false} />
</div>
```

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

### Kbd Component Default Styling Example

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/kbd

An example showcasing the `Kbd` component with its default styling, typically used for single key presses like 'Enter'.

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

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

### Configure tsconfig.app.json for IDE path resolution

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

Add the same `baseUrl` and `paths` configuration to your `tsconfig.app.json` file. This ensures that your Integrated Development Environment (IDE) correctly resolves the configured path aliases, providing proper autocompletion and navigation.

```json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
```

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

### Install Hextaui Core Dependencies

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/file-upload

This `npm install` command adds the necessary libraries for Hextaui UI components, including `class-variance-authority` for variant-based styling, `lucide-react` for icons, and `motion` for animations.

```bash
npm install class-variance-authority lucide-react motion
```

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

### Install HextaUI DatePicker Component

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/date-picker

Command to add the DatePicker component to your project using `npx` from the HextaUI library. This command fetches and installs the latest version of the component.

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

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

### Install Core Dependencies for Hextaui Components

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/button

This command installs the foundational libraries, `@radix-ui/react-slot` and `class-variance-authority`, which are essential for the Hextaui Button component and other UI elements built with similar patterns.

```shell
npm install @radix-ui/react-slot class-variance-authority
```

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

### Install Menubar Component using Hextaui CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/menubar

This command demonstrates how to add the `menubar` component to a project using the `hextaui` command-line interface. It utilizes `npx` to execute the `hextaui` package directly, simplifying the installation process for UI components.

```Shell
npx hextaui@latest add menubar
```

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

### Initialize HextaUI Configuration

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/nextjs

After installation, this command initializes HextaUI within your project, setting up necessary configurations and files. It prepares the project to use HextaUI components.

```bash
npx hextaui@latest init
```

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

### Get Placeholder Text for Color Input by Format

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/color-picker

This function provides example placeholder strings for various color input formats (hex, rgb, hsl, hsv, oklch, lab). It's useful for guiding user input in UI elements that accept color values.

```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":
      return "lab(55% -10 40)";
    default:
      return "";
  }
}
```

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

### Install SpotlightCard via Shadcn CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/og-blocks/animation/spotlight-card

This command uses the Shadcn CLI to add the `SpotlightCard` component to a project, simplifying the installation process for HextaUI components. It fetches the component directly from the specified URL.

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

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

### Checkbox Basic Usage Example with State

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/checkbox

Demonstrates a basic interactive Checkbox setup within a React functional component, including state management for the checked status and examples of disabled checkboxes. It shows how to handle `onCheckedChange` events.

```jsx
function CheckboxBasic() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="flex flex-col gap-4">
      <Checkbox
        label="Accept terms and conditions"
        checked={checked}
        onCheckedChange={(checked) => setChecked(!!checked)}
      />
      <Checkbox label="Subscribe to newsletter" />
      <Checkbox label="This checkbox is disabled" disabled />
      <Checkbox label="Remember me" checked disabled />
    </div>
  );
}
```

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

### Basic Textarea Usage

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/textarea

A simple example demonstrating how to render the Textarea component with a placeholder. This snippet shows the minimal setup required to display a functional textarea.

```jsx
<div className="grid w-full max-w-sm items-center gap-1.5">
  <Textarea placeholder="Enter your message..." />
</div>
```

```jsx
<div className="w-full max-w-sm">
  <Textarea placeholder="Enter your message here..." />
</div>
```

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

### Simple MenuBar Example with Multiple Menus

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/menubar

Provides a straightforward example of the HextaUI MenuBar component, featuring multiple top-level menus like 'File', 'Edit', and 'Help', each containing a set of common menu items and separators.

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

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

### VideoPlayer with Poster Image

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/video-player

This example demonstrates how to include a `poster` image for the `VideoPlayer` component, which is displayed before the video starts playing, enhancing the user experience.

```jsx
<VideoPlayer src="/video.mp4" poster="/poster.jpg" size="default" />
```

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

### Basic MenuBar Structure Example

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/menubar

Demonstrates the fundamental structure of the HextaUI MenuBar component, showing how to create a simple 'File' menu with 'New File', 'Open File', and 'Save' items, separated by a line.

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

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

### Install HextaUI Select Component via CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/select

Command-line instruction to add the HextaUI Select component to a project using the `npx hextaui` CLI tool, simplifying component integration into a development environment.

```Shell
npx hextaui@latest add select
```

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

### Configure Vite for Path Aliases and Plugins

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

This `vite.config.ts` configuration sets up a Vite project to use React and Tailwind CSS plugins. It also defines a path alias `@` that resolves to the `src` directory, simplifying module imports within the project. This setup is crucial for proper module resolution and integrating styling frameworks.

```TypeScript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});
```

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

### Skeleton Article List Example

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/skeleton

Shows how to create a dynamic loading state for an article list using `Array.from` and mapping over `Skeleton` components, including image, text, and avatar placeholders.

```HTML
<div className="space-y-4 sm:space-y-6">
  {Array.from({ length: 3 }).map((_, i) => (
    <div
      key={i}
      className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"
    >
      <Skeleton className="w-full sm:w-16 h-32 sm:h-16 rounded-lg" />
      <div className="flex-1 space-y-2">
        <SkeletonText className="w-full sm:w-3/4" />
        <SkeletonText className="w-4/5 sm:w-1/2" size="sm" />
        <div className="flex flex-wrap items-center gap-2">
          <SkeletonAvatar size="sm" />
          <SkeletonText className="w-20" size="sm" />
          <SkeletonText className="w-16" size="sm" />
        </div>
      </div>
    </div>
  ))}
</div>
```

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

### Create a New Next.js Project

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/nextjs

This command initiates a new Next.js project. It's crucial to enable TypeScript and Tailwind CSS during the interactive setup process for optimal HextaUI integration.

```bash
npx create-next-app@latest my-nextjs-app
```

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

### Install Modal Component via Hextaui CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/modal

Uses the Hextaui CLI tool to automatically add the modal component files to the project, simplifying the setup process and ensuring proper integration.

```npm
npx hextaui@latest add modal
```

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

### CLI Installation for Infinite Text Marquee Component

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/og-blocks/animation/infinite-text-marquee

This command-line interface (CLI) snippet provides a quick way to add the `InfiniteTextMarquee` component to your project. It leverages `npx` and a specific URL, likely integrating with a component library management tool like `shadcn/ui` for streamlined installation.

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

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

### Kbd Component Key Combinations Example

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/kbd

Demonstrates how to display multiple keys as a combination using the `keys` prop, useful for complex shortcuts like 'Ctrl + Shift + A' or '⌘ + ⌥ + Esc'.

```JSX
<div className="flex flex-col gap-4">
  <div className="flex items-center gap-2">
    <span>Save:</span>
    <Kbd keys={["Ctrl", "S"]} />
  </div>
  <div className="flex items-center gap-2">
    <span>Copy:</span>
    <Kbd keys={["⌘", "C"]} />
  </div>
  <div className="flex items-center gap-2">
    <span>Select All:</span>
    <Kbd keys={["Ctrl", "Shift", "A"]} />
  </div>
  <div className="flex items-center gap-2">
    <span>Force Quit:</span>
    <Kbd keys={["⌘", "⌥", "Esc"]} />
  </div>
</div>
```

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

### Add Loader Component via HextaUI CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/loader

Command to automatically add the Loader component to your project using the HextaUI CLI tool, simplifying the installation and setup process for HextaUI components.

```bash
npx hextaui@latest add loader
```

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

### Configure src/index.css for Tailwind CSS

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

Replace the entire content of your `src/index.css` file with this single `@import` statement. This line tells your CSS to include all of Tailwind's base styles, components, and utilities.

```css
@import "tailwindcss";
```

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

### Loader Component Examples: With Loading Text

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/loader

Illustrates how to integrate the `Loader` component with accompanying text to provide context for loading states. Examples show different loader sizes and variants paired with descriptive messages.

```tsx
<div className="space-y-4">
  <div className="flex items-center gap-3">
    <Loader size="sm" />
    <span className="text-sm text-muted-foreground">Loading...</span>
  </div>
  <div className="flex items-center gap-3">
    <Loader variant="primary" />
    <span className="text-sm">Processing your request</span>
  </div>
  <div className="flex items-center gap-3">
    <Loader size="sm" variant="muted" />
    <span className="text-sm text-muted-foreground">Uploading files</span>
  </div>
  <div className="flex items-center gap-3">
    <Loader variant="secondary" />
    <span className="text-sm">Saving changes</span>
  </div>
</div>
```

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

### Skeleton Text Lines Example

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/skeleton

Illustrates how to use `Skeleton` components to create placeholder text lines with varying widths, simulating a block of text content during loading.

```HTML
<div className="space-y-2">
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
  <Skeleton className="h-4 w-5/6" />
</div>
```

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

### Install HextaUI Staggered Blur Component via CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/og-blocks/text/blurred-stagger

This command demonstrates how to add the `BlurredStagger` component to your project using the `shadcn` CLI. It fetches the component from a specified URL and integrates it into your existing setup.

```bash
npx shadcn@latest add "https://21st.dev/r/hextaui/blurred-stagger-text"
```

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

### Initialize HextaUI configuration in project

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/astro

Runs the `init` command of the `hextaui` CLI, which typically sets up necessary configuration files or directories for HextaUI within the project.

```Shell
npx hextaui@latest init
```

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

### Configure tsconfig.json for path aliases

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

Modify your main `tsconfig.json` file by adding `baseUrl` and `paths` within the `compilerOptions` section. This configuration enables absolute path imports, allowing you to use aliases like `@/` for your `src` directory.

```json
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

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

### HextaUI Component Installation via Shadcn CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/og-blocks/application/animated-dock

This command demonstrates how to install the HextaUI Animated Dock component into a project using the Shadcn CLI. It fetches the component from a specified URL, simplifying the integration process for developers.

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

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

### Use HextaUI Button Component in React

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/vite

This React component demonstrates how to import and use the `Button` component from HextaUI within an `App.tsx` file. After adding the component using the `hextaui add` command, it can be imported from `@/components/ui/button` and rendered in your application's JSX.

```JSX
import { Button } from "@/components/ui/button";

function App() {
  return (
    <main>
      <Button>Click Me!</Button>
    </main>
  );
}

export default App
```

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

### Install Tabs Component via shadcn/ui CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/tabs

Command-line instruction to add the `Tabs` component to a project using the `shadcn/ui` CLI tool, simplifying component integration.

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

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

### Install Core Dependencies for UI Components

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/date-picker

Installs essential npm packages like `class-variance-authority`, `lucide-react`, `motion`, and `react-dom` required for building and using various UI components, including the DatePicker. This command should be run in your project's root directory.

```shell
npm install class-variance-authority lucide-react motion react-dom
```

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

### Install HextaUI Input Component via CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/input

This command uses the HextaUI CLI to add the `input` component to your project. It supports various package managers like `npm`, `pnpm`, `yarn`, and `bun` for component scaffolding.

```Bash
npx hextaui@latest add input
```

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

### TailwindCSS `rtl:` Variant for Flipping Icons

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/getting-started/rtl-setup

Demonstrates how to use the `rtl:` variant in TailwindCSS to apply specific styles only when the text direction is right-to-left. This example shows flipping an icon horizontally using `-scale-x-100` for RTL layouts, ensuring it always points 'forward' regardless of the reading direction.

```JavaScript
import { ChevronRightIcon } from '@heroicons/react/20/solid';

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

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

### TailwindCSS `rtl:` Variant for Conditional Element Translation

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/getting-started/rtl-setup

Illustrates the use of the `rtl:` variant combined with `data-state` attributes to control element translation based on both component state and text direction. This example from a Switch component shows how a 'thumb' element slides in opposite directions for LTR and RTL layouts when checked.

```HTML
<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 Typewriter Component via Shadcn CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/og-blocks/text/typewriter

Instructions for installing the `Typewriter` component into a project using the `shadcn` CLI. This command fetches the component's code from a specified URL and integrates it into the local project structure.

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

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

### Install class-variance-authority Dependency

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/kbd

Command to install the `class-variance-authority` package, a utility for creating variant-based components, using npm, pnpm, or yarn.

```Shell
npm install pnpm add class-variance-authority
```

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

### Install HextaUI DropdownMenu Component via CLI

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/components/dropdown-menu

This command uses `npx` to execute the `hextaui` package and add the `dropdown-menu` component to the current project. It's a convenient command-line interface method for integrating pre-built UI components into a development environment.

```bash
npx hextaui@latest add dropdown-menu
```

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

### Install HextaUI in Next.js Project

Source: https://www.hextaui.com/docs/ui/getting-started/introduction/ui/installation/nextjs

This command installs the latest version of the HextaUI library into your existing Next.js project. It should be run from the project's root directory.

```bash
npm install hextaui@latest
```
Tokens:
Raw