# Sabil UI — full documentation

> A set of beautifully crafted, accessible components with a calm, tactile design foundation. Open code. Copy it, own it, ship it.

Site: https://ui.muttaqinsabilul.my.id

# AI & LLMs

Rules for AI assistants building UI with Sabil UI.

Docs: https://ui.muttaqinsabilul.my.id/docs · Components: https://ui.muttaqinsabilul.my.id/docs/components · Tokens: https://ui.muttaqinsabilul.my.id/tokens.json

## Stack

- React with Tailwind CSS v4 and Radix UI primitives. Components live in `@/components/ui/<name>` and are imported by name, e.g. `import { Button } from "@/components/ui/button"`.
- Merge class names with `cn` from `@/lib/utils`.
- Icons come from `lucide-react`. Inside buttons, icons are 16px and need no size class.
- Motion: CSS for press, hover and overlays; the `motion` package (`import { motion } from "motion/react"`) for springs, gestures, exit and layout animation.
- Without React or Tailwind, use the plain edition: `sabil.css` + `sabil.js` with `s-*` classes (see /docs/html-css).

## Use tokens, never raw values

Always use the semantic Tailwind classes below. Never hard-code hex colors, pixel radii or shadows.

| Purpose | Class | Light | Dark |
| --- | --- | --- | --- |
| Page background | bg-background | #ffffff | #0a0a0a |
| Text | text-foreground | #0a0a0a | #fafafa |
| Secondary text | text-muted-foreground | #45556c | #a1a1a6 |
| Primary action (blue) | bg-primary / text-primary | #056dff | #2b7bff |
| Subtle fill, tracks | bg-muted / bg-secondary | #f1f5f9 | #1d1d1f |
| Hover fill | bg-accent | #0a0a0a 4% | #ffffff 6% |
| Hairline | border / border-border | #0a0a0a 8% | #ffffff 9% |
| Danger | bg-destructive / text-destructive | #e7000b | #ff6467 |
| Cards, popovers | bg-card / bg-popover | #ffffff | #121212 / #161616 |
| Warm preview panel | bg-panel | #f9f8f6 | #1a1918 |

## Size and shape

| Element | Value | Class |
| --- | --- | --- |
| Buttons, inputs, selects (default) | 40px high | built into the components |
| Small controls | 32px high | size="sm" |
| Tab trigger | 7.5px radius | rounded-md |
| Controls, menu items | 10px radius | rounded-lg |
| Menus, popovers, dialogs, cards | 15px radius | rounded-xl |
| Large cards, chat bubbles | 20px radius | rounded-2xl |
| Font | Inter; Geist Mono for code | font-sans / font-mono |
| Body text | 14px | text-sm |
| Button text | 14px, 500, -0.01em tracking | built in |
| Headings | semibold, tight tracking | font-semibold tracking-tight |

## Surfaces

- Primary actions use `<Button>` (default variant): a blue vertical gradient (#4a8fff → #056dff) with a soft top sheen, a darker 1px ring and a blue-tinted shadow. Do not restyle it with bg-blue-*.
- Secondary actions use `<Button variant="outline">`: white, hairline ring, `0 1px 2px` shadow.
- One primary button per view or form. Everything else is outline, secondary or ghost.
- Segmented controls and tabs sit on a flat slate track (`bg-muted`, 2px padding); the active item is white with `shadow-xs`.
- Menus and popovers: `bg-popover`, `rounded-xl`, a 6% hairline ring and a soft `shadow-lg`. Items are `rounded-lg`.
- Utilities available: `surface-primary`, `surface-raised`, `surface-sunken`, `bg-dots` (dotted canvas).

## Pick the right component

Prefer an existing component over custom markup. All 66 are listed at /docs/components.

| Need | Use |
| --- | --- |
| Action | Button, ButtonGroup |
| Form field | Field + Label + Input / Textarea / Select / Checkbox / Switch / RadioGroup |
| Pick one of a few options | Tabs (segmented) or ToggleGroup |
| Search a long list | Combobox or Command |
| Confirm a destructive action | AlertDialog |
| Form or details on top of the page | Dialog (desktop) or Drawer / Sheet (mobile, side panels) |
| Actions behind a button | DropdownMenu |
| Site navigation with previews | NavigationMenu |
| Status or feedback | Badge, Alert, Toast (sonner), Progress, Spinner, Skeleton |
| Content block | Card, Item, Empty |
| Data | Table, DataTable, Chart |
| Chat UI | Message, Bubble, MessageScroller, Attachment |

## Motion

- Easing: `ease-out` for enter, exit and feedback (it is overridden to cubic-bezier(0.23, 1, 0.32, 1)); `ease-in-out` for movement on screen. Never `ease-in`.
- Durations: press 150ms, tooltips and menus 150–200ms, dialogs 200–300ms, drawers 400ms. Keep interface motion under 300ms.
- Pressable elements scale to 0.97 on press. Buttons already do this.
- Enter from `scale(0.95)` + `opacity: 0`, never from `scale(0)`. Exit faster than enter.
- Animate `transform` and `opacity` only. Never `transition: all`.
- No animation on things opened from the keyboard many times a day (command palettes, shortcuts).
- Respect `prefers-reduced-motion`: in Motion, read `useReducedMotion()` and drop movement.

## Do not

- Do not use raw Tailwind palette colors (`bg-blue-500`, `text-gray-600`, `border-zinc-200`). Use the tokens.
- Do not add borders to primary buttons or change button heights by hand.
- Do not mix radii: controls `rounded-lg`, containers `rounded-xl`.
- Do not use pure black text on white for secondary copy; use `text-muted-foreground`.
- Do not use more than one primary (blue) button in a group.
- Do not invent new shadows. Use `shadow-xs` for raised controls and `shadow-lg` for overlays.

## Example

A sign-in card that follows every rule above.

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function SignIn() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Sign in</CardTitle>
        <CardDescription>Use your work email.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4">
        <Field>
          <FieldLabel htmlFor="email">Email</FieldLabel>
          <Input id="email" type="email" placeholder="you@example.com" />
        </Field>
        <Field>
          <FieldLabel htmlFor="password">Password</FieldLabel>
          <Input id="password" type="password" />
        </Field>
      </CardContent>
      <CardFooter className="flex-col gap-2">
        <Button className="w-full">Sign in</Button>
        <Button variant="outline" className="w-full">Continue with SSO</Button>
      </CardFooter>
    </Card>
  )
}
```

---

# Introduction

A set of beautifully crafted, accessible components with a calm, tactile design foundation. Open code. Copy it, own it, ship it.

Sabil UI is a collection of components you copy into your app and own. It is built on Radix primitives and Tailwind CSS v4, with its own design foundation.

## Principles

- Open code: every component is a file in your project.
- One foundation: color, radius, depth and motion live in tokens.
- Tactile surfaces: primary actions use a blue gradient with a 1px inner edge; secondary actions sit on a raised white surface.
- Fast by default: short, purposeful motion.

## Editions

- React + Tailwind: https://ui.muttaqinsabilul.my.id/docs/components
- Plain HTML, CSS & JS: https://ui.muttaqinsabilul.my.id/docs/html-css
- Rules for AI assistants: https://ui.muttaqinsabilul.my.id/docs/ai

---

# Installation

Set up Next.js, Tailwind CSS v4 and the foundation, then add components.

1. Create a Next.js app with Tailwind CSS v4:

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

2. Install the base dependencies:

```bash
npm install radix-ui class-variance-authority cn lucide-react tw-animate-css next-themes
```

3. Replace `app/globals.css` with the foundation (https://ui.muttaqinsabilul.my.id/r/theme.json contains both files: `globals.css` and `variants.css`).

4. Add the cn helper:

```ts
export { cn } from "cn"
```

5. Add components: copy the source from https://ui.muttaqinsabilul.my.id/r/<name>.json (field `files[].content`) into `components/ui/<name>.tsx` and install its `dependencies`.

---

# Theming

Every visual decision lives in a CSS variable.

Every visual decision lives in a CSS variable in `app/globals.css`. Components only read tokens.

## Colors

| Token | Light | Dark |
| --- | --- | --- |
| --background | #ffffff | #0a0a0a |
| --foreground | #0a0a0a | #fafafa |
| --card | #ffffff | #121212 |
| --card-foreground | #0a0a0a | #fafafa |
| --popover | #ffffff | #161616 |
| --popover-foreground | #0a0a0a | #fafafa |
| --primary | #056dff | #2b7bff |
| --primary-foreground | #ffffff | #ffffff |
| --secondary | #f1f5f9 | #1d1d1f |
| --secondary-foreground | #0f172b | #fafafa |
| --muted | #f1f5f9 | #1d1d1f |
| --muted-foreground | #45556c | #a1a1a6 |
| --accent | #0a0a0a0a | #ffffff0f |
| --accent-foreground | #0a0a0a | #fafafa |
| --destructive | #e7000b | #ff6467 |
| --border | #0a0a0a14 | #ffffff17 |
| --input | #0a0a0a1f | #ffffff24 |
| --ring | #056dff | #3c86ff |
| --chart-1 | #056dff | #3c86ff |
| --chart-2 | #3c86ff | #6aa6ff |
| --chart-3 | #8ec5ff | #8ec5ff |
| --chart-4 | #1447e6 | #1f63e8 |
| --chart-5 | #bedbff | #bedbff |
| --sidebar | #fafafa | #0f0f0f |
| --sidebar-foreground | #0a0a0a | #fafafa |
| --sidebar-primary | #056dff | #3c86ff |
| --sidebar-primary-foreground | #ffffff | #ffffff |
| --sidebar-accent | #0a0a0a0a | #ffffff0f |
| --sidebar-accent-foreground | #0a0a0a | #fafafa |
| --sidebar-border | #0a0a0a14 | #ffffff17 |
| --sidebar-ring | #056dff | #3c86ff |
| --primary-highlight | #4a8fff | #5c9bff |
| --primary-edge | #0a58d6 | #1d5fd9 |
| --surface-edge | #00000040 | #00000080 |
| --overlay-border | #0a0a0a0f | #ffffff14 |
| --panel | #f9f8f6 | #1a1918 |
| --bubble | #0a0a0a0a | #ffffff0f |
| --bubble-strong | #0a0a0a14 | #ffffff1f |
| --raised | #ffffff | #1d1d1f |
| --sunken | #f1f5f9 | #1d1d1f |
| --dot | #0a0a0a1f | #ffffff1a |
| --shadow-color | #0000000d | #00000066 |

## Radius

`--radius: 0.625rem` (10px). Scale: sm 5px, md 7.5px (tab trigger), lg 10px (controls, menu items), xl 15px (menus, popovers, dialogs), 2xl 20px (cards, bubbles).

## Surfaces

- `surface-primary`: vertical gradient from `--primary-highlight` (#4a8fff) to `--primary` (#056dff), a soft top sheen, a 1px `--primary-edge` ring, lit top and shaded bottom edges, a blue-tinted shadow.
- `surface-raised`: white control with a hairline ring and 0 1px 2px shadow.
- `surface-sunken`: flat slate track.
- `bg-dots`: dotted canvas.

## Typography

Inter for interface text, Geist Mono for code. Body 14px. Buttons 14px/500 with -0.01em tracking. Headings semibold with tight tracking.

Machine-readable: https://ui.muttaqinsabilul.my.id/tokens.json

---

# Dark Mode

Dark mode swaps token values under a .dark class.

Use `next-themes` with `attribute="class"` and add `suppressHydrationWarning` to `<html>`.

```tsx
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
  {children}
</ThemeProvider>
```

Plain HTML edition: add `class="dark"` or `data-theme="dark"` to `<html>`.

---

# MCP Server

Remote MCP server for Claude Code, Cursor and VS Code.

Sabil UI has a remote MCP server. Add one URL to your AI tool and it can read the rules, components, tokens and motion patterns on demand. No install, no API key.

URL: https://ui.muttaqinsabilul.my.id/mcp

## Setup

### Claude Code

Run once in your terminal. Add --scope project to share it with your team through .mcp.json.

```bash
claude mcp add --transport http sabil-ui https://ui.muttaqinsabilul.my.id/mcp
```

### Cursor

Add to .cursor/mcp.json in your project, or ~/.cursor/mcp.json for every project.

```json
{
  "mcpServers": {
    "sabil-ui": {
      "url": "https://ui.muttaqinsabilul.my.id/mcp"
    }
  }
}
```

### VS Code

Add to .vscode/mcp.json, then click Start above the server. Works with GitHub Copilot in agent mode.

```json
{
  "servers": {
    "sabil-ui": {
      "type": "http",
      "url": "https://ui.muttaqinsabilul.my.id/mcp"
    }
  }
}
```

### Claude Desktop & claude.ai

Settings → Connectors → Add custom connector. Name it Sabil UI and paste the URL.

```text
https://ui.muttaqinsabilul.my.id/mcp
```

## Tools

| Tool | What it returns |
| --- | --- |
| get_rules | Design rules to follow. Assistants call this first. |
| list_components | Every component with a one-line description. |
| get_component | Import line and example for one component; detail "full" adds its source and all examples. |
| get_component_source | Files to write into a project, with npm and internal dependencies. |
| get_tokens | All design tokens as W3C Design Tokens JSON. |
| get_setup | Project setup and the foundation CSS. |
| get_motion | Motion foundations, or one of 16 animation patterns with code. |
| get_html_edition | The plain HTML, CSS & JS edition. |
| search_docs | Find components and guides by keyword. |

## Try

- Build a pricing page with Sabil UI.
- Add a Sabil UI dialog to edit the user profile in this project.
- Which Sabil UI component should I use for picking a date range?
- Animate this list with the Sabil UI stagger pattern.

---

# HTML, CSS & JS

Sabil UI without React or Tailwind.

Same foundation as one CSS file and one dependency-free script. No React, no Tailwind, no build step.

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap">
<link rel="stylesheet" href="https://ui.muttaqinsabilul.my.id/sabil.css">
<script src="https://ui.muttaqinsabilul.my.id/sabil.js" defer></script>
<body class="s-body">…</body>
```

Classes start with `s-`, tokens with `--s-`, attributes with `data-s-`. Dark mode: `class="dark"` on `<html>`.

## JavaScript API

```javascript
Sabil.toast({ title, description, variant: "destructive", action: { label, onClick } })
Sabil.openDialog(id); Sabil.closeDialog(id)
Sabil.init(container)  // after inserting tabs or comboboxes
// events: "s-select" (menu), "s-change" (tabs, combobox)
```

## Components (CSS only)

### Button

Primary uses the blue gradient surface. Add a modifier for other variants and sizes.

```html
<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center">
  <button class="s-btn">Sign in</button>
  <button class="s-btn s-btn--outline">Documentation</button>
  <button class="s-btn s-btn--secondary">Secondary</button>
  <button class="s-btn s-btn--ghost">Ghost</button>
  <button class="s-btn s-btn--destructive">Delete</button>
  <button class="s-btn s-btn--link">Link</button>
</div>
<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center">
  <button class="s-btn s-btn--outline s-btn--sm">Small</button>
  <button class="s-btn s-btn--outline">Default</button>
  <button class="s-btn s-btn--outline s-btn--lg">Large</button>
  <button class="s-btn s-btn--outline s-btn--icon" aria-label="Add"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg></button>
  <button class="s-btn">Continue <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></button>
  <button class="s-btn" disabled>Disabled</button>
</div>
```

### Input & Field

Wrap a label, control and hint in s-field. Set aria-invalid for the error state.

```html
<form style="display:grid;gap:16px;width:100%;max-width:360px">
  <div class="s-field">
    <label class="s-label" for="email">Email</label>
    <input class="s-input" id="email" type="email" placeholder="you@example.com">
    <p class="s-field__hint">We never share your email.</p>
  </div>
  <div class="s-field">
    <label class="s-label" for="password">Password</label>
    <input class="s-input" id="password" type="password" aria-invalid="true" value="123">
    <p class="s-field__error">Use at least 8 characters.</p>
  </div>
  <button class="s-btn s-btn--block">Create account</button>
</form>
```

### Textarea & Select

Native elements with the same border, radius and focus ring as the input.

```html
<div style="display:grid;gap:16px;width:100%;max-width:360px">
  <div class="s-field">
    <label class="s-label" for="role">Role</label>
    <select class="s-select" id="role">
      <option>Designer</option>
      <option>Engineer</option>
      <option>Product manager</option>
    </select>
  </div>
  <div class="s-field">
    <label class="s-label" for="bio">Bio</label>
    <textarea class="s-textarea" id="bio" placeholder="Tell us a little about yourself"></textarea>
  </div>
</div>
```

### Checkbox, Radio & Switch

Native inputs restyled. Keyboard and form support come for free.

```html
<div style="display:grid;gap:12px">
  <label class="s-choice"><input class="s-checkbox" type="checkbox" checked> Accept terms and conditions</label>
  <label class="s-choice"><input class="s-checkbox" type="checkbox"> Send me product updates</label>
  <div style="display:flex;gap:16px">
    <label class="s-choice"><input class="s-radio" type="radio" name="plan" checked> Monthly</label>
    <label class="s-choice"><input class="s-radio" type="radio" name="plan"> Yearly</label>
  </div>
  <label class="s-choice"><input class="s-switch" type="checkbox" role="switch" checked> Notifications</label>
</div>
```

### Segmented Control

Tabs without JavaScript, built on radio inputs. Use a shared name per group.

```html
<div class="s-tabs" role="radiogroup" aria-label="Billing period" style="width:100%;max-width:384px">
  <label class="s-tabs__item"><input type="radio" name="period" checked><span>Monthly</span></label>
  <label class="s-tabs__item"><input type="radio" name="period"><span>Yearly</span></label>
</div>
```

### Badge

Small status labels.

```html
<div style="display:flex;flex-wrap:wrap;gap:8px">
  <span class="s-badge">New</span>
  <span class="s-badge s-badge--secondary">Draft</span>
  <span class="s-badge s-badge--outline">v2.4.0</span>
  <span class="s-badge s-badge--destructive">Failed</span>
</div>
```

### Card

Header, content and footer. Any element works inside.

```html
<div class="s-card" style="width:100%;max-width:360px">
  <div class="s-card__header">
    <h3 class="s-card__title">Upgrade to Pro</h3>
    <p class="s-card__description">Unlimited projects and priority support.</p>
  </div>
  <p style="margin:0;font-size:32px;font-weight:600;letter-spacing:-0.02em">$24<span style="font-size:14px;font-weight:400;color:var(--s-muted-fg)">/month</span></p>
  <div class="s-card__footer">
    <button class="s-btn s-btn--outline" style="flex:1">Later</button>
    <button class="s-btn" style="flex:1">Upgrade</button>
  </div>
</div>
```

### Alert

A callout with an optional icon.

```html
<div style="display:grid;gap:12px;width:100%;max-width:440px">
  <div class="s-alert" role="status">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <p class="s-alert__title">A new version is available</p>
    <p class="s-alert__description">Reload the page to get the latest features.</p>
  </div>
  <div class="s-alert s-alert--destructive" role="alert">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
    <p class="s-alert__title">Payment failed</p>
    <p class="s-alert__description">Check your card details and try again.</p>
  </div>
</div>
```

### Avatar

Initials or an image. Group them with s-avatar-group.

```html
<div style="display:flex;gap:24px;align-items:center">
  <span class="s-avatar">ML</span>
  <span class="s-avatar s-avatar--lg">JR</span>
  <div class="s-avatar-group">
    <span class="s-avatar">AL</span>
    <span class="s-avatar">MK</span>
    <span class="s-avatar">SN</span>
    <span class="s-avatar">+5</span>
  </div>
</div>
```

### Accordion

Native <details>. Opens and closes without JavaScript, and stays accessible.

```html
<div style="width:100%;max-width:440px">
  <details class="s-accordion" open>
    <summary>What is your return policy?</summary>
    <div class="s-accordion__content">Return any item within 30 days for a full refund.</div>
  </details>
  <details class="s-accordion">
    <summary>How long does shipping take?</summary>
    <div class="s-accordion__content">Standard shipping takes 3–5 business days.</div>
  </details>
  <details class="s-accordion">
    <summary>Do you ship internationally?</summary>
    <div class="s-accordion__content">Yes, to over 40 countries.</div>
  </details>
</div>
```

### Table

Readable defaults for tabular data.

```html
<table class="s-table" style="max-width:520px">
  <thead>
    <tr><th>Invoice</th><th>Status</th><th>Method</th><th style="text-align:right">Amount</th></tr>
  </thead>
  <tbody>
    <tr><td>INV-001</td><td><span class="s-badge s-badge--secondary">Paid</span></td><td>Card</td><td style="text-align:right">$250.00</td></tr>
    <tr><td>INV-002</td><td><span class="s-badge s-badge--outline">Pending</span></td><td>Transfer</td><td style="text-align:right">$150.00</td></tr>
    <tr><td>INV-003</td><td><span class="s-badge s-badge--destructive">Failed</span></td><td>Card</td><td style="text-align:right">$350.00</td></tr>
  </tbody>
</table>
```

### Breadcrumb & Pagination

Mark the current page with aria-current.

```html
<div style="display:grid;gap:24px;justify-items:center">
  <nav aria-label="Breadcrumb">
    <ol class="s-breadcrumb">
      <li><a href="#">Home</a></li>
      <li><a href="#">Settings</a></li>
      <li><span aria-current="page">Billing</span></li>
    </ol>
  </nav>
  <nav class="s-pagination" aria-label="Pagination">
    <a class="s-pagination__link" href="#">Previous</a>
    <a class="s-pagination__link" href="#">1</a>
    <a class="s-pagination__link" href="#" aria-current="page">2</a>
    <a class="s-pagination__link" href="#">3</a>
    <a class="s-pagination__link" href="#">Next</a>
  </nav>
</div>
```

### Progress, Skeleton & Spinner

Loading states. The skeleton shimmer and spinner stop when reduced motion is on.

```html
<div style="display:grid;gap:20px;width:100%;max-width:360px">
  <progress class="s-progress" value="60" max="100">60%</progress>
  <div style="display:flex;gap:12px;align-items:center">
    <span class="s-skeleton" style="width:40px;height:40px;border-radius:50%"></span>
    <div style="display:grid;gap:8px;flex:1">
      <span class="s-skeleton" style="height:14px;width:60%"></span>
      <span class="s-skeleton" style="height:12px;width:85%"></span>
    </div>
  </div>
  <button class="s-btn" disabled style="opacity:1"><span class="s-spinner"></span> Saving</button>
</div>
```

### Tooltip & Kbd

A CSS-only tooltip from the data-s-tooltip attribute. It waits 300ms before showing.

```html
<div style="display:flex;gap:16px;align-items:center">
  <button class="s-btn s-btn--outline s-btn--icon" data-s-tooltip="Copy link" aria-label="Copy link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
  <span style="display:inline-flex;gap:4px;align-items:center;color:var(--s-muted-fg)">Search <kbd class="s-kbd">Ctrl</kbd><kbd class="s-kbd">K</kbd></span>
</div>
```

### Empty State

A placeholder for lists with nothing in them yet.

```html
<div class="s-empty" style="width:100%;max-width:420px">
  <div class="s-empty__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg></div>
  <h3 class="s-empty__title">No projects yet</h3>
  <p class="s-empty__description">Create your first project to start collaborating with your team.</p>
  <button class="s-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg> New project</button>
</div>
```

## Interactive (needs sabil.js)

### Tabs

Tabs with panels. Arrow keys, Home and End move between tabs.

```html
<div data-s-tabs style="width:100%;max-width:400px">
  <div class="s-tablist" role="tablist" aria-label="Account">
    <button class="s-tab" role="tab" aria-selected="true" aria-controls="tab-account">Account</button>
    <button class="s-tab" role="tab" aria-controls="tab-password">Password</button>
    <button class="s-tab" role="tab" aria-controls="tab-billing">Billing</button>
  </div>
  <div class="s-tabpanel" role="tabpanel" id="tab-account" tabindex="0">
    <div class="s-field"><label class="s-label" for="t-name">Name</label><input class="s-input" id="t-name" value="Maya Lestari"></div>
  </div>
  <div class="s-tabpanel" role="tabpanel" id="tab-password" tabindex="0" hidden>
    <div class="s-field"><label class="s-label" for="t-pass">New password</label><input class="s-input" id="t-pass" type="password"></div>
  </div>
  <div class="s-tabpanel" role="tabpanel" id="tab-billing" tabindex="0" hidden>
    <p style="margin:0;color:var(--s-muted-fg)">You are on the Pro plan, billed monthly.</p>
  </div>
</div>
```

### Dialog

Built on native <dialog>: focus is trapped, Escape and the backdrop close it, and focus returns to the trigger.

```html
<button class="s-btn s-btn--outline" data-s-open="edit-profile">Edit profile</button>

<dialog class="s-dialog" id="edit-profile" aria-labelledby="edit-title">
  <form class="s-dialog__panel" id="edit-form">
    <div class="s-dialog__header">
      <h2 class="s-dialog__title" id="edit-title">Edit profile</h2>
      <p class="s-dialog__description">Changes are visible to your team.</p>
    </div>
    <div class="s-field"><label class="s-label" for="d-name">Name</label><input class="s-input" id="d-name" value="Maya Lestari"></div>
    <div class="s-field"><label class="s-label" for="d-user">Username</label><input class="s-input" id="d-user" value="@maya"></div>
    <div class="s-dialog__footer">
      <button type="button" class="s-btn s-btn--outline" data-s-close>Cancel</button>
      <button type="submit" class="s-btn">Save changes</button>
    </div>
  </form>
</dialog>

<script>
  document.getElementById("edit-form").addEventListener("submit", (e) => {
    e.preventDefault()
    Sabil.closeDialog("edit-profile")
    Sabil.toast({ title: "Profile saved" })
  })
</script>
```

### Alert Dialog

The same dialog, used to confirm a destructive action.

```html
<button class="s-btn s-btn--destructive" data-s-open="confirm-delete">Delete project</button>

<dialog class="s-dialog" id="confirm-delete" role="alertdialog" aria-labelledby="del-title" aria-describedby="del-desc">
  <div class="s-dialog__panel">
    <div class="s-dialog__header">
      <h2 class="s-dialog__title" id="del-title">Delete this project?</h2>
      <p class="s-dialog__description" id="del-desc">This removes the project and all of its data. This cannot be undone.</p>
    </div>
    <div class="s-dialog__footer">
      <button class="s-btn s-btn--outline" data-s-close>Cancel</button>
      <button class="s-btn s-btn--destructive" data-s-close data-s-toast="Project deleted" data-s-toast-variant="destructive">Delete</button>
    </div>
  </div>
</dialog>
```

### Sheet

A dialog that slides in from the edge with the drawer curve. Add s-sheet--left for the other side.

```html
<button class="s-btn s-btn--outline" data-s-open="filters">Open filters</button>

<dialog class="s-sheet" id="filters" aria-labelledby="filters-title">
  <div class="s-sheet__panel">
    <div class="s-dialog__header">
      <h2 class="s-dialog__title" id="filters-title">Filters</h2>
      <p class="s-dialog__description">Narrow down the results.</p>
    </div>
    <label class="s-choice"><input class="s-checkbox" type="checkbox" checked> In stock</label>
    <label class="s-choice"><input class="s-checkbox" type="checkbox"> On sale</label>
    <label class="s-choice"><input class="s-checkbox" type="checkbox"> Free shipping</label>
    <div style="margin-top:auto;display:flex;gap:8px">
      <button class="s-btn s-btn--outline" style="flex:1" data-s-close>Reset</button>
      <button class="s-btn" style="flex:1" data-s-close>Apply</button>
    </div>
  </div>
</dialog>
```

### Dropdown Menu

Opens under its trigger and grows from it. Arrow keys move, Escape closes, focus returns to the button.

```html
<button class="s-btn s-btn--outline" data-s-menu="account-menu" aria-haspopup="menu" aria-expanded="false">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> My account <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
</button>

<div class="s-menu" id="account-menu" role="menu" hidden>
  <div class="s-menu__label">maya@acme.com</div>
  <button class="s-menu__item" role="menuitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> Profile <span class="s-menu__shortcut">Ctrl P</span></button>
  <button class="s-menu__item" role="menuitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> Settings <span class="s-menu__shortcut">Ctrl ,</span></button>
  <div class="s-menu__separator" role="separator"></div>
  <button class="s-menu__item s-menu__item--destructive" role="menuitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg> Log out</button>
</div>
```

### Popover

Rich content in a floating panel. Click outside or press Escape to close.

```html
<button class="s-btn s-btn--outline" data-s-popover="dimensions" aria-expanded="false">Dimensions</button>

<div class="s-popover" id="dimensions" role="dialog" aria-label="Dimensions" hidden>
  <div style="display:grid;gap:12px">
    <div>
      <p style="margin:0;font-weight:500">Dimensions</p>
      <p style="margin:0;color:var(--s-muted-fg)">Set the size of the layer.</p>
    </div>
    <div class="s-field"><label class="s-label" for="p-w">Width</label><input class="s-input" id="p-w" value="100%"></div>
    <div class="s-field"><label class="s-label" for="p-h">Height</label><input class="s-input" id="p-h" value="25px"></div>
  </div>
</div>
```

### Combobox

Type to filter, arrows to move, Enter to pick. Listen for the s-change event to read the value.

```html
<div class="s-field" style="width:100%;max-width:300px">
  <label class="s-label" for="framework">Framework</label>
  <div class="s-combobox" data-s-combobox>
    <input class="s-input" id="framework" role="combobox" placeholder="Search framework..." autocomplete="off">
    <ul class="s-listbox" role="listbox" hidden>
      <li role="option" data-value="next">Next.js</li>
      <li role="option" data-value="nuxt">Nuxt</li>
      <li role="option" data-value="sveltekit">SvelteKit</li>
      <li role="option" data-value="astro">Astro</li>
      <li role="option" data-value="remix">Remix</li>
      <li role="option" data-value="laravel">Laravel</li>
      <li class="s-listbox__empty" hidden>No framework found.</li>
    </ul>
  </div>
</div>
```

### Toast

Call Sabil.toast() from any script, or put data-s-toast on a button. Hover pauses the timer.

```html
<div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center">
  <button class="s-btn s-btn--outline" data-s-toast="Changes saved" data-s-toast-description="Your profile is up to date.">Show toast</button>
  <button class="s-btn s-btn--outline" id="toast-action">With action</button>
  <button class="s-btn s-btn--destructive" data-s-toast="Upload failed" data-s-toast-description="The file is larger than 10 MB." data-s-toast-variant="destructive">Error</button>
</div>

<script>
  document.getElementById("toast-action").addEventListener("click", () => {
    Sabil.toast({
      title: "Message archived",
      action: { label: "Undo", onClick: () => Sabil.toast({ title: "Message restored" }) },
    })
  })
</script>
```

---

# Components

66 components built on the same foundation.

- [Accordion](https://ui.muttaqinsabilul.my.id/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](https://ui.muttaqinsabilul.my.id/docs/components/alert.md): Displays a callout for user attention.
- [Alert Dialog](https://ui.muttaqinsabilul.my.id/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://ui.muttaqinsabilul.my.id/docs/components/aspect-ratio.md): Displays content within a desired ratio.
- [Attachment](https://ui.muttaqinsabilul.my.id/docs/components/attachment.md): Displays a file, image or link attached to a message or form.
- [Avatar](https://ui.muttaqinsabilul.my.id/docs/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://ui.muttaqinsabilul.my.id/docs/components/badge.md): Displays a badge or a component that looks like a badge.
- [Breadcrumb](https://ui.muttaqinsabilul.my.id/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Bubble](https://ui.muttaqinsabilul.my.id/docs/components/bubble.md): A chat bubble for conversational interfaces.
- [Button](https://ui.muttaqinsabilul.my.id/docs/components/button.md): Displays a button or a component that looks like a button.
- [Button Group](https://ui.muttaqinsabilul.my.id/docs/components/button-group.md): A container that groups related buttons together with consistent styling.
- [Calendar](https://ui.muttaqinsabilul.my.id/docs/components/calendar.md): A date field component that allows users to enter and edit date.
- [Card](https://ui.muttaqinsabilul.my.id/docs/components/card.md): Displays a card with header, content, and footer.
- [Carousel](https://ui.muttaqinsabilul.my.id/docs/components/carousel.md): A carousel with motion and swipe built using Embla.
- [Chart](https://ui.muttaqinsabilul.my.id/docs/components/chart.md): Beautiful charts. Built using Recharts. Copy and paste into your apps.
- [Checkbox](https://ui.muttaqinsabilul.my.id/docs/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Code Block](https://ui.muttaqinsabilul.my.id/docs/components/code-block.md): Displays a block of code with syntax highlighting and a copy button.
- [Collapsible](https://ui.muttaqinsabilul.my.id/docs/components/collapsible.md): An interactive component which expands or collapses a panel.
- [Combobox](https://ui.muttaqinsabilul.my.id/docs/components/combobox.md): Autocomplete input and command palette with a list of suggestions.
- [Command](https://ui.muttaqinsabilul.my.id/docs/components/command.md): Fast, composable, unstyled command menu for React.
- [Context Menu](https://ui.muttaqinsabilul.my.id/docs/components/context-menu.md): Displays a menu to the user, triggered by a right click.
- [Data Table](https://ui.muttaqinsabilul.my.id/docs/components/data-table.md): Powerful table and datagrids built using TanStack Table.
- [Date Picker](https://ui.muttaqinsabilul.my.id/docs/components/date-picker.md): A date picker component with range and presets.
- [Dialog](https://ui.muttaqinsabilul.my.id/docs/components/dialog.md): A window overlaid on either the primary window or another dialog window.
- [Direction](https://ui.muttaqinsabilul.my.id/docs/components/direction.md): Provides the reading direction (LTR or RTL) to every component below it.
- [Drawer](https://ui.muttaqinsabilul.my.id/docs/components/drawer.md): A drawer component for React, built on Vaul.
- [Dropdown Menu](https://ui.muttaqinsabilul.my.id/docs/components/dropdown-menu.md): Displays a menu to the user, such as a set of actions or functions, triggered by a button.
- [Empty](https://ui.muttaqinsabilul.my.id/docs/components/empty.md): Use the Empty component to display an empty state.
- [Field](https://ui.muttaqinsabilul.my.id/docs/components/field.md): Combine labels, controls, and help text to compose accessible form fields.
- [Hover Card](https://ui.muttaqinsabilul.my.id/docs/components/hover-card.md): For sighted users to preview content available behind a link.
- [Input](https://ui.muttaqinsabilul.my.id/docs/components/input.md): Displays a form input field or a component that looks like an input field.
- [Input Group](https://ui.muttaqinsabilul.my.id/docs/components/input-group.md): Add addons, buttons, and helper content to inputs.
- [Input OTP](https://ui.muttaqinsabilul.my.id/docs/components/input-otp.md): Accessible one-time password component with copy paste functionality.
- [Item](https://ui.muttaqinsabilul.my.id/docs/components/item.md): A versatile component for displaying content with media, title, description and actions.
- [Kbd](https://ui.muttaqinsabilul.my.id/docs/components/kbd.md): Used to display textual user input from keyboard.
- [Label](https://ui.muttaqinsabilul.my.id/docs/components/label.md): Renders an accessible label associated with controls.
- [Marker](https://ui.muttaqinsabilul.my.id/docs/components/marker.md): A compact status line for events in a timeline or activity feed.
- [Menubar](https://ui.muttaqinsabilul.my.id/docs/components/menubar.md): A visually persistent menu common in desktop applications.
- [Message](https://ui.muttaqinsabilul.my.id/docs/components/message.md): Layout for a single message in a conversation, with avatar, header and footer.
- [Message Scroller](https://ui.muttaqinsabilul.my.id/docs/components/message-scroller.md): A scroll container for chat that keeps the newest message in view.
- [Native Select](https://ui.muttaqinsabilul.my.id/docs/components/native-select.md): A styled native HTML select element.
- [Navigation Menu](https://ui.muttaqinsabilul.my.id/docs/components/navigation-menu.md): A collection of links for navigating websites.
- [Pagination](https://ui.muttaqinsabilul.my.id/docs/components/pagination.md): Pagination with page navigation, next and previous links.
- [Popover](https://ui.muttaqinsabilul.my.id/docs/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://ui.muttaqinsabilul.my.id/docs/components/progress.md): Displays an indicator showing the completion progress of a task.
- [Questionnaire](https://ui.muttaqinsabilul.my.id/docs/components/questionnaire.md): A step-by-step set of questions with keyboard shortcuts.
- [Radio Group](https://ui.muttaqinsabilul.my.id/docs/components/radio-group.md): A set of checkable buttons where no more than one can be checked at a time.
- [Resizable](https://ui.muttaqinsabilul.my.id/docs/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://ui.muttaqinsabilul.my.id/docs/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Select](https://ui.muttaqinsabilul.my.id/docs/components/select.md): Displays a list of options for the user to pick from, triggered by a button.
- [Separator](https://ui.muttaqinsabilul.my.id/docs/components/separator.md): Visually or semantically separates content.
- [Sheet](https://ui.muttaqinsabilul.my.id/docs/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://ui.muttaqinsabilul.my.id/docs/components/sidebar.md): A composable, themeable and customizable sidebar component.
- [Skeleton](https://ui.muttaqinsabilul.my.id/docs/components/skeleton.md): Use to show a placeholder while content is loading.
- [Slider](https://ui.muttaqinsabilul.my.id/docs/components/slider.md): An input where the user selects a value from within a given range.
- [Spinner](https://ui.muttaqinsabilul.my.id/docs/components/spinner.md): An indicator that can be used to show a loading state.
- [Switch](https://ui.muttaqinsabilul.my.id/docs/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Table](https://ui.muttaqinsabilul.my.id/docs/components/table.md): A responsive table component.
- [Tabs](https://ui.muttaqinsabilul.my.id/docs/components/tabs.md): A set of layered sections of content, known as tab panels, displayed one at a time.
- [Textarea](https://ui.muttaqinsabilul.my.id/docs/components/textarea.md): Displays a form textarea or a component that looks like a textarea.
- [Toast](https://ui.muttaqinsabilul.my.id/docs/components/toast.md): An opinionated toast component for React, built on Sonner.
- [Toggle](https://ui.muttaqinsabilul.my.id/docs/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://ui.muttaqinsabilul.my.id/docs/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://ui.muttaqinsabilul.my.id/docs/components/tooltip.md): A popup that displays information related to an element on hover or focus.
- [Trace](https://ui.muttaqinsabilul.my.id/docs/components/trace.md): Shows the steps an agent or a job takes, with live status.
- [Typography](https://ui.muttaqinsabilul.my.id/docs/components/typography.md): Styles for headings, paragraphs, lists and more.

---

# Accordion

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

Dependencies: cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/accordion.json

## Usage

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion"
```

## Example

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export default function AccordionDemo() {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue="shipping"
      className="max-w-lg"
    >
      <AccordionItem value="shipping">
        <AccordionTrigger>What are your shipping options?</AccordionTrigger>
        <AccordionContent>
          We offer standard (5-7 days), express (2-3 days), and overnight
          shipping. Free shipping on international orders.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="returns">
        <AccordionTrigger>What is your return policy?</AccordionTrigger>
        <AccordionContent>
          Returns accepted within 30 days. Items must be unused and in original
          packaging. Refunds processed within 5-7 business days.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="support">
        <AccordionTrigger>How can I contact customer support?</AccordionTrigger>
        <AccordionContent>
          Reach us via email, live chat, or phone. We respond within 24 hours
          during business days.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

---

# Alert

Displays a callout for user attention.

Dependencies: class-variance-authority, cn. Source: https://ui.muttaqinsabilul.my.id/r/alert.json

## Usage

```tsx
import {
  Alert,
  AlertTitle,
  AlertDescription,
  AlertAction,
} from "@/components/ui/alert"
```

## Example

```tsx
import { CheckCircle2Icon, InfoIcon } from "lucide-react"

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

export default function AlertDemo() {
  return (
    <div className="grid w-full max-w-md items-start gap-4">
      <Alert>
        <CheckCircle2Icon />
        <AlertTitle>Payment successful</AlertTitle>
        <AlertDescription>
          Your payment of $29.99 has been processed. A receipt has been sent to
          your email address.
        </AlertDescription>
      </Alert>
      <Alert>
        <InfoIcon />
        <AlertTitle>New feature available</AlertTitle>
        <AlertDescription>
          We&apos;ve added dark mode support. You can enable it in your account
          settings.
        </AlertDescription>
      </Alert>
    </div>
  )
}
```

---

# Alert Dialog

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

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/alert-dialog.json

## Usage

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
```

## Example

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

export default function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Show Dialog</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

---

# Aspect Ratio

Displays content within a desired ratio.

Dependencies: radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/aspect-ratio.json

## Usage

```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"
```

## Example

```tsx
import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

export default function AspectRatioDemo() {
  return (
    <div className="w-full max-w-sm">
      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
        <Image
          src="https://avatar.vercel.sh/sabil1"
          alt="Photo"
          fill
          className="w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
    </div>
  )
}
```

---

# Attachment

Displays a file, image or link attached to a message or form.

Dependencies: class-variance-authority, cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/attachment.json

## Usage

```tsx
import {
  Attachment,
  AttachmentGroup,
  AttachmentMedia,
  AttachmentContent,
  AttachmentTitle,
  AttachmentDescription,
  AttachmentActions,
  AttachmentAction,
  AttachmentTrigger,
} from "@/components/ui/attachment"
```

## Example

```tsx
import { FileCodeIcon, XIcon } from "lucide-react"

import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentGroup,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"
import { Spinner } from "@/components/ui/spinner"

const images = [
  {
    name: "workspace.png",
    meta: "PNG · 820 KB",
    src: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80",
    alt: "Workspace",
  },
  {
    name: "desk-reference.jpg",
    meta: "JPG · 1.1 MB",
    src: "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80",
    alt: "Desk",
  },
  {
    name: "office-reference.jpg",
    meta: "JPG · 940 KB",
    src: "https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80",
    alt: "Office",
  },
]

export function AttachmentDemo() {
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-3 py-12">
      <AttachmentGroup>
        {images.map((image) => (
          <Attachment key={image.name} orientation="vertical">
            <AttachmentMedia variant="image">
              <img src={image.src} alt={image.alt} />
            </AttachmentMedia>
            <AttachmentContent>
              <AttachmentTitle>{image.name}</AttachmentTitle>
              <AttachmentDescription>{image.meta}</AttachmentDescription>
            </AttachmentContent>
          </Attachment>
        ))}
      </AttachmentGroup>
      <Attachment state="uploading" className="w-full">
        <AttachmentMedia>
          <Spinner />
        </AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>sales-dashboard.pdf</AttachmentTitle>
          <AttachmentDescription>Uploading · 64%</AttachmentDescription>
        </AttachmentContent>
        <AttachmentActions>
          <AttachmentAction aria-label="Cancel upload">
            <XIcon />
          </AttachmentAction>
        </AttachmentActions>
      </Attachment>
      <Attachment className="w-full">
        <AttachmentMedia>
          <FileCodeIcon />
        </AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>message-renderer.tsx</AttachmentTitle>
          <AttachmentDescription>TypeScript · 12 KB</AttachmentDescription>
        </AttachmentContent>
        <AttachmentActions>
          <AttachmentAction aria-label="Remove message-renderer.tsx">
            <XIcon />
          </AttachmentAction>
        </AttachmentActions>
      </Attachment>
    </div>
  )
}
```

---

# Avatar

An image element with a fallback for representing the user.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/avatar.json

## Usage

```tsx
import {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarBadge,
} from "@/components/ui/avatar"
```

## Example

```tsx
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"

export default function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-6 md:gap-12">
      <Avatar>
        <AvatarImage
          src="https://avatar.vercel.sh/maya"
          alt="@maya"
          className="grayscale"
        />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
        <AvatarBadge className="bg-green-600 dark:bg-green-800" />
      </Avatar>
      <AvatarGroup className="grayscale">
        <Avatar>
          <AvatarImage src="https://avatar.vercel.sh/maya" alt="@maya" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/maxleiter.png"
            alt="@maxleiter"
          />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
        <AvatarGroupCount>+3</AvatarGroupCount>
      </AvatarGroup>
    </div>
  )
}
```

---

# Badge

Displays a badge or a component that looks like a badge.

Dependencies: class-variance-authority, cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/badge.json

## Usage

```tsx
import { Badge } from "@/components/ui/badge"
```

## Example

```tsx
import { Badge } from "@/components/ui/badge"

export default function BadgeDemo() {
  return (
    <div className="flex w-full flex-wrap justify-center gap-2">
      <Badge>Badge</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  )
}
```

---

# Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Dependencies: cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/breadcrumb.json

## Usage

```tsx
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from "@/components/ui/breadcrumb"
```

## Example

```tsx
import Link from "next/link"

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="#">Home</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button size="icon-sm" variant="ghost">
                <BreadcrumbEllipsis />
                <span className="sr-only">Toggle menu</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuGroup>
                <DropdownMenuItem>Documentation</DropdownMenuItem>
                <DropdownMenuItem>Themes</DropdownMenuItem>
                <DropdownMenuItem>GitHub</DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="#">Components</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

---

# Bubble

A chat bubble for conversational interfaces.

Dependencies: class-variance-authority, cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/bubble.json

## Usage

```tsx
import {
  BubbleGroup,
  Bubble,
  BubbleContent,
  BubbleReactions,
} from "@/components/ui/bubble"
```

## Example

```tsx
import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/components/ui/bubble"

export function BubbleDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8 py-12">
      <Bubble align="end">
        <BubbleContent>Hey there! what&apos;s up?</BubbleContent>
      </Bubble>
      <BubbleGroup>
        <Bubble variant="muted">
          <BubbleContent>Hey! Want to see chat bubbles?</BubbleContent>
        </Bubble>
        <Bubble variant="muted">
          <BubbleContent>
            I can group messages, switch sides, and keep the whole thread easy
            to scan.
          </BubbleContent>
          <BubbleReactions role="img" aria-label="Reaction: thumbs up">
            <span>👍</span>
          </BubbleReactions>
        </Bubble>
      </BubbleGroup>
      <Bubble align="end">
        <BubbleContent>Sure. Hit me with your best demo.</BubbleContent>
      </Bubble>
      <Bubble variant="muted">
        <BubbleContent>
          Yes. You are reading a demo that is demoing itself. Very meta. Very
          on-brand.
        </BubbleContent>
        <BubbleReactions
          role="img"
          aria-label="Reactions: thumbs up, fire, eyes, and 2 more"
        >
          <span>👍</span>
          <span>🔥</span>
          <span>👀</span>
          <span>+2</span>
        </BubbleReactions>
      </Bubble>
    </div>
  )
}
```

---

# Button

Displays a button or a component that looks like a button.

Dependencies: class-variance-authority, cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/button.json

## Usage

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

## Example

```tsx
import { LockIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function ButtonDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <div className="grid grid-cols-3 gap-2">
        <Button variant="outline">
          <GoogleIcon />
          Google
        </Button>
        <Button variant="outline">
          <AppleIcon />
          Apple
        </Button>
        <Button variant="outline">
          <GitHubIcon />
          GitHub
        </Button>
      </div>
      <Button className="mt-2">Sign in</Button>
      <Button variant="outline">
        <LockIcon />
        Continue with SSO
      </Button>
    </div>
  )
}

function GoogleIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.57c2.08-1.92 3.27-4.74 3.27-8.09Z" />
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z" />
      <path fill="#FBBC05" d="M5.84 14.1A6.6 6.6 0 0 1 5.49 12c0-.73.13-1.43.35-2.1V7.07H2.18A11 11 0 0 0 1 12c0 1.78.43 3.45 1.18 4.93l3.66-2.84Z" />
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A10.6 10.6 0 0 0 12 1 11 11 0 0 0 2.18 7.07l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38Z" />
    </svg>
  )
}

function AppleIcon() {
  return (
    <svg viewBox="0 0 14.1 17.33" aria-hidden="true" className="fill-current">
      <path d="M7.26 4c.78 0 1.76-.53 2.35-1.23.53-.64.91-1.53.91-2.43 0-.12-.01-.24-.03-.34-.87.03-1.92.58-2.54 1.32-.5.56-.95 1.44-.95 2.35 0 .13.02.26.03.31.06.01.14.02.23.02ZM4.5 17.33c1.07 0 1.54-.72 2.88-.72 1.35 0 1.65.7 2.84.7 1.17 0 1.95-1.08 2.69-2.14.83-1.21 1.17-2.4 1.19-2.46-.08-.02-2.31-.94-2.31-3.5 0-2.23 1.76-3.23 1.86-3.31-1.17-1.67-2.94-1.72-3.43-1.72-1.31 0-2.38.79-3.05.79-.73 0-1.69-.75-2.82-.75C2.19 4.22 0 6 0 9.37c0 2.1.82 4.31 1.82 5.74.86 1.21 1.61 2.2 2.69 2.2Z" />
    </svg>
  )
}

function GitHubIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className="fill-current">
      <path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.74.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.8 1.3 3.49 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3" />
    </svg>
  )
}
```

---

# Button Group

A container that groups related buttons together with consistent styling.

Dependencies: class-variance-authority, cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/button-group.json

## Usage

```tsx
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui/button-group"
```

## Example

```tsx
"use client"

import * as React from "react"
import {
  ArchiveIcon,
  ArrowLeftIcon,
  CalendarPlusIcon,
  ClockIcon,
  ListFilterIcon,
  MailCheckIcon,
  MoreHorizontalIcon,
  TagIcon,
  Trash2Icon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function ButtonGroupDemo() {
  const [label, setLabel] = React.useState("personal")

  return (
    <ButtonGroup>
      <ButtonGroup className="hidden sm:flex">
        <Button variant="outline" size="icon" aria-label="Go Back">
          <ArrowLeftIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Archive</Button>
        <Button variant="outline">Report</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Snooze</Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" size="icon" aria-label="More Options">
              <MoreHorizontalIcon />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-40">
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <MailCheckIcon />
                Mark as Read
              </DropdownMenuItem>
              <DropdownMenuItem>
                <ArchiveIcon />
                Archive
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <ClockIcon />
                Snooze
              </DropdownMenuItem>
              <DropdownMenuItem>
                <CalendarPlusIcon />
                Add to Calendar
              </DropdownMenuItem>
              <DropdownMenuItem>
                <ListFilterIcon />
                Add to List
              </DropdownMenuItem>
              <DropdownMenuSub>
                <DropdownMenuSubTrigger>
                  <TagIcon />
                  Label As...
                </DropdownMenuSubTrigger>
                <DropdownMenuSubContent>
                  <DropdownMenuRadioGroup
                    value={label}
                    onValueChange={setLabel}
                  >
                    <DropdownMenuRadioItem value="personal">
                      Personal
                    </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="work">
                      Work
                    </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="other">
                      Other
                    </DropdownMenuRadioItem>
                  </DropdownMenuRadioGroup>
                </DropdownMenuSubContent>
              </DropdownMenuSub>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem variant="destructive">
                <Trash2Icon />
                Trash
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </ButtonGroup>
    </ButtonGroup>
  )
}
```

---

# Calendar

A date field component that allows users to enter and edit date.

Dependencies: cn, lucide-react, react-day-picker. Source: https://ui.muttaqinsabilul.my.id/r/calendar.json

## Usage

```tsx
import { Calendar, CalendarDayButton } from "@/components/ui/calendar"
```

## Example

```tsx
"use client"

import * as React from "react"

import { Calendar } from "@/components/ui/calendar"

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

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

---

# Card

Displays a card with header, content, and footer.

Dependencies: cn. Source: https://ui.muttaqinsabilul.my.id/r/card.json

## Usage

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

## Example

```tsx
import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Login to your account</CardTitle>
        <CardDescription>
          Enter your email below to login to your account
        </CardDescription>
        <CardAction>
          <Button variant="link">Sign Up</Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <form>
          <div className="flex flex-col gap-6">
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="m@example.com"
                required
              />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center">
                <Label htmlFor="password">Password</Label>
                <a
                  href="#"
                  className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                >
                  Forgot your password?
                </a>
              </div>
              <Input id="password" type="password" required />
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex-col gap-2">
        <Button type="submit" className="w-full">
          Login
        </Button>
        <Button variant="outline" className="w-full">
          Login with Google
        </Button>
      </CardFooter>
    </Card>
  )
}
```

---

# Carousel

A carousel with motion and swipe built using Embla.

Dependencies: cn, embla-carousel-react, lucide-react. Source: https://ui.muttaqinsabilul.my.id/r/carousel.json

## Usage

```tsx
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from "@/components/ui/carousel"
```

## Example

```tsx
import * as React from "react"

import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

export default function CarouselDemo() {
  return (
    <Carousel className="w-full max-w-[12rem] sm:max-w-xs">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <span className="text-4xl font-semibold">{index + 1}</span>
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}
```

---

# Chart

Beautiful charts. Built using Recharts. Copy and paste into your apps.

Dependencies: cn, recharts. Source: https://ui.muttaqinsabilul.my.id/r/chart.json

## Usage

```tsx
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
} from "@/components/ui/chart"
```

## Example

```tsx
"use client"

import * as React from "react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart"

export const description = "An interactive bar chart"

const chartData = [
  { date: "2024-04-01", desktop: 222, mobile: 150 },
  { date: "2024-04-02", desktop: 97, mobile: 180 },
  { date: "2024-04-03", desktop: 167, mobile: 120 },
  { date: "2024-04-04", desktop: 242, mobile: 260 },
  { date: "2024-04-05", desktop: 373, mobile: 290 },
  { date: "2024-04-06", desktop: 301, mobile: 340 },
  { date: "2024-04-07", desktop: 245, mobile: 180 },
  { date: "2024-04-08", desktop: 409, mobile: 320 },
  { date: "2024-04-09", desktop: 59, mobile: 110 },
  { date: "2024-04-10", desktop: 261, mobile: 190 },
  { date: "2024-04-11", desktop: 327, mobile: 350 },
  { date: "2024-04-12", desktop: 292, mobile: 210 },
  { date: "2024-04-13", desktop: 342, mobile: 380 },
  { date: "2024-04-14", desktop: 137, mobile: 220 },
  { date: "2024-04-15", desktop: 120, mobile: 170 },
  { date: "2024-04-16", desktop: 138, mobile: 190 },
  { date: "2024-04-17", desktop: 446, mobile: 360 },
  { date: "2024-04-18", desktop: 364, mobile: 410 },
  { date: "2024-04-19", desktop: 243, mobile: 180 },
  { date: "2024-04-20", desktop: 89, mobile: 150 },
  { date: "2024-04-21", desktop: 137, mobile: 200 },
  { date: "2024-04-22", desktop: 224, mobile: 170 },
  { date: "2024-04-23", desktop: 138, mobile: 230 },
  { date: "2024-04-24", desktop: 387, mobile: 290 },
  { date: "2024-04-25", desktop: 215, mobile: 250 },
  { date: "2024-04-26", desktop: 75, mobile: 130 },
  { date: "2024-04-27", desktop: 383, mobile: 420 },
  { date: "2024-04-28", desktop: 122, mobile: 180 },
  { date: "2024-04-29", desktop: 315, mobile: 240 },
  { date: "2024-04-30", desktop: 454, mobile: 380 },
]

const chartConfig = {
  views: {
    label: "Page Views",
  },
  desktop: {
    label: "Desktop",
    color: "var(--chart-2)",
  },
  mobile: {
    label: "Mobile",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig

export function ChartDemo() {
  const [activeChart, setActiveChart] =
    React.useState<keyof typeof chartConfig>("desktop")

  const total = React.useMemo(
    () => ({
      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
    }),
    []
  )

  return (
    <Card className="py-0 pb-4">
      <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!">
          <CardTitle>Bar Chart - Interactive</CardTitle>
          <CardDescription>
            Showing total visitors for the last 3 months
          </CardDescription>
        </div>
        <div className="flex">
          {["desktop", "mobile"].map((key) => {
            const chart = key as keyof typeof chartConfig
            return (
              <button
                key={chart}
                data-active={activeChart === chart}
                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
                onClick={() => setActiveChart(chart)}
              >
                <span className="text-xs text-muted-foreground">
                  {chartConfig[chart].label}
                </span>
                <span className="text-lg leading-none font-bold sm:text-3xl">
                  {total[key as keyof typeof total].toLocaleString("en-US")}
                </span>
              </button>
            )
          })}
        </div>
      </CardHeader>
      <CardContent className="px-2 sm:p-6">
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-[250px] w-full"
        >
          <BarChart
            accessibilityLayer
            data={chartData}
            margin={{
              left: 12,
              right: 12,
            }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={32}
              tickFormatter={(value) => {
                const date = new Date(value)
                return date.toLocaleDateString("en-US", {
                  month: "short",
                  day: "numeric",
                })
              }}
            />
            <ChartTooltip
              content={
                <ChartTooltipContent
                  className="w-[150px]"
                  nameKey="views"
                  labelFormatter={(value) => {
                    return new Date(value).toLocaleDateString("en-US", {
                      month: "short",
                      day: "numeric",
                      year: "numeric",
                    })
                  }}
                />
              }
            />
            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

# Checkbox

A control that allows the user to toggle between checked and not checked.

Dependencies: cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/checkbox.json

## Usage

```tsx
import { Checkbox } from "@/components/ui/checkbox"
```

## Example

```tsx
"use client"

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"
import { Label } from "@/components/ui/label"

export default function CheckboxDemo() {
  return (
    <FieldGroup className="max-w-sm">
      <Field orientation="horizontal">
        <Checkbox id="terms-checkbox" name="terms-checkbox" />
        <Label htmlFor="terms-checkbox">Accept terms and conditions</Label>
      </Field>
      <Field orientation="horizontal">
        <Checkbox
          id="terms-checkbox-2"
          name="terms-checkbox-2"
          defaultChecked
        />
        <FieldContent>
          <FieldLabel htmlFor="terms-checkbox-2">
            Accept terms and conditions
          </FieldLabel>
          <FieldDescription>
            By clicking this checkbox, you agree to the terms.
          </FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal" data-disabled>
        <Checkbox id="toggle-checkbox" name="toggle-checkbox" disabled />
        <FieldLabel htmlFor="toggle-checkbox">Enable notifications</FieldLabel>
      </Field>
      <FieldLabel>
        <Field orientation="horizontal">
          <Checkbox id="toggle-checkbox-2" name="toggle-checkbox-2" />
          <FieldContent>
            <FieldTitle>Enable notifications</FieldTitle>
            <FieldDescription>
              You can enable or disable notifications at any time.
            </FieldDescription>
          </FieldContent>
        </Field>
      </FieldLabel>
    </FieldGroup>
  )
}
```

---

# Code Block

Displays a block of code with syntax highlighting and a copy button.

Dependencies: class-variance-authority, cn, lucide-react. Source: https://ui.muttaqinsabilul.my.id/r/code-block.json

## Usage

```tsx
import {
  CodeBlock,
  CodeBlockHeader,
  CodeBlockTitle,
  CodeBlockActions,
  CodeBlockCopyButton,
  CodeBlockContent,
  CodeBlockLine,
  CodeBlockFooter,
} from "@/components/ui/code-block"
```

## Example

```tsx
"use client"

import * as React from "react"
import { DownloadIcon, FileCodeIcon, WrapTextIcon } from "lucide-react"

import { useHighlightedCode } from "@/hooks/use-highlighted-code"
import { Button } from "@/components/ui/button"
import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockLine,
  CodeBlockTitle,
} from "@/components/ui/code-block"

const code = `import { streamText } from "ai"

export async function POST(request: Request) {
  const { messages } = await request.json()

  const result = streamText({
    model: "anthropic/claude-sonnet-4.5",
    system: "You are a helpful assistant. Answer in one short paragraph.",
    messages,
  })

  return result.toUIMessageStreamResponse()
}`

function download(value: string, filename: string) {
  const url = URL.createObjectURL(new Blob([value], { type: "text/plain" }))
  const link = document.createElement("a")
  link.href = url
  link.download = filename
  link.click()
  URL.revokeObjectURL(url)
}

export function CodeBlockDemo() {
  const [wrap, setWrap] = React.useState(false)
  const lines = useHighlightedCode(code, "ts")

  return (
    <div className="w-full max-w-lg">
      <CodeBlock>
        <CodeBlockHeader>
          <CodeBlockTitle>
            <FileCodeIcon />
            app/api/chat/route.ts
          </CodeBlockTitle>
          <CodeBlockActions>
            <Button
              variant="ghost"
              size="icon-xs"
              aria-label="Wrap lines"
              aria-pressed={wrap}
              className="aria-pressed:text-foreground"
              onClick={() => setWrap(!wrap)}
            >
              <WrapTextIcon />
            </Button>
            <Button
              variant="ghost"
              size="icon-xs"
              aria-label="Download"
              onClick={() => download(code, "route.ts")}
            >
              <DownloadIcon />
            </Button>
            <CodeBlockCopyButton value={code} />
          </CodeBlockActions>
        </CodeBlockHeader>
        <CodeBlockContent wrap={wrap} lineNumbers>
          {lines.map((line, index) => (
            <CodeBlockLine
              key={index}
              variant={index >= 5 && index <= 9 ? "highlighted" : "default"}
            >
              {line}
            </CodeBlockLine>
          ))}
        </CodeBlockContent>
      </CodeBlock>
    </div>
  )
}
```

---

# Collapsible

An interactive component which expands or collapses a panel.

Dependencies: radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/collapsible.json

## Usage

```tsx
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible"
```

## Example

```tsx
"use client"

import * as React from "react"
import { ChevronsUpDown } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export default function CollapsibleDemo() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className="flex w-[350px] flex-col gap-2"
    >
      <div className="flex items-center justify-between gap-4 px-4">
        <h4 className="text-sm font-semibold">Order #4189</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon" className="size-8">
            <ChevronsUpDown />
            <span className="sr-only">Toggle details</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
        <span className="text-muted-foreground">Status</span>
        <span className="font-medium">Shipped</span>
      </div>
      <CollapsibleContent className="flex flex-col gap-2">
        <div className="rounded-md border px-4 py-2 text-sm">
          <p className="font-medium">Shipping address</p>
          <p className="text-muted-foreground">100 Market St, San Francisco</p>
        </div>
        <div className="rounded-md border px-4 py-2 text-sm">
          <p className="font-medium">Items</p>
          <p className="text-muted-foreground">2x Studio Headphones</p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}
```

---

# Combobox

Autocomplete input and command palette with a list of suggestions.

Dependencies: @base-ui/react, cn, lucide-react. Source: https://ui.muttaqinsabilul.my.id/r/combobox.json

## Usage

```tsx
import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ComboboxGroup,
  ComboboxLabel,
  ComboboxCollection,
  ComboboxEmpty,
  ComboboxSeparator,
  ComboboxChips,
  ComboboxChip,
  ComboboxChipsInput,
  ComboboxTrigger,
  ComboboxValue,
} from "@/components/ui/combobox"
```

## Example

```tsx
"use client"

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"

const frameworks = [
  "Next.js",
  "SvelteKit",
  "Nuxt.js",
  "Remix",
  "Astro",
] as const

export default function ComboboxBasic() {
  return (
    <Combobox items={frameworks}>
      <ComboboxInput placeholder="Select a framework" />
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}
```

---

# Command

Fast, composable, unstyled command menu for React.

Dependencies: cmdk, cn, lucide-react. Source: https://ui.muttaqinsabilul.my.id/r/command.json

## Usage

```tsx
import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
} from "@/components/ui/command"
```

## Example

```tsx
import {
  Calculator,
  Calendar,
  CreditCard,
  Settings,
  Smile,
  User,
} from "lucide-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"

export function CommandDemo() {
  return (
    <Command className="max-w-sm rounded-lg border">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <Calendar />
            <span>Calendar</span>
          </CommandItem>
          <CommandItem>
            <Smile />
            <span>Search Emoji</span>
          </CommandItem>
          <CommandItem disabled>
            <Calculator />
            <span>Calculator</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <User />
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCard />
            <span>Billing</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Settings />
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}
```

---

# Context Menu

Displays a menu to the user, triggered by a right click.

Dependencies: cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/context-menu.json

## Usage

```tsx
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
} from "@/components/ui/context-menu"
```

## Example

```tsx
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
        <span className="hidden pointer-fine:inline-block">
          Right click here
        </span>
        <span className="hidden pointer-coarse:inline-block">
          Long press here
        </span>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-48">
        <ContextMenuGroup>
          <ContextMenuItem>
            Back
            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem disabled>
            Forward
            <ContextMenuShortcut>⌘]</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem>
            Reload
            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuSub>
            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
            <ContextMenuSubContent className="w-44">
              <ContextMenuGroup>
                <ContextMenuItem>Save Page...</ContextMenuItem>
                <ContextMenuItem>Create Shortcut...</ContextMenuItem>
                <ContextMenuItem>Name Window...</ContextMenuItem>
              </ContextMenuGroup>
              <ContextMenuSeparator />
              <ContextMenuGroup>
                <ContextMenuItem>Developer Tools</ContextMenuItem>
              </ContextMenuGroup>
              <ContextMenuSeparator />
              <ContextMenuGroup>
                <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
              </ContextMenuGroup>
            </ContextMenuSubContent>
          </ContextMenuSub>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuGroup>
          <ContextMenuCheckboxItem checked>
            Show Bookmarks
          </ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuGroup>
          <ContextMenuRadioGroup value="pedro">
            <ContextMenuLabel>People</ContextMenuLabel>
            <ContextMenuRadioItem value="pedro">
              Pedro Duarte
            </ContextMenuRadioItem>
            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
          </ContextMenuRadioGroup>
        </ContextMenuGroup>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

---

# Data Table

Powerful table and datagrids built using TanStack Table.

Dependencies: cn. Source: https://ui.muttaqinsabilul.my.id/r/table.json

## Usage

```tsx
import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
} from "@/components/ui/table"
```

## Example

```tsx
"use client"

import * as React from "react"
import {
  columnFilteringFeature,
  columnVisibilityFeature,
  createColumnHelper,
  createFilteredRowModel,
  createPaginatedRowModel,
  createSortedRowModel,
  filterFn_includesString,
  rowPaginationFeature,
  rowSelectionFeature,
  rowSortingFeature,
  sortFn_alphanumeric,
  sortFn_text,
  tableFeatures,
  useTable,
  type ColumnFiltersState,
  type ColumnVisibilityState,
  type SortingState,
} from "@tanstack/react-table"
import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

// New in v9: declare the features this table uses — anything you don't
// register is tree-shaken out of the bundle.
const features = tableFeatures({
  columnFilteringFeature,
  columnVisibilityFeature,
  rowPaginationFeature,
  rowSelectionFeature,
  rowSortingFeature,
  filteredRowModel: createFilteredRowModel(),
  paginatedRowModel: createPaginatedRowModel(),
  sortedRowModel: createSortedRowModel(),
  filterFns: { includesString: filterFn_includesString },
  sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text },
})

const columnHelper = createColumnHelper<typeof features, Payment>()

const data: Payment[] = [
  {
    id: "m5gr84i9",
    amount: 316,
    status: "success",
    email: "ken99@example.com",
  },
  {
    id: "3u1reuv4",
    amount: 242,
    status: "success",
    email: "Abe45@example.com",
  },
  {
    id: "derv1ws0",
    amount: 837,
    status: "processing",
    email: "Monserrat44@example.com",
  },
  {
    id: "5kma53ae",
    amount: 874,
    status: "success",
    email: "Silas22@example.com",
  },
  {
    id: "bhqecj4p",
    amount: 721,
    status: "failed",
    email: "carmella@example.com",
  },
]

export type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

export const columns = columnHelper.columns([
  columnHelper.display({
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  }),
  columnHelper.accessor("status", {
    header: "Status",
    cell: ({ row }) => (
      <div className="capitalize">{row.getValue("status")}</div>
    ),
  }),
  columnHelper.accessor("email", {
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Email
          <ArrowUpDown />
        </Button>
      )
    },
    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
  }),
  columnHelper.accessor("amount", {
    header: () => <div className="text-right">Amount</div>,
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"))

      // Format the amount as a dollar amount.
      const formatted = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(amount)

      return <div className="text-right font-medium">{formatted}</div>
    },
  }),
  columnHelper.display({
    id: "actions",
    enableHiding: false,
    cell: ({ row }) => {
      const payment = row.original

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon-xs">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-40">
            <DropdownMenuGroup>
              <DropdownMenuLabel>Actions</DropdownMenuLabel>
              <DropdownMenuItem
                onClick={() => navigator.clipboard.writeText(payment.id)}
              >
                Copy payment ID
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuGroup>
              <DropdownMenuItem>View customer</DropdownMenuItem>
              <DropdownMenuItem>View payment details</DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  }),
])

export function DataTableDemo() {
  const [sorting, setSorting] = React.useState<SortingState>([])
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  )
  const [columnVisibility, setColumnVisibility] =
    React.useState<ColumnVisibilityState>({})
  const [rowSelection, setRowSelection] = React.useState({})

  const table = useTable({
    features,
    data,
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  })

  return (
    <div className="w-full">
      <div className="flex items-center py-4">
        <Input
          placeholder="Filter emails..."
          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
          onChange={(event) =>
            table.getColumn("email")?.setFilterValue(event.target.value)
          }
          className="max-w-sm"
        />
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="ml-auto">
              Columns <ChevronDown />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuGroup>
              {table
                .getAllColumns()
                .filter((column) => column.getCanHide())
                .map((column) => {
                  return (
                    <DropdownMenuCheckboxItem
                      key={column.id}
                      className="capitalize"
                      checked={column.getIsVisible()}
                      onCheckedChange={(value) =>
                        column.toggleVisibility(!!value)
                      }
                    >
                      {column.id}
                    </DropdownMenuCheckboxItem>
                  )
                })}
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      <div className="overflow-hidden rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id}>
                      {header.isPlaceholder ? null : (
                        <table.FlexRender header={header} />
                      )}
                    </TableHead>
                  )
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      <table.FlexRender cell={cell} />
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="h-24 text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center justify-end space-x-2 py-4">
        <div className="flex-1 text-sm text-muted-foreground">
          {table.getFilteredSelectedRowModel().rows.length} of{" "}
          {table.getFilteredRowModel().rows.length} row(s) selected.
        </div>
        <div className="space-x-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            Previous
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
          >
            Next
          </Button>
        </div>
      </div>
    </div>
  )
}
```

---

# Date Picker

A date picker component with range and presets.

Dependencies: cn, lucide-react, react-day-picker, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/calendar.json

## Usage

```tsx
import { Calendar, CalendarDayButton } from "@/components/ui/calendar"
```

## Example

```tsx
"use client"

import * as React from "react"
import { format } from "date-fns"
import { ChevronDownIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

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

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          data-empty={!date}
          className="w-[212px] justify-between text-left font-normal data-[empty=true]:text-muted-foreground"
        >
          {date ? format(date, "PPP") : <span>Pick a date</span>}
          <ChevronDownIcon />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          defaultMonth={date}
        />
      </PopoverContent>
    </Popover>
  )
}
```

---

# Dialog

A window overlaid on either the primary window or another dialog window.

Dependencies: cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/dialog.json

## Usage

```tsx
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
```

## Example

```tsx
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Field, FieldGroup } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function DialogDemo() {
  return (
    <Dialog>
      <form>
        <DialogTrigger asChild>
          <Button variant="outline">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </DialogDescription>
          </DialogHeader>
          <FieldGroup>
            <Field>
              <Label htmlFor="name-1">Name</Label>
              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
            </Field>
            <Field>
              <Label htmlFor="username-1">Username</Label>
              <Input id="username-1" name="username" defaultValue="@peduarte" />
            </Field>
          </FieldGroup>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>
  )
}
```

---

# Direction

Provides the reading direction (LTR or RTL) to every component below it.

Dependencies: radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/direction.json

## Usage

```tsx
import { DirectionProvider } from "@/components/ui/direction"
```

## Example

```tsx
"use client"

import * as React from "react"

import { DirectionProvider } from "@/components/ui/direction"
import { Slider } from "@/components/ui/slider"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export default function DirectionDemo() {
  const [dir, setDir] = React.useState<"ltr" | "rtl">("rtl")

  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <ToggleGroup
        type="single"
        variant="outline"
        value={dir}
        onValueChange={(v) => v && setDir(v as "ltr" | "rtl")}
        className="self-center"
      >
        <ToggleGroupItem value="ltr">LTR</ToggleGroupItem>
        <ToggleGroupItem value="rtl">RTL</ToggleGroupItem>
      </ToggleGroup>
      <DirectionProvider dir={dir}>
        <div dir={dir} className="flex flex-col gap-6">
          <Tabs defaultValue="one">
            <TabsList className="w-full">
              <TabsTrigger value="one">{dir === "rtl" ? "الأول" : "First"}</TabsTrigger>
              <TabsTrigger value="two">{dir === "rtl" ? "الثاني" : "Second"}</TabsTrigger>
              <TabsTrigger value="three">{dir === "rtl" ? "الثالث" : "Third"}</TabsTrigger>
            </TabsList>
          </Tabs>
          <Slider defaultValue={[30]} max={100} />
        </div>
      </DirectionProvider>
    </div>
  )
}
```

---

# Drawer

A drawer component for React, built on Vaul.

Dependencies: cn, vaul. Source: https://ui.muttaqinsabilul.my.id/r/drawer.json

## Usage

```tsx
import {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
} from "@/components/ui/drawer"
```

## Example

```tsx
"use client"

import * as React from "react"
import { Minus, Plus } from "lucide-react"
import { Bar, BarChart, ResponsiveContainer } from "recharts"

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const data = [
  {
    goal: 400,
  },
  {
    goal: 300,
  },
  {
    goal: 200,
  },
  {
    goal: 300,
  },
  {
    goal: 200,
  },
  {
    goal: 278,
  },
  {
    goal: 189,
  },
  {
    goal: 239,
  },
  {
    goal: 300,
  },
  {
    goal: 200,
  },
  {
    goal: 278,
  },
  {
    goal: 189,
  },
  {
    goal: 349,
  },
]

export function DrawerDemo() {
  const [goal, setGoal] = React.useState(350)

  function onClick(adjustment: number) {
    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
  }

  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open Drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Move Goal</DrawerTitle>
            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
          </DrawerHeader>
          <div className="p-4 pb-0">
            <div className="flex items-center justify-center space-x-2">
              <Button
                variant="outline"
                size="icon"
                className="h-8 w-8 shrink-0 rounded-full"
                onClick={() => onClick(-10)}
                disabled={goal <= 200}
              >
                <Minus />
                <span className="sr-only">Decrease</span>
              </Button>
              <div className="flex-1 text-center">
                <div className="text-7xl font-bold tracking-tighter">
                  {goal}
                </div>
                <div className="text-[0.70rem] text-muted-foreground uppercase">
                  Calories/day
                </div>
              </div>
              <Button
                variant="outline"
                size="icon"
                className="h-8 w-8 shrink-0 rounded-full"
                onClick={() => onClick(10)}
                disabled={goal >= 400}
              >
                <Plus />
                <span className="sr-only">Increase</span>
              </Button>
            </div>
            <div className="mt-3 h-[120px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data}>
                  <Bar
                    dataKey="goal"
                    style={
                      {
                        fill: "var(--chart-1)",
                      } as React.CSSProperties
                    }
                  />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
          <DrawerFooter>
            <Button>Submit</Button>
            <DrawerClose asChild>
              <Button variant="outline">Cancel</Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}
```

---

# Dropdown Menu

Displays a menu to the user, such as a set of actions or functions, triggered by a button.

Dependencies: cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/dropdown-menu.json

## Usage

```tsx
import {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
} from "@/components/ui/dropdown-menu"
```

## Example

```tsx
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-40" align="start">
        <DropdownMenuGroup>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuItem>
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>Team</DropdownMenuItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
            <DropdownMenuPortal>
              <DropdownMenuSubContent>
                <DropdownMenuItem>Email</DropdownMenuItem>
                <DropdownMenuItem>Message</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>More...</DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuPortal>
          </DropdownMenuSub>
          <DropdownMenuItem>
            New Team
            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>GitHub</DropdownMenuItem>
          <DropdownMenuItem>Support</DropdownMenuItem>
          <DropdownMenuItem disabled>API</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            Log out
            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

---

# Empty

Use the Empty component to display an empty state.

Dependencies: class-variance-authority, cn. Source: https://ui.muttaqinsabilul.my.id/r/empty.json

## Usage

```tsx
import {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
} from "@/components/ui/empty"
```

## Example

```tsx
import { IconFolderCode } from "@tabler/icons-react"
import { ArrowUpRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export default function EmptyDemo() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <IconFolderCode />
        </EmptyMedia>
        <EmptyTitle>No Projects Yet</EmptyTitle>
        <EmptyDescription>
          You haven&apos;t created any projects yet. Get started by creating
          your first project.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent className="flex-row justify-center gap-2">
        <Button>Create Project</Button>
        <Button variant="outline">Import Project</Button>
      </EmptyContent>
      <Button
        variant="link"
        asChild
        className="text-muted-foreground"
        size="sm"
      >
        <a href="#">
          Learn More <ArrowUpRightIcon />
        </a>
      </Button>
    </Empty>
  )
}
```

---

# Field

Combine labels, controls, and help text to compose accessible form fields.

Dependencies: class-variance-authority, cn. Source: https://ui.muttaqinsabilul.my.id/r/field.json

## Usage

```tsx
import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldContent,
  FieldTitle,
} from "@/components/ui/field"
```

## Example

```tsx
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

export default function FieldDemo() {
  return (
    <div className="w-full max-w-md">
      <form>
        <FieldGroup>
          <FieldSet>
            <FieldLegend>Payment Method</FieldLegend>
            <FieldDescription>
              All transactions are secure and encrypted
            </FieldDescription>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="checkout-7j9-card-name-43j">
                  Name on Card
                </FieldLabel>
                <Input
                  id="checkout-7j9-card-name-43j"
                  placeholder="Evil Rabbit"
                  required
                />
              </Field>
              <Field>
                <FieldLabel htmlFor="checkout-7j9-card-number-uw1">
                  Card Number
                </FieldLabel>
                <Input
                  id="checkout-7j9-card-number-uw1"
                  placeholder="1234 5678 9012 3456"
                  required
                />
                <FieldDescription>
                  Enter your 16-digit card number
                </FieldDescription>
              </Field>
              <div className="grid grid-cols-3 gap-4">
                <Field>
                  <FieldLabel htmlFor="checkout-exp-month-ts6">
                    Month
                  </FieldLabel>
                  <Select defaultValue="">
                    <SelectTrigger id="checkout-exp-month-ts6">
                      <SelectValue placeholder="MM" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
                        <SelectItem value="01">01</SelectItem>
                        <SelectItem value="02">02</SelectItem>
                        <SelectItem value="03">03</SelectItem>
                        <SelectItem value="04">04</SelectItem>
                        <SelectItem value="05">05</SelectItem>
                        <SelectItem value="06">06</SelectItem>
                        <SelectItem value="07">07</SelectItem>
                        <SelectItem value="08">08</SelectItem>
                        <SelectItem value="09">09</SelectItem>
                        <SelectItem value="10">10</SelectItem>
                        <SelectItem value="11">11</SelectItem>
                        <SelectItem value="12">12</SelectItem>
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </Field>
                <Field>
                  <FieldLabel htmlFor="checkout-7j9-exp-year-f59">
                    Year
                  </FieldLabel>
                  <Select defaultValue="">
                    <SelectTrigger id="checkout-7j9-exp-year-f59">
                      <SelectValue placeholder="YYYY" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
                        <SelectItem value="2024">2024</SelectItem>
                        <SelectItem value="2025">2025</SelectItem>
                        <SelectItem value="2026">2026</SelectItem>
                        <SelectItem value="2027">2027</SelectItem>
                        <SelectItem value="2028">2028</SelectItem>
                        <SelectItem value="2029">2029</SelectItem>
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                </Field>
                <Field>
                  <FieldLabel htmlFor="checkout-7j9-cvv">CVV</FieldLabel>
                  <Input id="checkout-7j9-cvv" placeholder="123" required />
                </Field>
              </div>
            </FieldGroup>
          </FieldSet>
          <FieldSeparator />
          <FieldSet>
            <FieldLegend>Billing Address</FieldLegend>
            <FieldDescription>
              The billing address associated with your payment method
            </FieldDescription>
            <FieldGroup>
              <Field orientation="horizontal">
                <Checkbox
                  id="checkout-7j9-same-as-shipping-wgm"
                  defaultChecked
                />
                <FieldLabel
                  htmlFor="checkout-7j9-same-as-shipping-wgm"
                  className="font-normal"
                >
                  Same as shipping address
                </FieldLabel>
              </Field>
            </FieldGroup>
          </FieldSet>
          <FieldSet>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="checkout-7j9-optional-comments">
                  Comments
                </FieldLabel>
                <Textarea
                  id="checkout-7j9-optional-comments"
                  placeholder="Add any additional comments"
                  className="resize-none"
                />
              </Field>
            </FieldGroup>
          </FieldSet>
          <Field orientation="horizontal">
            <Button type="submit">Submit</Button>
            <Button variant="outline" type="button">
              Cancel
            </Button>
          </Field>
        </FieldGroup>
      </form>
    </div>
  )
}
```

---

# Hover Card

For sighted users to preview content available behind a link.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/hover-card.json

## Usage

```tsx
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card"
```

## Example

```tsx
import { Button } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

export default function HoverCardDemo() {
  return (
    <HoverCard openDelay={10} closeDelay={100}>
      <HoverCardTrigger asChild>
        <Button variant="link">Hover Here</Button>
      </HoverCardTrigger>
      <HoverCardContent className="flex w-64 flex-col gap-0.5">
        <div className="font-semibold">@nextjs</div>
        <div>The React Framework – created and maintained by @vercel.</div>
        <div className="mt-1 text-xs text-muted-foreground">
          Joined December 2021
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}
```

---

# Input

Displays a form input field or a component that looks like an input field.

Dependencies: cn. Source: https://ui.muttaqinsabilul.my.id/r/input.json

## Usage

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

## Example

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function InputDemo() {
  return (
    <Field>
      <FieldLabel htmlFor="input-demo-api-key">API Key</FieldLabel>
      <Input id="input-demo-api-key" type="password" placeholder="sk-..." />
      <FieldDescription>
        Your API key is encrypted and stored securely.
      </FieldDescription>
    </Field>
  )
}
```

---

# Input Group

Add addons, buttons, and helper content to inputs.

Dependencies: class-variance-authority, cn. Source: https://ui.muttaqinsabilul.my.id/r/input-group.json

## Usage

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

## Example

```tsx
import { Search } from "lucide-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupDemo() {
  return (
    <InputGroup className="max-w-xs">
      <InputGroupInput placeholder="Search..." />
      <InputGroupAddon>
        <Search />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
    </InputGroup>
  )
}
```

---

# Input OTP

Accessible one-time password component with copy paste functionality.

Dependencies: cn, input-otp, lucide-react. Source: https://ui.muttaqinsabilul.my.id/r/input-otp.json

## Usage

```tsx
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@/components/ui/input-otp"
```

## Example

```tsx
"use client"

import * as React from "react"

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"

export function InputOTPDemo() {
  const [value, setValue] = React.useState("123456")

  return (
    <div className="flex flex-col items-center gap-2">
      <InputOTP maxLength={6} value={value} onChange={setValue}>
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={3} />
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>
      <p className="text-xs text-muted-foreground">Enter the code sent to your phone.</p>
    </div>
  )
}
```

---

# Item

A versatile component for displaying content with media, title, description and actions.

Dependencies: class-variance-authority, cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/item.json

## Usage

```tsx
import {
  Item,
  ItemMedia,
  ItemContent,
  ItemActions,
  ItemGroup,
  ItemSeparator,
  ItemTitle,
  ItemDescription,
  ItemHeader,
  ItemFooter,
} from "@/components/ui/item"
```

## Example

```tsx
import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

export function ItemDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Basic Item</ItemTitle>
          <ItemDescription>
            A simple item with title and description.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            Action
          </Button>
        </ItemActions>
      </Item>
      <Item variant="outline" size="sm" asChild>
        <a href="#">
          <ItemMedia>
            <BadgeCheckIcon className="size-5" />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Your profile has been verified.</ItemTitle>
          </ItemContent>
          <ItemActions>
            <ChevronRightIcon className="size-4" />
          </ItemActions>
        </a>
      </Item>
    </div>
  )
}
```

---

# Kbd

Used to display textual user input from keyboard.

Dependencies: cn. Source: https://ui.muttaqinsabilul.my.id/r/kbd.json

## Usage

```tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd"
```

## Example

```tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd"

export default function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>⌥</Kbd>
        <Kbd>⌃</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>B</Kbd>
      </KbdGroup>
    </div>
  )
}
```

---

# Label

Renders an accessible label associated with controls.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/label.json

## Usage

```tsx
import { Label } from "@/components/ui/label"
```

## Example

```tsx
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export default function LabelDemo() {
  return (
    <div className="flex gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}
```

---

# Marker

A compact status line for events in a timeline or activity feed.

Dependencies: class-variance-authority, cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/marker.json

## Usage

```tsx
import { Marker, MarkerIcon, MarkerContent } from "@/components/ui/marker"
```

## Example

```tsx
import { GitBranchIcon, SearchIcon } from "lucide-react"

import {
  Marker,
  MarkerContent,
  MarkerIcon,
} from "@/components/ui/marker"
import { Spinner } from "@/components/ui/spinner"

export function MarkerDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8 py-12">
      <Marker>
        <MarkerIcon>
          <GitBranchIcon />
        </MarkerIcon>
        <MarkerContent>Switched to a new branch</MarkerContent>
      </Marker>
      <Marker role="status">
        <MarkerIcon>
          <Spinner />
        </MarkerIcon>
        <MarkerContent className="shimmer">Thinking...</MarkerContent>
      </Marker>
      <Marker variant="separator">
        <MarkerContent>Conversation compacted</MarkerContent>
      </Marker>
      <Marker>
        <MarkerIcon>
          <SearchIcon />
        </MarkerIcon>
        <MarkerContent>Explored 4 files</MarkerContent>
      </Marker>
    </div>
  )
}
```

---

# Menubar

A visually persistent menu common in desktop applications.

Dependencies: cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/menubar.json

## Usage

```tsx
import {
  Menubar,
  MenubarPortal,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarGroup,
  MenubarSeparator,
  MenubarLabel,
  MenubarItem,
  MenubarShortcut,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
} from "@/components/ui/menubar"
```

## Example

```tsx
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar"

export default function MenubarDemo() {
  return (
    <Menubar className="w-72">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarItem>
              New Tab <MenubarShortcut>⌘T</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              New Window <MenubarShortcut>⌘N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem disabled>New Incognito Window</MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarSub>
              <MenubarSubTrigger>Share</MenubarSubTrigger>
              <MenubarSubContent>
                <MenubarGroup>
                  <MenubarItem>Email link</MenubarItem>
                  <MenubarItem>Messages</MenubarItem>
                  <MenubarItem>Notes</MenubarItem>
                </MenubarGroup>
              </MenubarSubContent>
            </MenubarSub>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarItem>
              Print... <MenubarShortcut>⌘P</MenubarShortcut>
            </MenubarItem>
          </MenubarGroup>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarItem>
              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
            </MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarSub>
              <MenubarSubTrigger>Find</MenubarSubTrigger>
              <MenubarSubContent>
                <MenubarGroup>
                  <MenubarItem>Search the web</MenubarItem>
                </MenubarGroup>
                <MenubarSeparator />
                <MenubarGroup>
                  <MenubarItem>Find...</MenubarItem>
                  <MenubarItem>Find Next</MenubarItem>
                  <MenubarItem>Find Previous</MenubarItem>
                </MenubarGroup>
              </MenubarSubContent>
            </MenubarSub>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarItem>Cut</MenubarItem>
            <MenubarItem>Copy</MenubarItem>
            <MenubarItem>Paste</MenubarItem>
          </MenubarGroup>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent className="w-44">
          <MenubarGroup>
            <MenubarCheckboxItem>Bookmarks Bar</MenubarCheckboxItem>
            <MenubarCheckboxItem checked>Full URLs</MenubarCheckboxItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarItem inset>
              Reload <MenubarShortcut>⌘R</MenubarShortcut>
            </MenubarItem>
            <MenubarItem disabled inset>
              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
            </MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarItem inset>Toggle Fullscreen</MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarItem inset>Hide Sidebar</MenubarItem>
          </MenubarGroup>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Profiles</MenubarTrigger>
        <MenubarContent>
          <MenubarRadioGroup value="benoit">
            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
          </MenubarRadioGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarItem inset>Edit...</MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarGroup>
            <MenubarItem inset>Add Profile...</MenubarItem>
          </MenubarGroup>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

---

# Message

Layout for a single message in a conversation, with avatar, header and footer.

Dependencies: cn, class-variance-authority, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/message.json

## Usage

```tsx
import {
  MessageGroup,
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageHeader,
} from "@/components/ui/message"
```

## Example

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import {
  Bubble,
  BubbleContent,
  BubbleGroup,
  BubbleReactions,
} from "@/components/ui/bubble"
import { Marker, MarkerContent } from "@/components/ui/marker"
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
} from "@/components/ui/message"

export function MessageDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6 py-12">
      <Message align="end">
        <MessageAvatar>
          <Avatar>
            <AvatarImage src="/avatars/10.png" alt="@me" />
            <AvatarFallback>ME</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <Bubble>
            <BubbleContent>Deploying to prod real quick.</BubbleContent>
          </Bubble>
        </MessageContent>
      </Message>
      <Message>
        <MessageAvatar>
          <Avatar>
            <AvatarImage src="/avatars/02.png" alt="@rabbit" />
            <AvatarFallback>R</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <Bubble variant="muted">
            <BubbleContent>It&apos;s 4:55 PM. On a Friday.</BubbleContent>
          </Bubble>
        </MessageContent>
      </Message>
      <Message align="end">
        <MessageAvatar>
          <Avatar>
            <AvatarImage src="/avatars/10.png" alt="@me" />
            <AvatarFallback>ME</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <Bubble>
            <BubbleContent>It&apos;s a one-line change.</BubbleContent>
          </Bubble>
          <MessageFooter>Delivered</MessageFooter>
        </MessageContent>
      </Message>
      <Message>
        <MessageAvatar>
          <Avatar>
            <AvatarImage src="/avatars/02.png" alt="@rabbit" />
            <AvatarFallback>R</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <BubbleGroup>
            <Bubble variant="muted">
              <BubbleContent>
                It&apos;s always a one-line change 😭.
              </BubbleContent>
            </Bubble>
            <Bubble variant="muted">
              <BubbleContent>Alright, let me take a look.</BubbleContent>
              <BubbleReactions aria-label="Reactions: thumbs up">
                <span>👍</span>
              </BubbleReactions>
            </Bubble>
          </BubbleGroup>
        </MessageContent>
      </Message>
      <Marker role="status">
        <MarkerContent className="shimmer">
          <span className="font-medium">Oliver</span> is typing...
        </MarkerContent>
      </Marker>
    </div>
  )
}
```

---

# Message Scroller

A scroll container for chat that keeps the newest message in view.

Dependencies: @shadcn/react, cn, lucide-react, class-variance-authority, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/message-scroller.json

## Usage

```tsx
import {
  MessageScrollerProvider,
  MessageScroller,
  MessageScrollerViewport,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerButton,
} from "@/components/ui/message-scroller"
```

## Example

```tsx
"use client"

import * as React from "react"
import { ArrowUpIcon } from "lucide-react"

import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Message, MessageContent } from "@/components/ui/message"
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller"

type ChatMessage = { id: string; role: "user" | "assistant"; text: string }

const replies = [
  "Got it. I will draft that now.",
  "Here is a first version. Want me to make it shorter?",
  "Done. Anything else?",
]

const initial: ChatMessage[] = [
  { id: "1", role: "user", text: "Can you summarize the launch checklist?" },
  { id: "2", role: "assistant", text: "Sure. Three things are left: final QA, the pricing page and the announcement email." },
  { id: "3", role: "user", text: "Who owns the pricing page?" },
  { id: "4", role: "assistant", text: "Maya owns it. The draft is ready for review since yesterday." },
  { id: "5", role: "user", text: "Great. Remind me tomorrow morning." },
  { id: "6", role: "assistant", text: "Reminder set for 9:00 tomorrow." },
]

export default function MessageScrollerDemo() {
  const [messages, setMessages] = React.useState(initial)
  const [value, setValue] = React.useState("")

  function send(e: React.FormEvent) {
    e.preventDefault()
    if (!value.trim()) return
    const id = String(Date.now())
    setMessages((m) => [...m, { id, role: "user", text: value }])
    setValue("")
    setTimeout(() => {
      setMessages((m) => [
        ...m,
        { id: id + "-r", role: "assistant", text: replies[m.length % replies.length] },
      ])
    }, 600)
  }

  return (
    <div className="flex h-96 w-full max-w-md flex-col overflow-hidden rounded-2xl border bg-background">
      <MessageScrollerProvider>
        <MessageScroller className="flex-1">
          <MessageScrollerViewport>
            <MessageScrollerContent className="flex flex-col gap-4 p-4">
              {messages.map((m) => (
                <MessageScrollerItem key={m.id} messageId={m.id} scrollAnchor={m.role === "user"}>
                  <Message align={m.role === "user" ? "end" : "start"}>
                    <MessageContent>
                      <Bubble variant={m.role === "user" ? "default" : "muted"}>
                        <BubbleContent>{m.text}</BubbleContent>
                      </Bubble>
                    </MessageContent>
                  </Message>
                </MessageScrollerItem>
              ))}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>
      <form onSubmit={send} className="flex gap-2 border-t p-3">
        <Input value={value} onChange={(e) => setValue(e.target.value)} placeholder="Write a message..." />
        <Button type="submit" size="icon" aria-label="Send">
          <ArrowUpIcon />
        </Button>
      </form>
    </div>
  )
}
```

---

# Native Select

A styled native HTML select element.

Dependencies: cn, lucide-react. Source: https://ui.muttaqinsabilul.my.id/r/native-select.json

## Usage

```tsx
import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "@/components/ui/native-select"
```

## Example

```tsx
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select"

export default function NativeSelectDemo() {
  return (
    <NativeSelect>
      <NativeSelectOption value="">Select status</NativeSelectOption>
      <NativeSelectOption value="todo">Todo</NativeSelectOption>
      <NativeSelectOption value="in-progress">In Progress</NativeSelectOption>
      <NativeSelectOption value="done">Done</NativeSelectOption>
      <NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>
    </NativeSelect>
  )
}
```

---

# Navigation Menu

A collection of links for navigating websites.

Dependencies: class-variance-authority, cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/navigation-menu.json

## Usage

```tsx
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
```

## Example

```tsx
"use client"

import * as React from "react"
import Link from "next/link"
import {
  ArrowRightIcon,
  ArrowUpRightIcon,
  ChartLineIcon,
  LayoutGridIcon,
  PlugIcon,
  SparklesIcon,
  WorkflowIcon,
} from "lucide-react"

import { cn } from "@/lib/utils"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"

type Preview = "workspace" | "automations" | "insights" | "assistant" | "integrations"

const products: { id: Preview; title: string; description: string; icon: typeof LayoutGridIcon }[] = [
  { id: "workspace", title: "Workspace", description: "Docs, tasks and threads in one calm place.", icon: LayoutGridIcon },
  { id: "automations", title: "Automations", description: "Turn repeated steps into flows that run themselves.", icon: WorkflowIcon },
  { id: "insights", title: "Insights", description: "Live dashboards from the data you already have.", icon: ChartLineIcon },
  { id: "assistant", title: "Assistant", description: "Ask about your work in plain language.", icon: SparklesIcon },
  { id: "integrations", title: "Integrations", description: "Connect 120+ tools without writing code.", icon: PlugIcon },
]

const teams = ["Design", "Engineering", "Marketing", "Operations", "Customer success", "Finance"]

/** Small illustrations shown in the preview panel, one per product. */
function PreviewArt({ id }: { id: Preview }) {
  if (id === "workspace") {
    return (
      <div className="w-full max-w-[300px] rounded-xl bg-background p-4 shadow-xs ring-1 ring-foreground/5">
        <p className="text-xs font-medium">Q4 launch plan</p>
        <div className="mt-3 flex flex-col gap-2">
          {["w-11/12", "w-4/5", "w-2/3"].map((w) => (
            <span key={w} className={cn("h-2 rounded-full bg-muted", w)} />
          ))}
        </div>
        <div className="mt-4 flex items-center justify-between">
          <div className="flex -space-x-1.5">
            {["bg-chart-1", "bg-chart-3", "bg-chart-4"].map((c) => (
              <span key={c} className={cn("size-5 rounded-full ring-2 ring-background", c)} />
            ))}
          </div>
          <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary">In review</span>
        </div>
      </div>
    )
  }
  if (id === "automations") {
    return (
      <div className="flex w-full max-w-[320px] items-center gap-2">
        {["New form entry", "Enrich lead", "Notify #sales"].map((s, i) => (
          <React.Fragment key={s}>
            {i > 0 && <span className="h-px flex-1 bg-foreground/15" />}
            <span className="rounded-lg bg-background px-2.5 py-2 text-[10.5px] font-medium shadow-xs ring-1 ring-foreground/5">
              {s}
            </span>
          </React.Fragment>
        ))}
      </div>
    )
  }
  if (id === "insights") {
    const bars = [38, 52, 44, 68, 60, 82, 74]
    return (
      <div className="w-full max-w-[300px] rounded-xl bg-background p-4 shadow-xs ring-1 ring-foreground/5">
        <p className="text-[10.5px] text-muted-foreground">Weekly active</p>
        <p className="text-lg font-semibold tracking-tight">12,480</p>
        <div className="mt-3 flex h-20 items-end gap-1.5">
          {bars.map((h, i) => (
            <span
              key={i}
              className={cn("flex-1 rounded-t-[4px]", i === bars.length - 2 ? "bg-primary" : "bg-primary/25")}
              style={{ height: `${h}%` }}
            />
          ))}
        </div>
      </div>
    )
  }
  if (id === "assistant") {
    return (
      <div className="flex w-full max-w-[330px] flex-col gap-2.5">
        <p className="ml-auto rounded-[16px_16px_6px_16px] bg-bubble-strong px-3.5 py-2 text-[10.5px] leading-[17px]">
          What slipped last sprint?
        </p>
        <p className="mr-auto rounded-[16px_16px_16px_6px] bg-bubble px-3.5 py-2 text-[10.5px] leading-[17px]">
          Two tasks moved: the billing page and the export fix. Both are waiting on API review.
        </p>
        <p className="ml-auto rounded-[16px_16px_6px_16px] bg-bubble-strong px-3.5 py-2 text-[10.5px] leading-[17px]">
          Remind the reviewers.
        </p>
      </div>
    )
  }
  return (
    <div className="grid w-full max-w-[260px] grid-cols-4 gap-2">
      {["Gh", "Sl", "Fi", "No", "Li", "St", "Hu", "+"].map((a, i) => (
        <span
          key={a}
          className={cn(
            "flex aspect-square items-center justify-center rounded-xl bg-background text-[11px] font-semibold shadow-xs ring-1 ring-foreground/5",
            i === 7 && "text-muted-foreground"
          )}
        >
          {a}
        </span>
      ))}
    </div>
  )
}

/** A mega menu: products on the left, a live preview on the right. */
export default function NavigationMenuDemo() {
  const [active, setActive] = React.useState<Preview>("workspace")
  const current = products.find((p) => p.id === active)!

  return (
    <div className="flex min-h-[460px] w-full items-start justify-start">
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Products</NavigationMenuTrigger>
            <NavigationMenuContent className="p-0">
              <div className="flex">
                <div className="flex w-[250px] shrink-0 flex-col p-2">
                  <ul className="flex flex-col gap-0.5">
                    {products.map((p) => (
                      <li key={p.id}>
                        <NavigationMenuLink asChild>
                          <Link
                            href="#"
                            onMouseEnter={() => setActive(p.id)}
                            onFocus={() => setActive(p.id)}
                            className={cn(
                              "flex-row items-start gap-3 px-3 py-2.5 hover:bg-accent focus:bg-accent",
                              active === p.id && "bg-accent"
                            )}
                          >
                            <span
                              className={cn(
                                "flex size-8 shrink-0 items-center justify-center rounded-lg bg-background shadow-xs ring-1 ring-foreground/8 transition-colors duration-150",
                                active === p.id && "text-primary"
                              )}
                            >
                              <p.icon className="size-4" />
                            </span>
                            <span className="flex min-w-0 flex-col">
                              <span className="text-sm leading-5 font-medium">{p.title}</span>
                              <span className="text-[11px] leading-[15px] text-foreground/60">{p.description}</span>
                            </span>
                          </Link>
                        </NavigationMenuLink>
                      </li>
                    ))}
                  </ul>
                  <NavigationMenuLink asChild>
                    <Link
                      href="#"
                      className="mt-1 h-9 justify-between px-3 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
                    >
                      See all products
                      <ArrowRightIcon className="size-3.5" />
                    </Link>
                  </NavigationMenuLink>
                </div>
                <div className="hidden p-2 pl-0 md:block">
                  <div className="relative flex h-full w-[380px] flex-col overflow-hidden rounded-xl bg-panel ring-1 ring-foreground/5 2xl:w-[430px]">
                    <div className="px-5 pt-4">
                      <p className="text-xs font-medium text-muted-foreground">{current.title}</p>
                    </div>
                    {/* Re-mount on change: the new preview fades in through a short blur. */}
                    <div
                      key={current.id}
                      className="flex flex-1 animate-in items-center justify-center px-5 pb-6 duration-300 ease-out fill-mode-both fade-in-0 blur-in-sm zoom-in-98"
                    >
                      <PreviewArt id={current.id} />
                    </div>
                  </div>
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuTrigger>Teams</NavigationMenuTrigger>
            <NavigationMenuContent className="p-0">
              <div className="flex w-[230px] flex-col">
                <ul className="flex flex-col p-2">
                  {teams.map((t) => (
                    <li key={t}>
                      <NavigationMenuLink asChild>
                        <Link href="#" className="h-9 px-3 py-1.5 font-medium hover:bg-accent focus:bg-accent">
                          {t}
                        </Link>
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
                <div className="px-2 pb-2">
                  <NavigationMenuLink asChild>
                    <Link
                      href="#"
                      className="h-9 justify-between rounded-lg bg-foreground/[0.03] px-3 text-xs font-medium hover:bg-accent"
                    >
                      Read customer stories
                      <ArrowUpRightIcon className="size-3.5" />
                    </Link>
                  </NavigationMenuLink>
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
              <Link href="#">Pricing</Link>
            </NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
              <Link href="#">Changelog</Link>
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}
```

---

# Pagination

Pagination with page navigation, next and previous links.

Dependencies: cn, lucide-react. Source: https://ui.muttaqinsabilul.my.id/r/pagination.json

## Usage

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
```

## Example

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

export default function PaginationDemo() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

---

# Popover

Displays rich content in a portal, triggered by a button.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/popover.json

## Usage

```tsx
import {
  Popover,
  PopoverAnchor,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
```

## Example

```tsx
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="leading-none font-medium">Dimensions</h4>
            <p className="text-sm text-muted-foreground">
              Set the dimensions for the layer.
            </p>
          </div>
          <div className="grid gap-2">
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="width">Width</Label>
              <Input
                id="width"
                defaultValue="100%"
                className="col-span-2 h-8"
              />
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="maxWidth">Max. width</Label>
              <Input
                id="maxWidth"
                defaultValue="300px"
                className="col-span-2 h-8"
              />
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="height">Height</Label>
              <Input
                id="height"
                defaultValue="25px"
                className="col-span-2 h-8"
              />
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <Label htmlFor="maxHeight">Max. height</Label>
              <Input
                id="maxHeight"
                defaultValue="none"
                className="col-span-2 h-8"
              />
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}
```

---

# Progress

Displays an indicator showing the completion progress of a task.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/progress.json

## Usage

```tsx
import { Progress } from "@/components/ui/progress"
```

## Example

```tsx
"use client"

import * as React from "react"

import { Progress } from "@/components/ui/progress"

export default function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return <Progress value={progress} className="w-[60%]" />
}
```

---

# Questionnaire

A step-by-step set of questions with keyboard shortcuts.

Dependencies: @shadcn/react, cn, lucide-react. Source: https://ui.muttaqinsabilul.my.id/r/questionnaire.json

## Usage

```tsx
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoiceDescription,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire"
```

## Example

```tsx
"use client"

import * as React from "react"
import { toast } from "sonner"

import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire"

const items = [
  {
    choices: [
      { value: "tool-calls" },
      { value: "approvals" },
      { value: "handoffs" },
    ],
    name: "direction",
    required: true,
  },
  {
    choices: [
      { value: "progress" },
      { value: "decisions" },
      { value: "risks" },
      { value: "next-step" },
    ],
    name: "signals",
  },
  {
    choices: [{ value: "now" }, { value: "next-cycle" }, { value: "backlog" }],
    name: "timing",
    required: true,
  },
] as const

export function QuestionnaireDemo() {
  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()

    const formData = new FormData(event.currentTarget)
    const answers = {
      direction: formData.get("direction"),
      signals: formData.getAll("signals"),
      timing: formData.get("timing"),
    }

    toast("Agent plan saved", {
      description: `Direction: ${answers.direction ?? "None"} · Progress signals: ${answers.signals.join(", ") || "None"} · Timing: ${answers.timing ?? "None"}`,
    })
  }

  return (
    <Questionnaire
      className="mx-auto max-w-md"
      defaultItem="direction"
      items={items}
      shortcuts="letters"
      onSubmit={handleSubmit}
    >
      <QuestionnaireProgress />

      <QuestionnaireItem name="direction" required>
        <QuestionnaireTitle>
          What should the agent build next?
        </QuestionnaireTitle>
        <QuestionnaireDescription>
          Choose a direction or describe another task.
        </QuestionnaireDescription>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="tool-calls">
            <span className="font-medium">Tool call timeline</span>
            <span className="text-muted-foreground">
              Show what the agent ran and what came back.
            </span>
          </QuestionnaireChoice>
          <QuestionnaireChoice value="approvals">
            <span className="font-medium">Approval checkpoints</span>
            <span className="text-muted-foreground">
              Ask before sensitive or destructive actions.
            </span>
          </QuestionnaireChoice>
          <QuestionnaireChoice value="handoffs">
            <span className="font-medium">Sub-agent handoffs</span>
            <span className="text-muted-foreground">
              Make delegated work and results easier to follow.
            </span>
          </QuestionnaireChoice>
          <QuestionnaireInput
            aria-label="Another agent feature"
            placeholder="Describe another feature…"
          />
        </QuestionnaireChoices>
        <QuestionnaireError />
      </QuestionnaireItem>

      <QuestionnaireItem name="signals" multiple>
        <QuestionnaireTitle>
          What should every progress update include?
        </QuestionnaireTitle>
        <QuestionnaireDescription>
          Select all that apply, or skip this question.
        </QuestionnaireDescription>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="progress">Progress</QuestionnaireChoice>
          <QuestionnaireChoice value="decisions">Decisions</QuestionnaireChoice>
          <QuestionnaireChoice value="risks">Risks</QuestionnaireChoice>
          <QuestionnaireChoice value="next-step">Next step</QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError />
      </QuestionnaireItem>

      <QuestionnaireItem name="timing" required>
        <QuestionnaireTitle>When should work begin?</QuestionnaireTitle>
        <QuestionnaireDescription>
          Choose when the agent should begin the work.
        </QuestionnaireDescription>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="now">Start now</QuestionnaireChoice>
          <QuestionnaireChoice value="next-cycle">
            Next development cycle
          </QuestionnaireChoice>
          <QuestionnaireChoice value="backlog">
            Add it to the backlog
          </QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError />
      </QuestionnaireItem>

      <QuestionnaireActions>
        <QuestionnairePrevious />
        <QuestionnaireSkip />
        <QuestionnaireNext>Next</QuestionnaireNext>
        <QuestionnaireSubmit>Save plan</QuestionnaireSubmit>
      </QuestionnaireActions>
    </Questionnaire>
  )
}
```

---

# Radio Group

A set of checkable buttons where no more than one can be checked at a time.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/radio-group.json

## Usage

```tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
```

## Example

```tsx
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="comfortable" className="w-fit">
      <div className="flex items-center gap-3">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center gap-3">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
      <div className="flex items-center gap-3">
        <RadioGroupItem value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </div>
    </RadioGroup>
  )
}
```

---

# Resizable

Accessible resizable panel groups and layouts with keyboard support.

Dependencies: cn, react-resizable-panels. Source: https://ui.muttaqinsabilul.my.id/r/resizable.json

## Usage

```tsx
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
```

## Example

```tsx
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"

export default function ResizableDemo() {
  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="max-w-sm rounded-lg border"
    >
      <ResizablePanel defaultSize="50%">
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">One</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize="50%">
        <ResizablePanelGroup orientation="vertical">
          <ResizablePanel defaultSize="25%">
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Two</span>
            </div>
          </ResizablePanel>
          <ResizableHandle withHandle />
          <ResizablePanel defaultSize="75%">
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Three</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}
```

---

# Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/scroll-area.json

## Usage

```tsx
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
```

## Example

```tsx
import * as React from "react"

import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`
)

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-72 w-48 rounded-md border">
      <div className="p-4">
        <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
        {tags.map((tag) => (
          <React.Fragment key={tag}>
            <div className="text-sm">{tag}</div>
            <Separator className="my-2" />
          </React.Fragment>
        ))}
      </div>
    </ScrollArea>
  )
}
```

---

# Select

Displays a list of options for the user to pick from, triggered by a button.

Dependencies: cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/select.json

## Usage

```tsx
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
```

## Example

```tsx
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export function SelectDemo() {
  return (
    <Select>
      <SelectTrigger className="w-full max-w-48">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="blueberry">Blueberry</SelectItem>
          <SelectItem value="grapes">Grapes</SelectItem>
          <SelectItem value="pineapple">Pineapple</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}
```

---

# Separator

Visually or semantically separates content.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/separator.json

## Usage

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

## Example

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

export default function SeparatorDemo() {
  return (
    <div className="flex max-w-sm flex-col gap-4 text-sm">
      <div className="flex flex-col gap-1.5">
        <div className="leading-none font-medium">Sabil UI</div>
        <div className="text-muted-foreground">
          The Foundation for your Design System
        </div>
      </div>
      <Separator />
      <div>
        A set of beautifully designed components that you can customize, extend,
        and build on.
      </div>
    </div>
  )
}
```

---

# Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Dependencies: cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/sheet.json

## Usage

```tsx
import {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
} from "@/components/ui/sheet"
```

## Example

```tsx
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export default function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;re done.
          </SheetDescription>
        </SheetHeader>
        <div className="grid flex-1 auto-rows-min gap-6 px-4">
          <div className="grid gap-3">
            <Label htmlFor="sheet-demo-name">Name</Label>
            <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
          </div>
          <div className="grid gap-3">
            <Label htmlFor="sheet-demo-username">Username</Label>
            <Input id="sheet-demo-username" defaultValue="@peduarte" />
          </div>
        </div>
        <SheetFooter>
          <Button type="submit">Save changes</Button>
          <SheetClose asChild>
            <Button variant="outline">Close</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

---

# Sidebar

A composable, themeable and customizable sidebar component.

Dependencies: class-variance-authority, cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/sidebar.json

## Usage

```tsx
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
} from "@/components/ui/sidebar"
```

## Example

```tsx
"use client"

import * as React from "react"
import {
  AudioWaveform,
  BadgeCheck,
  Bell,
  BookOpen,
  Bot,
  ChevronRight,
  ChevronsUpDown,
  Command,
  CreditCard,
  Folder,
  Forward,
  Frame,
  GalleryVerticalEnd,
  LogOut,
  Map,
  MoreHorizontal,
  PieChart,
  Plus,
  Settings2,
  Sparkles,
  SquareTerminal,
  Trash2,
} from "lucide-react"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
  useSidebar,
} from "@/components/ui/sidebar"

// This is sample data.
const data = {
  user: {
    name: "maya",
    email: "m@example.com",
    avatar: "https://avatar.vercel.sh/maya",
  },
  teams: [
    {
      name: "Acme Inc",
      logo: GalleryVerticalEnd,
      plan: "Enterprise",
    },
    {
      name: "Acme Corp.",
      logo: AudioWaveform,
      plan: "Startup",
    },
    {
      name: "Evil Corp.",
      logo: Command,
      plan: "Free",
    },
  ],
  navMain: [
    {
      title: "Playground",
      url: "#",
      icon: SquareTerminal,
      isActive: true,
      items: [
        {
          title: "History",
          url: "#",
        },
        {
          title: "Starred",
          url: "#",
        },
        {
          title: "Settings",
          url: "#",
        },
      ],
    },
    {
      title: "Models",
      url: "#",
      icon: Bot,
      items: [
        {
          title: "Genesis",
          url: "#",
        },
        {
          title: "Explorer",
          url: "#",
        },
        {
          title: "Quantum",
          url: "#",
        },
      ],
    },
    {
      title: "Documentation",
      url: "#",
      icon: BookOpen,
      items: [
        {
          title: "Introduction",
          url: "#",
        },
        {
          title: "Get Started",
          url: "#",
        },
        {
          title: "Tutorials",
          url: "#",
        },
        {
          title: "Changelog",
          url: "#",
        },
      ],
    },
    {
      title: "Settings",
      url: "#",
      icon: Settings2,
      items: [
        {
          title: "General",
          url: "#",
        },
        {
          title: "Team",
          url: "#",
        },
        {
          title: "Billing",
          url: "#",
        },
        {
          title: "Limits",
          url: "#",
        },
      ],
    },
  ],
  projects: [
    {
      name: "Design Engineering",
      url: "#",
      icon: Frame,
    },
    {
      name: "Sales & Marketing",
      url: "#",
      icon: PieChart,
    },
    {
      name: "Travel",
      url: "#",
      icon: Map,
    },
  ],
}

function TeamSwitcher({
  teams,
}: {
  teams: {
    name: string
    logo: React.ElementType
    plan: string
  }[]
}) {
  const { isMobile } = useSidebar()
  const [activeTeam, setActiveTeam] = React.useState(teams[0])

  if (!activeTeam) {
    return null
  }

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <activeTeam.logo className="size-4" />
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{activeTeam.name}</span>
                <span className="truncate text-xs">{activeTeam.plan}</span>
              </div>
              <ChevronsUpDown className="ml-auto" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            align="start"
            side={isMobile ? "bottom" : "right"}
            sideOffset={4}
          >
            <DropdownMenuGroup>
              <DropdownMenuLabel className="text-xs text-muted-foreground">
                Teams
              </DropdownMenuLabel>
              {teams.map((team, index) => (
                <DropdownMenuItem
                  key={team.name}
                  onClick={() => setActiveTeam(team)}
                  className="gap-2 p-2"
                >
                  <div className="flex size-6 items-center justify-center rounded-md border">
                    <team.logo className="size-3.5 shrink-0" />
                  </div>
                  {team.name}
                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
                </DropdownMenuItem>
              ))}
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem className="gap-2 p-2">
                <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
                  <Plus className="size-4" />
                </div>
                <div className="font-medium text-muted-foreground">
                  Add team
                </div>
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}

function NavMain({
  items,
}: {
  items: {
    title: string
    url: string
    icon?: React.ElementType
    isActive?: boolean
    items?: {
      title: string
      url: string
    }[]
  }[]
}) {
  return (
    <SidebarGroup>
      <SidebarGroupLabel>Platform</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item) => (
          <Collapsible
            key={item.title}
            asChild
            defaultOpen={item.isActive}
            className="group/collapsible"
          >
            <SidebarMenuItem>
              <CollapsibleTrigger asChild>
                <SidebarMenuButton tooltip={item.title}>
                  {item.icon && <item.icon />}
                  <span>{item.title}</span>
                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                </SidebarMenuButton>
              </CollapsibleTrigger>
              <CollapsibleContent>
                <SidebarMenuSub>
                  {item.items?.map((subItem) => (
                    <SidebarMenuSubItem key={subItem.title}>
                      <SidebarMenuSubButton asChild>
                        <a href={subItem.url}>
                          <span>{subItem.title}</span>
                        </a>
                      </SidebarMenuSubButton>
                    </SidebarMenuSubItem>
                  ))}
                </SidebarMenuSub>
              </CollapsibleContent>
            </SidebarMenuItem>
          </Collapsible>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  )
}

function NavProjects({
  projects,
}: {
  projects: {
    name: string
    url: string
    icon: React.ElementType
  }[]
}) {
  const { isMobile } = useSidebar()

  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <SidebarGroupLabel>Projects</SidebarGroupLabel>
      <SidebarMenu>
        {projects.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton asChild>
              <a href={item.url}>
                <item.icon />
                <span>{item.name}</span>
              </a>
            </SidebarMenuButton>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <SidebarMenuAction showOnHover>
                  <MoreHorizontal />
                  <span className="sr-only">More</span>
                </SidebarMenuAction>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                className="w-48 rounded-lg"
                side={isMobile ? "bottom" : "right"}
                align={isMobile ? "end" : "start"}
              >
                <DropdownMenuGroup>
                  <DropdownMenuItem>
                    <Folder className="text-muted-foreground" />
                    <span>View Project</span>
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Forward className="text-muted-foreground" />
                    <span>Share Project</span>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                  <DropdownMenuItem>
                    <Trash2 className="text-muted-foreground" />
                    <span>Delete Project</span>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        ))}
        <SidebarMenuItem>
          <SidebarMenuButton className="text-sidebar-foreground/70">
            <MoreHorizontal className="text-sidebar-foreground/70" />
            <span>More</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
  )
}

function NavUser({
  user,
}: {
  user: {
    name: string
    email: string
    avatar: string
  }
}) {
  const { isMobile } = useSidebar()

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              <Avatar className="h-8 w-8 rounded-lg">
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{user.name}</span>
                <span className="truncate text-xs">{user.email}</span>
              </div>
              <ChevronsUpDown className="ml-auto size-4" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            side={isMobile ? "bottom" : "right"}
            align="end"
            sideOffset={4}
          >
            <DropdownMenuGroup>
              <DropdownMenuLabel className="p-0 font-normal">
                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                  <Avatar className="h-8 w-8 rounded-lg">
                    <AvatarImage src={user.avatar} alt={user.name} />
                    <AvatarFallback className="rounded-lg">CN</AvatarFallback>
                  </Avatar>
                  <div className="grid flex-1 text-left text-sm leading-tight">
                    <span className="truncate font-medium">{user.name}</span>
                    <span className="truncate text-xs">{user.email}</span>
                  </div>
                </div>
              </DropdownMenuLabel>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <Sparkles />
                Upgrade to Pro
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <BadgeCheck />
                Account
              </DropdownMenuItem>
              <DropdownMenuItem>
                <CreditCard />
                Billing
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Bell />
                Notifications
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <LogOut />
                Log out
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}

export default function AppSidebar({
  ...props
}: React.ComponentProps<typeof Sidebar>) {
  return (
    <SidebarProvider>
      <Sidebar collapsible="icon" {...props}>
        <SidebarHeader>
          <TeamSwitcher teams={data.teams} />
        </SidebarHeader>
        <SidebarContent>
          <NavMain items={data.navMain} />
          <NavProjects projects={data.projects} />
        </SidebarContent>
        <SidebarFooter>
          <NavUser user={data.user} />
        </SidebarFooter>
        <SidebarRail />
      </Sidebar>
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
          <div className="flex items-center gap-2 px-4">
            <SidebarTrigger className="-ml-1" />
          </div>
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

---

# Skeleton

Use to show a placeholder while content is loading.

Dependencies: cn. Source: https://ui.muttaqinsabilul.my.id/r/skeleton.json

## Usage

```tsx
import { Skeleton } from "@/components/ui/skeleton"
```

## Example

```tsx
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonDemo() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}
```

---

# Slider

An input where the user selects a value from within a given range.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/slider.json

## Usage

```tsx
import { Slider } from "@/components/ui/slider"
```

## Example

```tsx
import { Slider } from "@/components/ui/slider"

export function SliderDemo() {
  return (
    <Slider
      defaultValue={[75]}
      max={100}
      step={1}
      className="mx-auto w-full max-w-xs"
    />
  )
}
```

---

# Spinner

An indicator that can be used to show a loading state.

Dependencies: cn, lucide-react. Source: https://ui.muttaqinsabilul.my.id/r/spinner.json

## Usage

```tsx
import { Spinner } from "@/components/ui/spinner"
```

## Example

```tsx
import {
  Item,
  ItemContent,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
import { Spinner } from "@/components/ui/spinner"

export function SpinnerDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
      <Item variant="muted">
        <ItemMedia>
          <Spinner />
        </ItemMedia>
        <ItemContent>
          <ItemTitle className="line-clamp-1">Processing payment...</ItemTitle>
        </ItemContent>
        <ItemContent className="flex-none justify-end">
          <span className="text-sm tabular-nums">$100.00</span>
        </ItemContent>
      </Item>
    </div>
  )
}
```

---

# Switch

A control that allows the user to toggle between checked and not checked.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/switch.json

## Usage

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

## Example

```tsx
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}
```

---

# Table

A responsive table component.

Dependencies: cn. Source: https://ui.muttaqinsabilul.my.id/r/table.json

## Usage

```tsx
import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
} from "@/components/ui/table"
```

## Example

```tsx
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const invoices = [
  {
    invoice: "INV001",
    paymentStatus: "Paid",
    totalAmount: "$250.00",
    paymentMethod: "Credit Card",
  },
  {
    invoice: "INV002",
    paymentStatus: "Pending",
    totalAmount: "$150.00",
    paymentMethod: "PayPal",
  },
  {
    invoice: "INV003",
    paymentStatus: "Unpaid",
    totalAmount: "$350.00",
    paymentMethod: "Bank Transfer",
  },
  {
    invoice: "INV004",
    paymentStatus: "Paid",
    totalAmount: "$450.00",
    paymentMethod: "Credit Card",
  },
  {
    invoice: "INV005",
    paymentStatus: "Paid",
    totalAmount: "$550.00",
    paymentMethod: "PayPal",
  },
  {
    invoice: "INV006",
    paymentStatus: "Pending",
    totalAmount: "$200.00",
    paymentMethod: "Bank Transfer",
  },
  {
    invoice: "INV007",
    paymentStatus: "Unpaid",
    totalAmount: "$300.00",
    paymentMethod: "Credit Card",
  },
]

export function TableDemo() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.invoice}>
            <TableCell className="font-medium">{invoice.invoice}</TableCell>
            <TableCell>{invoice.paymentStatus}</TableCell>
            <TableCell>{invoice.paymentMethod}</TableCell>
            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell className="text-right">$2,500.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}
```

---

# Tabs

A set of layered sections of content, known as tab panels, displayed one at a time.

Dependencies: class-variance-authority, cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/tabs.json

## Usage

```tsx
import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@/components/ui/tabs"
```

## Example

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs"

export function TabsDemo() {
  return (
    <Tabs defaultValue="overview" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <Card>
          <CardHeader>
            <CardTitle>Overview</CardTitle>
            <CardDescription>
              View your key metrics and recent project activity. Track progress
              across all your active projects.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-sm text-muted-foreground">
            You have 12 active projects and 3 pending tasks.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="analytics">
        <Card>
          <CardHeader>
            <CardTitle>Analytics</CardTitle>
            <CardDescription>
              Track performance and user engagement metrics. Monitor trends and
              identify growth opportunities.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-sm text-muted-foreground">
            Page views are up 25% compared to last month.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="reports">
        <Card>
          <CardHeader>
            <CardTitle>Reports</CardTitle>
            <CardDescription>
              Generate and download your detailed reports. Export data in
              multiple formats for analysis.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-sm text-muted-foreground">
            You have 5 reports ready and available to export.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="settings">
        <Card>
          <CardHeader>
            <CardTitle>Settings</CardTitle>
            <CardDescription>
              Manage your account preferences and options. Customize your
              experience to fit your needs.
            </CardDescription>
          </CardHeader>
          <CardContent className="text-sm text-muted-foreground">
            Configure notifications, security, and themes.
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  )
}
```

---

# Textarea

Displays a form textarea or a component that looks like a textarea.

Dependencies: cn. Source: https://ui.muttaqinsabilul.my.id/r/textarea.json

## Usage

```tsx
import { Textarea } from "@/components/ui/textarea"
```

## Example

```tsx
import { Textarea } from "@/components/ui/textarea"

export default function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}
```

---

# Toast

An opinionated toast component for React, built on Sonner.

Dependencies: lucide-react, next-themes, sonner. Source: https://ui.muttaqinsabilul.my.id/r/sonner.json

## Usage

```tsx
import { Toaster } from "@/components/ui/sonner"
```

## Example

```tsx
"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"

export function SonnerDemo() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast("Event has been created", {
          description: "Sunday, December 03, 2023 at 9:00 AM",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo"),
          },
        })
      }
    >
      Show Toast
    </Button>
  )
}
```

---

# Toggle

A two-state button that can be either on or off.

Dependencies: class-variance-authority, cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/toggle.json

## Usage

```tsx
import { Toggle } from "@/components/ui/toggle"
```

## Example

```tsx
import { BookmarkIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"

export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
      <BookmarkIcon className="group-data-[state=on]/toggle:fill-foreground" />
      Bookmark
    </Toggle>
  )
}
```

---

# Toggle Group

A set of two-state buttons that can be toggled on or off.

Dependencies: class-variance-authority, cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/toggle-group.json

## Usage

```tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
```

## Example

```tsx
import { Bold, Italic, Underline } from "lucide-react"

import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group"

export function ToggleGroupDemo() {
  return (
    <ToggleGroup variant="outline" type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <Bold />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic />
      </ToggleGroupItem>
      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
        <Underline />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}
```

---

# Tooltip

A popup that displays information related to an element on hover or focus.

Dependencies: cn, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/tooltip.json

## Usage

```tsx
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
```

## Example

```tsx
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  )
}
```

---

# Trace

Shows the steps an agent or a job takes, with live status.

Dependencies: cn, lucide-react, radix-ui. Source: https://ui.muttaqinsabilul.my.id/r/trace.json

## Usage

```tsx
import {
  Trace,
  TraceLine,
  TraceIcon,
  TraceTitle,
  TraceDescription,
  TraceCollapsible,
  TraceCollapsibleTrigger,
  TraceCollapsibleContent,
} from "@/components/ui/trace"
```

## Example

```tsx
import { FileSearchIcon, GitCommitIcon, SearchIcon, TerminalIcon } from "lucide-react"

import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

export default function TraceDemo() {
  return (
    <Trace className="w-full max-w-md">
      <TraceLine>
        <TraceIcon>
          <SearchIcon />
        </TraceIcon>
        <TraceTitle>Searched the codebase for “checkout”</TraceTitle>
      </TraceLine>
      <TraceCollapsible defaultOpen>
        <TraceCollapsibleTrigger>
          <TraceIcon>
            <FileSearchIcon />
          </TraceIcon>
          <TraceTitle>Read 3 files</TraceTitle>
        </TraceCollapsibleTrigger>
        <TraceCollapsibleContent>
          <TraceLine>
            <TraceTitle>app/checkout/page.tsx</TraceTitle>
          </TraceLine>
          <TraceLine>
            <TraceTitle>lib/cart.ts</TraceTitle>
          </TraceLine>
          <TraceLine>
            <TraceTitle>lib/payments.ts</TraceTitle>
          </TraceLine>
        </TraceCollapsibleContent>
      </TraceCollapsible>
      <TraceLine>
        <TraceIcon>
          <GitCommitIcon />
        </TraceIcon>
        <TraceTitle>Updated the total calculation</TraceTitle>
      </TraceLine>
      <TraceLine status="running">
        <TraceIcon>
          <TerminalIcon />
        </TraceIcon>
        <TraceTitle>Running the test suite</TraceTitle>
      </TraceLine>
    </Trace>
  )
}
```

---

# Typography

Styles for headings, paragraphs, lists and more.

## Example

```tsx
export function TypographyDemo() {
  return (
    <div>
      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
        Taxing Laughter: The Joke Tax Chronicles
      </h1>
      <p className="text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6">
        Once upon a time, in a far-off land, there was a very lazy king who
        spent all day lounging on his throne. One day, his advisors came to him
        with a problem: the kingdom was running out of money.
      </p>
      <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
        The King&apos;s Plan
      </h2>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        The king thought long and hard, and finally came up with{" "}
        <a
          href="#"
          className="font-medium text-primary underline underline-offset-4"
        >
          a brilliant plan
        </a>
        : he would tax the jokes in the kingdom.
      </p>
      <blockquote className="mt-6 border-l-2 pl-6 italic">
        &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so
        it&apos;s only fair that they should pay for the privilege.&quot;
      </blockquote>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        The Joke Tax
      </h3>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        The king&apos;s subjects were not amused. They grumbled and complained,
        but the king was firm:
      </p>
      <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
        <li>1st level of puns: 5 gold coins</li>
        <li>2nd level of jokes: 10 gold coins</li>
        <li>3rd level of one-liners : 20 gold coins</li>
      </ul>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        As a result, people stopped telling jokes, and the kingdom fell into a
        gloom. But there was one person who refused to let the king&apos;s
        foolishness get him down: a court jester named Jokester.
      </p>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        Jokester&apos;s Revolt
      </h3>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        Jokester began sneaking into the castle in the middle of the night and
        leaving jokes all over the place: under the king&apos;s pillow, in his
        soup, even in the royal toilet. The king was furious, but he
        couldn&apos;t seem to stop Jokester.
      </p>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        And then, one day, the people of the kingdom discovered that the jokes
        left by Jokester were so funny that they couldn&apos;t help but laugh.
        And once they started laughing, they couldn&apos;t stop.
      </p>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        The People&apos;s Rebellion
      </h3>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        The people of the kingdom, feeling uplifted by the laughter, started to
        tell jokes and puns again, and soon the entire kingdom was in on the
        joke.
      </p>
      <div className="my-6 w-full overflow-y-auto">
        <table className="w-full">
          <thead>
            <tr className="m-0 border-t p-0 even:bg-muted">
              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
                King&apos;s Treasury
              </th>
              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
                People&apos;s happiness
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="m-0 border-t p-0 even:bg-muted">
              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                Empty
              </td>
              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                Overflowing
              </td>
            </tr>
            <tr className="m-0 border-t p-0 even:bg-muted">
              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                Modest
              </td>
              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                Satisfied
              </td>
            </tr>
            <tr className="m-0 border-t p-0 even:bg-muted">
              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                Full
              </td>
              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                Ecstatic
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        The king, seeing how much happier his subjects were, realized the error
        of his ways and repealed the joke tax. Jokester was declared a hero, and
        the kingdom lived happily ever after.
      </p>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        The moral of the story is: never underestimate the power of a good laugh
        and always be careful of bad ideas.
      </p>
    </div>
  )
}
```

---

# Motion Foundation

How things move: short, purposeful animation that gives feedback and keeps space consistent.

## Tokens

```css
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* enter, exit, feedback */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* movement on screen */
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);  /* sheets and drawers */
```

CSS for predetermined motion (press, hover, overlays). The `motion` package for springs, gestures, exit and layout animation.

## Interaction

- [Press](https://ui.muttaqinsabilul.my.id/motion/press.md): Pressable elements scale down slightly while held. It tells the user the interface heard them.
- [Hover](https://ui.muttaqinsabilul.my.id/motion/hover.md): Small lifts and nudges that hint an element is interactive. Only on devices with a real pointer.
- [Enter & Exit](https://ui.muttaqinsabilul.my.id/motion/enter-exit.md): Elements fade and grow in from 95% scale, and leave faster than they came. Nothing appears from nothing.
- [Popover Origin](https://ui.muttaqinsabilul.my.id/motion/popover-origin.md): Popovers grow out of the element that opened them. Modals are the exception: they stay centered.
- [Stagger](https://ui.muttaqinsabilul.my.id/motion/stagger.md): Items that arrive together enter one after another, a few milliseconds apart. The eye reads it as one motion.

## State

- [Collapse](https://ui.muttaqinsabilul.my.id/motion/collapse.md): Content expands and collapses with its real height, so the layout below moves instead of jumping.
- [Tab Indicator](https://ui.muttaqinsabilul.my.id/motion/tab-indicator.md): The active indicator slides between options, so the user sees where the selection went.
- [Crossfade + Blur](https://ui.muttaqinsabilul.my.id/motion/crossfade.md): Labels and icons swap through a short blur, so two states read as one change instead of two overlapping objects.
- [Number Ticker](https://ui.muttaqinsabilul.my.id/motion/number-ticker.md): Numbers count to their new value with a spring, so the size of the change is visible.
- [Skeleton Shimmer](https://ui.muttaqinsabilul.my.id/motion/skeleton-shimmer.md): A soft highlight sweeps across placeholders while content loads. Fast enough to feel busy, slow enough to stay calm.

## Gesture & Overlay

- [Toast Stack](https://ui.muttaqinsabilul.my.id/motion/toast-stack.md): New toasts push in from the edge. Older ones tuck behind and fan out on hover.
- [Drawer](https://ui.muttaqinsabilul.my.id/motion/drawer.md): A sheet slides up from the bottom and can be flicked away. Velocity counts, not only distance.
- [Hold to Confirm](https://ui.muttaqinsabilul.my.id/motion/hold-to-confirm.md): Destructive actions fill up while held. Pressing is slow and deliberate, releasing snaps back fast.
- [Swipe to Dismiss](https://ui.muttaqinsabilul.my.id/motion/swipe-to-dismiss.md): Cards follow the finger and leave when flicked. The rest of the list closes the gap.

## Scroll & Layout

- [Scroll Reveal](https://ui.muttaqinsabilul.my.id/motion/scroll-reveal.md): Sections fade up once when they enter the viewport. Once only — scrolling back does not replay.
- [Layout Shift](https://ui.muttaqinsabilul.my.id/motion/layout-shift.md): An element morphs from its place in a grid into a detail view. The user never loses track of what they opened.

---

# Principles

Decide how often people see it and what it is for, before animating.

| Seen | Examples | Decision |
| --- | --- | --- |
| 100+ times a day | Command palette, shortcuts | No animation |
| Tens of times a day | Hover, list navigation, tabs | Very short or none |
| Occasionally | Dialogs, drawers, toasts | Standard animation |
| Rarely | Onboarding, success states | Room for delight |

Rules: never scale from 0 (start at 0.95 + opacity 0); never ease-in; popovers grow from their trigger, dialogs stay centered; exit faster than enter; animate transform and opacity only; transitions over keyframes for interruptible UI; gate hover motion behind (hover: hover); never block input during animation.

---

# Easing

Strong ease-out curves start fast, so the interface feels instant.

| Curve | Value | Use |
| --- | --- | --- |
| --ease-out | cubic-bezier(0.23, 1, 0.32, 1) | Enter, exit, press feedback (default) |
| --ease-in-out | cubic-bezier(0.77, 0, 0.175, 1) | Movement on screen |
| --ease-drawer | cubic-bezier(0.32, 0.72, 0, 1) | Sheets and drawers |
| ease | — | Color and opacity on hover |
| linear | — | Spinners, progress, hold-to-confirm |

Never use ease-in for interface motion.

---

# Duration

Interface motion stays under 300ms.

| Element | Duration | Easing |
| --- | --- | --- |
| Press feedback | 100–160ms | --ease-out |
| Tooltip, small popover | 125–200ms | --ease-out |
| Dropdown, select | 150–250ms | --ease-out |
| Dialog, sheet | 200–300ms | --ease-out |
| Drawer | 400ms | --ease-drawer |
| Hover color | 150ms | ease |

Exits are 20–30% shorter than enters.

---

# Reduced Motion

When people ask for less motion, remove movement but keep fades.

CSS: the foundation shortens all animations and transitions under `prefers-reduced-motion: reduce`.

```tsx
import { motion, useReducedMotion } from "motion/react"
const reduce = useReducedMotion()
<motion.div initial={{ opacity: 0, y: reduce ? 0 : 16 }} animate={{ opacity: 1, y: 0 }} />
```

---

# Press

Pressable elements scale down slightly while held. It tells the user the interface heard them.

Group: Interaction. Built with: CSS.

## Specs

| | |
| --- | --- |
| Property | transform: scale(0.97) |
| Duration | 150ms |
| Easing | --ease-out |
| Trigger | :active |

## Use for

- Buttons, toggles, cards that act as buttons
- Any element the user clicks or taps

## Avoid

- Scale below 0.95 — it looks like the element is collapsing
- Scaling on hover instead of press

---

# Hover

Small lifts and nudges that hint an element is interactive. Only on devices with a real pointer.

Group: Interaction. Built with: CSS.

## Specs

| | |
| --- | --- |
| Property | transform, box-shadow, color |
| Duration | 150–200ms |
| Easing | ease / --ease-out |
| Gate | @media (hover: hover) and (pointer: fine) |

## Use for

- Cards and links in a grid
- Arrows that point to the next step

## Avoid

- Hover effects on touch devices — they stick after a tap
- Large movement on lists the user scans often

---

# Enter & Exit

Elements fade and grow in from 95% scale, and leave faster than they came. Nothing appears from nothing.

Group: Interaction. Built with: Motion.

## Specs

| | |
| --- | --- |
| Enter | opacity 0→1, scale 0.95→1, blur 4px→0 · 200ms |
| Exit | opacity 1→0, scale 1→0.97 · 150ms |
| Easing | --ease-out |
| Tool | AnimatePresence |

## Use for

- Panels, banners and cards that mount or unmount
- Notifications and inline confirmations

## Avoid

- scale(0) — use 0.95 or higher
- Exit slower than enter

---

# Popover Origin

Popovers grow out of the element that opened them. Modals are the exception: they stay centered.

Group: Interaction. Built with: CSS.

## Specs

| | |
| --- | --- |
| Property | transform-origin: var(--radix-*-transform-origin) |
| Duration | 150–200ms |
| Easing | --ease-out |
| From | scale 0.95, opacity 0 |

## Use for

- Dropdowns, popovers, tooltips, selects
- Anything anchored to a trigger

## Avoid

- transform-origin: center on anchored overlays
- Origin-aware scaling on dialogs

---

# Stagger

Items that arrive together enter one after another, a few milliseconds apart. The eye reads it as one motion.

Group: Interaction. Built with: Motion.

## Specs

| | |
| --- | --- |
| Delay between items | 30–60ms |
| Item | opacity 0→1, y 8px→0 · 250ms |
| Easing | --ease-out |
| Max items | ~8, then no delay |

## Use for

- First load of a list or grid
- Menu items, search results

## Avoid

- Blocking clicks until the stagger ends
- Long delays — total stagger over 400ms feels slow

---

# Collapse

Content expands and collapses with its real height, so the layout below moves instead of jumping.

Group: State. Built with: Motion.

## Specs

| | |
| --- | --- |
| Property | height auto, opacity |
| Duration | 250ms |
| Easing | --ease-in-out |
| Chevron | rotate 0→90°, 200ms |

## Use for

- Accordions, FAQs, advanced settings
- Show more / show less

## Avoid

- Animating max-height with a guessed value
- Collapsing content the user is reading

---

# Tab Indicator

The active indicator slides between options, so the user sees where the selection went.

Group: State. Built with: Motion.

## Specs

| | |
| --- | --- |
| Technique | Shared layoutId |
| Spring | duration 0.35, bounce 0.15 |
| Label color | 150ms ease |

## Use for

- Segmented controls, tabs, nav pills
- Filters with a single selection

## Avoid

- Animating when switching with the keyboard many times
- Bounce above 0.2 in dense tools

---

# Crossfade + Blur

Labels and icons swap through a short blur, so two states read as one change instead of two overlapping objects.

Group: State. Built with: Motion.

## Specs

| | |
| --- | --- |
| Out | opacity 0, blur 4px, y -6px |
| In | opacity 1, blur 0, y 0 |
| Duration | 200ms |
| Tool | AnimatePresence mode="popLayout" |

## Use for

- Copy → Copied, Save → Saved
- Icon swaps: play / pause, sun / moon

## Avoid

- Blur above 8px — it is expensive and looks smeared
- Changing the button width during the swap

---

# Number Ticker

Numbers count to their new value with a spring, so the size of the change is visible.

Group: State. Built with: Motion.

## Specs

| | |
| --- | --- |
| Tool | useSpring + useTransform |
| Spring | stiffness 90, damping 20 |
| Digits | tabular-nums |

## Use for

- Dashboards, pricing toggles, counters
- Values that change while the user watches

## Avoid

- Financial values the user must read exactly at all times
- Proportional digits — the width jitters

---

# Skeleton Shimmer

A soft highlight sweeps across placeholders while content loads. Fast enough to feel busy, slow enough to stay calm.

Group: State. Built with: CSS.

## Specs

| | |
| --- | --- |
| Property | background-position |
| Duration | 1.4s per sweep |
| Easing | linear, infinite |
| Swap | crossfade to content, 200ms |

## Use for

- First load of cards, lists, profiles
- Content that takes over ~300ms

## Avoid

- Shimmer on content that loads instantly
- Skeleton shapes that do not match the real layout

---

# Toast Stack

New toasts push in from the edge. Older ones tuck behind and fan out on hover.

Group: Gesture & Overlay. Built with: Motion.

## Specs

| | |
| --- | --- |
| Enter | y 100%→0, opacity 0→1 |
| Collapsed | scale −5% per level, offset 10px |
| Spring | duration 0.4, bounce 0 |
| Expand | on hover / focus |

## Use for

- Background results: saved, sent, failed
- Undo actions

## Avoid

- Keyframes — toasts arrive fast and must retarget
- Stacking more than 3 visible toasts

---

# Drawer

A sheet slides up from the bottom and can be flicked away. Velocity counts, not only distance.

Group: Gesture & Overlay. Built with: Motion.

## Specs

| | |
| --- | --- |
| Easing | --ease-drawer (0.32, 0.72, 0, 1) |
| Duration | 400ms open, 250ms close |
| Dismiss | offset > 30% or velocity > 500px/s |
| Overscroll | dragElastic 0.1 upward |

## Use for

- Mobile actions and forms
- Secondary flows that keep context

## Avoid

- Requiring a long drag to dismiss
- A hard stop at the top edge — add friction instead

---

# Hold to Confirm

Destructive actions fill up while held. Pressing is slow and deliberate, releasing snaps back fast.

Group: Gesture & Overlay. Built with: CSS.

## Specs

| | |
| --- | --- |
| Fill | clip-path inset(0 100% 0 0) → inset(0) |
| Hold | 1.5s linear |
| Release | 200ms --ease-out |
| Press | scale 0.97 |

## Use for

- Delete, revoke, reset
- Actions that are hard to undo

## Avoid

- Everyday actions — it slows people down
- Holds longer than 2 seconds

---

# Swipe to Dismiss

Cards follow the finger and leave when flicked. The rest of the list closes the gap.

Group: Gesture & Overlay. Built with: Motion.

## Specs

| | |
| --- | --- |
| Dismiss | \|offset\| > 40% or \|velocity\| > 500px/s |
| Snap back | spring, bounce 0.2 |
| Opacity | fades with distance |
| Reflow | layout + popLayout |

## Use for

- Notifications, inbox items, suggestions
- Lists where dismissing is common

## Avoid

- Swipe as the only way to dismiss — add a button
- Dismissing on a slow, short drag

---

# Scroll Reveal

Sections fade up once when they enter the viewport. Once only — scrolling back does not replay.

Group: Scroll & Layout. Built with: Motion.

## Specs

| | |
| --- | --- |
| Trigger | whileInView, once, margin −40px |
| From | opacity 0, y 16px, blur 4px |
| Duration | 500ms |
| Easing | --ease-out |

## Use for

- Marketing pages, feature sections
- Images and long-form content

## Avoid

- Product UI the user works in every day
- Hiding content until it animates — it must stay readable

---

# Layout Shift

An element morphs from its place in a grid into a detail view. The user never loses track of what they opened.

Group: Scroll & Layout. Built with: Motion.

## Specs

| | |
| --- | --- |
| Technique | Shared layoutId |
| Spring | duration 0.4, bounce 0.1 |
| Backdrop | opacity, 200ms |
| Close | Escape, backdrop click |

## Use for

- Gallery → detail, card → expanded card
- Reordering and filtering lists

## Avoid

- Morphing between unrelated elements
- Text reflowing during the morph — fade it in after

---