# uipkge — full documentation

> Every component in one document. Index version: https://uipkge.dev/llms.txt · Registry: https://uipkge.dev/registry.json

## Contents

- [accordion](#accordion) — `registry:ui`
- [alert](#alert) — `registry:ui`
- [alert-dialog](#alert-dialog) — `registry:ui`
- [alert-modal](#alert-modal) — `registry:ui`
- [aspect-ratio](#aspect-ratio) — `registry:ui`
- [autocomplete](#autocomplete) — `registry:ui`
- [avatar](#avatar) — `registry:ui`
- [badge](#badge) — `registry:ui`
- [breadcrumb](#breadcrumb) — `registry:ui`
- [button](#button) — `registry:ui`
- [calendar](#calendar) — `registry:ui`
- [card](#card) — `registry:ui`
- [carousel](#carousel) — `registry:ui`
- [charts](#charts) — `registry:ui`
- [checkbox](#checkbox) — `registry:ui`
- [chip](#chip) — `registry:ui`
- [collapsible](#collapsible) — `registry:ui`
- [code-block](#code-block) — `registry:ui`
- [color-picker](#color-picker) — `registry:ui`
- [command](#command) — `registry:ui`
- [context-menu](#context-menu) — `registry:ui`
- [data-list](#data-list) — `registry:ui`
- [date-range-picker](#date-range-picker) — `registry:ui`
- [data-table](#data-table) — `registry:ui`
- [date-picker](#date-picker) — `registry:ui`
- [date-time-picker](#date-time-picker) — `registry:ui`
- [dialog](#dialog) — `registry:ui`
- [empty-state](#empty-state) — `registry:ui`
- [form](#form) — `registry:ui`
- [dropdown-menu](#dropdown-menu) — `registry:ui`
- [file-upload](#file-upload) — `registry:ui`
- [grid](#grid) — `registry:ui`
- [hover-card](#hover-card) — `registry:ui`
- [icon-box](#icon-box) — `registry:ui`
- [input](#input) — `registry:ui`
- [icons](#icons) — `registry:ui`
- [label](#label) — `registry:ui`
- [labeled-value](#labeled-value) — `registry:ui`
- [list](#list) — `registry:ui`
- [menu](#menu) — `registry:ui`
- [native-select](#native-select) — `registry:ui`
- [menubar](#menubar) — `registry:ui`
- [navigation-menu](#navigation-menu) — `registry:ui`
- [number-field](#number-field) — `registry:ui`
- [page](#page) — `registry:ui`
- [pagination](#pagination) — `registry:ui`
- [pin-input](#pin-input) — `registry:ui`
- [progress](#progress) — `registry:ui`
- [progress-linear](#progress-linear) — `registry:ui`
- [radio-group](#radio-group) — `registry:ui`
- [popover](#popover) — `registry:ui`
- [progress-item](#progress-item) — `registry:ui`
- [range-calendar](#range-calendar) — `registry:ui`
- [range-slider](#range-slider) — `registry:ui`
- [rating](#rating) — `registry:ui`
- [resizable](#resizable) — `registry:ui`
- [rich-text-editor](#rich-text-editor) — `registry:ui`
- [scroll-area](#scroll-area) — `registry:ui`
- [section-card](#section-card) — `registry:ui`
- [select](#select) — `registry:ui`
- [select-advanced](#select-advanced) — `registry:ui`
- [separator](#separator) — `registry:ui`
- [sheet](#sheet) — `registry:ui`
- [sidebar](#sidebar) — `registry:ui`
- [skeleton](#skeleton) — `registry:ui`
- [slider](#slider) — `registry:ui`
- [sonner](#sonner) — `registry:ui`
- [spinner](#spinner) — `registry:ui`
- [stat-card](#stat-card) — `registry:ui`
- [stepper](#stepper) — `registry:ui`
- [table](#table) — `registry:ui`
- [switch](#switch) — `registry:ui`
- [tabs](#tabs) — `registry:ui`
- [tags-input](#tags-input) — `registry:ui`
- [textarea](#textarea) — `registry:ui`
- [theme-switcher](#theme-switcher) — `registry:ui`
- [time-picker](#time-picker) — `registry:ui`
- [timeline](#timeline) — `registry:ui`
- [toggle](#toggle) — `registry:ui`
- [toggle-group](#toggle-group) — `registry:ui`
- [tooltip](#tooltip) — `registry:ui`
- [tree-view](#tree-view) — `registry:ui`
- [activity-feed](#activity-feed) — `registry:block`
- [event-list](#event-list) — `registry:block`
- [kpi-grid](#kpi-grid) — `registry:block`
- [progress-breakdown](#progress-breakdown) — `registry:block`
- [toggle-setting-list](#toggle-setting-list) — `registry:block`
- [theme-picker](#theme-picker) — `registry:block`
- [quick-actions](#quick-actions) — `registry:block`
- [init](#init) — `registry:lib`
- [use-theme](#use-theme) — `registry:hook`
- [utils](#utils) — `registry:lib`
- [tailwind](#tailwind) — `registry:style`

---

# accordion

> Single-open accordion with three collapsible items.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/accordion.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/accordion`

## Usage

### Default

Single-open accordion with three collapsible items.

```vue
<Accordion type="single" collapsible class="max-w-md">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>Yes. Default Tailwind styles match the rest of the registry.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>Yes. Smooth open/close animation via tw-animate-css.</AccordionContent>
  </AccordionItem>
</Accordion>
```

## Dependencies

npm packages:

- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/accordion/Accordion.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/accordion/components/ui/accordion/Accordion.vue) (643 chars)
- [`components/ui/accordion/AccordionContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/accordion/components/ui/accordion/AccordionContent.vue) (539 chars)
- [`components/ui/accordion/AccordionHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/accordion/components/ui/accordion/AccordionHeader.vue) (385 chars)
- [`components/ui/accordion/AccordionItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/accordion/components/ui/accordion/AccordionItem.vue) (377 chars)
- [`components/ui/accordion/AccordionTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/accordion/components/ui/accordion/AccordionTrigger.vue) (737 chars)
- [`components/ui/accordion/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/accordion/components/ui/accordion/index.ts) (323 chars)

## Source

- Tree: [`packages/registry/components/accordion`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/accordion)
- Manifest: [`https://uipkge.dev/r/accordion.json`](https://uipkge.dev/r/accordion.json)
- Preview: [`https://uipkge.dev/components/accordion`](https://uipkge.dev/components/accordion)

---

# alert

> Two built-in variants: default and destructive.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/alert.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/alert`

## Usage

### Default

Two built-in variants: default and destructive.

```vue
<Alert>
  <Terminal class="size-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>
```

### Destructive

For errors and warnings about data loss.

```vue
<Alert variant="destructive">
  <AlertCircle class="size-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
</Alert>
```

### Tinted icons

Color the icon for tonal variants — info, success, warning — without changing the alert background.

```vue
<div class="space-y-3">
  <Alert>
    <Info class="size-4 text-blue-500" />
    <AlertTitle>Information</AlertTitle>
    <AlertDescription>Read this carefully — it explains a non-obvious behavior.</AlertDescription>
  </Alert>
  <Alert>
    <CheckCircle2 class="size-4 text-emerald-500" />
    <AlertTitle>Success</AlertTitle>
    <AlertDescription>Your changes have been saved.</AlertDescription>
  </Alert>
  <Alert>
    <TriangleAlert class="size-4 text-amber-500" />
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>This action requires manual review.</AlertDescription>
  </Alert>
</div>
```

## Props

Extracted from `components/ui/alert/Alert.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `variant` | `AlertVariants['variant']` | — | no |
| `icon` | `'info'` \| `'warning'` \| `'error'` \| `'success'` | — | no |
| `title` | `string` | — | no |
| `text` | `string` | — | no |

## Dependencies

npm packages:

- `class-variance-authority`
- `lucide-vue-next`

## Files installed

- [`components/ui/alert/Alert.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert/components/ui/alert/Alert.vue) (1,125 chars)
- [`components/ui/alert/AlertDescription.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert/components/ui/alert/AlertDescription.vue) (111 chars)
- [`components/ui/alert/AlertTitle.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert/components/ui/alert/AlertTitle.vue) (105 chars)
- [`components/ui/alert/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert/components/ui/alert/index.ts) (891 chars)

## Source

- Tree: [`packages/registry/components/alert`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert)
- Manifest: [`https://uipkge.dev/r/alert.json`](https://uipkge.dev/r/alert.json)
- Preview: [`https://uipkge.dev/components/alert`](https://uipkge.dev/components/alert)

---

# alert-dialog

> Modal confirmation dialog with cancel and continue actions.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/alert-dialog.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/alert-dialog`

## Usage

### Default

Modal confirmation dialog with cancel and continue actions.

```vue
<AlertDialog>
  <AlertDialogTrigger as-child>
    <Button variant="outline">Show alert dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone. This will permanently delete your account.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

Other registry items (auto-installed):

- [`button`](https://uipkge.dev/docs/button.md)

## Files installed

- [`components/ui/alert-dialog/AlertDialog.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog/components/ui/alert-dialog/AlertDialog.vue) (472 chars)
- [`components/ui/alert-dialog/AlertDialogAction.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog/components/ui/alert-dialog/AlertDialogAction.vue) (601 chars)
- [`components/ui/alert-dialog/AlertDialogCancel.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog/components/ui/alert-dialog/AlertDialogCancel.vue) (650 chars)
- [`components/ui/alert-dialog/AlertDialogContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog/components/ui/alert-dialog/AlertDialogContent.vue) (1,545 chars)
- [`components/ui/alert-dialog/AlertDialogDescription.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog/components/ui/alert-dialog/AlertDialogDescription.vue) (637 chars)
- [`components/ui/alert-dialog/AlertDialogFooter.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog/components/ui/alert-dialog/AlertDialogFooter.vue) (358 chars)
- [`components/ui/alert-dialog/AlertDialogHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog/components/ui/alert-dialog/AlertDialogHeader.vue) (337 chars)
- [`components/ui/alert-dialog/AlertDialogTitle.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog/components/ui/alert-dialog/AlertDialogTitle.vue) (593 chars)
- [`components/ui/alert-dialog/AlertDialogTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog/components/ui/alert-dialog/AlertDialogTrigger.vue) (321 chars)
- [`components/ui/alert-dialog/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog/components/ui/alert-dialog/index.ts) (639 chars)

## Source

- Tree: [`packages/registry/components/alert-dialog`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-dialog)
- Manifest: [`https://uipkge.dev/r/alert-dialog.json`](https://uipkge.dev/r/alert-dialog.json)
- Preview: [`https://uipkge.dev/components/alert-dialog`](https://uipkge.dev/components/alert-dialog)

---

# alert-modal

> Controlled alert modal with title, description, and cancel/action labels.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/alert-modal.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/alert-modal`

## Usage

### Default

Controlled alert modal with title, description, and cancel/action labels.

```vue
<div>
  <Button variant="outline" @click="open = true">Open alert modal</Button>
  <AlertModal v-model:open="open" title="Delete project?" description="This permanently deletes all data." cancel-label="Cancel" action-label="Delete" />
</div>
```

## Props

Extracted from `components/ui/alert-modal/AlertModal.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `variant` | `AlertVariants['variant']` | — | no |
| `icon` | `'info'` \| `'warning'` \| `'error'` \| `'success'` | — | no |

## Dependencies

Other registry items (auto-installed):

- [`alert`](https://uipkge.dev/docs/alert.md)
- [`dialog`](https://uipkge.dev/docs/dialog.md)

## Files installed

- [`components/ui/alert-modal/AlertModal.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-modal/components/ui/alert-modal/AlertModal.vue) (1,504 chars)
- [`components/ui/alert-modal/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-modal/components/ui/alert-modal/index.ts) (57 chars)

## Source

- Tree: [`packages/registry/components/alert-modal`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/alert-modal)
- Manifest: [`https://uipkge.dev/r/alert-modal.json`](https://uipkge.dev/r/alert-modal.json)
- Preview: [`https://uipkge.dev/components/alert-modal`](https://uipkge.dev/components/alert-modal)

---

# aspect-ratio

> Three common aspect ratios: 16:9, 4:3, and 1:1.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/aspect-ratio.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/aspect-ratio`

## Usage

### Default

Three common aspect ratios: 16:9, 4:3, and 1:1.

```vue
<div class="grid gap-3 sm:grid-cols-3">
  <div>
    <AspectRatio :ratio="16 / 9" class="bg-muted rounded-md grid place-items-center">
      <span class="text-muted-foreground text-xs font-mono">16 : 9</span>
    </AspectRatio>
  </div>
  <div>
    <AspectRatio :ratio="4 / 3" class="bg-muted rounded-md grid place-items-center">
      <span class="text-muted-foreground text-xs font-mono">4 : 3</span>
    </AspectRatio>
  </div>
  <div>
    <AspectRatio :ratio="1" class="bg-muted rounded-md grid place-items-center">
      <span class="text-muted-foreground text-xs font-mono">1 : 1</span>
    </AspectRatio>
  </div>
</div>
```

## Dependencies

npm packages:

- `reka-ui`

## Files installed

- [`components/ui/aspect-ratio/AspectRatio.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/aspect-ratio/components/ui/aspect-ratio/AspectRatio.vue) (316 chars)
- [`components/ui/aspect-ratio/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/aspect-ratio/components/ui/aspect-ratio/index.ts) (59 chars)

## Source

- Tree: [`packages/registry/components/aspect-ratio`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/aspect-ratio)
- Manifest: [`https://uipkge.dev/r/aspect-ratio.json`](https://uipkge.dev/r/aspect-ratio.json)
- Preview: [`https://uipkge.dev/components/aspect-ratio`](https://uipkge.dev/components/aspect-ratio)

---

# autocomplete

> Filterable text input bound to a v-modeled list of suggestions.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/autocomplete.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/autocomplete`

## Usage

### Default

Filterable text input bound to a v-modeled list of suggestions.

```vue
<div class="space-y-2 max-w-xs">
  <Label>Fruit</Label>
  <Autocomplete v-model="value" :options="filtered" placeholder="Start typing…" />
</div>
```

## Props

Extracted from `components/ui/autocomplete/Autocomplete.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `unknown` | `null` | no |
| `options` | `T[]` | — | yes |
| `valueKey` | `string` | `'value'` | no |
| `labelKey` | `string` | `'label'` | no |
| `groupKey` | `string` | `'group'` | no |
| `disabledKey` | `string` | `'disabled'` | no |
| `placeholder` | `string` | `'Select...'` | no |
| `searchPlaceholder` | `string` | `'Search...'` | no |
| `emptyText` | `string` | `'No results.'` | no |
| `loadingText` | `string` | `'Loading...'` | no |
| `loading` | `boolean` | `false` | no |
| `disabled` | `boolean` | `false` | no |
| `readOnly` | `boolean` | `false` | no |
| `clearable` | `boolean` | `true` | no |
| `allowCreate` | `boolean` | `false` | no |
| `filter` | `(option: T, query: string) => boolean` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `lucide-vue-next`

Other registry items (auto-installed):

- [`command`](https://uipkge.dev/docs/command.md)
- [`popover`](https://uipkge.dev/docs/popover.md)
- [`select`](https://uipkge.dev/docs/select.md)

## Files installed

- [`components/ui/autocomplete/Autocomplete.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/autocomplete/components/ui/autocomplete/Autocomplete.vue) (6,296 chars)
- [`components/ui/autocomplete/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/autocomplete/components/ui/autocomplete/index.ts) (142 chars)

## Source

- Tree: [`packages/registry/components/autocomplete`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/autocomplete)
- Manifest: [`https://uipkge.dev/r/autocomplete.json`](https://uipkge.dev/r/autocomplete.json)
- Preview: [`https://uipkge.dev/components/autocomplete`](https://uipkge.dev/components/autocomplete)

---

# avatar

> Tailwind size-* utilities scale the avatar. Fallback text shrinks accordingly.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/avatar.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/avatar`

## Usage

### Sizes

Tailwind size-* utilities scale the avatar. Fallback text shrinks accordingly.

```vue
<div class="flex items-end gap-4">
  <Avatar class="size-6"><AvatarFallback class="text-[10px]">XS</AvatarFallback></Avatar>
  <Avatar class="size-8"><AvatarFallback class="text-xs">SM</AvatarFallback></Avatar>
  <Avatar class="size-10"><AvatarFallback>MD</AvatarFallback></Avatar>
  <Avatar class="size-12"><AvatarFallback>LG</AvatarFallback></Avatar>
  <Avatar class="size-16"><AvatarFallback>XL</AvatarFallback></Avatar>
  <Avatar class="size-20"><AvatarFallback>2XL</AvatarFallback></Avatar>
</div>
```

### Stack

Negative spacing + ring-2 ring-background creates the overlap.

```vue
<div class="flex -space-x-2">
  <Avatar class="size-8 ring-2 ring-background"><AvatarFallback>AD</AvatarFallback></Avatar>
  <Avatar class="size-8 ring-2 ring-background"><AvatarFallback>RM</AvatarFallback></Avatar>
  <Avatar class="size-8 ring-2 ring-background"><AvatarFallback>PK</AvatarFallback></Avatar>
  <Avatar class="size-8 ring-2 ring-background"><AvatarFallback>+5</AvatarFallback></Avatar>
</div>
```

### With image (broken → fallback)

If AvatarImage fails to load, AvatarFallback renders automatically.

```vue
<Avatar class="size-12">
  <AvatarImage src="https://broken-url.example/img.jpg" alt="user" />
  <AvatarFallback>UI</AvatarFallback>
</Avatar>
```

## Props

Extracted from `components/ui/avatar/Avatar.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `size` | `AvatarVariants['size']` | — | no |
| `rounded` | `AvatarVariants['rounded']` | — | no |
| `color` | `AvatarVariants['color']` | — | no |
| `variant` | `AvatarVariants['variant']` | — | no |
| `tile` | `boolean` | `false` | no |
| `disabled` | `boolean` | `false` | no |
| `loading` | `boolean` | `false` | no |

## Dependencies

npm packages:

- `class-variance-authority`

## Files installed

- [`components/ui/avatar/Avatar.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/avatar/components/ui/avatar/Avatar.vue) (3,334 chars)
- [`components/ui/avatar/AvatarFallback.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/avatar/components/ui/avatar/AvatarFallback.vue) (1,843 chars)
- [`components/ui/avatar/AvatarGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/avatar/components/ui/avatar/AvatarGroup.vue) (1,675 chars)
- [`components/ui/avatar/AvatarImage.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/avatar/components/ui/avatar/AvatarImage.vue) (1,110 chars)
- [`components/ui/avatar/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/avatar/components/ui/avatar/index.ts) (3,292 chars)

## Source

- Tree: [`packages/registry/components/avatar`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/avatar)
- Manifest: [`https://uipkge.dev/r/avatar.json`](https://uipkge.dev/r/avatar.json)
- Preview: [`https://uipkge.dev/components/avatar`](https://uipkge.dev/components/avatar)

---

# badge

> Four visual styles. Default uses the primary tone; outline is a subtle bordered chip.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/badge.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/badge`

## Usage

### Variants

Four visual styles. Default uses the primary tone; outline is a subtle bordered chip.

```vue
<div class="flex flex-wrap gap-2">
  <Badge>Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="destructive">Destructive</Badge>
</div>
```

### With icon

Combine with lucide icons for status pills.

```vue
<div class="flex flex-wrap gap-2">
  <Badge><Check class="size-3" /> Verified</Badge>
  <Badge variant="secondary"><Clock class="size-3" /> Pending</Badge>
  <Badge variant="outline"><Zap class="size-3" /> Pro</Badge>
  <Badge variant="destructive"><X class="size-3" /> Failed</Badge>
</div>
```

### In context

Inline with text or counts.

```vue
<div class="flex flex-wrap items-center gap-3">
  <span class="text-sm">Notifications</span>
  <Badge>3 new</Badge>
  <span class="text-sm">·</span>
  <span class="text-sm">Status</span>
  <Badge variant="secondary">Active</Badge>
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `class-variance-authority`
- `reka-ui`

## Files installed

- [`components/ui/badge/Badge.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/badge/components/ui/badge/Badge.vue) (655 chars)
- [`components/ui/badge/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/badge/components/ui/badge/index.ts) (1,714 chars)

## Source

- Tree: [`packages/registry/components/badge`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/badge)
- Manifest: [`https://uipkge.dev/r/badge.json`](https://uipkge.dev/r/badge.json)
- Preview: [`https://uipkge.dev/components/badge`](https://uipkge.dev/components/badge)

---

# breadcrumb

> Links + a final non-link page entry. Separators auto-render between items.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/breadcrumb.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/breadcrumb`

## Usage

### Default

Links + a final non-link page entry. Separators auto-render between items.

```vue
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="#">Components</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

### Long path with ellipsis

Use BreadcrumbEllipsis to collapse middle segments.

```vue
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="#">Workspace</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="#">2026</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>May</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

## Props

Extracted from `components/ui/breadcrumb/Breadcrumb.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/breadcrumb/Breadcrumb.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/breadcrumb/components/ui/breadcrumb/Breadcrumb.vue) (267 chars)
- [`components/ui/breadcrumb/BreadcrumbEllipsis.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/breadcrumb/components/ui/breadcrumb/BreadcrumbEllipsis.vue) (529 chars)
- [`components/ui/breadcrumb/BreadcrumbItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/breadcrumb/components/ui/breadcrumb/BreadcrumbItem.vue) (319 chars)
- [`components/ui/breadcrumb/BreadcrumbLink.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/breadcrumb/components/ui/breadcrumb/BreadcrumbLink.vue) (525 chars)
- [`components/ui/breadcrumb/BreadcrumbList.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/breadcrumb/components/ui/breadcrumb/BreadcrumbList.vue) (386 chars)
- [`components/ui/breadcrumb/BreadcrumbPage.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/breadcrumb/components/ui/breadcrumb/BreadcrumbPage.vue) (394 chars)
- [`components/ui/breadcrumb/BreadcrumbSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/breadcrumb/components/ui/breadcrumb/BreadcrumbSeparator.vue) (446 chars)
- [`components/ui/breadcrumb/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/breadcrumb/components/ui/breadcrumb/index.ts) (465 chars)

## Source

- Tree: [`packages/registry/components/breadcrumb`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/breadcrumb)
- Manifest: [`https://uipkge.dev/r/breadcrumb.json`](https://uipkge.dev/r/breadcrumb.json)
- Preview: [`https://uipkge.dev/components/breadcrumb`](https://uipkge.dev/components/breadcrumb)

---

# button

> Six visual styles. Default is the primary action; ghost and link blend into surrounding text.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/button.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/button`

## Usage

### Variants

Six visual styles. Default is the primary action; ghost and link blend into surrounding text.

```vue
<div class="flex flex-wrap gap-2">
  <Button>Default</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="link">Link</Button>
</div>
```

### Sizes

Four text sizes for inline buttons.

```vue
<div class="flex flex-wrap items-center gap-2">
  <Button size="xs">Extra small</Button>
  <Button size="sm">Small</Button>
  <Button>Default</Button>
  <Button size="lg">Large</Button>
</div>
```

### Icon-only

Square icon buttons in three sizes. Use aria-label for accessibility.

```vue
<div class="flex flex-wrap items-center gap-2">
  <Button size="icon-sm" aria-label="icon"><Mail /></Button>
  <Button size="icon" aria-label="icon"><Mail /></Button>
  <Button size="icon-lg" aria-label="icon"><Mail /></Button>
</div>
```

### With icon

Place icons before or after the label. Auto-spaced.

```vue
<div class="flex flex-wrap gap-2">
  <Button><Mail /> Email me</Button>
  <Button>Continue <ChevronRight /></Button>
  <Button variant="outline"><Plus /> New item</Button>
  <Button variant="destructive"><Trash2 /> Delete</Button>
</div>
```

### States

Disabled keeps the variant style. Add a spinner for loading.

```vue
<div class="flex flex-wrap gap-2">
  <Button disabled>Disabled</Button>
  <Button variant="outline" disabled>Outline disabled</Button>
  <Button disabled><Loader2 class="animate-spin" /> Loading…</Button>
</div>
```

## Props

Extracted from `components/ui/button/Button.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `variant` | `ButtonVariants['variant']` | — | no |
| `size` | `ButtonVariants['size']` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `class-variance-authority`
- `reka-ui`

## Files installed

- [`components/ui/button/Button.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/button/components/ui/button/Button.vue) (729 chars)
- [`components/ui/button/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/button/components/ui/button/index.ts) (1,849 chars)

## Source

- Tree: [`packages/registry/components/button`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/button)
- Manifest: [`https://uipkge.dev/r/button.json`](https://uipkge.dev/r/button.json)
- Preview: [`https://uipkge.dev/components/button`](https://uipkge.dev/components/button)

---

# calendar

> Single-date calendar bound to a CalendarDate value.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/calendar.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/calendar`

## Usage

### Default

Single-date calendar bound to a CalendarDate value.

```vue
<Calendar v-model="date" class="rounded-md border" />
```

## Dependencies

npm packages:

- `@internationalized/date`
- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

Other registry items (auto-installed):

- [`button`](https://uipkge.dev/docs/button.md)
- [`native-select`](https://uipkge.dev/docs/native-select.md)

## Files installed

- [`components/ui/calendar/Calendar.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/Calendar.vue) (6,826 chars)
- [`components/ui/calendar/CalendarCell.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarCell.vue) (806 chars)
- [`components/ui/calendar/CalendarCellTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarCellTrigger.vue) (1,589 chars)
- [`components/ui/calendar/CalendarGrid.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarGrid.vue) (652 chars)
- [`components/ui/calendar/CalendarGridBody.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarGridBody.vue) (309 chars)
- [`components/ui/calendar/CalendarGridHead.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarGridHead.vue) (389 chars)
- [`components/ui/calendar/CalendarGridRow.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarGridRow.vue) (628 chars)
- [`components/ui/calendar/CalendarHeadCell.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarHeadCell.vue) (710 chars)
- [`components/ui/calendar/CalendarHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarHeader.vue) (690 chars)
- [`components/ui/calendar/CalendarHeading.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarHeading.vue) (809 chars)
- [`components/ui/calendar/CalendarNextButton.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarNextButton.vue) (884 chars)
- [`components/ui/calendar/CalendarPrevButton.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/CalendarPrevButton.vue) (882 chars)
- [`components/ui/calendar/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar/components/ui/calendar/index.ts) (887 chars)

## Source

- Tree: [`packages/registry/components/calendar`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/calendar)
- Manifest: [`https://uipkge.dev/r/calendar.json`](https://uipkge.dev/r/calendar.json)
- Preview: [`https://uipkge.dev/components/calendar`](https://uipkge.dev/components/calendar)

---

# card

> Header (title + description) plus content.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/card.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/card`

## Usage

### Simple

Header (title + description) plus content.

```vue
<Card class="max-w-md">
  <CardHeader>
    <CardTitle>Simple card</CardTitle>
    <CardDescription>A basic Card with header and content.</CardDescription>
  </CardHeader>
  <CardContent>
    <p class="text-sm">Cards group related content. They include headers, content, and footers — each as separate slots.</p>
  </CardContent>
</Card>
```

### With footer actions

CardFooter slot for save/cancel patterns.

```vue
<Card class="max-w-md">
  <CardHeader>
    <CardTitle>Edit profile</CardTitle>
    <CardDescription>Update your account details.</CardDescription>
  </CardHeader>
  <CardContent>
    <p class="text-sm text-muted-foreground">Form fields go here.</p>
  </CardContent>
  <CardFooter class="border-t pt-4 gap-2">
    <Button size="sm">Save</Button>
    <Button variant="ghost" size="sm">Cancel</Button>
  </CardFooter>
</Card>
```

### With header action

Secondary action in the top-right corner.

```vue
<Card class="max-w-md">
  <CardHeader>
    <div class="flex items-start justify-between">
      <div>
        <CardTitle>Recent activity</CardTitle>
        <CardDescription>Last 7 days.</CardDescription>
      </div>
      <Button variant="ghost" size="icon-sm" class="-mr-2 -mt-1"><ArrowUpRight class="size-4" /></Button>
    </div>
  </CardHeader>
  <CardContent>
    <p class="text-sm text-muted-foreground">No new activity.</p>
  </CardContent>
</Card>
```

### Pricing card

Highlighted with border-primary. Badge in the header denotes recommendation.

```vue
<Card class="border-primary max-w-sm">
  <CardHeader>
    <Badge class="w-fit">Recommended</Badge>
    <CardTitle class="mt-2">Pro plan</CardTitle>
    <CardDescription>$24 / month, billed annually.</CardDescription>
  </CardHeader>
  <CardContent class="space-y-2 text-sm">
    <p class="flex gap-2"><Check class="size-4 text-emerald-500" /> Unlimited projects</p>
    <p class="flex gap-2"><Check class="size-4 text-emerald-500" /> Priority support</p>
    <p class="flex gap-2"><Check class="size-4 text-emerald-500" /> Custom themes</p>
  </CardContent>
  <CardFooter>
    <Button class="w-full">Choose Pro</Button>
  </CardFooter>
</Card>
```

## Props

Extracted from `components/ui/card/Card.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `variant` | `CardVariants['variant']` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `class-variance-authority`

## Files installed

- [`components/ui/card/Card.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/card/components/ui/card/Card.vue) (427 chars)
- [`components/ui/card/CardAction.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/card/components/ui/card/CardAction.vue) (358 chars)
- [`components/ui/card/CardContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/card/components/ui/card/CardContent.vue) (294 chars)
- [`components/ui/card/CardDescription.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/card/components/ui/card/CardDescription.vue) (315 chars)
- [`components/ui/card/CardFooter.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/card/components/ui/card/CardFooter.vue) (311 chars)
- [`components/ui/card/CardHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/card/components/ui/card/CardHeader.vue) (314 chars)
- [`components/ui/card/CardTitle.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/card/components/ui/card/CardTitle.vue) (323 chars)
- [`components/ui/card/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/card/components/ui/card/index.ts) (1,003 chars)

## Source

- Tree: [`packages/registry/components/card`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/card)
- Manifest: [`https://uipkge.dev/r/card.json`](https://uipkge.dev/r/card.json)
- Preview: [`https://uipkge.dev/components/card`](https://uipkge.dev/components/card)

---

# carousel

> Five-slide carousel with previous and next controls.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/carousel.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/carousel`

## Usage

### Default

Five-slide carousel with previous and next controls.

```vue
<Carousel class="max-w-md">
  <CarouselContent>
    <CarouselItem v-for="(_, i) in 5" :key="i">
      <Card>
        <CardContent class="flex aspect-square items-center justify-center p-6">
          <span class="text-4xl font-bold">{{ i + 1 }}</span>
        </CardContent>
      </Card>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

## Props

Extracted from `components/ui/carousel/Carousel.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `number` | `0` | no |
| `orientation` | `'horizontal'` \| `'vertical'` | `'horizontal'` | no |
| `loop` | `boolean` | `false` | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `class-variance-authority`
- `lucide-vue-next`

## Files installed

- [`components/ui/carousel/Carousel.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/carousel/components/ui/carousel/Carousel.vue) (2,749 chars)
- [`components/ui/carousel/CarouselContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/carousel/components/ui/carousel/CarouselContent.vue) (1,433 chars)
- [`components/ui/carousel/CarouselFooter.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/carousel/components/ui/carousel/CarouselFooter.vue) (528 chars)
- [`components/ui/carousel/CarouselHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/carousel/components/ui/carousel/CarouselHeader.vue) (525 chars)
- [`components/ui/carousel/CarouselIndicators.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/carousel/components/ui/carousel/CarouselIndicators.vue) (1,286 chars)
- [`components/ui/carousel/CarouselItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/carousel/components/ui/carousel/CarouselItem.vue) (1,051 chars)
- [`components/ui/carousel/CarouselNext.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/carousel/components/ui/carousel/CarouselNext.vue) (1,438 chars)
- [`components/ui/carousel/CarouselPrevious.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/carousel/components/ui/carousel/CarouselPrevious.vue) (1,452 chars)
- [`components/ui/carousel/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/carousel/components/ui/carousel/index.ts) (1,251 chars)

## Source

- Tree: [`packages/registry/components/carousel`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/carousel)
- Manifest: [`https://uipkge.dev/r/carousel.json`](https://uipkge.dev/r/carousel.json)
- Preview: [`https://uipkge.dev/components/carousel`](https://uipkge.dev/components/carousel)

---

# charts

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/charts.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/charts`

## Files installed

- [`components/ui/charts/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/charts/components/ui/charts/index.ts) (326 chars)

## Source

- Tree: [`packages/registry/components/charts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/charts)
- Manifest: [`https://uipkge.dev/r/charts.json`](https://uipkge.dev/r/charts.json)
- Preview: [`https://uipkge.dev/components/charts`](https://uipkge.dev/components/charts)

---

# checkbox

> All four interaction states.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/checkbox.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/checkbox`

## Usage

### States

All four interaction states.

```vue
<div class="space-y-3">
  <div class="flex items-center gap-2">
    <Checkbox id="c1" v-model="checked" />
    <Label for="c1">Accept terms (live: <code>{{ checked }}</code>)</Label>
  </div>
  <div class="flex items-center gap-2">
    <Checkbox id="c2" :model-value="false" />
    <Label for="c2">Unchecked</Label>
  </div>
  <div class="flex items-center gap-2">
    <Checkbox id="c3" disabled />
    <Label for="c3" class="text-muted-foreground">Disabled</Label>
  </div>
  <div class="flex items-center gap-2">
    <Checkbox id="c4" :model-value="true" disabled />
    <Label for="c4" class="text-muted-foreground">Disabled checked</Label>
  </div>
</div>
```

### In a list

Common pattern for preference toggles.

```vue
<div class="space-y-2">
  <div class="flex items-center gap-2">
    <Checkbox id="t1" :model-value="true" />
    <Label for="t1">Subscribe to newsletter</Label>
  </div>
  <div class="flex items-center gap-2">
    <Checkbox id="t2" />
    <Label for="t2">Allow analytics</Label>
  </div>
  <div class="flex items-center gap-2">
    <Checkbox id="t3" />
    <Label for="t3">Receive marketing emails</Label>
  </div>
</div>
```

## Props

Extracted from `components/ui/checkbox/Checkbox.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `modelValue` | `boolean \| 'indeterminate' \| null` | — | no |
| `value` | `string` | — | no |
| `id` | `string` | — | no |
| `trueValue` | `boolean \| string` | `true` | no |
| `falseValue` | `boolean \| string` | `false` | no |
| `size` | `'sm'` \| `'md'` \| `'lg'` | `'md'` | no |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info' \| string` | `'primary'` | no |
| `label` | `string` | — | no |
| `hint` | `string` | — | no |
| `errorMessages` | `string \| string[]` | — | no |
| `error` | `boolean` | — | no |
| `disabled` | `boolean` | — | no |
| `readonly` | `boolean` | — | no |
| `indeterminate` | `boolean` | — | no |
| `density` | `'compact'` \| `'default'` \| `'comfortable'` | `'default'` | no |
| `hideIcon` | `boolean` | `false` | no |
| `loading` | `boolean` | — | no |
| `ripple` | `boolean` | `true` | no |
| `checkedIcon` | `any` | — | no |
| `indeterminateIcon` | `any` | — | no |
| `labelPosition` | `'before'` \| `'after'` | `'after'` | no |
| `flat` | `boolean` | `false` | no |
| `bgColor` | `boolean` | `false` | no |
| `inline` | `boolean` | `false` | no |

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/checkbox/Checkbox.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/checkbox/components/ui/checkbox/Checkbox.vue) (9,352 chars)
- [`components/ui/checkbox/CheckboxGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/checkbox/components/ui/checkbox/CheckboxGroup.vue) (2,286 chars)
- [`components/ui/checkbox/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/checkbox/components/ui/checkbox/index.ts) (53 chars)

## Source

- Tree: [`packages/registry/components/checkbox`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/checkbox)
- Manifest: [`https://uipkge.dev/r/checkbox.json`](https://uipkge.dev/r/checkbox.json)
- Preview: [`https://uipkge.dev/components/checkbox`](https://uipkge.dev/components/checkbox)

---

# chip

> Chip is similar to Badge but typically interactive (filter, removable).

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/chip.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/chip`

## Usage

### Variants

Chip is similar to Badge but typically interactive (filter, removable).

```vue
<div class="flex flex-wrap gap-2">
  <Chip>Default</Chip>
  <Chip variant="secondary">Secondary</Chip>
  <Chip variant="outline">Outline</Chip>
</div>
```

### Closable

Add an X icon to indicate dismissibility.

```vue
<div class="flex flex-wrap gap-2">
  <Chip closable>tag-one <X class="size-3" /></Chip>
  <Chip closable>tag-two <X class="size-3" /></Chip>
  <Chip closable>tag-three <X class="size-3" /></Chip>
</div>
```

### With leading icon

Hashtag pattern.

```vue
<div class="flex flex-wrap gap-2">
  <Chip><Hash class="size-3" /> design</Chip>
  <Chip><Hash class="size-3" /> engineering</Chip>
  <Chip><Hash class="size-3" /> product</Chip>
</div>
```

## Props

Extracted from `components/ui/chip/Chip.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `variant` | `ChipVariants['variant']` | — | no |
| `size` | `ChipVariants['size']` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |
| `closable` | `boolean` | — | no |

## Dependencies

npm packages:

- `class-variance-authority`
- `lucide-vue-next`

## Files installed

- [`components/ui/chip/Chip.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/chip/components/ui/chip/Chip.vue) (813 chars)
- [`components/ui/chip/ChipGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/chip/components/ui/chip/ChipGroup.vue) (1,574 chars)
- [`components/ui/chip/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/chip/components/ui/chip/index.ts) (1,475 chars)

## Source

- Tree: [`packages/registry/components/chip`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/chip)
- Manifest: [`https://uipkge.dev/r/chip.json`](https://uipkge.dev/r/chip.json)
- Preview: [`https://uipkge.dev/components/chip`](https://uipkge.dev/components/chip)

---

# collapsible

> Header with a toggle button that shows or hides the additional rows.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/collapsible.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/collapsible`

## Usage

### Default

Header with a toggle button that shows or hides the additional rows.

```vue
<Collapsible v-model:open="open" class="max-w-md">
  <div class="flex items-center justify-between gap-3 rounded-md border px-4 py-2">
    <h4 class="text-sm font-medium">@uipkge starred 3 repositories</h4>
    <CollapsibleTrigger as-child>
      <Button variant="ghost" size="icon-sm">
        <ChevronsUpDown class="size-4" />
        <span class="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div class="rounded-md border px-4 py-2 text-sm font-mono mt-1">@radix-ui/primitives</div>
  <CollapsibleContent class="space-y-1 mt-1">
    <div class="rounded-md border px-4 py-2 text-sm font-mono">@stitches/react</div>
    <div class="rounded-md border px-4 py-2 text-sm font-mono">@vueuse/core</div>
  </CollapsibleContent>
</Collapsible>
```

## Dependencies

npm packages:

- `reka-ui`

## Files installed

- [`components/ui/collapsible/Collapsible.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/collapsible/components/ui/collapsible/Collapsible.vue) (487 chars)
- [`components/ui/collapsible/CollapsibleContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/collapsible/components/ui/collapsible/CollapsibleContent.vue) (320 chars)
- [`components/ui/collapsible/CollapsibleTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/collapsible/components/ui/collapsible/CollapsibleTrigger.vue) (320 chars)
- [`components/ui/collapsible/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/collapsible/components/ui/collapsible/index.ts) (205 chars)

## Source

- Tree: [`packages/registry/components/collapsible`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/collapsible)
- Manifest: [`https://uipkge.dev/r/collapsible.json`](https://uipkge.dev/r/collapsible.json)
- Preview: [`https://uipkge.dev/components/collapsible`](https://uipkge.dev/components/collapsible)

---

# code-block

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/code-block.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/code-block`

## Props

Extracted from `components/ui/code-block/CodeBlock.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `code` | `string` | — | yes |
| `language` | `string` | `'vue'` | no |
| `showLineNumbers` | `boolean` | `true` | no |
| `maxHeight` | `string` | `'400px'` | no |
| `class` | `string` | — | no |

## Dependencies

npm packages:

- `lucide-vue-next`

Other registry items (auto-installed):

- [`button`](https://uipkge.dev/docs/button.md)

## Files installed

- [`components/ui/code-block/CodeBlock.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/code-block/components/ui/code-block/CodeBlock.vue) (3,708 chars)
- [`components/ui/code-block/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/code-block/components/ui/code-block/index.ts) (55 chars)

## Source

- Tree: [`packages/registry/components/code-block`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/code-block)
- Manifest: [`https://uipkge.dev/r/code-block.json`](https://uipkge.dev/r/code-block.json)
- Preview: [`https://uipkge.dev/components/code-block`](https://uipkge.dev/components/code-block)

---

# color-picker

> Color picker bound to a hex string with the current value displayed below.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/color-picker.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/color-picker`

## Usage

### Default

Color picker bound to a hex string with the current value displayed below.

```vue
<div class="space-y-3">
  <ColorPicker v-model="color" />
  <p class="text-muted-foreground text-xs">Value: <code class="text-foreground">{{ color }}</code></p>
</div>
```

## Props

Extracted from `components/ui/color-picker/ColorPicker.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `string` | — | no |
| `disabled` | `boolean` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Files installed

- [`components/ui/color-picker/ColorPicker.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/color-picker/components/ui/color-picker/ColorPicker.vue) (2,004 chars)
- [`components/ui/color-picker/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/color-picker/components/ui/color-picker/index.ts) (59 chars)

## Source

- Tree: [`packages/registry/components/color-picker`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/color-picker)
- Manifest: [`https://uipkge.dev/r/color-picker.json`](https://uipkge.dev/r/color-picker.json)
- Preview: [`https://uipkge.dev/components/color-picker`](https://uipkge.dev/components/color-picker)

---

# command

> Searchable command palette with grouped items and an empty state.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/command.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/command`

## Usage

### Default

Searchable command palette with grouped items and an empty state.

```vue
<Command class="max-w-md border rounded-lg shadow-sm">
  <CommandInput placeholder="Type a command or search…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem><Calendar class="size-4" /> Calendar</CommandItem>
      <CommandItem><Smile class="size-4" /> Search emoji</CommandItem>
      <CommandItem><User class="size-4" /> Profile</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

Other registry items (auto-installed):

- [`dialog`](https://uipkge.dev/docs/dialog.md)

## Files installed

- [`components/ui/command/Command.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command/components/ui/command/Command.vue) (2,378 chars)
- [`components/ui/command/CommandDialog.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command/components/ui/command/CommandDialog.vue) (1,004 chars)
- [`components/ui/command/CommandEmpty.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command/components/ui/command/CommandEmpty.vue) (766 chars)
- [`components/ui/command/CommandGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command/components/ui/command/CommandGroup.vue) (1,356 chars)
- [`components/ui/command/CommandInput.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command/components/ui/command/CommandInput.vue) (1,186 chars)
- [`components/ui/command/CommandItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command/components/ui/command/CommandItem.vue) (2,436 chars)
- [`components/ui/command/CommandList.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command/components/ui/command/CommandList.vue) (721 chars)
- [`components/ui/command/CommandSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command/components/ui/command/CommandSeparator.vue) (541 chars)
- [`components/ui/command/CommandShortcut.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command/components/ui/command/CommandShortcut.vue) (345 chars)
- [`components/ui/command/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command/components/ui/command/index.ts) (1,017 chars)

## Source

- Tree: [`packages/registry/components/command`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/command)
- Manifest: [`https://uipkge.dev/r/command.json`](https://uipkge.dev/r/command.json)
- Preview: [`https://uipkge.dev/components/command`](https://uipkge.dev/components/command)

---

# context-menu

> Right-click the target to open a menu with items and a separator.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/context-menu.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/context-menu`

## Usage

### Default

Right-click the target to open a menu with items and a separator.

```vue
<ContextMenu>
  <ContextMenuTrigger class="border-border bg-muted/30 grid h-32 w-72 place-items-center rounded-md border border-dashed text-sm">
    Right-click here
  </ContextMenuTrigger>
  <ContextMenuContent class="w-48">
    <ContextMenuItem>Back</ContextMenuItem>
    <ContextMenuItem>Forward</ContextMenuItem>
    <ContextMenuItem>Reload</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>Inspect</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/context-menu/ContextMenu.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenu.vue) (450 chars)
- [`components/ui/context-menu/ContextMenuCheckboxItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuCheckboxItem.vue) (1,451 chars)
- [`components/ui/context-menu/ContextMenuContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuContent.vue) (1,435 chars)
- [`components/ui/context-menu/ContextMenuGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuGroup.vue) (309 chars)
- [`components/ui/context-menu/ContextMenuItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuItem.vue) (1,612 chars)
- [`components/ui/context-menu/ContextMenuLabel.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuLabel.vue) (695 chars)
- [`components/ui/context-menu/ContextMenuPortal.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuPortal.vue) (315 chars)
- [`components/ui/context-menu/ContextMenuRadioGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuRadioGroup.vue) (504 chars)
- [`components/ui/context-menu/ContextMenuRadioItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuRadioItem.vue) (1,442 chars)
- [`components/ui/context-menu/ContextMenuSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuSeparator.vue) (583 chars)
- [`components/ui/context-menu/ContextMenuShortcut.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuShortcut.vue) (361 chars)
- [`components/ui/context-menu/ContextMenuSub.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuSub.vue) (447 chars)
- [`components/ui/context-menu/ContextMenuSubContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuSubContent.vue) (1,298 chars)
- [`components/ui/context-menu/ContextMenuSubTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuSubTrigger.vue) (1,160 chars)
- [`components/ui/context-menu/ContextMenuTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/ContextMenuTrigger.vue) (394 chars)
- [`components/ui/context-menu/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu/components/ui/context-menu/index.ts) (1,024 chars)

## Source

- Tree: [`packages/registry/components/context-menu`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/context-menu)
- Manifest: [`https://uipkge.dev/r/context-menu.json`](https://uipkge.dev/r/context-menu.json)
- Preview: [`https://uipkge.dev/components/context-menu`](https://uipkge.dev/components/context-menu)

---

# data-list

> Key/value rows inside a card. Values can be plain text or other components like badges.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/data-list.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/data-list`

## Usage

### Default

Key/value rows inside a card. Values can be plain text or other components like badges.

```vue
<Card class="max-w-md">
  <DataList>
    <DataListItem>
      <span class="text-sm font-medium">Plan</span>
      <Badge>Pro</Badge>
    </DataListItem>
    <DataListItem>
      <span class="text-sm font-medium">Renewal</span>
      <span class="text-muted-foreground text-sm">Sep 12, 2026</span>
    </DataListItem>
    <DataListItem>
      <span class="text-sm font-medium">Status</span>
      <Badge variant="secondary">Active</Badge>
    </DataListItem>
  </DataList>
</Card>
```

## Files installed

- [`components/ui/data-list/DataList.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-list/components/ui/data-list/DataList.vue) (175 chars)
- [`components/ui/data-list/DataListItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-list/components/ui/data-list/DataListItem.vue) (324 chars)
- [`components/ui/data-list/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-list/components/ui/data-list/index.ts) (114 chars)

## Source

- Tree: [`packages/registry/components/data-list`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-list)
- Manifest: [`https://uipkge.dev/r/data-list.json`](https://uipkge.dev/r/data-list.json)
- Preview: [`https://uipkge.dev/components/data-list`](https://uipkge.dev/components/data-list)

---

# date-range-picker

> Picker for a start and end date in one popover.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/date-range-picker.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/date-range-picker`

## Usage

### Default

Picker for a start and end date in one popover.

```vue
<DateRangePicker v-model="range" class="max-w-sm" />
```

## Props

Extracted from `components/ui/date-range-picker/DateRangePicker.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `DateRange \| null` | `null` | no |
| `placeholder` | `string` | `'Pick a date range'` | no |
| `disabled` | `boolean` | `false` | no |
| `readOnly` | `boolean` | `false` | no |
| `clearable` | `boolean` | `true` | no |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` | `'medium'` | no |
| `locale` | `string` | `'en-US'` | no |
| `numberOfMonths` | `number` | `2` | no |
| `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `0` | no |
| `fixedWeeks` | `boolean` | `false` | no |
| `minValue` | `string \| DateValue` | — | no |
| `maxValue` | `string \| DateValue` | — | no |
| `presets` | `DateRangePreset[]` | — | no |
| `picker` | `DateRangePickerPicker` | `'day'` | no |
| `showTime` | `boolean` | `false` | no |
| `use24Hour` | `boolean` | `false` | no |
| `minuteStep` | `number` | `5` | no |
| `defaultTime` | `string` | `'12:00'` | no |
| `triggerClass` | `HTMLAttributes['class']` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `@internationalized/date`
- `lucide-vue-next`
- `reka-ui`

Other registry items (auto-installed):

- [`button`](https://uipkge.dev/docs/button.md)
- [`popover`](https://uipkge.dev/docs/popover.md)
- [`range-calendar`](https://uipkge.dev/docs/range-calendar.md)
- [`time-picker`](https://uipkge.dev/docs/time-picker.md)

## Files installed

- [`components/ui/date-range-picker/DateRangePicker.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/date-range-picker/components/ui/date-range-picker/DateRangePicker.vue) (18,622 chars)
- [`components/ui/date-range-picker/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/date-range-picker/components/ui/date-range-picker/index.ts) (139 chars)

## Source

- Tree: [`packages/registry/components/date-range-picker`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/date-range-picker)
- Manifest: [`https://uipkge.dev/r/date-range-picker.json`](https://uipkge.dev/r/date-range-picker.json)
- Preview: [`https://uipkge.dev/components/date-range-picker`](https://uipkge.dev/components/date-range-picker)

---

# data-table

> Sortable columns, paginated, multi-column filters, global search, view toggle, bulk-select. All wired through TanStack Table.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/data-table.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/data-table`

## Usage

### Default

Sortable columns, paginated, multi-column filters, global search, view toggle, bulk-select. All wired through TanStack Table.

```vue
<DataTable
  :columns="sortableColumns"
  :data="data"
  :filters="filters"
  filter-column="email"
  filter-placeholder="Search by email…"
/>
```

### Sortable columns

Wrap each column header with DataTableColumnHeader. Click cycles asc → desc → none. Arrow icon reflects state.

```vue
<DataTable :columns="sortableColumns" :data="data" />
```

### Plain headers

Use plain string headers when you do not need sort. Pagination still works.

```vue
<DataTable :columns="plainColumns" :data="data" />
```

### Inline filter mode

Filter chips render directly in the toolbar — no popup. Best when you have ≤3 filters.

```vue
<DataTable
  :columns="sortableColumns"
  :data="data"
  :filters="filters"
  filter-column="email"
  filter-placeholder="Search…"
  filter-mode="inline"
/>
```

### Popover filter mode

Filters open in a small popup attached to a toolbar button. Compact when you have many filters but want them quick to reach.

```vue
<DataTable
  :columns="sortableColumns"
  :data="data"
  :filters="filters"
  filter-column="email"
  filter-placeholder="Search…"
  filter-mode="popover"
/>
```

### Modal filter mode (side panel)

Filters open in a Sheet from the right. Best for many filters or complex inputs (date ranges, search-able multiselect).

```vue
<DataTable
  :columns="sortableColumns"
  :data="data"
  :filters="filters"
  filter-column="email"
  filter-placeholder="Search…"
  filter-mode="modal"
/>
```

## Props

Extracted from `components/ui/data-table/DataTable.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `columns` | `ColumnDef<TData, TValue>[]` | — | yes |
| `data` | `TData[]` | — | yes |
| `filterColumn` | `string` | `'email'` | no |
| `filterPlaceholder` | `string` | `'Filter...'` | no |
| `filters` | `FilterDefinition[]` | `() => [], filterMode: 'modal', totalRows: -1, loading: fa…` | no |
| `filterMode` | `'inline'` \| `'modal'` \| `'popover'` | — | no |
| `totalRows` | `number` | — | no |
| `loading` | `boolean` | — | no |

## Dependencies

npm packages:

- `@internationalized/date`
- `@tanstack/vue-table`
- `lucide-vue-next`
- `reka-ui`

Other registry items (auto-installed):

- [`badge`](https://uipkge.dev/docs/badge.md)
- [`button`](https://uipkge.dev/docs/button.md)
- [`card`](https://uipkge.dev/docs/card.md)
- [`command`](https://uipkge.dev/docs/command.md)
- [`dropdown-menu`](https://uipkge.dev/docs/dropdown-menu.md)
- [`input`](https://uipkge.dev/docs/input.md)
- [`label`](https://uipkge.dev/docs/label.md)
- [`popover`](https://uipkge.dev/docs/popover.md)
- [`range-calendar`](https://uipkge.dev/docs/range-calendar.md)
- [`select`](https://uipkge.dev/docs/select.md)
- [`separator`](https://uipkge.dev/docs/separator.md)
- [`sheet`](https://uipkge.dev/docs/sheet.md)
- [`table`](https://uipkge.dev/docs/table.md)

## Files installed

- [`components/ui/data-table/DataTable.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-table/components/ui/data-table/DataTable.vue) (15,351 chars)
- [`components/ui/data-table/DataTableColumnHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-table/components/ui/data-table/DataTableColumnHeader.vue) (1,907 chars)
- [`components/ui/data-table/DataTableFilterPopover.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-table/components/ui/data-table/DataTableFilterPopover.vue) (10,581 chars)
- [`components/ui/data-table/DataTableFilterSheet.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-table/components/ui/data-table/DataTableFilterSheet.vue) (10,408 chars)
- [`components/ui/data-table/DataTablePagination.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-table/components/ui/data-table/DataTablePagination.vue) (3,068 chars)
- [`components/ui/data-table/DataTableToolbar.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-table/components/ui/data-table/DataTableToolbar.vue) (11,641 chars)
- [`components/ui/data-table/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-table/components/ui/data-table/index.ts) (506 chars)

## Source

- Tree: [`packages/registry/components/data-table`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/data-table)
- Manifest: [`https://uipkge.dev/r/data-table.json`](https://uipkge.dev/r/data-table.json)
- Preview: [`https://uipkge.dev/components/data-table`](https://uipkge.dev/components/data-table)

---

# date-picker

> Single-date picker bound to an optional CalendarDate value.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/date-picker.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/date-picker`

## Usage

### Default

Single-date picker bound to an optional CalendarDate value.

```vue
<DatePicker v-model="date" class="max-w-xs" />
```

## Props

Extracted from `components/ui/date-picker/DatePicker.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `SingleValue \| MultipleValue \| RangeValue` | `null` | no |
| `type` | `DatePickerType` | `'single'` | no |
| `placeholder` | `string` | `'Pick a date'` | no |
| `disabled` | `boolean` | `false` | no |
| `readOnly` | `boolean` | `false` | no |
| `clearable` | `boolean` | `true` | no |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` | `'medium'` | no |
| `locale` | `string` | `'en-US'` | no |
| `numberOfMonths` | `number` | `1` | no |
| `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `0` | no |
| `fixedWeeks` | `boolean` | `false` | no |
| `minValue` | `string \| DateValue` | — | no |
| `maxValue` | `string \| DateValue` | — | no |
| `layout` | `DatePickerLayout` | `'default'` | no |
| `picker` | `DatePickerPicker` | `'day'` | no |
| `showCurrentDate` | `boolean` | `false` | no |
| `showTime` | `boolean` | `false` | no |
| `use24Hour` | `boolean` | `false` | no |
| `minuteStep` | `number` | `5` | no |
| `defaultTime` | `string` | `'12:00'` | no |
| `triggerClass` | `HTMLAttributes['class']` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `@internationalized/date`
- `lucide-vue-next`
- `reka-ui`

Other registry items (auto-installed):

- [`button`](https://uipkge.dev/docs/button.md)
- [`calendar`](https://uipkge.dev/docs/calendar.md)
- [`popover`](https://uipkge.dev/docs/popover.md)
- [`range-calendar`](https://uipkge.dev/docs/range-calendar.md)
- [`time-picker`](https://uipkge.dev/docs/time-picker.md)

## Files installed

- [`components/ui/date-picker/DatePicker.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/date-picker/components/ui/date-picker/DatePicker.vue) (18,359 chars)
- [`components/ui/date-picker/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/date-picker/components/ui/date-picker/index.ts) (112 chars)

## Source

- Tree: [`packages/registry/components/date-picker`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/date-picker)
- Manifest: [`https://uipkge.dev/r/date-picker.json`](https://uipkge.dev/r/date-picker.json)
- Preview: [`https://uipkge.dev/components/date-picker`](https://uipkge.dev/components/date-picker)

---

# date-time-picker

> Combined date and time picker bound to a single value.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/date-time-picker.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/date-time-picker`

## Usage

### Default

Combined date and time picker bound to a single value.

```vue
<DateTimePicker v-model="value" class="max-w-sm" />
```

## Props

Extracted from `components/ui/date-time-picker/DateTimePicker.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `string \| null` | `null` | no |
| `placeholder` | `string` | `'Pick a date & time'` | no |
| `disabled` | `boolean` | `false` | no |
| `readOnly` | `boolean` | `false` | no |
| `clearable` | `boolean` | `true` | no |
| `dateFormat` | `'short'` \| `'medium'` \| `'long'` \| `'full'` | `'medium'` | no |
| `locale` | `string` | `'en-US'` | no |
| `minuteStep` | `number` | `5` | no |
| `use24Hour` | `boolean` | `false` | no |
| `minValue` | `string \| DateValue` | — | no |
| `maxValue` | `string \| DateValue` | — | no |
| `triggerClass` | `HTMLAttributes['class']` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `reka-ui`

Other registry items (auto-installed):

- [`date-picker`](https://uipkge.dev/docs/date-picker.md)

## Files installed

- [`components/ui/date-time-picker/DateTimePicker.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/date-time-picker/components/ui/date-time-picker/DateTimePicker.vue) (1,526 chars)
- [`components/ui/date-time-picker/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/date-time-picker/components/ui/date-time-picker/index.ts) (65 chars)

## Source

- Tree: [`packages/registry/components/date-time-picker`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/date-time-picker)
- Manifest: [`https://uipkge.dev/r/date-time-picker.json`](https://uipkge.dev/r/date-time-picker.json)
- Preview: [`https://uipkge.dev/components/date-time-picker`](https://uipkge.dev/components/date-time-picker)

---

# dialog

> Header, description, and a footer with a cancel and a destructive primary action.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/dialog.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/dialog`

## Usage

### Confirmation dialog

Header, description, and a footer with a cancel and a destructive primary action.

```vue
<Dialog>
  <DialogTrigger as-child>
    <Button>Delete account…</Button>
  </DialogTrigger>
  <DialogContent class="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account and remove your data from the servers.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button variant="destructive">Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

### Form dialog

Use Dialog as a modal form. Inputs inside DialogContent.

```vue
<Dialog>
  <DialogTrigger as-child>
    <Button variant="outline">Edit profile</Button>
  </DialogTrigger>
  <DialogContent class="sm:max-w-md">
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>Make changes to your profile and save.</DialogDescription>
    </DialogHeader>
    <div class="grid gap-4 py-2">
      <div class="grid gap-2">
        <Label for="dlg-name">Name</Label>
        <Input id="dlg-name" model-value="Pedro Duarte" />
      </div>
      <div class="grid gap-2">
        <Label for="dlg-username">Username</Label>
        <Input id="dlg-username" model-value="@peduarte" />
      </div>
    </div>
    <DialogFooter>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

Other registry items (auto-installed):

- [`button`](https://uipkge.dev/docs/button.md)

## Files installed

- [`components/ui/dialog/Dialog.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/Dialog.vue) (594 chars)
- [`components/ui/dialog/DialogClose.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/DialogClose.vue) (278 chars)
- [`components/ui/dialog/DialogContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/DialogContent.vue) (1,994 chars)
- [`components/ui/dialog/DialogDescription.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/DialogDescription.vue) (679 chars)
- [`components/ui/dialog/DialogFooter.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/DialogFooter.vue) (634 chars)
- [`components/ui/dialog/DialogHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/DialogHeader.vue) (331 chars)
- [`components/ui/dialog/DialogOverlay.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/DialogOverlay.vue) (739 chars)
- [`components/ui/dialog/DialogScrollContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/DialogScrollContent.vue) (1,871 chars)
- [`components/ui/dialog/DialogTitle.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/DialogTitle.vue) (648 chars)
- [`components/ui/dialog/DialogTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/DialogTrigger.vue) (368 chars)
- [`components/ui/dialog/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog/components/ui/dialog/index.ts) (624 chars)

## Source

- Tree: [`packages/registry/components/dialog`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dialog)
- Manifest: [`https://uipkge.dev/r/dialog.json`](https://uipkge.dev/r/dialog.json)
- Preview: [`https://uipkge.dev/components/dialog`](https://uipkge.dev/components/dialog)

---

# empty-state

> Centered icon, title, description, and an action button slot.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/empty-state.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/empty-state`

## Usage

### Default

Centered icon, title, description, and an action button slot.

```vue
<EmptyState
  title="No messages"
  description="When you receive new messages, they'll appear here."
  :icon="Inbox"
>
  <template #actions>
    <Button>Refresh</Button>
  </template>
</EmptyState>
```

## Props

Extracted from `components/ui/empty-state/EmptyState.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `icon` | `Component` | — | no |
| `title` | `string` | — | no |
| `description` | `string` | — | no |
| `class` | `string` | — | no |

## Files installed

- [`components/ui/empty-state/EmptyState.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/empty-state/components/ui/empty-state/EmptyState.vue) (608 chars)
- [`components/ui/empty-state/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/empty-state/components/ui/empty-state/index.ts) (57 chars)

## Source

- Tree: [`packages/registry/components/empty-state`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/empty-state)
- Manifest: [`https://uipkge.dev/r/empty-state.json`](https://uipkge.dev/r/empty-state.json)
- Preview: [`https://uipkge.dev/components/empty-state`](https://uipkge.dev/components/empty-state)

---

# form

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/form.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/form`

## Dependencies

npm packages:

- `reka-ui`
- `vee-validate`

Other registry items (auto-installed):

- [`label`](https://uipkge.dev/docs/label.md)

## Files installed

- [`components/ui/form/FormControl.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/form/components/ui/form/FormControl.vue) (427 chars)
- [`components/ui/form/FormDescription.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/form/components/ui/form/FormDescription.vue) (431 chars)
- [`components/ui/form/FormItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/form/components/ui/form/FormItem.vue) (470 chars)
- [`components/ui/form/FormLabel.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/form/components/ui/form/FormLabel.vue) (572 chars)
- [`components/ui/form/FormMessage.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/form/components/ui/form/FormMessage.vue) (538 chars)
- [`components/ui/form/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/form/components/ui/form/index.ts) (437 chars)
- [`components/ui/form/injectionKeys.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/form/components/ui/form/injectionKeys.ts) (113 chars)
- [`components/ui/form/useFormField.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/form/components/ui/form/useFormField.ts) (816 chars)

## Source

- Tree: [`packages/registry/components/form`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/form)
- Manifest: [`https://uipkge.dev/r/form.json`](https://uipkge.dev/r/form.json)
- Preview: [`https://uipkge.dev/components/form`](https://uipkge.dev/components/form)

---

# dropdown-menu

> Label + grouped items with separators. Destructive item uses text-destructive.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/dropdown-menu.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/dropdown-menu`

## Usage

### Account menu

Label + grouped items with separators. Destructive item uses text-destructive.

```vue
<DropdownMenu>
  <DropdownMenuTrigger as-child>
    <Button variant="outline">Open menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-48">
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem><User class="size-4" /> Profile</DropdownMenuItem>
    <DropdownMenuItem><Settings class="size-4" /> Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem class="text-destructive focus:text-destructive"><LogOut class="size-4" /> Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

### Action menu

Used with a chevron-trigger or icon-only trigger.

```vue
<DropdownMenu>
  <DropdownMenuTrigger as-child>
    <Button>New <ChevronDown class="size-3.5" /></Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-44">
    <DropdownMenuItem><Plus class="size-4" /> Project</DropdownMenuItem>
    <DropdownMenuItem><Plus class="size-4" /> Team</DropdownMenuItem>
    <DropdownMenuItem><Plus class="size-4" /> Workspace</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/dropdown-menu/DropdownMenu.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenu.vue) (496 chars)
- [`components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue) (1,462 chars)
- [`components/ui/dropdown-menu/DropdownMenuContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuContent.vue) (1,538 chars)
- [`components/ui/dropdown-menu/DropdownMenuGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuGroup.vue) (315 chars)
- [`components/ui/dropdown-menu/DropdownMenuItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuItem.vue) (1,526 chars)
- [`components/ui/dropdown-menu/DropdownMenuLabel.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuLabel.vue) (766 chars)
- [`components/ui/dropdown-menu/DropdownMenuRadioGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue) (512 chars)
- [`components/ui/dropdown-menu/DropdownMenuRadioItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuRadioItem.vue) (1,454 chars)
- [`components/ui/dropdown-menu/DropdownMenuSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuSeparator.vue) (598 chars)
- [`components/ui/dropdown-menu/DropdownMenuShortcut.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuShortcut.vue) (362 chars)
- [`components/ui/dropdown-menu/DropdownMenuSub.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuSub.vue) (493 chars)
- [`components/ui/dropdown-menu/DropdownMenuSubContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuSubContent.vue) (1,303 chars)
- [`components/ui/dropdown-menu/DropdownMenuSubTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue) (1,303 chars)
- [`components/ui/dropdown-menu/DropdownMenuTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/DropdownMenuTrigger.vue) (400 chars)
- [`components/ui/dropdown-menu/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu/components/ui/dropdown-menu/index.ts) (1,098 chars)

## Source

- Tree: [`packages/registry/components/dropdown-menu`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/dropdown-menu)
- Manifest: [`https://uipkge.dev/r/dropdown-menu.json`](https://uipkge.dev/r/dropdown-menu.json)
- Preview: [`https://uipkge.dev/components/dropdown-menu`](https://uipkge.dev/components/dropdown-menu)

---

# file-upload

> Drop zone restricted to image files with click-to-browse fallback.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/file-upload.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/file-upload`

## Usage

### Default

Drop zone restricted to image files with click-to-browse fallback.

```vue
<FileUpload class="max-w-md" accept="image/*">
  <p class="text-sm font-medium">Drag & drop files here</p>
  <p class="text-muted-foreground text-xs mt-1">Or click to browse</p>
</FileUpload>
```

## Props

Extracted from `components/ui/file-upload/FileUpload.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `accept` | `string` | — | no |
| `multiple` | `boolean` | — | no |
| `disabled` | `boolean` | — | no |
| `modelValue` | `File[]` | — | no |

## Dependencies

npm packages:

- `lucide-vue-next`

## Files installed

- [`components/ui/file-upload/FileUpload.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/file-upload/components/ui/file-upload/FileUpload.vue) (2,526 chars)
- [`components/ui/file-upload/FileUploadContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/file-upload/components/ui/file-upload/FileUploadContent.vue) (286 chars)
- [`components/ui/file-upload/FileUploadItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/file-upload/components/ui/file-upload/FileUploadItem.vue) (1,000 chars)
- [`components/ui/file-upload/FileUploadItemName.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/file-upload/components/ui/file-upload/FileUploadItemName.vue) (301 chars)
- [`components/ui/file-upload/FileUploadItemSize.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/file-upload/components/ui/file-upload/FileUploadItemSize.vue) (308 chars)
- [`components/ui/file-upload/FileUploadTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/file-upload/components/ui/file-upload/FileUploadTrigger.vue) (291 chars)
- [`components/ui/file-upload/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/file-upload/components/ui/file-upload/index.ts) (410 chars)

## Source

- Tree: [`packages/registry/components/file-upload`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/file-upload)
- Manifest: [`https://uipkge.dev/r/file-upload.json`](https://uipkge.dev/r/file-upload.json)
- Preview: [`https://uipkge.dev/components/file-upload`](https://uipkge.dev/components/file-upload)

---

# grid

> Three-column grid with a small gap.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/grid.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/grid`

## Usage

### 3 columns

Three-column grid with a small gap.

```vue
<Grid :cols="3" :gap="3">
  <Card v-for="i in 6" :key="i"><CardContent class="p-4 text-center text-sm">{{ i }}</CardContent></Card>
</Grid>
```

### 4 columns

Four-column grid with a larger gap.

```vue
<Grid :cols="4" :gap="6">
  <Card v-for="i in 8" :key="i"><CardContent class="p-3 text-center text-sm">{{ i }}</CardContent></Card>
</Grid>
```

## Props

Extracted from `components/ui/grid/Col.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `cols` | `string \| number` | — | no |
| `offset` | `string \| number` | — | no |
| `order` | `ColOrder` | — | no |
| `md` | `string \| number` | — | no |
| `lg` | `string \| number` | — | no |
| `sm` | `string \| number` | — | no |
| `xl` | `string \| number` | — | no |
| `xxl` | `string \| number` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Files installed

- [`components/ui/grid/Col.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/grid/components/ui/grid/Col.vue) (2,474 chars)
- [`components/ui/grid/Container.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/grid/components/ui/grid/Container.vue) (588 chars)
- [`components/ui/grid/Row.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/grid/components/ui/grid/Row.vue) (1,285 chars)
- [`components/ui/grid/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/grid/components/ui/grid/index.ts) (249 chars)

## Source

- Tree: [`packages/registry/components/grid`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/grid)
- Manifest: [`https://uipkge.dev/r/grid.json`](https://uipkge.dev/r/grid.json)
- Preview: [`https://uipkge.dev/components/grid`](https://uipkge.dev/components/grid)

---

# hover-card

> Hover the trigger to reveal a card with avatar and details.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/hover-card.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/hover-card`

## Usage

### Default

Hover the trigger to reveal a card with avatar and details.

```vue
<HoverCard>
  <HoverCardTrigger as-child>
    <Button variant="link">@uipkge</Button>
  </HoverCardTrigger>
  <HoverCardContent class="w-72">
    <div class="flex gap-3">
      <Avatar><AvatarFallback>UI</AvatarFallback></Avatar>
      <div class="space-y-1">
        <p class="text-sm font-semibold">@uipkge</p>
        <p class="text-muted-foreground text-xs">Open-source UI registry. shadcn-vue compatible.</p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

## Files installed

- [`components/ui/hover-card/HoverCard.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/hover-card/components/ui/hover-card/HoverCard.vue) (472 chars)
- [`components/ui/hover-card/HoverCardContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/hover-card/components/ui/hover-card/HoverCardContent.vue) (1,288 chars)
- [`components/ui/hover-card/HoverCardTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/hover-card/components/ui/hover-card/HoverCardTrigger.vue) (309 chars)
- [`components/ui/hover-card/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/hover-card/components/ui/hover-card/index.ts) (193 chars)

## Source

- Tree: [`packages/registry/components/hover-card`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/hover-card)
- Manifest: [`https://uipkge.dev/r/hover-card.json`](https://uipkge.dev/r/hover-card.json)
- Preview: [`https://uipkge.dev/components/hover-card`](https://uipkge.dev/components/hover-card)

---

# icon-box

> Default and muted backgrounds, with optional icon-class for accent colors.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/icon-box.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/icon-box`

## Usage

### Variants

Default and muted backgrounds, with optional icon-class for accent colors.

```vue
<div class="flex flex-wrap items-center gap-3">
  <IconBox :icon="Bell" />
  <IconBox :icon="Heart" variant="muted" icon-class="text-rose-500" />
  <IconBox :icon="Star" variant="muted" icon-class="text-amber-500" />
</div>
```

## Props

Extracted from `components/ui/icon-box/IconBox.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `icon` | `Component` | — | yes |
| `variant` | `'primary'` \| `'muted'` \| `'custom'` | `'primary'` | no |
| `shape` | `'rounded'` \| `'circle'` | `'rounded'` | no |
| `size` | `'sm'` \| `'md'` \| `'lg'` | `'md'` | no |
| `class` | `string` | — | no |
| `iconClass` | `string` | — | no |

## Files installed

- [`components/ui/icon-box/IconBox.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/icon-box/components/ui/icon-box/IconBox.vue) (1,056 chars)
- [`components/ui/icon-box/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/icon-box/components/ui/icon-box/index.ts) (51 chars)

## Source

- Tree: [`packages/registry/components/icon-box`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/icon-box)
- Manifest: [`https://uipkge.dev/r/icon-box.json`](https://uipkge.dev/r/icon-box.json)
- Preview: [`https://uipkge.dev/components/icon-box`](https://uipkge.dev/components/icon-box)

---

# input

> Two-way bound with v-model. Plain text input with label.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/input.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/input`

## Usage

### Default

Two-way bound with v-model. Plain text input with label.

```vue
<div class="grid gap-2 max-w-sm">
  <Label for="email">Email</Label>
  <Input id="email" v-model="text" type="email" placeholder="you@example.com" />
  <p class="text-muted-foreground text-xs">Live: <code class="text-foreground">{{ text || '—' }}</code></p>
</div>
```

### With leading icon

Wrap the Input in a relative div and absolute-position the icon at left.

```vue
<div class="grid gap-2 max-w-sm">
  <Label for="search">Search</Label>
  <div class="relative">
    <Search class="text-muted-foreground absolute left-2.5 top-1/2 size-4 -translate-y-1/2" />
    <Input id="search" type="search" placeholder="Search…" class="pl-8" />
  </div>
</div>
```

### With trailing label

Pad the right and absolute-position a hint or unit.

```vue
<div class="grid gap-2 max-w-sm">
  <Label for="ig">Username</Label>
  <div class="relative">
    <Input id="ig" placeholder="username" class="pr-24" />
    <span class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground text-xs">@uipkge.dev</span>
  </div>
</div>
```

### Error state

Set aria-invalid=

```vue
<div class="grid gap-2 max-w-sm">
  <Label for="error" class="text-destructive">Email</Label>
  <Input id="error" model-value="invalid email" aria-invalid="true" />
  <p class="text-destructive text-xs">Please enter a valid email address.</p>
</div>
```

### Disabled & types

Disabled is read-only. Native types apply (number, password, email).

```vue
<div class="grid gap-3 max-w-sm">
  <Input disabled placeholder="Disabled" />
  <Input type="number" model-value="42" />
  <Input type="password" model-value="secret123" />
</div>
```

## Props

Extracted from `components/ui/input/Input.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `defaultValue` | `string \| number` | — | no |
| `modelValue` | `string \| number` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `@vueuse/core`

## Files installed

- [`components/ui/input/Input.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/input/components/ui/input/Input.vue) (1,291 chars)
- [`components/ui/input/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/input/components/ui/input/index.ts) (47 chars)

## Source

- Tree: [`packages/registry/components/input`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/input)
- Manifest: [`https://uipkge.dev/r/input.json`](https://uipkge.dev/r/input.json)
- Preview: [`https://uipkge.dev/components/input`](https://uipkge.dev/components/input)

---

# icons

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/icons.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/icons`

## Props

Extracted from `components/ui/icons/Icon.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `size` | `'xs'` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'2xl'` \| `'inherit'` | `'md'` | no |
| `color` | `string` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |
| `src` | `string` | — | no |
| `alt` | `string` | — | no |
| `rotation` | `number \| string` | — | no |
| `flip` | `'horizontal'` \| `'vertical'` \| `'both'` | — | no |
| `label` | `string` | — | no |
| `ariaLabel` | `string` | — | no |
| `inline` | `boolean` | `true` | no |

## Files installed

- [`components/ui/icons/Icon.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/icons/components/ui/icons/Icon.vue) (2,444 chars)
- [`components/ui/icons/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/icons/components/ui/icons/index.ts) (639 chars)

## Source

- Tree: [`packages/registry/components/icons`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/icons)
- Manifest: [`https://uipkge.dev/r/icons.json`](https://uipkge.dev/r/icons.json)
- Preview: [`https://uipkge.dev/components/icons`](https://uipkge.dev/components/icons)

---

# label

> Label paired with an Input via matching for/id attributes.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/label.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/label`

## Usage

### With input

Label paired with an Input via matching for/id attributes.

```vue
<div class="grid gap-2 max-w-sm">
  <Label for="name">Name</Label>
  <Input id="name" placeholder="Jane Doe" />
</div>
```

### Required and invalid

Destructive-colored label with required asterisk paired with an aria-invalid input.

```vue
<div class="grid gap-2 max-w-sm">
  <Label for="email" class="text-destructive">Email <span aria-hidden="true">*</span></Label>
  <Input id="email" type="email" aria-invalid="true" />
  <p class="text-destructive text-xs">Required field</p>
</div>
```

### Inline with checkbox

Muted label sitting next to a checkbox, linked via for/id.

```vue
<div class="flex items-center gap-2 max-w-sm">
  <input id="agree" type="checkbox" class="size-4 accent-primary" />
  <Label for="agree" class="text-muted-foreground">Inline label next to checkbox</Label>
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

## Files installed

- [`components/ui/label/Label.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/label/components/ui/label/Label.vue) (751 chars)
- [`components/ui/label/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/label/components/ui/label/index.ts) (47 chars)

## Source

- Tree: [`packages/registry/components/label`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/label)
- Manifest: [`https://uipkge.dev/r/label.json`](https://uipkge.dev/r/label.json)
- Preview: [`https://uipkge.dev/components/label`](https://uipkge.dev/components/label)

---

# labeled-value

> Stacked label-over-value pairs arranged in a responsive three-column grid.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/labeled-value.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/labeled-value`

## Usage

### Default

Stacked label-over-value pairs arranged in a responsive three-column grid.

```vue
<div class="grid gap-3 sm:grid-cols-3 max-w-2xl">
  <LabeledValue label="Status" value="Active" />
  <LabeledValue label="Plan" value="Pro · Annual" />
  <LabeledValue label="Renewal" value="Sep 12, 2026" />
  <LabeledValue label="Owner" value="Admin User" />
  <LabeledValue label="Members" value="24" />
  <LabeledValue label="Created" value="Mar 4, 2025" />
</div>
```

## Props

Extracted from `components/ui/labeled-value/LabeledValue.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `label` | `string` | — | yes |
| `value` | `string` | — | no |
| `class` | `string` | — | no |

## Files installed

- [`components/ui/labeled-value/LabeledValue.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/labeled-value/components/ui/labeled-value/LabeledValue.vue) (396 chars)
- [`components/ui/labeled-value/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/labeled-value/components/ui/labeled-value/index.ts) (61 chars)

## Source

- Tree: [`packages/registry/components/labeled-value`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/labeled-value)
- Manifest: [`https://uipkge.dev/r/labeled-value.json`](https://uipkge.dev/r/labeled-value.json)
- Preview: [`https://uipkge.dev/components/labeled-value`](https://uipkge.dev/components/labeled-value)

---

# list

> Vertical list with two-line items and a trailing chevron, suitable for settings menus.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/list.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/list`

## Usage

### Default

Vertical list with two-line items and a trailing chevron, suitable for settings menus.

```vue
<List class="max-w-md">
  <ListItem v-for="i in items" :key="i.id" class="cursor-pointer">
    <div class="flex-1">
      <p class="text-sm font-medium">{{ i.label }}</p>
      <p class="text-muted-foreground text-xs">{{ i.desc }}</p>
    </div>
    <ChevronRight class="text-muted-foreground size-4" />
  </ListItem>
</List>
```

## Props

Extracted from `components/ui/list/List.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `as` | `'ul'` \| `'ol'` \| `'div'` | — | no |

## Files installed

- [`components/ui/list/List.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/list/components/ui/list/List.vue) (358 chars)
- [`components/ui/list/ListItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/list/components/ui/list/ListItem.vue) (719 chars)
- [`components/ui/list/ListSubheader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/list/components/ui/list/ListSubheader.vue) (444 chars)
- [`components/ui/list/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/list/components/ui/list/index.ts) (161 chars)

## Source

- Tree: [`packages/registry/components/list`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/list)
- Manifest: [`https://uipkge.dev/r/list.json`](https://uipkge.dev/r/list.json)
- Preview: [`https://uipkge.dev/components/list`](https://uipkge.dev/components/list)

---

# menu

> Trigger button opens a menu with label, separators, item icons, and a destructive item.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/menu.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/menu`

## Usage

### Default

Trigger button opens a menu with label, separators, item icons, and a destructive item.

```vue
<Menu>
  <MenuTrigger as-child>
    <Button variant="outline">
      Menu <ChevronDown class="size-4" />
    </Button>
  </MenuTrigger>
  <MenuContent>
    <MenuLabel>My account</MenuLabel>
    <MenuSeparator />
    <MenuItem><User class="size-4" /> Profile</MenuItem>
    <MenuItem><Settings class="size-4" /> Settings</MenuItem>
    <MenuSeparator />
    <MenuItem class="text-destructive focus:text-destructive"><LogOut class="size-4" /> Log out</MenuItem>
  </MenuContent>
</Menu>
```

## Dependencies

npm packages:

- `reka-ui`

## Files installed

- [`components/ui/menu/Menu.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menu/components/ui/menu/Menu.vue) (452 chars)
- [`components/ui/menu/MenuContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menu/components/ui/menu/MenuContent.vue) (1,108 chars)
- [`components/ui/menu/MenuGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menu/components/ui/menu/MenuGroup.vue) (152 chars)
- [`components/ui/menu/MenuItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menu/components/ui/menu/MenuItem.vue) (852 chars)
- [`components/ui/menu/MenuLabel.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menu/components/ui/menu/MenuLabel.vue) (296 chars)
- [`components/ui/menu/MenuSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menu/components/ui/menu/MenuSeparator.vue) (199 chars)
- [`components/ui/menu/MenuTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menu/components/ui/menu/MenuTrigger.vue) (222 chars)
- [`components/ui/menu/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menu/components/ui/menu/index.ts) (389 chars)

## Source

- Tree: [`packages/registry/components/menu`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menu)
- Manifest: [`https://uipkge.dev/r/menu.json`](https://uipkge.dev/r/menu.json)
- Preview: [`https://uipkge.dev/components/menu`](https://uipkge.dev/components/menu)

---

# native-select

> Styled wrapper around a native select element with v-model binding.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/native-select.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/native-select`

## Usage

### Default

Styled wrapper around a native select element with v-model binding.

```vue
<div class="space-y-2 max-w-xs">
  <Label>Native select</Label>
  <NativeSelect v-model="value">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </NativeSelect>
  <p class="text-muted-foreground text-xs">Value: <code class="text-foreground">{{ value }}</code></p>
</div>
```

## Props

Extracted from `components/ui/native-select/NativeSelect.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `AcceptableValue \| AcceptableValue[]` | `undefined` | no |
| `class` | `HTMLAttributes['class']` | — | no |
| `label` | `string` | `''` | no |
| `placeholder` | `string` | `''` | no |
| `disabled` | `boolean` | `false` | no |
| `readonly` | `boolean` | `false` | no |
| `error` | `boolean` | `false` | no |
| `errorMessages` | `string \| string[]` | `() => [], successMessages: () => [], hint: '', variant: '…` | no |
| `successMessages` | `string \| string[]` | — | no |
| `hint` | `string` | — | no |
| `variant` | `'outlined'` \| `'filled'` \| `'solo'` \| `'underlined'` | — | no |
| `density` | `'compact'` \| `'default'` \| `'comfortable'` | — | no |
| `color` | `'primary'` \| `'secondary'` \| `'error'` \| `'success'` \| `'warning'` \| `'info'` | — | no |
| `hideDetails` | `boolean` | — | no |
| `bgColor` | `string` | — | no |

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/native-select/NativeSelect.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/native-select/components/ui/native-select/NativeSelect.vue) (4,833 chars)
- [`components/ui/native-select/NativeSelectOptGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/native-select/components/ui/native-select/NativeSelectOptGroup.vue) (451 chars)
- [`components/ui/native-select/NativeSelectOption.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/native-select/components/ui/native-select/NativeSelectOption.vue) (445 chars)
- [`components/ui/native-select/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/native-select/components/ui/native-select/index.ts) (211 chars)

## Source

- Tree: [`packages/registry/components/native-select`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/native-select)
- Manifest: [`https://uipkge.dev/r/native-select.json`](https://uipkge.dev/r/native-select.json)
- Preview: [`https://uipkge.dev/components/native-select`](https://uipkge.dev/components/native-select)

---

# menubar

> Horizontal menubar with File, Edit, and View menus and keyboard shortcut hints.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/menubar.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/menubar`

## Usage

### Default

Horizontal menubar with File, Edit, and View menus and keyboard shortcut hints.

```vue
<Menubar class="max-w-md">
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
      <MenubarItem>New Window <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print… <MenubarShortcut>⌘P</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
      <MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Reload <MenubarShortcut>⌘R</MenubarShortcut></MenubarItem>
      <MenubarItem>Toggle Fullscreen</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/menubar/Menubar.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/Menubar.vue) (795 chars)
- [`components/ui/menubar/MenubarCheckboxItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarCheckboxItem.vue) (1,406 chars)
- [`components/ui/menubar/MenubarContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarContent.vue) (1,333 chars)
- [`components/ui/menubar/MenubarGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarGroup.vue) (284 chars)
- [`components/ui/menubar/MenubarItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarItem.vue) (1,536 chars)
- [`components/ui/menubar/MenubarLabel.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarLabel.vue) (632 chars)
- [`components/ui/menubar/MenubarMenu.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarMenu.vue) (278 chars)
- [`components/ui/menubar/MenubarRadioGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarRadioGroup.vue) (471 chars)
- [`components/ui/menubar/MenubarRadioItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarRadioItem.vue) (1,397 chars)
- [`components/ui/menubar/MenubarSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarSeparator.vue) (635 chars)
- [`components/ui/menubar/MenubarShortcut.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarShortcut.vue) (345 chars)
- [`components/ui/menubar/MenubarSub.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarSub.vue) (515 chars)
- [`components/ui/menubar/MenubarSubContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarSubContent.vue) (1,393 chars)
- [`components/ui/menubar/MenubarSubTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarSubTrigger.vue) (1,064 chars)
- [`components/ui/menubar/MenubarTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/MenubarTrigger.vue) (867 chars)
- [`components/ui/menubar/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar/components/ui/menubar/index.ts) (971 chars)

## Source

- Tree: [`packages/registry/components/menubar`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/menubar)
- Manifest: [`https://uipkge.dev/r/menubar.json`](https://uipkge.dev/r/menubar.json)
- Preview: [`https://uipkge.dev/components/menubar`](https://uipkge.dev/components/menubar)

---

# navigation-menu

> Top-level nav with two triggers, each opening a panel of grouped link items.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/navigation-menu.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/navigation-menu`

## Usage

### Default

Top-level nav with two triggers, each opening a panel of grouped link items.

```vue
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid gap-2 p-4 w-72">
          <li><a href="#" class="hover:bg-muted block rounded-md p-2 text-sm">Introduction</a></li>
          <li><a href="#" class="hover:bg-muted block rounded-md p-2 text-sm">Installation</a></li>
          <li><a href="#" class="hover:bg-muted block rounded-md p-2 text-sm">Typography</a></li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid gap-2 p-4 w-72">
          <li><a href="#" class="hover:bg-muted block rounded-md p-2 text-sm">Button</a></li>
          <li><a href="#" class="hover:bg-muted block rounded-md p-2 text-sm">Card</a></li>
          <li><a href="#" class="hover:bg-muted block rounded-md p-2 text-sm">Dialog</a></li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `class-variance-authority`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/navigation-menu/NavigationMenu.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/navigation-menu/components/ui/navigation-menu/NavigationMenu.vue) (1,103 chars)
- [`components/ui/navigation-menu/NavigationMenuContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/navigation-menu/components/ui/navigation-menu/NavigationMenuContent.vue) (2,215 chars)
- [`components/ui/navigation-menu/NavigationMenuIndicator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/navigation-menu/components/ui/navigation-menu/NavigationMenuIndicator.vue) (989 chars)
- [`components/ui/navigation-menu/NavigationMenuItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/navigation-menu/components/ui/navigation-menu/NavigationMenuItem.vue) (577 chars)
- [`components/ui/navigation-menu/NavigationMenuLink.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/navigation-menu/components/ui/navigation-menu/NavigationMenuLink.vue) (1,261 chars)
- [`components/ui/navigation-menu/NavigationMenuList.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/navigation-menu/components/ui/navigation-menu/NavigationMenuList.vue) (718 chars)
- [`components/ui/navigation-menu/NavigationMenuTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/navigation-menu/components/ui/navigation-menu/NavigationMenuTrigger.vue) (956 chars)
- [`components/ui/navigation-menu/NavigationMenuViewport.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/navigation-menu/components/ui/navigation-menu/NavigationMenuViewport.vue) (1,165 chars)
- [`components/ui/navigation-menu/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/navigation-menu/components/ui/navigation-menu/index.ts) (1,217 chars)

## Source

- Tree: [`packages/registry/components/navigation-menu`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/navigation-menu)
- Manifest: [`https://uipkge.dev/r/navigation-menu.json`](https://uipkge.dev/r/navigation-menu.json)
- Preview: [`https://uipkge.dev/components/navigation-menu`](https://uipkge.dev/components/navigation-menu)

---

# number-field

> Numeric input with increment and decrement buttons, bounded by min and max.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/number-field.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/number-field`

## Usage

### Default

Numeric input with increment and decrement buttons, bounded by min and max.

```vue
<div class="space-y-2 max-w-xs">
  <Label for="qty">Quantity</Label>
  <NumberField id="qty" v-model="value" :min="0" :max="20">
    <NumberFieldContent>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldContent>
  </NumberField>
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/number-field/NumberField.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/number-field/components/ui/number-field/NumberField.vue) (723 chars)
- [`components/ui/number-field/NumberFieldContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/number-field/components/ui/number-field/NumberFieldContent.vue) (422 chars)
- [`components/ui/number-field/NumberFieldDecrement.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/number-field/components/ui/number-field/NumberFieldDecrement.vue) (832 chars)
- [`components/ui/number-field/NumberFieldIncrement.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/number-field/components/ui/number-field/NumberFieldIncrement.vue) (831 chars)
- [`components/ui/number-field/NumberFieldInput.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/number-field/components/ui/number-field/NumberFieldInput.vue) (629 chars)
- [`components/ui/number-field/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/number-field/components/ui/number-field/index.ts) (355 chars)

## Source

- Tree: [`packages/registry/components/number-field`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/number-field)
- Manifest: [`https://uipkge.dev/r/number-field.json`](https://uipkge.dev/r/number-field.json)
- Preview: [`https://uipkge.dev/components/number-field`](https://uipkge.dev/components/number-field)

---

# page

> Page layout with a header (title, description, action slot) and a card body region.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/page.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/page`

## Usage

### Default

Page layout with a header (title, description, action slot) and a card body region.

```vue
<Page>
  <PageHeader>
    <PageHeaderHeading title="Page header" description="Page is the root layout for app screens. PageHeader stacks title + actions." />
    <template #actions>
      <Button variant="outline" size="sm">Cancel</Button>
      <Button size="sm">Save</Button>
    </template>
  </PageHeader>

  <Card>
    <CardContent class="py-8 text-center text-sm text-muted-foreground">
      Page body content goes here. Use SectionCard, blocks, or your own grid layout below the header.
    </CardContent>
  </Card>
</Page>
```

## Props

Extracted from `components/ui/page/Page.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `string` | — | no |

## Files installed

- [`components/ui/page/Page.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/page/components/ui/page/Page.vue) (198 chars)
- [`components/ui/page/PageBody.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/page/components/ui/page/PageBody.vue) (189 chars)
- [`components/ui/page/PageHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/page/components/ui/page/PageHeader.vue) (318 chars)
- [`components/ui/page/PageHeaderHeading.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/page/components/ui/page/PageHeaderHeading.vue) (388 chars)
- [`components/ui/page/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/page/components/ui/page/index.ts) (226 chars)

## Source

- Tree: [`packages/registry/components/page`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/page)
- Manifest: [`https://uipkge.dev/r/page.json`](https://uipkge.dev/r/page.json)
- Preview: [`https://uipkge.dev/components/page`](https://uipkge.dev/components/page)

---

# pagination

> Pagination with prev/next, edge pages, ellipses, and an active page indicator.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/pagination.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/pagination`

## Usage

### Default

Pagination with prev/next, edge pages, ellipses, and an active page indicator.

```vue
<Pagination v-slot="{ page }" :items-per-page="10" :total="100" :sibling-count="1" show-edges :default-page="3">
  <PaginationContent v-slot="{ items }">
    <PaginationPrevious />
    <template v-for="(item, index) in items" :key="index">
      <PaginationItem v-if="item.type === 'page'" :value="item.value" :is-active="item.value === page">
        {{ item.value }}
      </PaginationItem>
      <PaginationEllipsis v-else :index="index" />
    </template>
    <PaginationNext />
  </PaginationContent>
</Pagination>
```

## Dependencies

npm packages:

- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/pagination/Pagination.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pagination/components/ui/pagination/Pagination.vue) (587 chars)
- [`components/ui/pagination/PaginationEllipsis.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pagination/components/ui/pagination/PaginationEllipsis.vue) (183 chars)
- [`components/ui/pagination/PaginationFirst.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pagination/components/ui/pagination/PaginationFirst.vue) (262 chars)
- [`components/ui/pagination/PaginationLast.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pagination/components/ui/pagination/PaginationLast.vue) (260 chars)
- [`components/ui/pagination/PaginationList.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pagination/components/ui/pagination/PaginationList.vue) (167 chars)
- [`components/ui/pagination/PaginationListItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pagination/components/ui/pagination/PaginationListItem.vue) (406 chars)
- [`components/ui/pagination/PaginationNext.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pagination/components/ui/pagination/PaginationNext.vue) (258 chars)
- [`components/ui/pagination/PaginationPrev.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pagination/components/ui/pagination/PaginationPrev.vue) (256 chars)
- [`components/ui/pagination/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pagination/components/ui/pagination/index.ts) (530 chars)

## Source

- Tree: [`packages/registry/components/pagination`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pagination)
- Manifest: [`https://uipkge.dev/r/pagination.json`](https://uipkge.dev/r/pagination.json)
- Preview: [`https://uipkge.dev/components/pagination`](https://uipkge.dev/components/pagination)

---

# pin-input

> Six-slot one-time code input bound to a string array model.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/pin-input.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/pin-input`

## Usage

### Default

Six-slot one-time code input bound to a string array model.

```vue
<div class="space-y-2">
  <Label>One-time code</Label>
  <PinInput v-model="value" :length="6" placeholder="•">
    <PinInputGroup>
      <PinInputSlot v-for="(_, i) in 6" :key="i" :index="i" />
    </PinInputGroup>
  </PinInput>
  <p class="text-muted-foreground text-xs">Value: <code class="text-foreground">{{ value.join('') || '—' }}</code></p>
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/pin-input/PinInput.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pin-input/components/ui/pin-input/PinInput.vue) (879 chars)
- [`components/ui/pin-input/PinInputGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pin-input/components/ui/pin-input/PinInputGroup.vue) (607 chars)
- [`components/ui/pin-input/PinInputSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pin-input/components/ui/pin-input/PinInputSeparator.vue) (413 chars)
- [`components/ui/pin-input/PinInputSlot.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pin-input/components/ui/pin-input/PinInputSlot.vue) (1,056 chars)
- [`components/ui/pin-input/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pin-input/components/ui/pin-input/index.ts) (248 chars)

## Source

- Tree: [`packages/registry/components/pin-input`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/pin-input)
- Manifest: [`https://uipkge.dev/r/pin-input.json`](https://uipkge.dev/r/pin-input.json)
- Preview: [`https://uipkge.dev/components/pin-input`](https://uipkge.dev/components/pin-input)

---

# progress

> Progress bar paired with a label and percentage row above the track.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/progress.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/progress`

## Usage

### With label

Progress bar paired with a label and percentage row above the track.

```vue
<div class="space-y-3 max-w-md">
  <div>
    <div class="flex justify-between text-xs text-muted-foreground mb-1.5">
      <span>Loading…</span>
      <span>33%</span>
    </div>
    <Progress :model-value="33" />
  </div>
  <div>
    <div class="flex justify-between text-xs text-muted-foreground mb-1.5">
      <span>Almost done</span>
      <span>83%</span>
    </div>
    <Progress :model-value="83" />
  </div>
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

## Files installed

- [`components/ui/progress/Progress.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/progress/components/ui/progress/Progress.vue) (863 chars)
- [`components/ui/progress/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/progress/components/ui/progress/index.ts) (53 chars)

## Source

- Tree: [`packages/registry/components/progress`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/progress)
- Manifest: [`https://uipkge.dev/r/progress.json`](https://uipkge.dev/r/progress.json)
- Preview: [`https://uipkge.dev/components/progress`](https://uipkge.dev/components/progress)

---

# progress-linear

> Linear progress bar driven by a fixed model value.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/progress-linear.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/progress-linear`

## Usage

### Determinate

Linear progress bar driven by a fixed model value.

```vue
<div class="max-w-md">
  <ProgressLinear :model-value="60" />
</div>
```

### Indeterminate

Animated bar for unknown-duration tasks.

```vue
<div class="max-w-md">
  <ProgressLinear indeterminate />
</div>
```

## Props

Extracted from `components/ui/progress-linear/ProgressLinear.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `modelValue` | `number` | `0` | no |
| `bgColor` | `string` | — | no |
| `buffer` | `number` | — | no |
| `color` | `string` | — | no |
| `height` | `number \| string` | — | no |
| `indeterminate` | `boolean` | `false` | no |
| `reverse` | `boolean` | `false` | no |
| `rounded` | `'none'` \| `'sm'` \| `'default'` \| `'md'` \| `'lg'` \| `'xl'` \| `'full'` | — | no |
| `stream` | `boolean` | `false` | no |
| `striped` | `boolean` | `false` | no |
| `active` | `boolean` | `true` | no |

## Dependencies

npm packages:

- `class-variance-authority`

## Files installed

- [`components/ui/progress-linear/ProgressLinear.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/progress-linear/components/ui/progress-linear/ProgressLinear.vue) (5,898 chars)
- [`components/ui/progress-linear/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/progress-linear/components/ui/progress-linear/index.ts) (65 chars)

## Source

- Tree: [`packages/registry/components/progress-linear`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/progress-linear)
- Manifest: [`https://uipkge.dev/r/progress-linear.json`](https://uipkge.dev/r/progress-linear.json)
- Preview: [`https://uipkge.dev/components/progress-linear`](https://uipkge.dev/components/progress-linear)

---

# radio-group

> Single-select group of mutually exclusive options.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/radio-group.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/radio-group`

## Usage

### Default

Single-select group of mutually exclusive options.

```vue
<RadioGroup v-model="value">
  <div class="flex items-center gap-2">
    <RadioGroupItem id="r1" value="default" />
    <Label for="r1">Default</Label>
  </div>
  <div class="flex items-center gap-2">
    <RadioGroupItem id="r2" value="comfortable" />
    <Label for="r2">Comfortable</Label>
  </div>
  <div class="flex items-center gap-2">
    <RadioGroupItem id="r3" value="compact" />
    <Label for="r3">Compact</Label>
  </div>
</RadioGroup>
```

## Props

Extracted from `components/ui/radio-group/RadioGroup.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `modelValue` | `any` | — | no |
| `defaultValue` | `any` | — | no |
| `disabled` | `boolean` | `false` | no |
| `orientation` | `'horizontal'` \| `'vertical'` | `'vertical'` | no |
| `loop` | `boolean` | `true` | no |
| `label` | `string` | — | no |
| `hint` | `string` | — | no |
| `errorMessages` | `string \| string[]` | — | no |
| `error` | `boolean` | — | no |
| `density` | `'compact'` \| `'default'` \| `'comfortable'` | `'default'` | no |
| `flat` | `boolean` | `false` | no |
| `bordered` | `boolean` | `false` | no |
| `dir` | `'ltr'` \| `'rtl'` | — | no |

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/radio-group/RadioGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/radio-group/components/ui/radio-group/RadioGroup.vue) (4,253 chars)
- [`components/ui/radio-group/RadioGroupItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/radio-group/components/ui/radio-group/RadioGroupItem.vue) (5,318 chars)
- [`components/ui/radio-group/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/radio-group/components/ui/radio-group/index.ts) (122 chars)

## Source

- Tree: [`packages/registry/components/radio-group`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/radio-group)
- Manifest: [`https://uipkge.dev/r/radio-group.json`](https://uipkge.dev/r/radio-group.json)
- Preview: [`https://uipkge.dev/components/radio-group`](https://uipkge.dev/components/radio-group)

---

# popover

> Click the trigger to open. PopoverContent floats above the page.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/popover.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/popover`

## Usage

### With form fields

Click the trigger to open. PopoverContent floats above the page.

```vue
<Popover>
  <PopoverTrigger as-child>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent class="w-80">
    <div class="space-y-2">
      <h4 class="font-medium leading-none">Dimensions</h4>
      <p class="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
    </div>
    <div class="grid gap-2 mt-4">
      <div class="grid grid-cols-3 items-center gap-3">
        <Label for="width">Width</Label>
        <Input id="width" model-value="100%" class="col-span-2 h-8" />
      </div>
      <div class="grid grid-cols-3 items-center gap-3">
        <Label for="height">Height</Label>
        <Input id="height" model-value="25px" class="col-span-2 h-8" />
      </div>
    </div>
  </PopoverContent>
</Popover>
```

### Compact info

Use a smaller width for short summaries.

```vue
<Popover>
  <PopoverTrigger as-child>
    <Button variant="ghost" size="sm">Show details</Button>
  </PopoverTrigger>
  <PopoverContent class="w-56 text-sm space-y-1">
    <p class="font-medium">Active session</p>
    <p class="text-muted-foreground text-xs">Started 2h ago · IP 192.0.2.1</p>
  </PopoverContent>
</Popover>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

## Files installed

- [`components/ui/popover/Popover.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/popover/components/ui/popover/Popover.vue) (455 chars)
- [`components/ui/popover/PopoverAnchor.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/popover/components/ui/popover/PopoverAnchor.vue) (290 chars)
- [`components/ui/popover/PopoverContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/popover/components/ui/popover/PopoverContent.vue) (1,414 chars)
- [`components/ui/popover/PopoverTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/popover/components/ui/popover/PopoverTrigger.vue) (296 chars)
- [`components/ui/popover/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/popover/components/ui/popover/index.ts) (244 chars)

## Source

- Tree: [`packages/registry/components/popover`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/popover)
- Manifest: [`https://uipkge.dev/r/popover.json`](https://uipkge.dev/r/popover.json)
- Preview: [`https://uipkge.dev/components/popover`](https://uipkge.dev/components/popover)

---

# progress-item

> Stacked progress rows with label, value, secondary label, and per-row color index.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/progress-item.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/progress-item`

## Usage

### Default

Stacked progress rows with label, value, secondary label, and per-row color index.

```vue
<div class="space-y-3 max-w-md">
  <ProgressItem label="Engineering" :value="42" secondary-label="42%" :color-index="0" />
  <ProgressItem label="Product" :value="22" secondary-label="22%" :color-index="1" />
  <ProgressItem label="Design" :value="14" secondary-label="14%" :color-index="2" />
  <ProgressItem label="Sales" :value="12" secondary-label="12%" :color-index="3" />
  <ProgressItem label="Marketing" :value="10" secondary-label="10%" :color-index="4" />
</div>
```

## Props

Extracted from `components/ui/progress-item/ProgressItem.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `label` | `string` | — | yes |
| `value` | `number` | — | yes |
| `secondaryLabel` | `string` | — | no |
| `barClass` | `string` | — | no |
| `class` | `string` | — | no |
| `colorIndex` | `number` | — | no |

## Dependencies

Other registry items (auto-installed):

- [`progress`](https://uipkge.dev/docs/progress.md)

## Files installed

- [`components/ui/progress-item/ProgressItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/progress-item/components/ui/progress-item/ProgressItem.vue) (1,309 chars)
- [`components/ui/progress-item/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/progress-item/components/ui/progress-item/index.ts) (61 chars)

## Source

- Tree: [`packages/registry/components/progress-item`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/progress-item)
- Manifest: [`https://uipkge.dev/r/progress-item.json`](https://uipkge.dev/r/progress-item.json)
- Preview: [`https://uipkge.dev/components/progress-item`](https://uipkge.dev/components/progress-item)

---

# range-calendar

> Calendar that selects a start and end date inclusive of the range between them.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/range-calendar.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/range-calendar`

## Usage

### Default

Calendar that selects a start and end date inclusive of the range between them.

```vue
<RangeCalendar v-model="range" class="rounded-md border" />
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

Other registry items (auto-installed):

- [`button`](https://uipkge.dev/docs/button.md)

## Files installed

- [`components/ui/range-calendar/RangeCalendar.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendar.vue) (2,155 chars)
- [`components/ui/range-calendar/RangeCalendarCell.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarCell.vue) (1,037 chars)
- [`components/ui/range-calendar/RangeCalendarCellTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarCellTrigger.vue) (1,915 chars)
- [`components/ui/range-calendar/RangeCalendarGrid.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarGrid.vue) (683 chars)
- [`components/ui/range-calendar/RangeCalendarGridBody.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarGridBody.vue) (340 chars)
- [`components/ui/range-calendar/RangeCalendarGridHead.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarGridHead.vue) (340 chars)
- [`components/ui/range-calendar/RangeCalendarGridRow.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarGridRow.vue) (659 chars)
- [`components/ui/range-calendar/RangeCalendarHeadCell.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarHeadCell.vue) (738 chars)
- [`components/ui/range-calendar/RangeCalendarHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarHeader.vue) (716 chars)
- [`components/ui/range-calendar/RangeCalendarHeading.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarHeading.vue) (840 chars)
- [`components/ui/range-calendar/RangeCalendarNextButton.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarNextButton.vue) (975 chars)
- [`components/ui/range-calendar/RangeCalendarPrevButton.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/RangeCalendarPrevButton.vue) (972 chars)
- [`components/ui/range-calendar/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar/components/ui/range-calendar/index.ts) (922 chars)

## Source

- Tree: [`packages/registry/components/range-calendar`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-calendar)
- Manifest: [`https://uipkge.dev/r/range-calendar.json`](https://uipkge.dev/r/range-calendar.json)
- Preview: [`https://uipkge.dev/components/range-calendar`](https://uipkge.dev/components/range-calendar)

---

# range-slider

> Two-handle slider for selecting a numeric range bounded by min and max.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/range-slider.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/range-slider`

## Usage

### Default

Two-handle slider for selecting a numeric range bounded by min and max.

```vue
<div class="space-y-3 max-w-md">
  <RangeSlider v-model="value" :max="100" :step="1" />
  <p class="text-muted-foreground text-xs">Value: <code class="text-foreground">{{ value.join(' – ') }}</code></p>
</div>
```

## Props

Extracted from `components/ui/range-slider/RangeSlider.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `modelValue` | `[number, number]` | — | no |
| `defaultValue` | `[number, number]` | — | no |
| `disabled` | `boolean` | — | no |
| `min` | `number` | `0` | no |
| `max` | `number` | `100` | no |
| `step` | `number` | `1` | no |
| `label` | `string` | — | no |
| `hint` | `string` | — | no |
| `errorMessages` | `string \| string[]` | — | no |
| `error` | `boolean` | — | no |
| `color` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info' \| string` | — | no |
| `thumbSize` | `'sm'` \| `'md'` \| `'lg'` | `'md'` | no |
| `trackHeight` | `'sm'` \| `'md'` \| `'lg'` | `'md'` | no |
| `showTicks` | `boolean` | — | no |
| `tickInterval` | `number` | — | no |
| `thumbLabel` | `boolean` | — | no |
| `alwaysDirty` | `boolean` | — | no |
| `inverted` | `boolean` | — | no |
| `density` | `'compact'` \| `'default'` \| `'comfortable'` | `'default'` | no |
| `hideThumbLabel` | `boolean` | — | no |
| `thumbLabelFormat` | `(value: number) => string` | — | no |
| `strict` | `boolean` | — | no |

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

## Files installed

- [`components/ui/range-slider/RangeSlider.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-slider/components/ui/range-slider/RangeSlider.vue) (7,582 chars)
- [`components/ui/range-slider/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-slider/components/ui/range-slider/index.ts) (1,339 chars)

## Source

- Tree: [`packages/registry/components/range-slider`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/range-slider)
- Manifest: [`https://uipkge.dev/r/range-slider.json`](https://uipkge.dev/r/range-slider.json)
- Preview: [`https://uipkge.dev/components/range-slider`](https://uipkge.dev/components/range-slider)

---

# rating

> Star rating input with half-step support up to a max of five.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/rating.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/rating`

## Usage

### Default

Star rating input with half-step support up to a max of five.

```vue
<div class="space-y-3">
  <Rating v-model="value" :max="5" allow-half />
  <p class="text-muted-foreground text-xs">Value: <code class="text-foreground">{{ value }}</code></p>
</div>
```

## Props

Extracted from `components/ui/rating/Rating.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `number` | `0` | no |
| `max` | `number` | `5` | no |
| `readonly` | `boolean` | `false` | no |
| `disabled` | `boolean` | `false` | no |
| `density` | `'compact'` \| `'default'` \| `'comfortable'` | `'default'` | no |
| `color` | `string` | `'rgb(234, 179, 8)'` | no |
| `clearable` | `boolean` | `false` | no |
| `hover` | `boolean` | `false` | no |
| `itemAriaLabel` | `string` | `'rating'` | no |
| `emptyIcon` | `string` | `'mdi-star-outline'` | no |
| `fullIcon` | `string` | `'mdi-star'` | no |
| `halfIcon` | `string` | `'mdi-star-half-full'` | no |
| `float` | `boolean` | `false` | no |
| `size` | `'x-small'` \| `'small'` \| `'medium'` \| `'large'` \| `'x-large'` | `'medium'` | no |
| `class` | `HTMLAttributes['class']` | — | no |
| `showValue` | `boolean` | `false` | no |
| `variant` | `'outlined'` \| `'filled'` \| `'soft'` | `'outlined'` | no |
| `halfIncrements` | `boolean` | `false` | no |
| `tooltips` | `string[]` | — | no |
| `iconSet` | `'mdi'` \| `'heroicons'` \| `'lucide'` | `'mdi'` | no |

## Files installed

- [`components/ui/rating/Rating.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/rating/components/ui/rating/Rating.vue) (7,533 chars)
- [`components/ui/rating/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/rating/components/ui/rating/index.ts) (49 chars)

## Source

- Tree: [`packages/registry/components/rating`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/rating)
- Manifest: [`https://uipkge.dev/r/rating.json`](https://uipkge.dev/r/rating.json)
- Preview: [`https://uipkge.dev/components/rating`](https://uipkge.dev/components/rating)

---

# resizable

> Nested horizontal and vertical panel groups with draggable handles.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/resizable.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/resizable`

## Usage

### Default

Nested horizontal and vertical panel groups with draggable handles.

```vue
<ResizablePanelGroup direction="horizontal" class="border-border max-w-2xl rounded-md border">
  <ResizablePanel :default-size="33">
    <div class="flex h-32 items-center justify-center text-sm">Left</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel :default-size="67">
    <ResizablePanelGroup direction="vertical">
      <ResizablePanel :default-size="50">
        <div class="flex h-16 items-center justify-center text-sm">Top right</div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel :default-size="50">
        <div class="flex h-16 items-center justify-center text-sm">Bottom right</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/resizable/ResizableHandle.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/resizable/components/ui/resizable/ResizableHandle.vue) (1,663 chars)
- [`components/ui/resizable/ResizablePanel.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/resizable/components/ui/resizable/ResizablePanel.vue) (555 chars)
- [`components/ui/resizable/ResizablePanelGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/resizable/components/ui/resizable/ResizablePanelGroup.vue) (805 chars)
- [`components/ui/resizable/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/resizable/components/ui/resizable/index.ts) (207 chars)

## Source

- Tree: [`packages/registry/components/resizable`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/resizable)
- Manifest: [`https://uipkge.dev/r/resizable.json`](https://uipkge.dev/r/resizable.json)
- Preview: [`https://uipkge.dev/components/resizable`](https://uipkge.dev/components/resizable)

---

# rich-text-editor

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/rich-text-editor.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/rich-text-editor`

## Props

Extracted from `components/ui/rich-text-editor/RichTextEditor.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `string` | `''` | no |
| `placeholder` | `string` | `'Start writing...'` | no |
| `class` | `string` | — | no |
| `editorClass` | `string` | — | no |
| `minHeight` | `string` | `'120px'` | no |

## Dependencies

npm packages:

- `@tiptap/extension-link`
- `@tiptap/extension-placeholder`
- `@tiptap/extension-task-item`
- `@tiptap/extension-task-list`
- `@tiptap/extension-text-align`
- `@tiptap/extension-underline`
- `@tiptap/starter-kit`
- `@tiptap/vue-3`
- `lucide-vue-next`

Other registry items (auto-installed):

- [`separator`](https://uipkge.dev/docs/separator.md)
- [`toggle`](https://uipkge.dev/docs/toggle.md)

## Files installed

- [`components/ui/rich-text-editor/RichTextEditor.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/rich-text-editor/components/ui/rich-text-editor/RichTextEditor.vue) (11,772 chars)
- [`components/ui/rich-text-editor/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/rich-text-editor/components/ui/rich-text-editor/index.ts) (65 chars)

## Source

- Tree: [`packages/registry/components/rich-text-editor`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/rich-text-editor)
- Manifest: [`https://uipkge.dev/r/rich-text-editor.json`](https://uipkge.dev/r/rich-text-editor.json)
- Preview: [`https://uipkge.dev/components/rich-text-editor`](https://uipkge.dev/components/rich-text-editor)

---

# scroll-area

> Fixed-height container with a styled scrollbar for overflowing content.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/scroll-area.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/scroll-area`

## Usage

### Default

Fixed-height container with a styled scrollbar for overflowing content.

```vue
<ScrollArea class="border-border h-48 max-w-xs rounded-md border p-4">
  <h4 class="text-sm font-medium mb-3">Tags</h4>
  <div class="space-y-1 text-sm font-mono">
    <div v-for="t in tags" :key="t">{{ t }}</div>
  </div>
</ScrollArea>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

## Files installed

- [`components/ui/scroll-area/ScrollArea.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/scroll-area/components/ui/scroll-area/ScrollArea.vue) (927 chars)
- [`components/ui/scroll-area/ScrollBar.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/scroll-area/components/ui/scroll-area/ScrollBar.vue) (999 chars)
- [`components/ui/scroll-area/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/scroll-area/components/ui/scroll-area/index.ts) (112 chars)

## Source

- Tree: [`packages/registry/components/scroll-area`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/scroll-area)
- Manifest: [`https://uipkge.dev/r/scroll-area.json`](https://uipkge.dev/r/scroll-area.json)
- Preview: [`https://uipkge.dev/components/scroll-area`](https://uipkge.dev/components/scroll-area)

---

# section-card

> Labeled card with title, description, corner action slot, and body content.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/section-card.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/section-card`

## Usage

### Default

Labeled card with title, description, corner action slot, and body content.

```vue
<SectionCard title="Account settings" description="Manage your profile and preferences.">
  <template #header-action>
    <Settings class="text-muted-foreground size-4" />
  </template>
  <p class="text-muted-foreground text-sm">Use SectionCard to wrap a labeled section with optional header description and a corner action.</p>
</SectionCard>
```

## Props

Extracted from `components/ui/section-card/SectionCard.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `title` | `string` | — | yes |
| `description` | `string` | — | no |
| `class` | `string` | — | no |
| `contentClass` | `string` | — | no |

## Dependencies

Other registry items (auto-installed):

- [`card`](https://uipkge.dev/docs/card.md)

## Files installed

- [`components/ui/section-card/SectionCard.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/section-card/components/ui/section-card/SectionCard.vue) (841 chars)
- [`components/ui/section-card/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/section-card/components/ui/section-card/index.ts) (59 chars)

## Source

- Tree: [`packages/registry/components/section-card`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/section-card)
- Manifest: [`https://uipkge.dev/r/section-card.json`](https://uipkge.dev/r/section-card.json)
- Preview: [`https://uipkge.dev/components/section-card`](https://uipkge.dev/components/section-card)

---

# select

> Native-style dropdown with grouped, labeled items.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/select.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/select`

## Usage

### Default

Native-style dropdown with grouped, labeled items.

```vue
<Select v-model="fruit">
  <SelectTrigger class="w-48">
    <SelectValue placeholder="Pick a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="cherry">Cherry</SelectItem>
      <SelectItem value="durian">Durian</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/select/Select.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/Select.vue) (447 chars)
- [`components/ui/select/SelectContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/SelectContent.vue) (2,021 chars)
- [`components/ui/select/SelectGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/SelectGroup.vue) (278 chars)
- [`components/ui/select/SelectItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/SelectItem.vue) (1,431 chars)
- [`components/ui/select/SelectItemText.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/SelectItemText.vue) (297 chars)
- [`components/ui/select/SelectLabel.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/SelectLabel.vue) (446 chars)
- [`components/ui/select/SelectScrollDownButton.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/SelectScrollDownButton.vue) (827 chars)
- [`components/ui/select/SelectScrollUpButton.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/SelectScrollUpButton.vue) (811 chars)
- [`components/ui/select/SelectSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/SelectSeparator.vue) (577 chars)
- [`components/ui/select/SelectTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/SelectTrigger.vue) (2,227 chars)
- [`components/ui/select/SelectValue.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/SelectValue.vue) (278 chars)
- [`components/ui/select/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/index.ts) (790 chars)
- [`components/ui/select/option-types.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select/components/ui/select/option-types.ts) (1,641 chars)

## Source

- Tree: [`packages/registry/components/select`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select)
- Manifest: [`https://uipkge.dev/r/select.json`](https://uipkge.dev/r/select.json)
- Preview: [`https://uipkge.dev/components/select`](https://uipkge.dev/components/select)

---

# select-advanced

> Combobox-style select with text search and a clear button.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/select-advanced.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/select-advanced`

## Usage

### Searchable

Combobox-style select with text search and a clear button.

```vue
<div class="max-w-sm">
  <SelectAdvanced v-model="value" :options="options" placeholder="Pick a fruit" searchable clearable />
</div>
```

## Props

Extracted from `components/ui/select-advanced/SelectAdvanced.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `unknown[]` | `() => [], valueKey: 'value', labelKey: 'label', groupKey:…` | no |
| `options` | `T[]` | — | yes |
| `valueKey` | `string` | — | no |
| `labelKey` | `string` | — | no |
| `groupKey` | `string` | — | no |
| `disabledKey` | `string` | — | no |
| `placeholder` | `string` | — | no |
| `searchPlaceholder` | `string` | — | no |
| `emptyText` | `string` | — | no |
| `loadingText` | `string` | — | no |
| `loading` | `boolean` | — | no |
| `disabled` | `boolean` | — | no |
| `readOnly` | `boolean` | — | no |
| `clearable` | `boolean` | — | no |
| `maxDisplay` | `number` | — | no |
| `maxCount` | `number` | — | no |
| `filter` | `(option: T, query: string) => boolean` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `lucide-vue-next`

Other registry items (auto-installed):

- [`badge`](https://uipkge.dev/docs/badge.md)
- [`command`](https://uipkge.dev/docs/command.md)
- [`popover`](https://uipkge.dev/docs/popover.md)
- [`select`](https://uipkge.dev/docs/select.md)

## Files installed

- [`components/ui/select-advanced/SelectAdvanced.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select-advanced/components/ui/select-advanced/SelectAdvanced.vue) (8,162 chars)
- [`components/ui/select-advanced/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select-advanced/components/ui/select-advanced/index.ts) (148 chars)

## Source

- Tree: [`packages/registry/components/select-advanced`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/select-advanced)
- Manifest: [`https://uipkge.dev/r/select-advanced.json`](https://uipkge.dev/r/select-advanced.json)
- Preview: [`https://uipkge.dev/components/select-advanced`](https://uipkge.dev/components/select-advanced)

---

# separator

> Default orientation. Adds a 1px line spanning the parent

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/separator.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/separator`

## Usage

### Horizontal

Default orientation. Adds a 1px line spanning the parent

```vue
<div>
  <h4 class="text-sm font-medium leading-none">Section header</h4>
  <p class="text-muted-foreground text-sm">Helper text above the divider.</p>
  <Separator class="my-3" />
  <p class="text-sm">Content below the separator.</p>
</div>
```

### Vertical

Use orientation=

```vue
<div class="flex h-5 items-center gap-3 text-sm">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Source</span>
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

## Files installed

- [`components/ui/separator/Separator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/separator/components/ui/separator/Separator.vue) (763 chars)
- [`components/ui/separator/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/separator/components/ui/separator/index.ts) (55 chars)

## Source

- Tree: [`packages/registry/components/separator`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/separator)
- Manifest: [`https://uipkge.dev/r/separator.json`](https://uipkge.dev/r/separator.json)
- Preview: [`https://uipkge.dev/components/separator`](https://uipkge.dev/components/separator)

---

# sheet

> Side panel with header, body fields, and footer action.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/sheet.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/sheet`

## Usage

### Default

Side panel with header, body fields, and footer action.

```vue
<Sheet>
  <SheetTrigger as-child>
    <Button variant="outline">Open sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
    </SheetHeader>
    <div class="grid gap-4 py-4">
      <div class="grid gap-2">
        <Label for="sheet-name">Name</Label>
        <Input id="sheet-name" model-value="Pedro Duarte" />
      </div>
      <div class="grid gap-2">
        <Label for="sheet-username">Username</Label>
        <Input id="sheet-username" model-value="@peduarte" />
      </div>
    </div>
    <SheetFooter>
      <Button>Save changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/sheet/Sheet.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet/components/ui/sheet/Sheet.vue) (446 chars)
- [`components/ui/sheet/SheetClose.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet/components/ui/sheet/SheetClose.vue) (277 chars)
- [`components/ui/sheet/SheetContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet/components/ui/sheet/SheetContent.vue) (2,356 chars)
- [`components/ui/sheet/SheetDescription.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet/components/ui/sheet/SheetDescription.vue) (605 chars)
- [`components/ui/sheet/SheetFooter.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet/components/ui/sheet/SheetFooter.vue) (315 chars)
- [`components/ui/sheet/SheetHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet/components/ui/sheet/SheetHeader.vue) (309 chars)
- [`components/ui/sheet/SheetOverlay.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet/components/ui/sheet/SheetOverlay.vue) (738 chars)
- [`components/ui/sheet/SheetTitle.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet/components/ui/sheet/SheetTitle.vue) (569 chars)
- [`components/ui/sheet/SheetTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet/components/ui/sheet/SheetTrigger.vue) (289 chars)
- [`components/ui/sheet/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet/components/ui/sheet/index.ts) (470 chars)

## Source

- Tree: [`packages/registry/components/sheet`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sheet)
- Manifest: [`https://uipkge.dev/r/sheet.json`](https://uipkge.dev/r/sheet.json)
- Preview: [`https://uipkge.dev/components/sheet`](https://uipkge.dev/components/sheet)

---

# sidebar

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/sidebar.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/sidebar`

## Dependencies

npm packages:

- `@vueuse/core`
- `class-variance-authority`
- `lucide-vue-next`
- `reka-ui`

Other registry items (auto-installed):

- [`button`](https://uipkge.dev/docs/button.md)
- [`input`](https://uipkge.dev/docs/input.md)
- [`separator`](https://uipkge.dev/docs/separator.md)
- [`sheet`](https://uipkge.dev/docs/sheet.md)
- [`skeleton`](https://uipkge.dev/docs/skeleton.md)
- [`tooltip`](https://uipkge.dev/docs/tooltip.md)

## Files installed

- [`components/ui/sidebar/Sidebar.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/Sidebar.vue) (3,511 chars)
- [`components/ui/sidebar/SidebarContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarContent.vue) (433 chars)
- [`components/ui/sidebar/SidebarFooter.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarFooter.vue) (333 chars)
- [`components/ui/sidebar/SidebarGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarGroup.vue) (364 chars)
- [`components/ui/sidebar/SidebarGroupAction.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarGroupAction.vue) (916 chars)
- [`components/ui/sidebar/SidebarGroupContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarGroupContent.vue) (338 chars)
- [`components/ui/sidebar/SidebarGroupLabel.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarGroupLabel.vue) (860 chars)
- [`components/ui/sidebar/SidebarHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarHeader.vue) (333 chars)
- [`components/ui/sidebar/SidebarInput.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarInput.vue) (409 chars)
- [`components/ui/sidebar/SidebarInset.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarInset.vue) (605 chars)
- [`components/ui/sidebar/SidebarMenu.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarMenu.vue) (338 chars)
- [`components/ui/sidebar/SidebarMenuAction.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarMenuAction.vue) (1,426 chars)
- [`components/ui/sidebar/SidebarMenuBadge.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarMenuBadge.vue) (871 chars)
- [`components/ui/sidebar/SidebarMenuButton.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarMenuButton.vue) (1,317 chars)
- [`components/ui/sidebar/SidebarMenuButtonChild.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarMenuButtonChild.vue) (951 chars)
- [`components/ui/sidebar/SidebarMenuItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarMenuItem.vue) (338 chars)
- [`components/ui/sidebar/SidebarMenuSkeleton.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarMenuSkeleton.vue) (809 chars)
- [`components/ui/sidebar/SidebarMenuSub.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarMenuSub.vue) (507 chars)
- [`components/ui/sidebar/SidebarMenuSubButton.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarMenuSubButton.vue) (1,410 chars)
- [`components/ui/sidebar/SidebarMenuSubItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarMenuSubItem.vue) (365 chars)
- [`components/ui/sidebar/SidebarProvider.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarProvider.vue) (2,413 chars)
- [`components/ui/sidebar/SidebarRail.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarRail.vue) (1,312 chars)
- [`components/ui/sidebar/SidebarSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarSeparator.vue) (426 chars)
- [`components/ui/sidebar/SidebarTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/SidebarTrigger.vue) (625 chars)
- [`components/ui/sidebar/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/index.ts) (3,400 chars)
- [`components/ui/sidebar/utils.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar/components/ui/sidebar/utils.ts) (666 chars)

## Source

- Tree: [`packages/registry/components/sidebar`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sidebar)
- Manifest: [`https://uipkge.dev/r/sidebar.json`](https://uipkge.dev/r/sidebar.json)
- Preview: [`https://uipkge.dev/components/sidebar`](https://uipkge.dev/components/sidebar)

---

# skeleton

> Pulse-animated rectangles to use while data loads.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/skeleton.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/skeleton`

## Usage

### Profile placeholder

Pulse-animated rectangles to use while data loads.

```vue
<div class="space-y-4 max-w-md">
  <div class="flex items-center gap-3">
    <Skeleton class="size-10 rounded-full" />
    <div class="space-y-2 flex-1">
      <Skeleton class="h-3 w-1/2" />
      <Skeleton class="h-3 w-3/4" />
    </div>
  </div>
  <Skeleton class="h-32 w-full" />
</div>
```

### Card placeholder

Standalone block-level skeletons in a card layout.

```vue
<div class="grid gap-3 max-w-sm">
  <Skeleton class="h-3 w-1/3" />
  <Skeleton class="h-7 w-full" />
  <Skeleton class="h-7 w-full" />
  <Skeleton class="h-3 w-1/2" />
</div>
```

## Props

Extracted from `components/ui/skeleton/Skeleton.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `variant` | `'rectangular'` \| `'rounded'` \| `'circular'` \| `'text'` \| `'avatar'` \| `'image'` \| `'card'` \| `'table-row'` | `'rectangular'` | no |
| `width` | `string` | — | no |
| `height` | `string` | — | no |
| `loading` | `boolean` | `true` | no |

## Dependencies

npm packages:

- `class-variance-authority`

## Files installed

- [`components/ui/skeleton/Skeleton.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/skeleton/components/ui/skeleton/Skeleton.vue) (1,192 chars)
- [`components/ui/skeleton/SkeletonGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/skeleton/components/ui/skeleton/SkeletonGroup.vue) (396 chars)
- [`components/ui/skeleton/SkeletonLoader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/skeleton/components/ui/skeleton/SkeletonLoader.vue) (5,847 chars)
- [`components/ui/skeleton/SkeletonText.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/skeleton/components/ui/skeleton/SkeletonText.vue) (830 chars)
- [`components/ui/skeleton/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/skeleton/components/ui/skeleton/index.ts) (242 chars)

## Source

- Tree: [`packages/registry/components/skeleton`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/skeleton)
- Manifest: [`https://uipkge.dev/r/skeleton.json`](https://uipkge.dev/r/skeleton.json)
- Preview: [`https://uipkge.dev/components/skeleton`](https://uipkge.dev/components/skeleton)

---

# slider

> Array model — even single-thumb sliders use [n] format.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/slider.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/slider`

## Usage

### Default (single thumb)

Array model — even single-thumb sliders use [n] format.

```vue
<div class="space-y-3 max-w-md">
  <Slider v-model="value" :max="100" :step="1" />
  <p class="text-muted-foreground text-xs">Value: <code class="text-foreground">{{ value[0] }}</code></p>
</div>
```

### With step

step=10 snaps to multiples of 10.

```vue
<div class="space-y-3 max-w-md">
  <Slider v-model="stepped" :max="100" :step="10" />
  <p class="text-muted-foreground text-xs">Value: <code class="text-foreground">{{ stepped[0] }}</code></p>
</div>
```

### Disabled

```vue
<div class="max-w-md">
  <Slider v-model="disabledVal" :max="100" :step="1" disabled />
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

## Files installed

- [`components/ui/slider/Slider.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/slider/components/ui/slider/Slider.vue) (1,794 chars)
- [`components/ui/slider/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/slider/components/ui/slider/index.ts) (49 chars)

## Source

- Tree: [`packages/registry/components/slider`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/slider)
- Manifest: [`https://uipkge.dev/r/slider.json`](https://uipkge.dev/r/slider.json)
- Preview: [`https://uipkge.dev/components/slider`](https://uipkge.dev/components/slider)

---

# sonner

> Toast styles for default, success, info, warning, error, and with-description.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/sonner.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/sonner`

## Usage

### Variants

Toast styles for default, success, info, warning, error, and with-description.

```vue
<div class="space-y-3">
  <Toaster position="top-right" />
  <div class="flex flex-wrap gap-2">
    <Button variant="outline" @click="toast('Event has been created.')">Default</Button>
    <Button variant="outline" @click="toast.success('Saved successfully.')">Success</Button>
    <Button variant="outline" @click="toast.info('Heads up!')">Info</Button>
    <Button variant="outline" @click="toast.warning('Please review.')">Warning</Button>
    <Button variant="outline" @click="toast.error('Failed to save.')">Error</Button>
    <Button variant="outline" @click="toast('Promise resolved', { description: 'Sub-text below the title' })">With description</Button>
  </div>
</div>
```

## Dependencies

npm packages:

- `lucide-vue-next`
- `vue-sonner`

## Files installed

- [`components/ui/sonner/Sonner.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sonner/components/ui/sonner/Sonner.vue) (1,156 chars)
- [`components/ui/sonner/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sonner/components/ui/sonner/index.ts) (50 chars)

## Source

- Tree: [`packages/registry/components/sonner`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/sonner)
- Manifest: [`https://uipkge.dev/r/sonner.json`](https://uipkge.dev/r/sonner.json)
- Preview: [`https://uipkge.dev/components/sonner`](https://uipkge.dev/components/sonner)

---

# spinner

> Use size-* and text-* utilities to scale and tint.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/spinner.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/spinner`

## Usage

### Sizes

Use size-* and text-* utilities to scale and tint.

```vue
<div class="flex items-center gap-6">
  <Spinner />
  <Spinner class="size-6" />
  <Spinner class="size-8 text-primary" />
  <Spinner class="size-10 text-emerald-500" />
</div>
```

### Inline

Place inside a button or label for inline loading.

```vue
<div class="flex items-center gap-2 text-sm">
  <Spinner class="size-4" /> Loading…
</div>
```

## Props

Extracted from `components/ui/spinner/Spinner.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |
| `size` | `SpinnerVariants['size']` | — | no |

## Dependencies

npm packages:

- `class-variance-authority`
- `lucide-vue-next`

## Files installed

- [`components/ui/spinner/Spinner.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/spinner/components/ui/spinner/Spinner.vue) (512 chars)
- [`components/ui/spinner/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/spinner/components/ui/spinner/index.ts) (479 chars)

## Source

- Tree: [`packages/registry/components/spinner`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/spinner)
- Manifest: [`https://uipkge.dev/r/spinner.json`](https://uipkge.dev/r/spinner.json)
- Preview: [`https://uipkge.dev/components/spinner`](https://uipkge.dev/components/spinner)

---

# stat-card

> KPI card with title, big value, icon, and trend indicator.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/stat-card.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/stat-card`

## Usage

### Default

KPI card with title, big value, icon, and trend indicator.

```vue
<div class="grid gap-4 sm:grid-cols-2">
  <StatCard title="HEADCOUNT" value="124" :icon="Users" trend="+8" trend-label="this month" />
  <StatCard title="REVENUE" value="$48,392" :icon="Wallet" trend="+12.4%" trend-label="vs Q1" />
</div>
```

## Props

Extracted from `components/ui/stat-card/StatCard.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `title` | `string` | — | yes |
| `value` | `string \| number` | — | no |
| `description` | `string` | — | no |
| `icon` | `Component\|string` | — | no |
| `trend` | `string` | — | no |
| `trendLabel` | `string` | — | no |

## Dependencies

npm packages:

- `lucide-vue-next`

Other registry items (auto-installed):

- [`card`](https://uipkge.dev/docs/card.md)

## Files installed

- [`components/ui/stat-card/StatCard.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stat-card/components/ui/stat-card/StatCard.vue) (2,325 chars)
- [`components/ui/stat-card/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stat-card/components/ui/stat-card/index.ts) (53 chars)

## Source

- Tree: [`packages/registry/components/stat-card`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stat-card)
- Manifest: [`https://uipkge.dev/r/stat-card.json`](https://uipkge.dev/r/stat-card.json)
- Preview: [`https://uipkge.dev/components/stat-card`](https://uipkge.dev/components/stat-card)

---

# stepper

> Horizontal stepper with icon indicators, titles, and connectors between steps.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/stepper.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/stepper`

## Usage

### Default

Horizontal stepper with icon indicators, titles, and connectors between steps.

```vue
<Stepper v-model="step" class="max-w-md">
  <StepperItem v-for="s in steps" :key="s.id" :step="s.id">
    <StepperTrigger>
      <StepperIndicator>
        <component :is="s.icon" v-if="step !== s.id" class="size-4" />
        <span v-else>{{ s.id }}</span>
      </StepperIndicator>
      <StepperTitle>{{ s.title }}</StepperTitle>
    </StepperTrigger>
    <StepperSeparator v-if="s.id !== steps.length" />
  </StepperItem>
</Stepper>
```

## Props

Extracted from `components/ui/stepper/Stepper.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `steps` | `StepperStep[]` | `() => [], modelValue: 1, orientation: 'horizontal',` | no |
| `modelValue` | `number` | — | no |
| `orientation` | `'horizontal'` \| `'vertical'` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `class-variance-authority`
- `lucide-vue-next`

## Files installed

- [`components/ui/stepper/Stepper.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper/components/ui/stepper/Stepper.vue) (3,564 chars)
- [`components/ui/stepper/StepperContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper/components/ui/stepper/StepperContent.vue) (827 chars)
- [`components/ui/stepper/StepperDescription.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper/components/ui/stepper/StepperDescription.vue) (489 chars)
- [`components/ui/stepper/StepperHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper/components/ui/stepper/StepperHeader.vue) (573 chars)
- [`components/ui/stepper/StepperIndicator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper/components/ui/stepper/StepperIndicator.vue) (1,275 chars)
- [`components/ui/stepper/StepperItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper/components/ui/stepper/StepperItem.vue) (1,836 chars)
- [`components/ui/stepper/StepperSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper/components/ui/stepper/StepperSeparator.vue) (842 chars)
- [`components/ui/stepper/StepperStep.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper/components/ui/stepper/StepperStep.vue) (2,661 chars)
- [`components/ui/stepper/StepperTitle.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper/components/ui/stepper/StepperTitle.vue) (450 chars)
- [`components/ui/stepper/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper/components/ui/stepper/index.ts) (2,731 chars)

## Source

- Tree: [`packages/registry/components/stepper`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/stepper)
- Manifest: [`https://uipkge.dev/r/stepper.json`](https://uipkge.dev/r/stepper.json)
- Preview: [`https://uipkge.dev/components/stepper`](https://uipkge.dev/components/stepper)

---

# table

> Plain Table with header + body. Use Badge in cells for status pills.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/table.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/table`

## Usage

### Default

Plain Table with header + body. Use Badge in cells for status pills.

```vue
<Table>
  <TableHeader>
    <TableRow>
      <TableHead class="w-32">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead class="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow v-for="i in invoices" :key="i.invoice">
      <TableCell class="font-medium">{{ i.invoice }}</TableCell>
      <TableCell>
        <Badge :variant="i.status === 'Paid' ? 'default' : i.status === 'Pending' ? 'secondary' : 'outline'">{{ i.status }}</Badge>
      </TableCell>
      <TableCell class="text-muted-foreground">{{ i.method }}</TableCell>
      <TableCell class="text-right font-medium tabular-nums">{{ i.amount }}</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

### With caption

Add a TableCaption at the bottom for a summary.

```vue
<Table>
  <TableCaption>Showing {{ invoices.length }} invoices · total ${{ totals.toFixed(2) }}</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead class="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow v-for="i in invoices" :key="i.invoice">
      <TableCell>{{ i.invoice }}</TableCell>
      <TableCell class="text-right tabular-nums">{{ i.amount }}</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

## Props

Extracted from `components/ui/table/Table.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |

## Dependencies

npm packages:

- `@tanstack/vue-table`
- `@vueuse/core`

## Files installed

- [`components/ui/table/Table.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/Table.vue) (401 chars)
- [`components/ui/table/TableBody.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/TableBody.vue) (314 chars)
- [`components/ui/table/TableCaption.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/TableCaption.vue) (329 chars)
- [`components/ui/table/TableCell.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/TableCell.vue) (431 chars)
- [`components/ui/table/TableEmpty.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/TableEmpty.vue) (722 chars)
- [`components/ui/table/TableFooter.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/TableFooter.vue) (345 chars)
- [`components/ui/table/TableHead.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/TableHead.vue) (475 chars)
- [`components/ui/table/TableHeader.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/TableHeader.vue) (317 chars)
- [`components/ui/table/TableRow.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/TableRow.vue) (377 chars)
- [`components/ui/table/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/index.ts) (501 chars)
- [`components/ui/table/utils.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table/components/ui/table/utils.ts) (296 chars)

## Source

- Tree: [`packages/registry/components/table`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/table)
- Manifest: [`https://uipkge.dev/r/table.json`](https://uipkge.dev/r/table.json)
- Preview: [`https://uipkge.dev/components/table`](https://uipkge.dev/components/table)

---

# switch

> Two-way bound boolean. Click toggles the state.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/switch.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/switch`

## Usage

### Default

Two-way bound boolean. Click toggles the state.

```vue
<div class="flex items-center gap-2">
  <Switch id="airplane" v-model="enabled" />
  <Label for="airplane">Airplane mode {{ enabled ? '(on)' : '(off)' }}</Label>
</div>
```

### States

On / off / disabled / disabled-on combinations.

```vue
<div class="space-y-3">
  <div class="flex items-center gap-2">
    <Switch id="s1" :model-value="true" />
    <Label for="s1">Default on</Label>
  </div>
  <div class="flex items-center gap-2">
    <Switch id="s2" :model-value="false" />
    <Label for="s2">Default off</Label>
  </div>
  <div class="flex items-center gap-2">
    <Switch id="s3" disabled />
    <Label for="s3" class="text-muted-foreground">Disabled</Label>
  </div>
  <div class="flex items-center gap-2">
    <Switch id="s4" :model-value="true" disabled />
    <Label for="s4" class="text-muted-foreground">Disabled on</Label>
  </div>
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

## Files installed

- [`components/ui/switch/Switch.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/switch/components/ui/switch/Switch.vue) (2,683 chars)
- [`components/ui/switch/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/switch/components/ui/switch/index.ts) (49 chars)

## Source

- Tree: [`packages/registry/components/switch`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/switch)
- Manifest: [`https://uipkge.dev/r/switch.json`](https://uipkge.dev/r/switch.json)
- Preview: [`https://uipkge.dev/components/switch`](https://uipkge.dev/components/switch)

---

# tabs

> Three triggers in TabsList; each TabsContent shows when its value matches.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/tabs.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/tabs`

## Usage

### Default

Three triggers in TabsList; each TabsContent shows when its value matches.

```vue
<Tabs default-value="account" class="max-w-md">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
    <TabsTrigger value="team">Team</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <Card>
      <CardHeader>
        <CardTitle>Account</CardTitle>
        <CardDescription>Make changes to your account here.</CardDescription>
      </CardHeader>
      <CardContent>
        <p class="text-sm">Tabs let users switch between related sections without navigation.</p>
      </CardContent>
    </Card>
  </TabsContent>
  <TabsContent value="password">
    <Card>
      <CardHeader>
        <CardTitle>Password</CardTitle>
        <CardDescription>Change your password.</CardDescription>
      </CardHeader>
      <CardContent>
        <p class="text-sm text-muted-foreground">Password fields go here.</p>
      </CardContent>
    </Card>
  </TabsContent>
  <TabsContent value="team">
    <Card>
      <CardHeader>
        <CardTitle>Team</CardTitle>
        <CardDescription>Manage your team.</CardDescription>
      </CardHeader>
      <CardContent>
        <p class="text-sm text-muted-foreground">Team management UI goes here.</p>
      </CardContent>
    </Card>
  </TabsContent>
</Tabs>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `class-variance-authority`
- `reka-ui`

## Files installed

- [`components/ui/tabs/Tabs.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tabs/components/ui/tabs/Tabs.vue) (728 chars)
- [`components/ui/tabs/TabsContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tabs/components/ui/tabs/TabsContent.vue) (826 chars)
- [`components/ui/tabs/TabsList.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tabs/components/ui/tabs/TabsList.vue) (736 chars)
- [`components/ui/tabs/TabsTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tabs/components/ui/tabs/TabsTrigger.vue) (810 chars)
- [`components/ui/tabs/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tabs/components/ui/tabs/index.ts) (1,872 chars)

## Source

- Tree: [`packages/registry/components/tabs`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tabs)
- Manifest: [`https://uipkge.dev/r/tabs.json`](https://uipkge.dev/r/tabs.json)
- Preview: [`https://uipkge.dev/components/tabs`](https://uipkge.dev/components/tabs)

---

# tags-input

> Free-text input that converts entries into removable tag chips.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/tags-input.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/tags-input`

## Usage

### Default

Free-text input that converts entries into removable tag chips.

```vue
<div class="space-y-2 max-w-md">
  <Label>Tags</Label>
  <TagsInput v-model="tags">
    <TagsInputItem v-for="t in tags" :key="t" :value="t">
      <TagsInputItemText />
      <TagsInputItemDelete />
    </TagsInputItem>
    <TagsInputInput placeholder="Add a tag…" />
  </TagsInput>
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

## Files installed

- [`components/ui/tags-input/TagsInput.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tags-input/components/ui/tags-input/TagsInput.vue) (1,097 chars)
- [`components/ui/tags-input/TagsInputInput.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tags-input/components/ui/tags-input/TagsInputInput.vue) (629 chars)
- [`components/ui/tags-input/TagsInputItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tags-input/components/ui/tags-input/TagsInputItem.vue) (791 chars)
- [`components/ui/tags-input/TagsInputItemDelete.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tags-input/components/ui/tags-input/TagsInputItemDelete.vue) (720 chars)
- [`components/ui/tags-input/TagsInputItemText.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tags-input/components/ui/tags-input/TagsInputItemText.vue) (646 chars)
- [`components/ui/tags-input/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tags-input/components/ui/tags-input/index.ts) (329 chars)

## Source

- Tree: [`packages/registry/components/tags-input`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tags-input)
- Manifest: [`https://uipkge.dev/r/tags-input.json`](https://uipkge.dev/r/tags-input.json)
- Preview: [`https://uipkge.dev/components/tags-input`](https://uipkge.dev/components/tags-input)

---

# textarea

> Multi-line text input. Two-way bound with v-model.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/textarea.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/textarea`

## Usage

### Default

Multi-line text input. Two-way bound with v-model.

```vue
<div class="grid gap-2 max-w-md">
  <Label for="msg">Message</Label>
  <Textarea id="msg" v-model="text" placeholder="Type your message here…" />
  <p class="text-muted-foreground text-xs">{{ text.length }} chars</p>
</div>
```

### Disabled & with rows

```vue
<div class="grid gap-3 max-w-md">
  <Textarea disabled placeholder="Disabled" />
  <Textarea rows="6" placeholder="Larger area (rows=6)" />
</div>
```

## Props

Extracted from `components/ui/textarea/Textarea.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `string \| number` | — | no |
| `defaultValue` | `string \| number` | — | no |
| `label` | `string` | — | no |
| `placeholder` | `string` | — | no |
| `hint` | `string` | — | no |
| `error` | `string` | — | no |
| `success` | `string` | — | no |
| `messages` | `string[]` | — | no |
| `disabled` | `boolean` | — | no |
| `readonly` | `boolean` | — | no |
| `required` | `boolean` | — | no |
| `autofocus` | `boolean` | — | no |
| `name` | `string` | — | no |
| `id` | `string` | — | no |
| `variant` | `'outlined'` \| `'filled'` \| `'solo'` \| `'underlined'` \| `'plain'` | `'outlined'` | no |
| `color` | `'primary'` \| `'secondary'` \| `'error'` \| `'warning'` \| `'info'` \| `'success'` | — | no |
| `density` | `'compact'` \| `'comfortable'` \| `'default'` | `'default'` | no |
| `rounded` | `'none'` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'pill'` \| `'circle'` \| `'full'` | `'none'` | no |
| `autoGrow` | `boolean` | `false` | no |
| `noResize` | `boolean` | `false` | no |
| `autoResize` | `boolean` | `false` | no |
| `rows` | `number` | `3` | no |
| `rowHeight` | `number` | `24` | no |
| `prefix` | `string` | — | no |
| `suffix` | `string` | — | no |
| `counter` | `boolean \| number` | — | no |
| `maxLength` | `number` | — | no |
| `rules` | `Array<(value: any) => true \| string>` | — | no |
| `errorMessages` | `string \| string[]` | — | no |
| `successMessages` | `string \| string[]` | — | no |
| `validateOn` | `'blur'` \| `'input'` \| `'submit'` \| `'lazy'` \| `'blurlazy'` \| `'inputlazy'` | — | no |
| `loading` | `boolean` | — | no |
| `persistentHint` | `boolean` | `false` | no |
| `persistentError` | `boolean` | `false` | no |
| `persistentPlaceholder` | `boolean` | `false` | no |
| `persistentPrefix` | `boolean` | — | no |
| `persistentSuffix` | `boolean` | — | no |
| `class` | `HTMLAttributes['class']` | — | no |
| `inputClass` | `HTMLAttributes['class']` | — | no |
| `labelClass` | `HTMLAttributes['class']` | — | no |
| `hintClass` | `HTMLAttributes['class']` | — | no |
| `bgColor` | `string` | — | no |
| `flat` | `boolean` | `false` | no |
| `bordered` | `boolean` | `true` | no |
| `spellcheck` | `boolean` | — | no |
| `autocomplete` | `string` | — | no |
| `direction` | `'ltr'` \| `'rtl'` | `'ltr'` | no |

## Dependencies

npm packages:

- `@vueuse/core`
- `lucide-vue-next`
- `reka-ui`

Other registry items (auto-installed):

- [`label`](https://uipkge.dev/docs/label.md)

## Files installed

- [`components/ui/textarea/Textarea.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/textarea/components/ui/textarea/Textarea.vue) (11,265 chars)
- [`components/ui/textarea/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/textarea/components/ui/textarea/index.ts) (53 chars)

## Source

- Tree: [`packages/registry/components/textarea`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/textarea)
- Manifest: [`https://uipkge.dev/r/textarea.json`](https://uipkge.dev/r/textarea.json)
- Preview: [`https://uipkge.dev/components/textarea`](https://uipkge.dev/components/textarea)

---

# theme-switcher

> Compact toggle group bound to the useTheme composable.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/theme-switcher.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/theme-switcher`

## Usage

### Default

Compact toggle group bound to the useTheme composable.

```vue
<ThemeSwitcher :model-value="theme" @update:model-value="setTheme" />
```

## Dependencies

npm packages:

- `lucide-vue-next`

Other registry items (auto-installed):

- [`button`](https://uipkge.dev/docs/button.md)
- [`color-picker`](https://uipkge.dev/docs/color-picker.md)
- [`dropdown-menu`](https://uipkge.dev/docs/dropdown-menu.md)
- [`slider`](https://uipkge.dev/docs/slider.md)

## Files installed

- [`components/ui/theme-switcher/ThemeSwitcher.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/theme-switcher/components/ui/theme-switcher/ThemeSwitcher.vue) (12,270 chars)
- [`components/ui/theme-switcher/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/theme-switcher/components/ui/theme-switcher/index.ts) (63 chars)

## Source

- Tree: [`packages/registry/components/theme-switcher`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/theme-switcher)
- Manifest: [`https://uipkge.dev/r/theme-switcher.json`](https://uipkge.dev/r/theme-switcher.json)
- Preview: [`https://uipkge.dev/components/theme-switcher`](https://uipkge.dev/components/theme-switcher)

---

# time-picker

> 24-hour time input bound to a string in HH:MM format.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/time-picker.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/time-picker`

## Usage

### Default

24-hour time input bound to a string in HH:MM format.

```vue
<div class="space-y-2 max-w-xs">
  <Label>Pick a time</Label>
  <TimePicker v-model="value" />
  <p class="text-muted-foreground text-xs">Value: <code class="text-foreground">{{ value }}</code></p>
</div>
```

## Props

Extracted from `components/ui/time-picker/TimeColumns.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `modelValue` | `string` | `''` | no |
| `use24Hour` | `boolean` | `false` | no |
| `minuteStep` | `number` | `5` | no |
| `hourStep` | `number` | `1` | no |
| `minTime` | `string` | — | no |
| `maxTime` | `string` | — | no |
| `visible` | `boolean` | `true` | no |

## Dependencies

npm packages:

- `lucide-vue-next`

Other registry items (auto-installed):

- [`button`](https://uipkge.dev/docs/button.md)
- [`popover`](https://uipkge.dev/docs/popover.md)
- [`scroll-area`](https://uipkge.dev/docs/scroll-area.md)

## Files installed

- [`components/ui/time-picker/TimeColumns.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/time-picker/components/ui/time-picker/TimeColumns.vue) (6,069 chars)
- [`components/ui/time-picker/TimePicker.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/time-picker/components/ui/time-picker/TimePicker.vue) (4,008 chars)
- [`components/ui/time-picker/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/time-picker/components/ui/time-picker/index.ts) (116 chars)

## Source

- Tree: [`packages/registry/components/time-picker`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/time-picker)
- Manifest: [`https://uipkge.dev/r/time-picker.json`](https://uipkge.dev/r/time-picker.json)
- Preview: [`https://uipkge.dev/components/time-picker`](https://uipkge.dev/components/time-picker)

---

# timeline

> Vertical timeline with icon dots, connectors, titles, and time labels.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/timeline.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/timeline`

## Usage

### Default

Vertical timeline with icon dots, connectors, titles, and time labels.

```vue
<Timeline class="max-w-md">
  <TimelineItem v-for="e in events" :key="e.id">
    <TimelineSeparator>
      <TimelineDot><component :is="e.icon" class="size-3.5" /></TimelineDot>
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>{{ e.title }}</TimelineTitle>
      <TimelineDescription>{{ e.time }}</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>
```

## Props

Extracted from `components/ui/timeline/Timeline.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `class` | `HTMLAttributes['class']` | — | no |

## Files installed

- [`components/ui/timeline/Timeline.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/timeline/components/ui/timeline/Timeline.vue) (295 chars)
- [`components/ui/timeline/TimelineContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/timeline/components/ui/timeline/TimelineContent.vue) (293 chars)
- [`components/ui/timeline/TimelineDate.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/timeline/components/ui/timeline/TimelineDate.vue) (308 chars)
- [`components/ui/timeline/TimelineDescription.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/timeline/components/ui/timeline/TimelineDescription.vue) (302 chars)
- [`components/ui/timeline/TimelineItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/timeline/components/ui/timeline/TimelineItem.vue) (301 chars)
- [`components/ui/timeline/TimelineSeparator.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/timeline/components/ui/timeline/TimelineSeparator.vue) (597 chars)
- [`components/ui/timeline/TimelineTitle.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/timeline/components/ui/timeline/TimelineTitle.vue) (324 chars)
- [`components/ui/timeline/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/timeline/components/ui/timeline/index.ts) (451 chars)

## Source

- Tree: [`packages/registry/components/timeline`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/timeline)
- Manifest: [`https://uipkge.dev/r/timeline.json`](https://uipkge.dev/r/timeline.json)
- Preview: [`https://uipkge.dev/components/timeline`](https://uipkge.dev/components/timeline)

---

# toggle

> Independent on/off buttons for formatting actions.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/toggle.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/toggle`

## Usage

### Icon toggles

Independent on/off buttons for formatting actions.

```vue
<div class="flex gap-2">
  <Toggle aria-label="Bold"><Bold class="size-4" /></Toggle>
  <Toggle aria-label="Italic"><Italic class="size-4" /></Toggle>
  <Toggle aria-label="Underline"><Underline class="size-4" /></Toggle>
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `class-variance-authority`
- `reka-ui`

## Files installed

- [`components/ui/toggle/Toggle.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/toggle/components/ui/toggle/Toggle.vue) (1,628 chars)
- [`components/ui/toggle/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/toggle/components/ui/toggle/index.ts) (1,131 chars)

## Source

- Tree: [`packages/registry/components/toggle`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/toggle)
- Manifest: [`https://uipkge.dev/r/toggle.json`](https://uipkge.dev/r/toggle.json)
- Preview: [`https://uipkge.dev/components/toggle`](https://uipkge.dev/components/toggle)

---

# toggle-group

> Mutually exclusive icon toggles for text alignment.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/toggle-group.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/toggle-group`

## Usage

### Single select

Mutually exclusive icon toggles for text alignment.

```vue
<ToggleGroup v-model="value" type="single">
  <ToggleGroupItem value="left" aria-label="Align left"><AlignLeft class="size-4" /></ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center"><AlignCenter class="size-4" /></ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right"><AlignRight class="size-4" /></ToggleGroupItem>
</ToggleGroup>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `class-variance-authority`
- `reka-ui`

Other registry items (auto-installed):

- [`toggle`](https://uipkge.dev/docs/toggle.md)

## Files installed

- [`components/ui/toggle-group/ToggleGroup.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/toggle-group/components/ui/toggle-group/ToggleGroup.vue) (1,559 chars)
- [`components/ui/toggle-group/ToggleGroupItem.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/toggle-group/components/ui/toggle-group/ToggleGroupItem.vue) (1,677 chars)
- [`components/ui/toggle-group/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/toggle-group/components/ui/toggle-group/index.ts) (126 chars)

## Source

- Tree: [`packages/registry/components/toggle-group`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/toggle-group)
- Manifest: [`https://uipkge.dev/r/toggle-group.json`](https://uipkge.dev/r/toggle-group.json)
- Preview: [`https://uipkge.dev/components/toggle-group`](https://uipkge.dev/components/toggle-group)

---

# tooltip

> Wrap any trigger; TooltipContent renders on hover/focus.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/tooltip.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/tooltip`

## Usage

### Basic

Wrap any trigger; TooltipContent renders on hover/focus.

```vue
<Tooltip>
  <TooltipTrigger as-child>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>Tooltip content</TooltipContent>
</Tooltip>
```

### Sides

side=

```vue
<div class="flex flex-wrap gap-3">
  <Tooltip>
    <TooltipTrigger as-child><Button variant="outline" size="sm">Top</Button></TooltipTrigger>
    <TooltipContent side="top">Top placement</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger as-child><Button variant="outline" size="sm">Right</Button></TooltipTrigger>
    <TooltipContent side="right">Right placement</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger as-child><Button variant="outline" size="sm">Bottom</Button></TooltipTrigger>
    <TooltipContent side="bottom">Bottom placement</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger as-child><Button variant="outline" size="sm">Left</Button></TooltipTrigger>
    <TooltipContent side="left">Left placement</TooltipContent>
  </Tooltip>
</div>
```

## Dependencies

npm packages:

- `@vueuse/core`
- `reka-ui`

## Files installed

- [`components/ui/tooltip/Tooltip.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tooltip/components/ui/tooltip/Tooltip.vue) (455 chars)
- [`components/ui/tooltip/TooltipContent.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tooltip/components/ui/tooltip/TooltipContent.vue) (1,444 chars)
- [`components/ui/tooltip/TooltipProvider.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tooltip/components/ui/tooltip/TooltipProvider.vue) (312 chars)
- [`components/ui/tooltip/TooltipTrigger.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tooltip/components/ui/tooltip/TooltipTrigger.vue) (296 chars)
- [`components/ui/tooltip/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tooltip/components/ui/tooltip/index.ts) (248 chars)

## Source

- Tree: [`packages/registry/components/tooltip`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tooltip)
- Manifest: [`https://uipkge.dev/r/tooltip.json`](https://uipkge.dev/r/tooltip.json)
- Preview: [`https://uipkge.dev/components/tooltip`](https://uipkge.dev/components/tooltip)

---

# tree-view

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/tree-view.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/tree-view`

## Props

Extracted from `components/ui/tree-view/TreeView.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `items` | `TreeViewItem[]` | — | yes |
| `class` | `HTMLAttributes['class']` | — | no |
| `showIcons` | `boolean` | `true` | no |
| `showCheckboxes` | `boolean` | `false` | no |
| `defaultExpanded` | `boolean` | `false` | no |
| `selectedId` | `string \| null` | `null` | no |

## Dependencies

npm packages:

- `lucide-vue-next`

## Files installed

- [`components/ui/tree-view/TreeView.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tree-view/components/ui/tree-view/TreeView.vue) (2,212 chars)
- [`components/ui/tree-view/TreeViewNode.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tree-view/components/ui/tree-view/TreeViewNode.vue) (3,811 chars)
- [`components/ui/tree-view/index.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tree-view/components/ui/tree-view/index.ts) (165 chars)

## Source

- Tree: [`packages/registry/components/tree-view`](https://github.com/uday-a/uipkge/blob/main/packages/registry/components/tree-view)
- Manifest: [`https://uipkge.dev/r/tree-view.json`](https://uipkge.dev/r/tree-view.json)
- Preview: [`https://uipkge.dev/components/tree-view`](https://uipkge.dev/components/tree-view)

---

# activity-feed

> Recent activity feed inside a SectionCard. Items take icon + action + detail + time.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/activity-feed.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/activity-feed`

## Usage

### Default

Titled feed of recent events with per-item icon, action, detail, and timestamp.

```vue
<ActivityFeed
  title="Recent Activity"
  description="Latest updates across your organization."
  :items="items"
/>
```

## Props

Extracted from `components/blocks/ActivityFeed.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `title` | `string` | — | no |
| `description` | `string` | — | no |
| `items` | `ActivityItem[]` | — | yes |
| `class` | `string` | — | no |

## Dependencies

Other registry items (auto-installed):

- [`section-card`](https://uipkge.dev/docs/section-card.md)
- [`data-list`](https://uipkge.dev/docs/data-list.md)
- [`icon-box`](https://uipkge.dev/docs/icon-box.md)

## Files installed

- [`components/blocks/ActivityFeed.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/activity-feed/components/blocks/ActivityFeed.vue) (1,196 chars)

## Source

- Tree: [`packages/registry/blocks/activity-feed`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/activity-feed)
- Manifest: [`https://uipkge.dev/r/activity-feed.json`](https://uipkge.dev/r/activity-feed.json)
- Preview: [`https://uipkge.dev/components/activity-feed`](https://uipkge.dev/components/activity-feed)

---

# event-list

> List of upcoming events in a SectionCard. Each item shows title + date + optional status badge.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/event-list.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/event-list`

## Usage

### Default

Titled list of events with date and status per row.

```vue
<EventList
  title="Upcoming Events"
  description="Important dates to keep in mind."
  :events="events"
/>
```

## Props

Extracted from `components/blocks/EventList.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `title` | `string` | — | no |
| `description` | `string` | — | no |
| `events` | `EventItem[]` | — | yes |
| `class` | `string` | — | no |

## Dependencies

npm packages:

- `lucide-vue-next`

Other registry items (auto-installed):

- [`section-card`](https://uipkge.dev/docs/section-card.md)
- [`data-list`](https://uipkge.dev/docs/data-list.md)
- [`badge`](https://uipkge.dev/docs/badge.md)

## Files installed

- [`components/blocks/EventList.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/event-list/components/blocks/EventList.vue) (1,216 chars)

## Source

- Tree: [`packages/registry/blocks/event-list`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/event-list)
- Manifest: [`https://uipkge.dev/r/event-list.json`](https://uipkge.dev/r/event-list.json)
- Preview: [`https://uipkge.dev/components/event-list`](https://uipkge.dev/components/event-list)

---

# kpi-grid

> Responsive grid (2 / 4 cols) of StatCards. Pass an array of {title, value, icon, trend} items.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/kpi-grid.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/kpi-grid`

## Usage

### Default

Responsive grid of KPI tiles with title, value, icon, and optional trend indicator.

```vue
<KpiGrid :items="items" />
```

## Props

Extracted from `components/blocks/KpiGrid.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `items` | `KpiItem[]` | — | yes |

## Dependencies

Other registry items (auto-installed):

- [`stat-card`](https://uipkge.dev/docs/stat-card.md)

## Files installed

- [`components/blocks/KpiGrid.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/kpi-grid/components/blocks/KpiGrid.vue) (658 chars)

## Source

- Tree: [`packages/registry/blocks/kpi-grid`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/kpi-grid)
- Manifest: [`https://uipkge.dev/r/kpi-grid.json`](https://uipkge.dev/r/kpi-grid.json)
- Preview: [`https://uipkge.dev/components/kpi-grid`](https://uipkge.dev/components/kpi-grid)

---

# progress-breakdown

> Labeled progress bars in a SectionCard. Each bar cycles through chart-1..5 colors.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/progress-breakdown.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/progress-breakdown`

## Usage

### Default

Card with header icon and a stacked list of progress rows, each labeled with a secondary count.

```vue
<ProgressBreakdown
  title="Department Breakdown"
  description="Headcount distribution."
  :items="items"
  :header-icon="TrendingUp"
/>
```

## Props

Extracted from `components/blocks/ProgressBreakdown.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `title` | `string` | — | no |
| `description` | `string` | — | no |
| `items` | `BreakdownItem[]` | — | yes |
| `headerIcon` | `Component` | — | no |
| `class` | `string` | — | no |

## Dependencies

Other registry items (auto-installed):

- [`section-card`](https://uipkge.dev/docs/section-card.md)
- [`progress-item`](https://uipkge.dev/docs/progress-item.md)

## Files installed

- [`components/blocks/ProgressBreakdown.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/progress-breakdown/components/blocks/ProgressBreakdown.vue) (932 chars)

## Source

- Tree: [`packages/registry/blocks/progress-breakdown`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/progress-breakdown)
- Manifest: [`https://uipkge.dev/r/progress-breakdown.json`](https://uipkge.dev/r/progress-breakdown.json)
- Preview: [`https://uipkge.dev/components/progress-breakdown`](https://uipkge.dev/components/progress-breakdown)

---

# toggle-setting-list

> List of toggle-able settings in a SectionCard. v-model binds a Record<string, boolean> keyed by item.key.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/toggle-setting-list.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/toggle-setting-list`

## Usage

### Default

Card with a header icon and a list of labeled switch settings.

```vue
<ToggleSettingList
  v-model="values"
  title="Notifications"
  description="What should we alert you about?"
  :header-icon="Bell"
  :items="items"
/>
```

## Props

Extracted from `components/blocks/ToggleSettingList.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `title` | `string` | — | no |
| `description` | `string` | — | no |
| `headerIcon` | `Component` | — | no |
| `items` | `SettingRow[]` | — | yes |
| `modelValue` | `Record<string, boolean>` | — | yes |
| `class` | `string` | — | no |

## Dependencies

Other registry items (auto-installed):

- [`section-card`](https://uipkge.dev/docs/section-card.md)

## Files installed

- [`components/blocks/ToggleSettingList.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/toggle-setting-list/components/blocks/ToggleSettingList.vue) (1,831 chars)

## Source

- Tree: [`packages/registry/blocks/toggle-setting-list`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/toggle-setting-list)
- Manifest: [`https://uipkge.dev/r/toggle-setting-list.json`](https://uipkge.dev/r/toggle-setting-list.json)
- Preview: [`https://uipkge.dev/components/toggle-setting-list`](https://uipkge.dev/components/toggle-setting-list)

---

# theme-picker

> 3-button theme switcher (light / dark / system) inside a SectionCard. v-model binds the chosen theme.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/theme-picker.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/theme-picker`

## Usage

### Default

Card-style picker for choosing between light, dark, and system themes.

```vue
<ThemePicker v-model="theme" class="max-w-md" />
```

## Props

Extracted from `components/blocks/ThemePicker.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `title` | `string` | — | no |
| `description` | `string` | — | no |
| `modelValue` | `Theme` | — | yes |
| `class` | `string` | — | no |

## Dependencies

npm packages:

- `lucide-vue-next`

Other registry items (auto-installed):

- [`section-card`](https://uipkge.dev/docs/section-card.md)

## Files installed

- [`components/blocks/ThemePicker.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/theme-picker/components/blocks/ThemePicker.vue) (1,435 chars)

## Source

- Tree: [`packages/registry/blocks/theme-picker`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/theme-picker)
- Manifest: [`https://uipkge.dev/r/theme-picker.json`](https://uipkge.dev/r/theme-picker.json)
- Preview: [`https://uipkge.dev/components/theme-picker`](https://uipkge.dev/components/theme-picker)

---

# quick-actions

> Vertical list of clickable shortcuts in a SectionCard. Pass linkComponent (NuxtLink or RouterLink) for SPA routing.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/quick-actions.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/quick-actions`

## Usage

### Default

Card listing common shortcuts as icon-labeled buttons.

```vue
<QuickActions
  title="Quick Actions"
  description="Frequently used shortcuts."
  :actions="actions"
/>
```

## Props

Extracted from `components/blocks/QuickActions.vue`.

| name | type | default | required |
| --- | --- | --- | --- |
| `title` | `string` | — | no |
| `description` | `string` | — | no |
| `actions` | `QuickAction[]` | — | yes |
| `linkComponent` | `string \| Component` | `'a'` | no |
| `class` | `string` | — | no |

## Dependencies

npm packages:

- `lucide-vue-next`

Other registry items (auto-installed):

- [`section-card`](https://uipkge.dev/docs/section-card.md)
- [`icon-box`](https://uipkge.dev/docs/icon-box.md)

## Files installed

- [`components/blocks/QuickActions.vue`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/quick-actions/components/blocks/QuickActions.vue) (1,309 chars)

## Source

- Tree: [`packages/registry/blocks/quick-actions`](https://github.com/uday-a/uipkge/blob/main/packages/registry/blocks/quick-actions)
- Manifest: [`https://uipkge.dev/r/quick-actions.json`](https://uipkge.dev/r/quick-actions.json)
- Preview: [`https://uipkge.dev/components/quick-actions`](https://uipkge.dev/components/quick-actions)

---

# init

> One-shot bootstrap. Pulls tailwind tokens, the cn() helper, and the useTheme composable in a single command. Run this first when starting a new app.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/init.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/init`

## Dependencies

Other registry items (auto-installed):

- [`tailwind`](https://uipkge.dev/docs/tailwind.md)
- [`utils`](https://uipkge.dev/docs/utils.md)
- [`use-theme`](https://uipkge.dev/docs/use-theme.md)

## Source

- Tree: [`packages/registry/bootstrap/init`](https://github.com/uday-a/uipkge/blob/main/packages/registry/bootstrap/init)
- Manifest: [`https://uipkge.dev/r/init.json`](https://uipkge.dev/r/init.json)
- Preview: [`https://uipkge.dev/components/init`](https://uipkge.dev/components/init)

---

# use-theme

> useTheme composable: light/dark/system theme switcher with localStorage persistence and system preference fallback.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/use-theme.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/use-theme`

## Files installed

- [`useTheme.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/bootstrap/use-theme/useTheme.ts) (839 chars)

## Source

- Tree: [`packages/registry/bootstrap/use-theme`](https://github.com/uday-a/uipkge/blob/main/packages/registry/bootstrap/use-theme)
- Manifest: [`https://uipkge.dev/r/use-theme.json`](https://uipkge.dev/r/use-theme.json)
- Preview: [`https://uipkge.dev/components/use-theme`](https://uipkge.dev/components/use-theme)

---

# utils

> Tailwind class merge helper: cn(). Combines clsx and tailwind-merge.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/utils.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/utils`

## Dependencies

npm packages:

- `clsx`
- `tailwind-merge`

## Files installed

- [`utils.ts`](https://github.com/uday-a/uipkge/blob/main/packages/registry/bootstrap/utils/utils.ts) (166 chars)

## Source

- Tree: [`packages/registry/bootstrap/utils`](https://github.com/uday-a/uipkge/blob/main/packages/registry/bootstrap/utils)
- Manifest: [`https://uipkge.dev/r/utils.json`](https://uipkge.dev/r/utils.json)
- Preview: [`https://uipkge.dev/components/utils`](https://uipkge.dev/components/utils)

---

# tailwind

> Tailwind v4 OKLCH color tokens (light + dark) for the uipkge design system. Drops into the project Tailwind CSS entry.

## Install

```
npx shadcn-vue@latest add https://uipkge.dev/r/tailwind.json
```

Or with named registry: `npx shadcn-vue@latest add @uipkge/tailwind`

## Dependencies

npm packages:

- `tailwindcss`
- `tw-animate-css`

## Files installed

- [`tailwind.css`](https://github.com/uday-a/uipkge/blob/main/packages/registry/bootstrap/tailwind/tailwind.css) (8,460 chars)

## Source

- Tree: [`packages/registry/bootstrap/tailwind`](https://github.com/uday-a/uipkge/blob/main/packages/registry/bootstrap/tailwind)
- Manifest: [`https://uipkge.dev/r/tailwind.json`](https://uipkge.dev/r/tailwind.json)
- Preview: [`https://uipkge.dev/components/tailwind`](https://uipkge.dev/components/tailwind)

---