Pure UI

https://pure.kam-ui.com/docs
Admin
Pure UI is a curated collection of refined, animated, and accessible UI components built with Base...
Tokens:27,075
Snippets:294
Trust Score:0.3
Update:9 months ago
Show doc for...
Tokens:
Raw
### Initialize Shadcn CLI for Pure UI Setup

Source: https://pure.kam-ui.com/docs/installation/react-router

Runs the shadcn init command to set up your project for managing UI components with Pure UI. This command prepares your project to accept and manage component installations.

```bash
npx shadcn@latest init
```

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

### Install Pure UI Dependencies with npm

Source: https://pure.kam-ui.com/docs/installation/manual

Installs the core Pure UI dependencies and related styling utilities using npm. This command adds `@base-ui/react`, `motion`, `clsx`, `tailwind-merge`, and `tailwind-variants` to your project's dependencies.

```bash
npm install @base-ui/react motion clsx tailwind-merge tailwind-variants
```

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

### Configure `components.json` for Pure-UI (JSON)

Source: https://pure.kam-ui.com/docs/installation/manual

This JSON file configures the `shadcn/ui` CLI for your project, specifying style, Tailwind CSS integration, component aliases, and custom registries like Pure-UI. Ensure this file is in the root of your project.

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide",
  "registries": {
    "@pureui": "https://pure.kam-ui.com/r/{name}.json"
  }
}
```

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

### Install and Use Card Component (TypeScript)

Source: https://pure.kam-ui.com/docs/components/card

Demonstrates how to install and utilize the Card component and its sub-components from '@/components/ui/card'. This includes importing necessary components and structuring a basic Card layout.

```typescript
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>;
```

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

### Dialog Component Installation and Anatomy

Source: https://pure.kam-ui.com/docs/components/dialog

Demonstrates how to import and structure the Dialog component and its sub-components. This is the basic setup required to use the Dialog.

```jsx
import { Dialog } from "@/components/ui/dialog";

<Dialog>
  <DialogTrigger />
  <DialogPopup>
    <DialogTitle />
    <DialogDescription />
    <DialogClose />
  </DialogPopup>
</Dialog>;
```

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

### Configure tsconfig.json Path Aliases

Source: https://pure.kam-ui.com/docs/installation/manual

Sets up path aliases in your `tsconfig.json` file, enabling the use of shorthand imports like `@/*` for your project's root directory. This configuration is a preference and can be customized.

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

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

### Shadcn UI Select Component Example

Source: https://pure.kam-ui.com/docs/components/select

Provides a code example of a Select component using shadcn/ui, serving as a reference for comparison with Pure UI's implementation.

```jsx
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a framework" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="next">Next.js</SelectItem>
    <SelectItem value="vite">Vite</SelectItem>
    <SelectItem value="astro">Astro</SelectItem>
  </SelectContent>
</Select>
```

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

### Pure UI Select Component Comparison Example

Source: https://pure.kam-ui.com/docs/components/select

Compares the Pure UI Select component implementation with shadcn/ui, highlighting differences in how items are provided and structure. This example demonstrates the `items` prop and `SelectPopup` usage in Pure UI.

```jsx
<Select
  items={[
    { label: "Select a framework", value: null },
    { label: "Next.js", value: "next" },
    { label: "Vite", value: "vite" },
    { label: "Astro", value: "astro" },
  ]}>
  <SelectTrigger>
    <SelectValue placeholder="Select a framework"/>
  </SelectTrigger>
  <SelectContent>
  <SelectPopup
   alignItemWithTrigger={false}
  >
    <SelectList>
      {items.map((item) => (
        <SelectItem key={item.value} value={item}>
          {item.label}
        </SelectItem>
      ))}
    </SelectList>
  </SelectPopup>
  <SelectContent>
</Select>
```

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

### Install Number Field Component - TypeScript/JavaScript

Source: https://pure.kam-ui.com/docs/components/number-field

Demonstrates how to install and import the Number Field component and its associated sub-components from the '@components/ui/number-field' path. This setup is necessary before using the component in your application.

```typescript
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/ui/number-field";
import { Label } from "@/components/ui/label";
```

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

### Install Pure UI Toast Component

Source: https://pure.kam-ui.com/docs/components/toast

Install the Pure UI Toast component using npm, pnpm, yarn, or bun. This command adds the necessary package to your project.

```bash
npx shadcn@latest add @pureui/toast
```

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

### Add Pure-UI Separator Component (CLI Command)

Source: https://pure.kam-ui.com/docs/installation/manual

This command uses the `shadcn-ui` CLI to add the `@pureui/separator` component to your project. It fetches the component definition from the configured registry in `components.json`.

```bash
npx shadcn@latest add @pureui/separator
```

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

### Install Pure UI Textarea Component

Source: https://pure.kam-ui.com/docs/components/textarea

Installs the Pure UI Textarea component using npm. This command adds the necessary package to your project's dependencies.

```bash
npx shadcn@latest add @pureui/textarea
```

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

### Install Radio Group Component

Source: https://pure.kam-ui.com/docs/components/radio-group

Instructions for installing the Radio Group component using npm or yarn.

```bash
npm install @/components/ui/radio-group
yarn add @/components/ui/radio-group
```

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

### Install Input Group Component (Terminal)

Source: https://pure.kam-ui.com/docs/components/input-group

Instructions for installing the Input Group component and its related sub-components from the Pure UI library using npm or yarn.

```bash
npm install @pureui/input-group
# or
yarn add @pureui/input-group
```

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

### Configure Global CSS Styles for Pure KSU UI

Source: https://pure.kam-ui.com/docs/installation/manual

This CSS code snippet is intended for the `styles/globals.css` file. It imports Tailwind CSS and tw-animate-css, defines a custom `dark` variant, and sets up a comprehensive list of CSS variables for light and dark themes, including color, radius, and sidebar-specific tokens. It also applies base styles to all elements and the body.

```css
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.21 0.006 285.885);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.21 0.006 285.885);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.21 0.006 285.885);
  --primary: oklch(0.274 0.006 286.033);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0 0 0 / 4%);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0 0 0 / 4%);
  --muted-foreground: oklch(0.442 0.017 285.786);
  --accent: oklch(0 0 0 / 4%);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.637 0.237 25.331);
  --destructive-foreground: oklch(0.505 0.213 27.518);
  --info: oklch(0.623 0.214 259.815);
  --info-foreground: oklch(0.488 0.243 264.376);
  --success: oklch(0.696 0.17 162.48);
  --success-foreground: oklch(0.508 0.118 165.612);
  --warning: oklch(0.769 0.188 70.08);
  --warning-foreground: oklch(0.555 0.163 48.998);
  --border: oklch(0 0 0 / 10%);
  --input: oklch(0 0 0 / 10%);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.21 0.006 285.885);
  --sidebar-primary: oklch(0.274 0.006 286.033);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0 0 0 / 4%);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0 0 0 / 10%);
  --sidebar-ring: oklch(0.705 0.015 286.067);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

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

### Install Pure UI Tabs Component

Source: https://pure.kam-ui.com/docs/components/tabs

Instructions for installing the Pure UI Tabs component using npm. This command adds the necessary package to your project, enabling the use of the Tabs component and its related elements.

```bash
npx shadcn@latest add @pureui/tabs
```

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

### Import and Use Pure UI Input Component

Source: https://pure.kam-ui.com/docs/components/input

Demonstrates how to import the Input component from the '@/components/ui/input' path and use it in your React application. No specific props are shown in this basic example.

```javascript
import { Input } from "@/components/ui/input";

```

```javascript
<Input />

```

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

### Import and Use Separator Component (TypeScript React)

Source: https://pure.kam-ui.com/docs/installation/manual

This example demonstrates how to import and use the `Separator` component from Pure-UI within a React component. The `Separator` is imported from the alias defined in `components.json` (`@/components/ui/separator`).

```tsx
import { Separator } from "@/components/ui/separator";

export default function Home() {
  return (
    <div>
      <Separator />
    </div>
  );
}
```

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

### Controlled Switch Component Example (HTML/JSX)

Source: https://pure.kam-ui.com/docs/components/switch

Provides an example of a controlled Switch component, managing its checked state via a state variable. This is useful for synchronizing the switch's state with application logic.

```html
<Switch checked={isAirplaneModeChecked} onCheckedChange={setIsAirplaneModeChecked} />
```

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

### Install Pure UI Combobox using npm

Source: https://pure.kam-ui.com/docs/components/combobox

Install the Pure UI Combobox component using npm. This command adds the necessary package to your project's dependencies.

```bash
npx shadcn@latest add @pureui/combobox
```

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

### Install Pure UI Checkbox Component

Source: https://pure.kam-ui.com/docs/components/checkbox

Instructions for installing the Pure UI Checkbox component, typically done via a package manager. This section outlines the necessary import statements for basic and custom usage.

```typescript
import { Checkbox, CheckboxRoot, CheckboxIndicator } from "@/components/ui/checkbox";

// Option #1. Basic usage:
<Checkbox />

// Option #2. Custom usage:
<CheckboxRoot>
  <CheckboxIndicator />
</CheckboxRoot>
```

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

### Install Node Types for Vite Configuration

Source: https://pure.kam-ui.com/docs/installation/vite

Installs the necessary type definitions for Node.js, which helps prevent type errors in the Vite configuration file. This is a development dependency.

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

```

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

### Menu Popup with Motion Blur Animation

Source: https://pure.kam-ui.com/docs/components/menu

This example shows how to apply the 'motion-blur' animation preset to the `MenuPopup`, introducing a blur effect as part of the animation.

```jsx
<MenuPopup animationPreset="motion-blur">
  {/* Menu items */}
</MenuPopup>;
```

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

### Pure UI Select Country Selection Example

Source: https://pure.kam-ui.com/docs/components/select

Provides an example of using the Pure UI Select component for selecting a country from a list. This demonstrates a common use case for the component.

```jsx
previewcode
Select...
```

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

### Pure UI Select Animation Preset: Scale

Source: https://pure.kam-ui.com/docs/components/select

Demonstrates the 'Scale' animation preset for the Pure UI Select component. This example shows how to apply scaling animations to the select dropdown.

```jsx
previewcode
Select a user
```

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

### Apply Themed Background and Foreground Colors

Source: https://pure.kam-ui.com/docs/theming

This example demonstrates how to apply themed background and foreground colors using CSS classes. It utilizes the `--accent` and `--accent-foreground` CSS variables provided by Pure UI for a consistent look and feel.

```html
<div className="bg-accent text-accent-foreground">Hello</div>
```

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

### Accordion Component Variant Example (React)

Source: https://pure.kam-ui.com/docs/components/accordion

Shows how to apply different visual styles to the Accordion component using the 'variant' prop. The 'default' variant is demonstrated.

```jsx
<Accordion
  variant="default"
>
  ...rest content...
</Accordion>
```

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

### Pure UI Select Multiple Selection Example

Source: https://pure.kam-ui.com/docs/components/select

Shows how to enable multiple selection capabilities within the Pure UI Select component. This is useful for scenarios where users need to select more than one option.

```jsx
previewcode
JavaScript (+1 more)
```

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

### Import and Use Pure UI Separator Component

Source: https://pure.kam-ui.com/docs/installation/vite

Demonstrates how to import and use the `Separator` component after it has been added to the project. The example shows a basic React component rendering the `Separator`.

```typescript
import { Separator } from "@/components/ui/separator";

export default function Home() {
  return (
    <div>
      <Separator />
    </div>
  );
}

```

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

### Basic Input Group Usage (React)

Source: https://pure.kam-ui.com/docs/components/input-group

A fundamental example of setting up an InputGroup with an input field, an addon, and a button. This showcases the basic structure for combining input elements with supplementary controls.

```jsx
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Search</InputGroupButton>
  </InputGroupAddon>
</InputGroup>
```

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

### Install Scroll Area Component

Source: https://pure.kam-ui.com/docs/components/scroll-area

Instructions to install the Scroll Area component using npm or yarn. This is a prerequisite for using the component in your project.

```bash
npm install @radix-ui/react-scroll-area
yarn add @radix-ui/react-scroll-area
```

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

### Menu with Arrow - Usage Example

Source: https://pure.kam-ui.com/docs/components/menu

This example shows how to enable the arrow indicator on the MenuPopup by setting the `showArrow` prop to `true`. It's recommended to set `sideOffset` to at least 8 when using the arrow.

```jsx
<Menu>
  <MenuTrigger />
  <MenuPopup showArrow>
    {/* Menu items */}
  </MenuPopup>
</Menu>;
```

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

### Menu Item to Open a Dialog Imperatively

Source: https://pure.kam-ui.com/docs/components/menu

This example demonstrates how to open a dialog from a menu item. It involves controlling the dialog's state (`dialogOpen`) and updating it within the `onClick` handler of the `MenuItem`. Requires importing `Dialog` and `Menu` components.

```jsx
import * as React from "react";
import { Dialog } from "@base-ui/react/dialog";
import { Menu } from "@base-ui/react/menu";

function ExampleMenu() {
  const [dialogOpen, setDialogOpen] = React.useState(false);

  return (
    <React.Fragment>
      <Menu.Root>
        <Menu.Trigger>Open menu</Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner>
            <Menu.Popup>
              {/* Open the dialog when the menu item is clicked */}
              <Menu.Item onClick={() => setDialogOpen(true)}>
                Open dialog
              </Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>

      {/* Control the dialog state */}
      <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
        <Dialog.Portal>
          <Dialog.Backdrop />
          <Dialog.Popup>{/* Rest of the dialog */}</Dialog.Popup>
        </Dialog.Portal>
      </Dialog.Root>
    </React.Fragment>
  );
}
```

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

### Pure UI Select Animation Preset: Wipe

Source: https://pure.kam-ui.com/docs/components/select

Illustrates the 'Wipe' animation preset for the Pure UI Select component. This example showcases various directions for applying wipe animations.

```jsx
previewcode
Side: right
startcenterend
Side: top
startcenterend
Side: bottom
startcenterend
Side: left
startcenterend
Side: inline-start
startcenterend
Side: inline-end
startcenterend
```

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

### Menu Popup with Scale Animation

Source: https://pure.kam-ui.com/docs/components/menu

This example shows the default popup animation preset for the Menu component, which is 'scale'. This animation is applied when `animationPreset` prop is not explicitly set on `MenuPopup`.

```jsx
<MenuPopup animationPreset="scale">
  {/* Menu items */}
</MenuPopup>;
```

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

### Controlled Popover Example (React)

Source: https://pure.kam-ui.com/docs/components/popover

Demonstrates how to manage the open/closed state of a Popover component programmatically using state management in React. This allows for external control over the popover's visibility.

```jsx
const [isOpen, setIsOpen] = useState(false);

<Popover open={isOpen} onOpenChange={setIsOpen}>
  <PopoverTrigger />
  <PopoverPopup>...
  </PopoverPopup>
</Popover>;
```

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

### Add Tailwind CSS to Vite Project

Source: https://pure.kam-ui.com/docs/installation/vite

Installs Tailwind CSS and its Vite plugin. It also shows how to replace the default CSS content with Tailwind's base import, preparing the project for utility-first CSS.

```bash
npm install tailwindcss @tailwindcss/vite

```

```css
@import "tailwindcss";

```

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

### Popover with Form Integration (React)

Source: https://pure.kam-ui.com/docs/components/popover

Shows an example of integrating a Popover component with form elements. This typically involves placing form inputs or actions within the `PopoverPopup` content area.

```jsx
<Popover>
  <PopoverTrigger>Open Form</PopoverTrigger>
  <PopoverPopup>
    <form>
      <input type="text" placeholder="Enter value" />
      <button type="submit">Submit</button>
    </form>
  </PopoverPopup>
</Popover>;
```

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

### Basic Avatar Component Usage in Pure UI

Source: https://pure.kam-ui.com/docs/components/avatar

Demonstrates the fundamental usage of the Avatar component in Pure UI. It includes an AvatarImage for displaying a user's profile picture and an AvatarFallback for displaying initials when the image is not available or fails to load. This example assumes the image is located at '/avatars/krishna.png'.

```html
<Avatar>
  <AvatarImage src="/avatars/krishna.png" alt="User avatar" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>
```

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

### Basic Usage of Pure UI Tabs Component

Source: https://pure.kam-ui.com/docs/components/tabs

Example demonstrating the basic implementation of the Pure UI Tabs component. It includes setting a default active tab, defining tab triggers, and rendering content within tab panels. This serves as a fundamental structure for using the Tabs component.

```javascript
<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsPanel value="account">Make changes to your account here.</TabsPanel>
  <TabsPanel value="password">Change your password here.</TabsPanel>
</Tabs>
```

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

### Pure UI Select Object Values Example

Source: https://pure.kam-ui.com/docs/components/select

Illustrates using objects as values for select items in Pure UI. This allows direct access to the full object in custom render functions and can simplify value lookup.

```jsx
previewcode
StandardDelivers in 4-6 business days ($4.99)
```

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

### Accordion Animation Preset: Fade (React)

Source: https://pure.kam-ui.com/docs/components/accordion

Provides an example of applying the 'fade' animation preset to the Accordion component, controlling how content appears and disappears.

```jsx
previewcode
### What Is Cricket?
### Formats of the Game
### Basic Rules
### Key Player Roles
```

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

### Menu Open on Hover - Usage Example

Source: https://pure.kam-ui.com/docs/components/menu

This code snippet illustrates how to make the menu open on hover instead of click by passing the `openOnHover` prop to the `MenuTrigger` component.

```jsx
<Menu>
  <MenuTrigger openOnHover>
    {/* Trigger content */}
  </MenuTrigger>
  <MenuPopup>
    {/* Menu items */}
  </MenuPopup>
</Menu>;
```

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

### Menu with Custom Side - Usage Example

Source: https://pure.kam-ui.com/docs/components/menu

Demonstrates changing the menu's position using the `side` prop on MenuPopup. Available options include 'top', 'right', 'bottom', 'left', 'inline-start', and 'inline-end'. Defaults to 'bottom'.

```jsx
<Menu>
  <MenuTrigger />
  <MenuPopup side="top">
    {/* Menu items */}
  </MenuPopup>
</Menu>;
```

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

### Popover Component Anatomy (React)

Source: https://pure.kam-ui.com/docs/components/popover

Demonstrates the basic structure and import statements for using the Popover component and its sub-components (PopoverTrigger, PopoverPopup, PopoverTitle, PopoverDescription) in a React application. Assumes installation from '@/components/ui/popover'.

```jsx
import {
  Popover,
  PopoverTrigger,
  PopoverPopup,
  PopoverTitle,
  PopoverDescription,
} from "@/components/ui/popover";

<Popover>
  <PopoverTrigger />
  <PopoverPopup>
    <PopoverTitle />
    <PopoverDescription />
  </PopoverPopup>
</Popover>;
```

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

### Install and Import Sheet Component in React

Source: https://pure.kam-ui.com/docs/components/sheet

This snippet shows the necessary import statements for using the Sheet component and its sub-components in a React application. It assumes a project structure where components are located under '@/components/ui/sheet'.

```javascript
import {
  Sheet,
  SheetPopup,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
```

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

### Tooltip with Motion Blur Animation Preset in React

Source: https://pure.kam-ui.com/docs/components/tooltip

Provides an example of the 'motion-blur' animation preset for tooltips in React. This animation adds a blur effect along with motion for a distinct visual style.

```jsx
<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover me
  </TooltipTrigger>
  <TooltipPopup animationPreset="motion-blur">Helpful hint</TooltipPopup>
</Tooltip>
```

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

### Basic Usage of Number Field Component - React

Source: https://pure.kam-ui.com/docs/components/number-field

Provides a fundamental example of implementing the Number Field component in a React application. It showcases the basic structure and how to set a default value and associate a label.

```jsx
<NumberField defaultValue={0} id="quantity">
  <NumberFieldScrubArea>
    <Label htmlFor="quantity">Quantity</Label>
  </NumberFieldScrubArea>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>
```

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

### Controlled Tooltip in React

Source: https://pure.kam-ui.com/docs/components/tooltip

Provides an example of how to manage the visibility of a tooltip programmatically in React using a controlled component pattern. This allows for external state management of the tooltip's open/closed status.

```jsx
const [open, setOpen] = React.useState(false);

<Tooltip open={open} onOpenChange={setOpen}>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover me
  </TooltipTrigger>
  <TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
```

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

### Initialize Shadcn CLI for Pure UI

Source: https://pure.kam-ui.com/docs/installation/vite

Runs the `shadcn` initialization command to set up the project for using shadcn-based components. This process involves answering configuration questions, such as selecting a base color.

```bash
npx shadcn@latest init

```

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

### Basic Calendar Usage - React

Source: https://pure.kam-ui.com/docs/components/calendar

Demonstrates the basic implementation of the Calendar component in React. It initializes a state for the selected date and renders the Calendar component with single mode selection. This example is suitable for simple date picking scenarios.

```javascript
const [date, setDate] = React.useState<Date | undefined>(new Date());

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
);
```

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

### Add `cn` Helper Function (TypeScript)

Source: https://pure.kam-ui.com/docs/installation/manual

This snippet adds a `cn` (class names) helper function to your `lib/classes.ts` file. It utilizes `clsx` for conditional class name merging and `tailwind-merge` for resolving Tailwind CSS conflicts, simplifying class name management.

```typescript
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

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

### Create React Router Project with Pure UI

Source: https://pure.kam-ui.com/docs/installation/react-router

Initializes a new React Router project using the create-react-router command, setting up the basic structure for integration with Pure UI.

```bash
npx create-react-router@latest my-app
```

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

### Create New Next.js Project

Source: https://pure.kam-ui.com/docs/installation/nextjs

This snippet shows the command to create a new Next.js project. It's a prerequisite for setting up Pure UI. The command can be executed using npm, pnpm, yarn, or bun.

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

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

### Create React Project with Vite

Source: https://pure.kam-ui.com/docs/installation/vite

Initializes a new React project using Vite with the React + TypeScript template. This command is the first step in setting up the project environment.

```bash
npm create vite@latest

```

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

### Tooltip with Slide Inside Animation Preset in React

Source: https://pure.kam-ui.com/docs/components/tooltip

Provides an example of the 'slide-inside' animation preset for tooltips in React. This animation causes the tooltip to slide into its position.

```jsx
<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover me
  </TooltipTrigger>
  <TooltipPopup animationPreset="slide-inside">Helpful hint</TooltipPopup>
</Tooltip>
```

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

### Import Switch Component (JavaScript/TypeScript)

Source: https://pure.kam-ui.com/docs/components/switch

Demonstrates how to import the Switch component from the '@/components/ui/switch' module. This is the first step to using the component in your project.

```javascript
import { Switch } from "@/components/ui/switch";
```

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

### Menu Radio Group with Custom Active Icon

Source: https://pure.kam-ui.com/docs/components/menu

This example shows how to customize the active indicator for radio items within a `MenuRadioGroup` by providing an `activeIcon` prop.

```jsx
<MenuRadioGroup
  activeIcon={<YourCustomIcon />}
>
  {/* Radio items */}
</MenuRadioGroup>;
```

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

### Input Group with Label (React)

Source: https://pure.kam-ui.com/docs/components/input-group

An example of incorporating labels within an InputGroup to enhance accessibility. This pattern clearly associates a label with its corresponding input field.

```jsx
<InputGroup>
  <InputGroupAddon>
    <Label>Email</Label>
  </InputGroupAddon>
  <InputGroupInput type="email" placeholder="your.email@example.com" />
</InputGroup>
```

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

### Pure UI Select Basic Usage

Source: https://pure.kam-ui.com/docs/components/select

Illustrates the fundamental implementation of the Pure UI Select component for choosing options from a dropdown. This is the simplest way to integrate the component.

```jsx
previewcode
Select a foodSelect a font
```

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

### Scroll Area with Vertical Scroll Shadow

Source: https://pure.kam-ui.com/docs/components/scroll-area

Example of configuring the Scroll Area component to display vertical scroll shadows. This helps indicate to the user that the content is scrollable vertically.

```typescript
<ScrollArea
  scrollShadow="vertical"
>
  <ScrollAreaContent>
    <div>
      <p>Vertical scroll shadow</p>
    </div>
  </ScrollAreaContent>
</ScrollArea>
```

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

### Import Input Group Components (JavaScript)

Source: https://pure.kam-ui.com/docs/components/input-group

Demonstrates how to import the necessary InputGroup components from the Pure UI library for use in your application.

```javascript
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group";
```

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

### Menu Popup with Wipe Animation

Source: https://pure.kam-ui.com/docs/components/menu

Demonstrates applying the 'wipe' animation preset to the `MenuPopup`. This changes the visual transition when the menu appears.

```jsx
<MenuPopup animationPreset="wipe">
  {/* Menu items */}
</MenuPopup>;
```

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

### Basic Input OTP Usage - React

Source: https://pure.kam-ui.com/docs/components/input-otp

Demonstrates the fundamental usage of the InputOTP component in React. It shows how to structure the OTP input fields using InputOTPGroup and InputOTPSlot, with an optional InputOTPSeparator.

```jsx
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>
```

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

### Import and Use Pure UI Button in React Router

Source: https://pure.kam-ui.com/docs/installation/react-router

Demonstrates how to import and use the Pure UI Button component within a React Router application. The example shows the import statement and its usage in a JSX component.

```typescript
// app/routes/home.tsx
import { Button } from "~/components/ui/button";

import type { Route } from "./+types/home";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

export default function Home() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  );
}
```

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

### Add Pure UI Component using Shadcn CLI

Source: https://pure.kam-ui.com/docs/installation/vite

Adds a specific Pure UI component, such as the `Separator`, to the project using the `shadcn add` command. This command fetches and integrates the component's code into the project's `components/ui` directory.

```bash
npx shadcn@latest add @pureui/separator

```

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

### Popover with Custom Trigger (React)

Source: https://pure.kam-ui.com/docs/components/popover

Provides an example of using a custom element or component as the trigger for the Popover, instead of the default button. This allows for more flexible UI design. It also shows the `openOnHover` prop combined with a custom trigger.

```jsx
<Popover>
  <PopoverTrigger asChild>
    <button style={{ all: 'unset' }}>
      Gukesh D
      <br />
      World Chess Champion
    </button>
  </PopoverTrigger>
  <PopoverPopup>
    ...
  </PopoverPopup>
</Popover>;
```

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

### Basic Tooltip Usage in React

Source: https://pure.kam-ui.com/docs/components/tooltip

Demonstrates the fundamental implementation of a Tooltip component in React using the Pure UI library. It shows how to import and use Tooltip, TooltipTrigger, and TooltipPopup to display a simple tooltip.

```jsx
import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover me
  </TooltipTrigger>
  <TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
```

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

### Popover Open on Hover (React)

Source: https://pure.kam-ui.com/docs/components/popover

Configures the Popover to open when the trigger element is hovered over, instead of the default click behavior. This is achieved by setting `openOnHover` to `true` on `PopoverTrigger`. Includes examples for setting custom open and close delays.

```jsx
<Popover>
  <PopoverTrigger
    openOnHover
    delay={200}
  >
    ...
  </PopoverTrigger>
  <PopoverPopup>...</PopoverPopup>
  ...
</Popover>;
```

```jsx
<Popover>
  <PopoverTrigger
    openOnHover
    closeDelay={200}
  >
    ...
  </PopoverTrigger>
  <PopoverPopup>...</PopoverPopup>
  ...
</Popover>;
```

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

### Basic Switch Component Usage (HTML/JSX)

Source: https://pure.kam-ui.com/docs/components/switch

Shows the fundamental implementation of the Switch component. This basic usage renders a switch in its default state.

```html
<Switch />
```

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

### Button Group with Menu (React)

Source: https://pure.kam-ui.com/docs/components/button-group

Example of creating a split button group that incorporates a Menu component. This is typically used for a primary action button alongside a secondary button that reveals a dropdown menu of options.

```jsx
<ButtonGroup>
  <Button>Follow</Button>
  <Menu />
</ButtonGroup>
```

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

### Menu Popup with Motion Animation

Source: https://pure.kam-ui.com/docs/components/menu

Illustrates setting the `animationPreset` prop to 'motion' on the `MenuPopup` component to achieve a motion-based animation effect.

```jsx
<MenuPopup animationPreset="motion">
  {/* Menu items */}
</MenuPopup>;
```

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

### Basic Sheet Component Usage in React

Source: https://pure.kam-ui.com/docs/components/sheet

Demonstrates the fundamental structure for implementing a Sheet component in React. It includes a trigger to open the sheet and the SheetPopup which contains the header with a title and description.

```javascript
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetPopup>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetPopup>
</Sheet>
```

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

### Pure UI Tabs Panel Height Animation with TabsPanelsWrapper

Source: https://pure.kam-ui.com/docs/components/tabs

Demonstrates using `TabsPanelsWrapper` with the Pure UI Tabs component to achieve smooth animated height transitions between tab panels. This is particularly useful when tab content varies significantly in height, ensuring a better user experience.

```javascript
<Tabs defaultValue="docs" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="docs">Docs</TabsTrigger>
  </TabsList>
  <TabsPanelsWrapper>
    <TabsPanel value="docs">
      <p>Docs are a great way to learn about the product and how to use it.</p>
      <p>Docs are a great way to learn about the product and how to use it.</p>
      <p>Docs are a great way to learn about the product and how to use it.</p>
    </TabsPanel>
  </TabsPanelsWrapper>
</Tabs>
```

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

### Custom Layout Radio Group - TypeScript React

Source: https://pure.kam-ui.com/docs/components/radio-group

Demonstrates creating a custom layout for the Radio Group component by applying specific CSS classes and structuring the JSX. This example shows AI model selection with descriptions.

```typescript
<RadioGroup defaultValue="gpt-5">
  <div className="text-sm font-medium">AI Model Selection</div>
  <div className="grid grid-cols-3 gap-2 pt-4">
    <Label className="flex flex-col items-start justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([type=radio])]:border-primary [&:has([type=radio])]:bg-primary [&:has([type=radio])]:text-primary-foreground">
      <Radio value="gpt-5" className="sr-only" />
      <div className="space-y-0.5">
        <div className="font-semibold">OpenAI GPT-5.1 Codex Max</div>
        <span className="text-xs font-normal">
          Openai's latest code model specially for coding.
        </span>
      </div>
      <div className="size-4 rounded-full border border-primary ring-2 ring-primary ring-offset-2 ring-offset-primary transition-all"></div>
    </Label>
    <Label className="flex flex-col items-start justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([type=radio])]:border-primary [&:has([type=radio])]:bg-primary [&:has([type=radio])]:text-primary-foreground">
      <Radio value="gemini-3" className="sr-only" />
      <div className="space-y-0.5">
        <div className="font-semibold">Google Gemini 3 Flash</div>
        <span className="text-xs font-normal">
          Google's latest flash model, best for daily use.
        </span>
      </div>
      <div className="size-4 rounded-full border border-primary ring-2 ring-primary ring-offset-2 ring-offset-primary transition-all"></div>
    </Label>
    <Label className="flex flex-col items-start justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([type=radio])]:border-primary [&:has([type=radio])]:bg-primary [&:has([type=radio])]:text-primary-foreground">
      <Radio value="claude-4.5" className="sr-only" />
      <div className="space-y-0.5">
        <div className="font-semibold">Anthropic Claude 4.5 Sonnet</div>
        <span className="text-xs font-normal">
          Excellent for writing, analysis, and coding.
        </span>
      </div>
      <div className="size-4 rounded-full border border-primary ring-2 ring-primary ring-offset-2 ring-offset-primary transition-all"></div>
    </Label>
  </div>
</RadioGroup>
```

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

### Basic Badge Usage - JSX/HTML

Source: https://pure.kam-ui.com/docs/components/badge

Demonstrates the fundamental usage of the Badge component with its available 'variant' and 'shape' props. This code snippet provides a template for rendering a badge with different styles.

```jsx
<Badge
  variant="default | outline | secondary | destructive"
  shape="simple | bar | dot"
>
  Badge
</Badge>
```

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

### Customize Sheet Size with CSS Classes in React

Source: https://pure.kam-ui.com/docs/components/sheet

This example demonstrates how to control the dimensions of the Sheet Popup by applying standard CSS classes, such as width and max-width, directly to the 'className' prop. This allows for flexible layout adjustments.

```javascript
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetPopup className="w-[700px] sm:max-w-[1080px]">
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetPopup>
</Sheet>
```

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

### Grouping Tooltips with TooltipProvider in React

Source: https://pure.kam-ui.com/docs/components/tooltip

Illustrates how to group multiple tooltips using the `TooltipProvider` component in React. This ensures that adjacent tooltips appear instantly after the first one is opened, enhancing user experience for related information.

```jsx
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Tooltip 1
    </TooltipTrigger>
    <TooltipPopup>Content 1</TooltipPopup>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Tooltip 2
    </TooltipTrigger>
    <TooltipPopup>Content 2</TooltipPopup>
  </Tooltip>
</TooltipProvider>
```

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

### Button Group with Separator (React)

Source: https://pure.kam-ui.com/docs/components/button-group

Illustrates how to use the ButtonGroupSeparator component to visually divide buttons within a group. Separators are recommended for variants other than 'outline' to enhance visual hierarchy. This example shows a split button group.

```jsx
<ButtonGroup>
  <Button>Button</Button>
  <ButtonGroupSeparator />
  <Button>Button</Button>
</ButtonGroup>
```

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

### Import Avatar Components from Pure UI

Source: https://pure.kam-ui.com/docs/components/avatar

This snippet shows how to import the necessary Avatar, AvatarFallback, and AvatarImage components from the '@/components/ui/avatar' module in Pure UI. It's the first step to using the Avatar component in your project.

```javascript
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
```

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

### Input Group with Text (React)

Source: https://pure.kam-ui.com/docs/components/input-group

Illustrates how to integrate static text within an InputGroup, useful for displaying currency symbols, domain extensions, or other contextual information next to an input field.

```jsx
<InputGroup>
  <InputGroupText>$</InputGroupText>
  <InputGroupInput placeholder="Amount" />
  <InputGroupText>.com</InputGroupText>
</InputGroup>
```

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

### Importing and Using Button Component (TypeScript/JavaScript)

Source: https://pure.kam-ui.com/docs/components/button

Demonstrates how to import the Button component from the '@components/ui/button' path and use it in a React application. This is the standard way to integrate the button into your project.

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

<Button>Button</Button>
```

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

### Input OTP with Pattern Restriction - React

Source: https://pure.kam-ui.com/docs/components/input-otp

Illustrates how to restrict user input within the InputOTP component using the 'pattern' prop. This example shows how to enforce specific character sets like lowercase letters, uppercase letters, numbers, or general letters.

```jsx
<!-- Only lowercase letters (a-z) -->
<InputOTP pattern="[a-z]" />

<!-- Only uppercase letters (A-Z) -->
<InputOTP pattern="[A-Z]" />

<!-- Numbers only (0-9) -->
<InputOTP pattern="[0-9]" />

<!-- Letters only (a-z, A-Z) -->
<InputOTP pattern="[a-zA-Z]" />
```
Tokens:
Raw