# uipkge

> Open-source UI registry for Vue 3 + Nuxt. shadcn-vue compatible. Components copy into your project — you own the source. No npm packages, no semver, no lock-in.

## Install

Bootstrap (Tailwind v4 OKLCH tokens, cn() helper, useTheme composable):

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

Add any component:

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

Or with a named registry in components.json:

```json
{
  "registries": {
    "@uipkge": "https://uipkge.dev/r/{name}.json"
  }
}
```

Then: `npx shadcn-vue@latest add @uipkge/<name>`

## Components

- [accordion](https://uipkge.dev/docs/accordion.md) — Single-open accordion with three collapsible items.
- [alert](https://uipkge.dev/docs/alert.md) — Two built-in variants: default and destructive.
- [alert-dialog](https://uipkge.dev/docs/alert-dialog.md) — Modal confirmation dialog with cancel and continue actions.
- [alert-modal](https://uipkge.dev/docs/alert-modal.md) — Controlled alert modal with title, description, and cancel/action labels.
- [aspect-ratio](https://uipkge.dev/docs/aspect-ratio.md) — Three common aspect ratios: 16:9, 4:3, and 1:1.
- [autocomplete](https://uipkge.dev/docs/autocomplete.md) — Filterable text input bound to a v-modeled list of suggestions.
- [avatar](https://uipkge.dev/docs/avatar.md) — Tailwind size-* utilities scale the avatar. Fallback text shrinks accordingly.
- [badge](https://uipkge.dev/docs/badge.md) — Four visual styles. Default uses the primary tone; outline is a subtle bordered chip.
- [breadcrumb](https://uipkge.dev/docs/breadcrumb.md) — Links + a final non-link page entry. Separators auto-render between items.
- [button](https://uipkge.dev/docs/button.md) — Six visual styles. Default is the primary action; ghost and link blend into surrounding text.
- [calendar](https://uipkge.dev/docs/calendar.md) — Single-date calendar bound to a CalendarDate value.
- [card](https://uipkge.dev/docs/card.md) — Header (title + description) plus content.
- [carousel](https://uipkge.dev/docs/carousel.md) — Five-slide carousel with previous and next controls.
- [charts](https://uipkge.dev/docs/charts.md)
- [checkbox](https://uipkge.dev/docs/checkbox.md) — All four interaction states.
- [chip](https://uipkge.dev/docs/chip.md) — Chip is similar to Badge but typically interactive (filter, removable).
- [collapsible](https://uipkge.dev/docs/collapsible.md) — Header with a toggle button that shows or hides the additional rows.
- [code-block](https://uipkge.dev/docs/code-block.md)
- [color-picker](https://uipkge.dev/docs/color-picker.md) — Color picker bound to a hex string with the current value displayed below.
- [command](https://uipkge.dev/docs/command.md) — Searchable command palette with grouped items and an empty state.
- [context-menu](https://uipkge.dev/docs/context-menu.md) — Right-click the target to open a menu with items and a separator.
- [data-list](https://uipkge.dev/docs/data-list.md) — Key/value rows inside a card. Values can be plain text or other components like badges.
- [date-range-picker](https://uipkge.dev/docs/date-range-picker.md) — Picker for a start and end date in one popover.
- [data-table](https://uipkge.dev/docs/data-table.md) — Sortable columns, paginated, multi-column filters, global search, view toggle, bulk-select. All wired through TanStack Table.
- [date-picker](https://uipkge.dev/docs/date-picker.md) — Single-date picker bound to an optional CalendarDate value.
- [date-time-picker](https://uipkge.dev/docs/date-time-picker.md) — Combined date and time picker bound to a single value.
- [dialog](https://uipkge.dev/docs/dialog.md) — Header, description, and a footer with a cancel and a destructive primary action.
- [empty-state](https://uipkge.dev/docs/empty-state.md) — Centered icon, title, description, and an action button slot.
- [form](https://uipkge.dev/docs/form.md)
- [dropdown-menu](https://uipkge.dev/docs/dropdown-menu.md) — Label + grouped items with separators. Destructive item uses text-destructive.
- [file-upload](https://uipkge.dev/docs/file-upload.md) — Drop zone restricted to image files with click-to-browse fallback.
- [grid](https://uipkge.dev/docs/grid.md) — Three-column grid with a small gap.
- [hover-card](https://uipkge.dev/docs/hover-card.md) — Hover the trigger to reveal a card with avatar and details.
- [icon-box](https://uipkge.dev/docs/icon-box.md) — Default and muted backgrounds, with optional icon-class for accent colors.
- [input](https://uipkge.dev/docs/input.md) — Two-way bound with v-model. Plain text input with label.
- [icons](https://uipkge.dev/docs/icons.md)
- [label](https://uipkge.dev/docs/label.md) — Label paired with an Input via matching for/id attributes.
- [labeled-value](https://uipkge.dev/docs/labeled-value.md) — Stacked label-over-value pairs arranged in a responsive three-column grid.
- [list](https://uipkge.dev/docs/list.md) — Vertical list with two-line items and a trailing chevron, suitable for settings menus.
- [menu](https://uipkge.dev/docs/menu.md) — Trigger button opens a menu with label, separators, item icons, and a destructive item.
- [native-select](https://uipkge.dev/docs/native-select.md) — Styled wrapper around a native select element with v-model binding.
- [menubar](https://uipkge.dev/docs/menubar.md) — Horizontal menubar with File, Edit, and View menus and keyboard shortcut hints.
- [navigation-menu](https://uipkge.dev/docs/navigation-menu.md) — Top-level nav with two triggers, each opening a panel of grouped link items.
- [number-field](https://uipkge.dev/docs/number-field.md) — Numeric input with increment and decrement buttons, bounded by min and max.
- [page](https://uipkge.dev/docs/page.md) — Page layout with a header (title, description, action slot) and a card body region.
- [pagination](https://uipkge.dev/docs/pagination.md) — Pagination with prev/next, edge pages, ellipses, and an active page indicator.
- [pin-input](https://uipkge.dev/docs/pin-input.md) — Six-slot one-time code input bound to a string array model.
- [progress](https://uipkge.dev/docs/progress.md) — Progress bar paired with a label and percentage row above the track.
- [progress-linear](https://uipkge.dev/docs/progress-linear.md) — Linear progress bar driven by a fixed model value.
- [radio-group](https://uipkge.dev/docs/radio-group.md) — Single-select group of mutually exclusive options.
- [popover](https://uipkge.dev/docs/popover.md) — Click the trigger to open. PopoverContent floats above the page.
- [progress-item](https://uipkge.dev/docs/progress-item.md) — Stacked progress rows with label, value, secondary label, and per-row color index.
- [range-calendar](https://uipkge.dev/docs/range-calendar.md) — Calendar that selects a start and end date inclusive of the range between them.
- [range-slider](https://uipkge.dev/docs/range-slider.md) — Two-handle slider for selecting a numeric range bounded by min and max.
- [rating](https://uipkge.dev/docs/rating.md) — Star rating input with half-step support up to a max of five.
- [resizable](https://uipkge.dev/docs/resizable.md) — Nested horizontal and vertical panel groups with draggable handles.
- [rich-text-editor](https://uipkge.dev/docs/rich-text-editor.md)
- [scroll-area](https://uipkge.dev/docs/scroll-area.md) — Fixed-height container with a styled scrollbar for overflowing content.
- [section-card](https://uipkge.dev/docs/section-card.md) — Labeled card with title, description, corner action slot, and body content.
- [select](https://uipkge.dev/docs/select.md) — Native-style dropdown with grouped, labeled items.
- [select-advanced](https://uipkge.dev/docs/select-advanced.md) — Combobox-style select with text search and a clear button.
- [separator](https://uipkge.dev/docs/separator.md) — Default orientation. Adds a 1px line spanning the parent
- [sheet](https://uipkge.dev/docs/sheet.md) — Side panel with header, body fields, and footer action.
- [sidebar](https://uipkge.dev/docs/sidebar.md)
- [skeleton](https://uipkge.dev/docs/skeleton.md) — Pulse-animated rectangles to use while data loads.
- [slider](https://uipkge.dev/docs/slider.md) — Array model — even single-thumb sliders use [n] format.
- [sonner](https://uipkge.dev/docs/sonner.md) — Toast styles for default, success, info, warning, error, and with-description.
- [spinner](https://uipkge.dev/docs/spinner.md) — Use size-* and text-* utilities to scale and tint.
- [stat-card](https://uipkge.dev/docs/stat-card.md) — KPI card with title, big value, icon, and trend indicator.
- [stepper](https://uipkge.dev/docs/stepper.md) — Horizontal stepper with icon indicators, titles, and connectors between steps.
- [table](https://uipkge.dev/docs/table.md) — Plain Table with header + body. Use Badge in cells for status pills.
- [switch](https://uipkge.dev/docs/switch.md) — Two-way bound boolean. Click toggles the state.
- [tabs](https://uipkge.dev/docs/tabs.md) — Three triggers in TabsList; each TabsContent shows when its value matches.
- [tags-input](https://uipkge.dev/docs/tags-input.md) — Free-text input that converts entries into removable tag chips.
- [textarea](https://uipkge.dev/docs/textarea.md) — Multi-line text input. Two-way bound with v-model.
- [theme-switcher](https://uipkge.dev/docs/theme-switcher.md) — Compact toggle group bound to the useTheme composable.
- [time-picker](https://uipkge.dev/docs/time-picker.md) — 24-hour time input bound to a string in HH:MM format.
- [timeline](https://uipkge.dev/docs/timeline.md) — Vertical timeline with icon dots, connectors, titles, and time labels.
- [toggle](https://uipkge.dev/docs/toggle.md) — Independent on/off buttons for formatting actions.
- [toggle-group](https://uipkge.dev/docs/toggle-group.md) — Mutually exclusive icon toggles for text alignment.
- [tooltip](https://uipkge.dev/docs/tooltip.md) — Wrap any trigger; TooltipContent renders on hover/focus.
- [tree-view](https://uipkge.dev/docs/tree-view.md)

## Blocks

- [activity-feed](https://uipkge.dev/docs/activity-feed.md) — Recent activity feed inside a SectionCard. Items take icon + action + detail + time.
- [event-list](https://uipkge.dev/docs/event-list.md) — List of upcoming events in a SectionCard. Each item shows title + date + optional status badge.
- [kpi-grid](https://uipkge.dev/docs/kpi-grid.md) — Responsive grid (2 / 4 cols) of StatCards. Pass an array of {title, value, icon, trend} items.
- [progress-breakdown](https://uipkge.dev/docs/progress-breakdown.md) — Labeled progress bars in a SectionCard. Each bar cycles through chart-1..5 colors.
- [toggle-setting-list](https://uipkge.dev/docs/toggle-setting-list.md) — List of toggle-able settings in a SectionCard. v-model binds a Record<string, boolean> keyed by item.key.
- [theme-picker](https://uipkge.dev/docs/theme-picker.md) — 3-button theme switcher (light / dark / system) inside a SectionCard. v-model binds the chosen theme.
- [quick-actions](https://uipkge.dev/docs/quick-actions.md) — Vertical list of clickable shortcuts in a SectionCard. Pass linkComponent (NuxtLink or RouterLink) for SPA routing.

## Bootstrap

- [init](https://uipkge.dev/docs/init.md) — 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.
- [use-theme](https://uipkge.dev/docs/use-theme.md) — useTheme composable: light/dark/system theme switcher with localStorage persistence and system preference fallback.
- [utils](https://uipkge.dev/docs/utils.md) — Tailwind class merge helper: cn(). Combines clsx and tailwind-merge.
- [tailwind](https://uipkge.dev/docs/tailwind.md) — Tailwind v4 OKLCH color tokens (light + dark) for the uipkge design system. Drops into the project Tailwind CSS entry.

## Full content

- [https://uipkge.dev/docs.md](https://uipkge.dev/docs.md) — every component as Markdown (descriptions, install, usage, props, deps)
- [https://uipkge.dev/llms-full.txt](https://uipkge.dev/llms-full.txt) — every manifest with raw file source inline

## Pages

- [Home](https://uipkge.dev/) — landing page with quickstart
- [Components](https://uipkge.dev/components) — searchable component browser
- [Blocks](https://uipkge.dev/blocks) — composed blocks (KPI grid, employee table, etc.)
- [Templates](https://uipkge.dev/templates) — full reference apps (HRMS live, hospital + tracking planned)
- [Preview a component](https://uipkge.dev/components/button) — pattern: https://uipkge.dev/components/<name>

## Source

- Repo: https://github.com/uday-a/uipkge
- License: MIT