# Agentic UI Kit

> Production-ready React and Next.js UI for developers and their coding agents: a component catalog, app templates and blueprints, installed from a private shadcn registry through a CLI, agent skills and a local MCP server.

Key facts:

- 839 installable components for React and Next.js: 323 blocks, 142 features, 226 pages, 40 layouts, 92 motion, 16 effects.
- 18 app templates and 16 blueprints, every screen running live.
- Installed as source files through the shadcn CLI from a private registry, on Radix UI or Base UI (React 19, Next.js App Router, Tailwind CSS 4).
- A local MCP server (stdio) with 9 read-only tools, 4 agent skills and the agentic-ui CLI (5 commands).
- 26 theme presets and a Theme Studio; one theme styles every component.
- One-time license: one developer, unlimited projects, all 1.x updates. Sold by Valtiant, Uruguay; checkout through Polar (merchant of record).

## Start here

- [Install with your coding agent](https://agentic-ui-kit.com/docs#agent-install): store the license key once, then paste one prompt
- [Guides by agent](https://agentic-ui-kit.com/guides): [Claude Code](https://agentic-ui-kit.com/guides/claude-code), [Cursor](https://agentic-ui-kit.com/guides/cursor), [Codex](https://agentic-ui-kit.com/guides/codex)
- [MCP server](https://agentic-ui-kit.com/mcp): the 9 tools and how agents use them
- [Pricing](https://agentic-ui-kit.com/pricing): Solo, one-time payment
- [Agentic UI Kit vs free shadcn/ui](https://agentic-ui-kit.com/compare/shadcn-ui)
- [Tailwind Plus alternative for React and Next.js](https://agentic-ui-kit.com/alternatives/tailwind-plus)

## Components by category

- [Blocks](https://agentic-ui-kit.com/components/category/block.md): 323 components, each linked to its Markdown twin (/components/<id>.md)
- [Features](https://agentic-ui-kit.com/components/category/feature.md): 142 components, each linked to its Markdown twin (/components/<id>.md)
- [Pages](https://agentic-ui-kit.com/components/category/page.md): 226 components, each linked to its Markdown twin (/components/<id>.md)
- [Layouts](https://agentic-ui-kit.com/components/category/layout.md): 40 components, each linked to its Markdown twin (/components/<id>.md)
- [Motion](https://agentic-ui-kit.com/components/category/motion.md): 92 components, each linked to its Markdown twin (/components/<id>.md)
- [Effects](https://agentic-ui-kit.com/components/category/effects.md): 16 components, each linked to its Markdown twin (/components/<id>.md)

## Pages

- [Components](https://agentic-ui-kit.com/components): every component, running live
- [Templates](https://agentic-ui-kit.com/templates): complete apps, every screen live, installed screen by screen
- [Blueprints](https://agentic-ui-kit.com/blueprints): multi-screen apps installed with one command
- [Motion & effects](https://agentic-ui-kit.com/motion)
- [Theme Studio](https://agentic-ui-kit.com/themes)
- [How it works](https://agentic-ui-kit.com/how-it-works): recorded agent runs from request to running screens
- [For agents](https://agentic-ui-kit.com/agents): CLI, MCP server and skills
- [Docs](https://agentic-ui-kit.com/docs): install and connect a project
- [Terms of sale](https://agentic-ui-kit.com/terms): one-time payment through Polar, delivery, 14-day refunds, 1.x updates
- [Privacy](https://agentic-ui-kit.com/privacy): no accounts, no cookies, cookieless aggregate analytics (Cloudflare Web Analytics)
- [License](https://agentic-ui-kit.com/license): unlimited projects, no redistribution of the kit, attribution kept in source
- [Third-party notices](https://agentic-ui-kit.com/license/third-party): open-source licenses of included software and fonts

## Templates and blueprints

- [Kestrel Admin Kit](https://agentic-ui-kit.com/templates/admin-kit): template, 145 screens (Home, 401, 403, 404, 503, Developers · API Keys, Developers · Events & Logs, Developers · Overview, Developers · Webhooks, Developers · Webhooks, Ecommerce · Add Customer, Ecommerce · Add Order, Ecommerce · Add Product, Ecommerce · Add Product 2, Ecommerce · Add Shipping, Ecommerce · Customer Detail 1, Ecommerce · Customer List 1, Ecommerce · Dashboard 1, Ecommerce · Dashboard 2, Ecommerce · Dashboard 3, Ecommerce · Dashboard 4, Ecommerce · Dashboard 5, Ecommerce · Dashboard 6, Ecommerce · Dashboard 7, Ecommerce · Dashboard 8, Ecommerce · Dashboard 9, Ecommerce · Edit Customer, Ecommerce · Edit Order, Ecommerce · Edit Product 2, Ecommerce · Edit Product, Ecommerce · Edit Shipping, Ecommerce · Order Detail 1, Ecommerce · Order Detail 2, Ecommerce · Order List 1, Ecommerce · Order List 2, Ecommerce · Order List 3, Ecommerce · Product Detail 1, Ecommerce · Product Detail 2, Ecommerce · Product Detail 2, Ecommerce · Product Detail, Ecommerce · Product List 1, Ecommerce · Product List 2, Ecommerce · Product List 3, Ecommerce · Product List 4, Ecommerce · Shipment Detail 1, Ecommerce · Shipment List 1, Error, Forgot Password, Login, Original · Dashboard 10, Original · Dashboard 11, Original · Dashboard 12, Original · Settings, Original · Settings · Billing, Original · Settings · Connected Apps, Original · Settings · Notifications, Original · Settings · Plans, Original · Settings · Profile, Original · Tasks, Original · Tasks, Original · Users, Original · Users, Payment Processor · Create Invoice, Payment Processor · Create Invoice 2, Payment Processor · Create Invoice 3, Payment Processor · Create Subscription, Payment Processor · Customer Detail, Payment Processor · Customer Detail 2, Payment Processor · Customer Detail 3, Payment Processor · Customers, Payment Processor · Customers List 2, Payment Processor · Dashboard 1, Payment Processor · Dashboard 2, Payment Processor · Dashboard 3, Payment Processor · Dashboard 4, Payment Processor · Dashboard 5, Payment Processor · Dashboard 6, Payment Processor · Delivery Simulator, Payment Processor · Enterprise Client Detail, Payment Processor · Invoice Detail, Payment Processor · Invoice Detail 2, Payment Processor · Invoice Detail 3, Payment Processor · Invoice List, Payment Processor · Invoice List 2, Payment Processor · Invoice List 3, Payment Processor · Invoice List 4, Payment Processor · Invoice List 5, Payment Processor · Payment Workflow, Payment Processor · Subscription Detail, Payment Processor · Subscriptions, Payment Processor · Subscriptions 2, Payment Processor · Subscriptions 3, Payment Processor · Subscriptions 4, Payment Processor · Transaction Detail, Payment Processor · Transaction Detail 2, Payment Processor · Transactions, Payment Processor · Transactions List 2, Payment Processor · Webhooks, Privacy, Project Management · Dashboard 1, Project Management · Dashboard 2, Project Management · Dashboard 3, Project Management · Dashboard 4, Project Management · Inbox 1, Project Management · Inbox 2, Project Management · Inbox 3, Project Management · Inbox 4, Project Management · Inbox Email 1, Project Management · Issue Calendar 1, Project Management · Issue Calendar 2, Project Management · Issue Detail 1, Project Management · Issue Detail 2, Project Management · Issue Gantt 1, Project Management · Issue Kanban 1, Project Management · Issue Kanban 2, Project Management · Issue Kanban 3, Project Management · Issue List 1, Project Management · Issue List 2, Project Management · Issue Spreadsheet 1, Project Management · Member List 1, Project Management · Member List 2, Project Management · Member List 3, Project Management · Project Detail 1, Project Management · Project Detail 2, Project Management · Project List 1, Project Management · Project List 2, Project Management · Project List 3, Project Management · Project List 4, Project Management · Team List 1, Project Management · Team List 2, Project Management · Team List 3, Project Management · Timeline Gantt, Register, Terms, Todo, Todo · Activity, Todo · Deleted, Todo · Important, Todo · Notifications, Todo · Projects, Todo · Settings, Todo · Task, Todo · Tasks · New, Todo · Today, Todo · Upcoming)
- [Quillmind AI Workspace](https://agentic-ui-kit.com/templates/ai-workspace): template, 8 screens (Home, Chats, Chats, Code, Customize, Design, Projects, Settings)
- [Forkyard Code Hosting](https://agentic-ui-kit.com/templates/code-hosting): template, 11 screens (Home, Explore, Issues, Issues, New, Notifications, Pull Requests, Pull Requests, Repositories, Repositories, Settings)
- [Rolodeck CRM](https://agentic-ui-kit.com/templates/crm-contacts): template, 4 screens (Home, Activity, Companies, Favorites)
- [Stashbox File Storage](https://agentic-ui-kit.com/templates/file-storage): template, 9 screens (Home, Collections, Collections, Drive, Recent, Starred, Tags, Team, Trash)
- [Fundwell Finance Tracker](https://agentic-ui-kit.com/templates/finance-tracker): template, 6 screens (Home, Accounts, Analytics, Budgets, Investments, Transactions)
- [Aerodesk Flight Operations](https://agentic-ui-kit.com/templates/flight-ops): template, 5 screens (Home, Airports, Fleet, Flights, Live Map)
- [Stockline Inventory & Orders](https://agentic-ui-kit.com/templates/inventory-ops): template, 4 screens (Home, Analytics, Orders, Products)
- [Tonehall Music Studio](https://agentic-ui-kit.com/templates/music-studio): template, 6 screens (Home, Collaborators, Podcasts, Releases, Sessions, Tracks)
- [Cadenza Orchestra Operations](https://agentic-ui-kit.com/templates/orchestra-ops): template, 5 screens (Home, Correspondence, Ensemble, Programmes, Season)
- [Orbitra Project Hub](https://agentic-ui-kit.com/templates/project-hub): template, 7 screens (Home, Inbox, Members, Projects, Settings, Team · All, Teams)
- [Folioteca Rare Books](https://agentic-ui-kit.com/templates/rare-books): template, 5 screens (Home, Acquisitions, Exhibitions, Library, Network)
- [Pantrie Recipe & Meal Planner](https://agentic-ui-kit.com/templates/recipe-manager): template, 8 screens (Home, Collections, Collections, Favorites, Meal Plan, Recent, Recipes, Trash)
- [Tidemark Regatta Operations](https://agentic-ui-kit.com/templates/regatta-ops): template, 5 screens (Home, Fleet, Marinas, Regattas, Standings)
- [Palaver Social Client](https://agentic-ui-kit.com/templates/social-client): template, 10 screens (Home, Activity, Ephemeral, Following, For You, Profile, Saved, Search, Stats, Thread)
- [Pagewell Team Workspace](https://agentic-ui-kit.com/templates/team-workspace): template, 7 screens (Home, AI, Inbox, Library, Meetings, P, Tasks)
- [Wayfarely Travel Marketplace](https://agentic-ui-kit.com/templates/travel-marketplace): template, 11 screens (Home, Experiences, Experiences, Explore, Listings, Messages, Profile, Services, Services, Trips, Wishlists)
- [Vintry Wine Cellar](https://agentic-ui-kit.com/templates/wine-cellar): template, 5 screens (Home, Bottles, Regions, Tastings, Wishlist)
- [AI App](https://agentic-ui-kit.com/templates/blueprint-ai-app): blueprint, 4 screens (Chat, Connectors, AI in docs, Traces & usage)
- [Analytics](https://agentic-ui-kit.com/templates/blueprint-analytics): blueprint, 5 screens (Executive, Finance, Sales, Engagement, Inventory)
- [Clinic Operations](https://agentic-ui-kit.com/templates/blueprint-clinic-operations): blueprint, 7 screens (Appointments, Patients, Patient record, Register patient, Treatments, Billing, Stats)
- [Collection Manager](https://agentic-ui-kit.com/templates/blueprint-collection-manager): blueprint, 5 screens (Collection, Library, Acquisitions, Journal, Collections)
- [CRM](https://agentic-ui-kit.com/templates/blueprint-crm): blueprint, 4 screens (Contacts, Companies, Deals pipeline, Inbox)
- [Fintech Trading (analytics live)](https://agentic-ui-kit.com/templates/blueprint-fintech-trading): blueprint, 4 screens (Watchlist, Portfolio P&L, Orders history, Price alerts)
- [Internal Operations](https://agentic-ui-kit.com/templates/blueprint-internal-operations): blueprint, 5 screens (Operations overview, Orders, Transactions, Audit, Tasks)
- [Internal Operations — public status variant](https://agentic-ui-kit.com/templates/blueprint-internal-operations-public): blueprint, 8 screens (Public status page, Incident list, Incident detail with timeline, On-call schedule, Services health, Postmortem editor, Event log, Settings)
- [Legal Operations](https://agentic-ui-kit.com/templates/blueprint-legal-operations): blueprint, 6 screens (matters-list, matter-detail, deadlines-calendar, documents-workspace, billing-workspace, client-portal)
- [Marketing Analytics](https://agentic-ui-kit.com/templates/blueprint-marketing-analytics): blueprint, 5 screens (Campaign overview, Conversion funnel, Cohort retention, Attribution, Audience explorer)
- [Marketplace](https://agentic-ui-kit.com/templates/blueprint-marketplace): blueprint, 4 screens (Discover, Explore map, Trips, Host listings)
- [People Operations](https://agentic-ui-kit.com/templates/blueprint-people-operations): blueprint, 6 screens (Directory, Org chart, Recruiting, Time off, Employee detail, Access roles)
- [Project Delivery](https://agentic-ui-kit.com/templates/blueprint-project-delivery): blueprint, 3 screens (Issues, Board, Roadmap)
- [SaaS Admin Starter](https://agentic-ui-kit.com/templates/blueprint-saas-admin-starter): blueprint, 12 screens (Sign in, Sign up, Reset password, Verification, Overview, Billing, Checkout, Members, Permissions, Settings, Security, Audit log)
- [SaaS Backoffice](https://agentic-ui-kit.com/templates/blueprint-saas-backoffice): blueprint, 4 screens (Overview, Billing, Developers, Workspace settings)
- [Support Desk](https://agentic-ui-kit.com/templates/blueprint-support-desk): blueprint, 5 screens (Ticket inbox, Ticket detail, Contacts & companies, Support analytics, Settings)

## Components

### Core Tasks Datatable

Central enterprise task manager.

- id: `core-tasks-datatable`
- Page: https://agentic-ui-kit.com/components/core-tasks-datatable
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/tasks?piece=core-tasks-datatable

## Install

```bash
agentic-ui add core-tasks-datatable
npx shadcn@4.17.0 add @agentic-ui/core-tasks-datatable
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** faceted-filters, column-visibility, bulk-selection, row-actions, server-pagination
- **Intents:** manage-collection, track-status, configure
- **Suits domains:** project-management, operations, saas, devtools
- **Interaction:** sort-columns, filter-facet, toggle-columns, select-rows, open-drawer
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Central enterprise task manager, Operational backlog with status and priority filters
- **Avoid when:** Informal lists with no need for pagination or complex sorting
- **Preserve when adapting:** tanstack-table-pipeline, faceted-filter-system, column-visibility-toggle
- **Replace when adapting:** task-schema, status-options, priority-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.65/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 9/10, code 10/10
- **Uses primitives:** table, button, input, dropdown-menu, badge, dialog, sheet
- **npm dependencies:** @tanstack/react-table, lucide-react
- **Used in:** Kestrel Admin Kit (template), Internal Operations (blueprint)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, @radix-ui/react-icons@^1.3.2, @tabler/icons-react@^3.41.1, @tanstack/react-table@^8.21.3, lucide-react@0.577.0, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** core-tasks-mutate-drawer, core-tasks-table, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-dialog, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-form


### Motion Foundation

Control and configuration panel for motion tokens.

- id: `motion-foundation`
- Page: https://agentic-ui-kit.com/components/motion-foundation
- Live preview: https://agentic-ui-kit.com/live/component/motion-foundation

## Install

```bash
agentic-ui add motion-foundation
npx shadcn@4.17.0 add @agentic-ui/motion-foundation
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** motion-token-system, spring-physics, reduced-motion-fallback, informative-state-preservation, config-profile-switching
- **Intents:** configure, track-status, monitor-live
- **Suits domains:** settings, devtools, saas, operations, ai-workspace
- **Interaction:** click, select, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** control and configuration panel for motion tokens, sandbox for experimenting with spring physics and animations, informative state monitor for workflows and AI agents
- **Avoid when:** screens that require no customization or animation governance
- **Preserve when adapting:** component-hierarchy, motion-context-model, accessible-states
- **Replace when adapting:** domain-labels, available-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.6/10
- **Quality breakdown:** visual 9.5/10, responsive 9.5/10, accessibility 9.5/10, code 9.5/10
- **Uses primitives:** button, card, badge, tabs, switch, select
- **npm dependencies:** clsx, tailwind-merge
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps


### Motion Skeleton Shimmer

Skeleton loading state for financial metric and KPI cards.

- id: `motion-skeleton-shimmer`
- Page: https://agentic-ui-kit.com/components/motion-skeleton-shimmer
- Live preview: https://agentic-ui-kit.com/live/component/motion-skeleton-shimmer

## Install

```bash
agentic-ui add motion-skeleton-shimmer
npx shadcn@4.17.0 add @agentic-ui/motion-skeleton-shimmer
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** skeleton-shimmer, pattern-variants, personality-tuning, reduced-motion-fallback, informative-state-preservation, zero-layout-shift
- **Intents:** track-status, monitor-live, explore-detail
- **Suits domains:** saas, finance, ecommerce, project-management, ai-workspace
- **Interaction:** click, select, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Skeleton loading state for financial metric and KPI cards, Synchronized shimmer for data tables and ledgers with pagination, Placeholder for time-series charts and analytics with zero layout shift, Loading indicator for activity feeds and user profiles
- **Avoid when:** Views where data is already available synchronously on the first render, Operations that require modal blocking with an isolated spinner
- **Preserve when adapting:** hardware-accelerated-shimmer, accessible-informative-states, layout-dimensions, personality-tokens
- **Replace when adapting:** pattern-layout, domain-status-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.6/10
- **Quality breakdown:** visual 9.5/10, responsive 9.5/10, accessibility 9.5/10, code 9.5/10
- **Uses primitives:** skeleton, card, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **npm dependencies (registry):** clsx@^2.1.1
- **Registry dependencies:** lib-motion


### Motion Voice Waveform

Voice input visualization for a push-to-talk button in a chat bar with an AI assistant.

- id: `motion-voice-waveform`
- Page: https://agentic-ui-kit.com/components/motion-voice-waveform
- Live preview: https://agentic-ui-kit.com/live/component/motion-voice-waveform

## Install

```bash
agentic-ui add motion-voice-waveform
npx shadcn@4.17.0 add @agentic-ui/motion-voice-waveform
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** voice-waveform, audio-level-meter, recording-states, personality-tuning, reduced-motion-fallback, informative-state-preservation, zero-layout-shift
- **Intents:** communicate, monitor-live, track-status, converse
- **Suits domains:** ai-workspace, saas, devtools, media, notes
- **Interaction:** click, keyboard-navigation, select
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Voice input visualization for a push-to-talk button in a chat bar with an AI assistant, Live voice modulation indicator while recording audio notes, Real-time visualizer of spoken response and speech synthesis for agents, Microphone signal level monitor and voice activity detection
- **Avoid when:** Playback of full audio tracks that require an interactive track scrubber, Text-only views with no voice or microphone capabilities
- **Preserve when adapting:** compositor-driven-transform, accessible-informative-states, personality-tokens, wcag-reduced-motion-fallback
- **Replace when adapting:** audio-input-source, status-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.6/10
- **Quality breakdown:** visual 9.5/10, responsive 9.5/10, accessibility 9.5/10, code 9.5/10
- **Uses primitives:** badge, button, card
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Core Settings Plans

SaaS subscription change or upgrade page.

- id: `core-settings-plans`
- Page: https://agentic-ui-kit.com/components/core-settings-plans
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/settings/plans?piece=core-settings-plans

## Install

```bash
agentic-ui add core-settings-plans
npx shadcn@4.17.0 add @agentic-ui/core-settings-plans
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** tier-comparison, feature-matrix, billing-cycle-switch, upgrade-drawer
- **Intents:** configure, show-composition
- **Suits domains:** billing, saas, settings, ecommerce
- **Interaction:** toggle-monthly-annual, select-plan, open-checkout-drawer
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** SaaS subscription change or upgrade page, Pricing and plans table
- **Avoid when:** Internal services without a pricing model
- **Preserve when adapting:** pricing-tier-card-anatomy, feature-check-list
- **Replace when adapting:** pricing-tiers, feature-catalog, checkout-handler
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.5/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, sheet
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, @radix-ui/react-icons@^1.3.2, @tabler/icons-react@^3.41.1, country-region-data@4.1.0, date-fns@4.1.0, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dialog, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-scroll-area, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-sheet, ui-calendar, ui-form, ui-radio-group


### Devtools Event Log

Corporate audit log.

- id: `devtools-event-log`
- Page: https://agentic-ui-kit.com/components/devtools-event-log
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/developers/events-&-logs?piece=devtools-event-log

## Install

```bash
agentic-ui add devtools-event-log
npx shadcn@4.17.0 add @agentic-ui/devtools-event-log
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** event-streaming, log-filtering, status-badging, payload-inspection, export-logs
- **Intents:** audit-trail, explore-detail, manage-collection
- **Suits domains:** devtools, operations, fintech, saas, billing
- **Interaction:** filter-by-status, search-by-request-id, inspect-payload, date-range-filter
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Corporate audit log, Trace of distributed transactions and events
- **Avoid when:** Systems with no compliance requirements or audit history
- **Preserve when adapting:** audit-table-density, status-badging-system, payload-json-viewer
- **Replace when adapting:** event-schema, filter-facets, export-formats
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.5/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, input, table, sheet, select
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template), AI App (blueprint), Internal Operations — public status variant (blueprint), Internal Operations (blueprint), SaaS Admin Starter (blueprint), SaaS Backoffice (blueprint), Support Desk (blueprint)
- **npm dependencies (registry):** @tabler/icons-react@^3.41.1, class-variance-authority@^0.7.1, date-fns@4.1.0, date-fns-tz@3.2.0, lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0
- **Registry dependencies:** devtools-audit-log-table, devtools-log-toolbar, devtools-route-traffic-metrics, lib-admin-kit-utils, ui-accordion, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-checkbox, ui-admin-kit-collapsible, ui-admin-kit-dialog, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-progress, ui-admin-kit-scroll-area, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-tabs, ui-admin-kit-tooltip, ui-calendar, ui-table


### Project Management Inbox Split View

Notifications and mentions inbox with preview.

- id: `project-management-inbox-split-view`
- Page: https://agentic-ui-kit.com/components/project-management-inbox-split-view
- Live preview: https://agentic-ui-kit.com/live/piece/project-management-inbox-split-view?piece=project-management-inbox-split-view

## Install

```bash
agentic-ui add project-management-inbox-split-view
npx shadcn@4.17.0 add @agentic-ui/project-management-inbox-split-view
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** resizable-panels, unread-filter, notification-list, keyboard-navigation, issue-preview-pane
- **Intents:** monitor-live, communicate, track-status
- **Suits domains:** project-management, saas, devtools, support, operations
- **Interaction:** panel-resize, row-select, filter-unread
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** notifications and mentions inbox with preview, operational alerts center with a details panel, review queue for issues or pull requests
- **Avoid when:** real-time messaging in a continuous-thread chat style
- **Preserve when adapting:** split-pane-architecture, unread-filter-toggle, selection-synchronization
- **Replace when adapting:** notification-event-types, preview-details-renderer
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.5/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** resizable, button, badge
- **npm dependencies:** react-resizable-panels, lucide-react, zustand
- **Used in:** Orbitra Project Hub (template), CRM (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, motion@12.23.24, zustand@5.0.8
- **Registry dependencies:** lib-project-hub-utils, project-management-inbox-issue-preview, ui-avatar, ui-button, ui-dropdown-menu, ui-label, ui-resizable, ui-sidebar, ui-switch


### Project Management Issue Create Dialog

Quick ticket or issue creation modal.

- id: `project-management-issue-create-dialog`
- Page: https://agentic-ui-kit.com/components/project-management-issue-create-dialog
- Live preview: https://agentic-ui-kit.com/live/piece/project-management-issue-create-dialog?activate=button&piece=project-management-issue-create-dialog

## Install

```bash
agentic-ui add project-management-issue-create-dialog
npx shadcn@4.17.0 add @agentic-ui/project-management-issue-create-dialog
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** keyboard-shortcut, status-selector, priority-selector, assignee-selector, label-selector, project-selector, auto-focus
- **Intents:** create-edit
- **Suits domains:** project-management, devtools, saas, support, personal-productivity
- **Interaction:** modal-open, keyboard-shortcut, form-submit
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** quick ticket or issue creation modal, user feedback capture form with metadata, task creation dialog with immediate assignment and project
- **Avoid when:** long multi-step onboarding or configuration forms
- **Preserve when adapting:** property-selector-strip, autofocus-title-pattern, keyboard-dismissal
- **Replace when adapting:** form-fields, default-values, entity-types
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.5/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** dialog, button, input, textarea, badge, avatar
- **npm dependencies:** lucide-react, zustand
- **Used in:** Orbitra Project Hub (template), Project Delivery (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, sonner@^2.0.7, uuid@^11.1.1, zustand@5.0.8
- **Registry dependencies:** lib-project-hub-utils, ui-avatar, ui-button, ui-command, ui-dialog, ui-input, ui-label, ui-popover, ui-switch, ui-textarea


### Motion Command Palette Spring

Fast global navigation via the ⌘K keyboard shortcut in a SaaS platform.

- id: `motion-command-palette-spring`
- Page: https://agentic-ui-kit.com/components/motion-command-palette-spring
- Live preview: https://agentic-ui-kit.com/live/component/motion-command-palette-spring

## Install

```bash
agentic-ui add motion-command-palette-spring
npx shadcn@4.17.0 add @agentic-ui/motion-command-palette-spring
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** command-palette-spring, keyboard-navigation, realtime-search-filtering, category-filtering, personality-tuning, reduced-motion-fallback, informative-state-preservation, wai-aria-combobox
- **Intents:** navigate, execute-flow, explore-detail, configure
- **Suits domains:** saas, devtools, project-management, settings, ai-workspace
- **Interaction:** click, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Fast global navigation via the ⌘K keyboard shortcut in a SaaS platform, Operational command palette with filtering by action and settings categories, Interactive picker with a real-time preview of the active command
- **Avoid when:** Simple static context menus where a standard dropdown is enough, Devices without primary keyboard support where a fixed bar is preferred
- **Preserve when adapting:** spring-physics-system, wai-aria-combobox-model, reduced-motion-fallback, informative-status-preservation
- **Replace when adapting:** command-items-list, category-definitions, shortcut-keybindings
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.38/10
- **Quality breakdown:** visual 9/10, responsive 9.5/10, accessibility 9.5/10, code 9/10
- **Uses primitives:** dialog, input, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### AI Workspace Code Workbench

Workbench for autonomous software engineering agents.

- id: `ai-workspace-code-workbench`
- Page: https://agentic-ui-kit.com/components/ai-workspace-code-workbench
- Live preview: https://agentic-ui-kit.com/live/template/ai-workspace/code?piece=ai-workspace-code-workbench

## Install

```bash
agentic-ui add ai-workspace-code-workbench
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-code-workbench
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** agent-session-timeline, repo-selector, command-prompt-composer, session-status-badges, diff-review-controls
- **Intents:** create-edit, track-status, monitor-live, orchestrate-agents
- **Suits domains:** ai-workspace, devtools, saas, operations
- **Interaction:** session-switch, repo-select, prompt-submission, sidebar-toggle
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** workbench for autonomous software engineering agents, console for running technical tasks and AI-guided refactoring, interactive development environment assisted by language models
- **Avoid when:** applications without code context or command execution
- **Preserve when adapting:** session-sidebar-flow, agent-status-model, action-toolbar-layout
- **Replace when adapting:** repo-providers, execution-backend, suggestion-prompts
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.35/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, textarea, badge, avatar, dropdown-menu, collapsible, tooltip, switch
- **npm dependencies:** lucide-react
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6
- **Registry dependencies:** lib-ai-workspace-utils, ui-avatar, ui-badge, ui-button, ui-collapsible, ui-dropdown-menu, ui-switch, ui-textarea, ui-tooltip


### AI Workspace Conversation Thread

Central chat interface with LLMs and intelligent assistants.

- id: `ai-workspace-conversation-thread`
- Page: https://agentic-ui-kit.com/components/ai-workspace-conversation-thread
- Live preview: https://agentic-ui-kit.com/live/template/ai-workspace/chats/chat-offline-packs?piece=ai-workspace-conversation-thread

## Install

```bash
agentic-ui add ai-workspace-conversation-thread
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-conversation-thread
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** auto-scroll-bottom, message-list, composer-dock, metadata-banner, typewriter-integration
- **Intents:** communicate, explore-detail, track-status
- **Suits domains:** ai-workspace, devtools, personal-productivity, crm, support
- **Interaction:** scroll-thread, message-send, message-reactions, code-copy
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** central chat interface with LLMs and intelligent assistants, customer support thread with the full interaction history, conversation console for autonomous coding agents
- **Avoid when:** interfaces based exclusively on forms or tables
- **Preserve when adapting:** scroll-pinning-logic, thread-layout, composer-docking
- **Replace when adapting:** message-schema, model-branding, mock-replies
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.35/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** avatar, badge, button
- **npm dependencies:** lucide-react, zustand, date-fns
- **Used in:** Quillmind AI Workspace (template), AI App (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** ai-workspace-prompt-composer, lib-ai-workspace-utils, ui-avatar, ui-badge, ui-button


### AI Workspace Design Studio

AI-driven visual generation and prototyping studio.

- id: `ai-workspace-design-studio`
- Page: https://agentic-ui-kit.com/components/ai-workspace-design-studio
- Live preview: https://agentic-ui-kit.com/live/piece/ai-workspace-design-studio?piece=ai-workspace-design-studio

## Install

```bash
agentic-ui add ai-workspace-design-studio
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-design-studio
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** design-kind-selector, design-system-picker, fidelity-toggle, template-cards-gallery, search-filter
- **Intents:** create-edit, manage-collection, explore-detail, generate-content
- **Suits domains:** ai-workspace, media, saas, personal-productivity
- **Interaction:** kind-tab-click, system-select, fidelity-toggle, template-click
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** AI-driven visual generation and prototyping studio, catalog of UI templates and design systems for product teams, generator of presentations and conceptual wireframes
- **Avoid when:** interfaces aimed solely at backend administration with no graphic assets
- **Preserve when adapting:** design-kind-tabs, fidelity-toggle-pattern, system-select-dropdown
- **Replace when adapting:** design-systems-list, template-samples, brand-accent
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.35/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, input, avatar, badge, select
- **npm dependencies:** lucide-react
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-ai-workspace-utils, ui-avatar, ui-badge, ui-button, ui-input, ui-select


### AI Workspace Message Item

Agent reply message bubble with tool execution traces.

- id: `ai-workspace-message-item`
- Page: https://agentic-ui-kit.com/components/ai-workspace-message-item
- Live preview: https://agentic-ui-kit.com/live/template/ai-workspace/chats/chat-offline-packs?piece=ai-workspace-message-item

## Install

```bash
agentic-ui add ai-workspace-message-item
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-message-item
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** typewriter-effect, tool-calls-trace, attachment-chips, message-actions-bar, markdown-prose
- **Intents:** communicate, audit-trail
- **Suits domains:** ai-workspace, devtools, saas, crm, support
- **Interaction:** copy-content, rate-response, regenerate, attachment-open
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** agent reply message bubble with tool execution traces, message block with file attachments and copy options, conversation item with support for rich markdown formatting
- **Avoid when:** low-density SMS-style real-time messaging without metadata
- **Preserve when adapting:** typewriter-hook-integration, tool-call-box-layout, action-hover-model
- **Replace when adapting:** action-handlers, tool-call-formatting, avatar-service
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.35/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** avatar, button
- **npm dependencies:** lucide-react, zustand
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** ai-workspace-prompt-composer, lib-ai-workspace-utils, ui-avatar, ui-badge, ui-button


### AI Workspace Prompt Composer

Prompt input box for LLM models with an engine picker.

- id: `ai-workspace-prompt-composer`
- Page: https://agentic-ui-kit.com/components/ai-workspace-prompt-composer
- Live preview: https://agentic-ui-kit.com/live/piece/ai-workspace-prompt-composer?piece=ai-workspace-prompt-composer

## Install

```bash
agentic-ui add ai-workspace-prompt-composer
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-prompt-composer
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** auto-expanding-input, model-selector, attachment-trigger, shortcut-submit, skills-slash-command
- **Intents:** create-edit, communicate
- **Suits domains:** ai-workspace, devtools, personal-productivity, saas, support
- **Interaction:** text-input, model-select, enter-to-submit, attach-click
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** prompt input box for LLM models with an engine picker, message field for autonomous agents with attachment upload, conversational composer in support tools and smart tickets
- **Avoid when:** rigid tabular data entry forms
- **Preserve when adapting:** interaction-model, model-dropdown-integration, submit-shortcut
- **Replace when adapting:** model-catalogs, slash-command-triggers, placeholder-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.35/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** textarea, button, dropdown-menu
- **npm dependencies:** lucide-react, zustand
- **Used in:** Quillmind AI Workspace (template), AI App (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-ai-workspace-utils, ui-button, ui-dropdown-menu, ui-textarea


### AI Workspace Skills Connectors Manager

Configuration panel for skills and MCP servers for agents.

- id: `ai-workspace-skills-connectors-manager`
- Page: https://agentic-ui-kit.com/components/ai-workspace-skills-connectors-manager
- Live preview: https://agentic-ui-kit.com/live/piece/ai-workspace-skills-connectors-manager?piece=ai-workspace-skills-connectors-manager

## Install

```bash
agentic-ui add ai-workspace-skills-connectors-manager
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-skills-connectors-manager
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** skills-master-detail, connectors-status-grouping, permission-level-selector, code-manifest-preview, enable-toggle-switch
- **Intents:** configure, manage-collection, explore-detail
- **Suits domains:** ai-workspace, devtools, saas, operations, support
- **Interaction:** skill-toggle, connector-permission-change, code-view, search-filter
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** configuration panel for skills and MCP servers for agents, plugin integration manager with granular permission control, catalog of tool extensions for developers
- **Avoid when:** end-user screens that require no technical administration
- **Preserve when adapting:** master-detail-flow, permission-enum-mapping, scope-tabs
- **Replace when adapting:** skill-definitions, connector-registry, manifest-syntax
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.35/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, input, switch, badge, dropdown-menu
- **npm dependencies:** lucide-react, zustand
- **Used in:** Quillmind AI Workspace (template), AI App (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-ai-workspace-utils, ui-badge, ui-button, ui-dropdown-menu, ui-input, ui-switch


### AI Workspace Usage Metrics Chart

Monitor of token usage and API calls per period.

- id: `ai-workspace-usage-metrics-chart`
- Page: https://agentic-ui-kit.com/components/ai-workspace-usage-metrics-chart
- Live preview: https://agentic-ui-kit.com/live/piece/ai-workspace-usage-metrics-chart?piece=ai-workspace-usage-metrics-chart

## Install

```bash
agentic-ui add ai-workspace-usage-metrics-chart
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-usage-metrics-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** daily-volume-areachart, quota-progress-bars, peak-usage-indicator, metric-summary-counters
- **Intents:** compare-over-time, monitor-live, track-status
- **Suits domains:** ai-workspace, devtools, billing, saas, operations
- **Interaction:** chart-tooltip-hover, quota-inspection
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** monitor of token usage and API calls per period, daily message volume chart in an AI control center, quota limit tracking panel for team subscriptions
- **Avoid when:** complex multivariate analysis with more than five time series
- **Preserve when adapting:** barchart-grammar, progress-limit-layout, summary-badge-design
- **Replace when adapting:** metric-definitions, quota-thresholds, time-aggregation
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.35/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** progress, badge, chart
- **npm dependencies:** recharts, lucide-react, zustand
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1, zustand@5.0.8
- **Registry dependencies:** lib-ai-workspace-utils, ui-ai-workspace-field, ui-avatar, ui-badge, ui-button, ui-chart, ui-input, ui-progress, ui-select, ui-switch, ui-textarea


### Form Validation Summary

Vendor onboarding with tax and billing details.

- id: `form-validation-summary`
- Page: https://agentic-ui-kit.com/components/form-validation-summary
- Live preview: https://agentic-ui-kit.com/live/component/form-validation-summary

## Install

```bash
agentic-ui add form-validation-summary
npx shadcn@4.17.0 add @agentic-ui/form-validation-summary
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** error-digest, field-anchor-navigation, focus-management, live-region-announcement, severity-split, section-grouping, success-state, validating-state
- **Intents:** create-edit
- **Suits domains:** saas, billing, ecommerce, hr, healthcare, settings
- **Interaction:** anchor-navigation, keyboard-activation, focus-management, live-region
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** vendor onboarding with tax and billing details, checkout that fails address and payment validation, employee onboarding form with required fields per section, account settings where saving returns server errors
- **Avoid when:** one- or two-field forms where the inline message is enough, purely optimistic validation with no submit or server errors, full-page errors that correspond to an error state, not a form
- **Preserve when adapting:** alert-aria-contract, focus-on-submit-behaviour, field-anchor-contract, severity-ordering
- **Replace when adapting:** domain-copy, field-labels, validation-rules, section-names
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.35/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 10/10, code 9/10
- **Motion:** profile subtle, library css, reduced-motion fallback yes


### Project Management Issue Row

Issue row with quick status change and assignment.

- id: `project-management-issue-row`
- Page: https://agentic-ui-kit.com/components/project-management-issue-row
- Live preview: https://agentic-ui-kit.com/live/template/project-hub/project-hub/team/CORE/all?piece=project-management-issue-row

## Install

```bash
agentic-ui add project-management-issue-row
npx shadcn@4.17.0 add @agentic-ui/project-management-issue-row
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** draggable-row, status-toggle, priority-badge, label-list, assignee-avatar, project-tag, context-menu-trigger
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, devtools, operations, saas, personal-productivity
- **Interaction:** drag-and-drop, context-menu, inline-toggle
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** issue row with quick status change and assignment, task list item with priority selector and labels, backlog entry with project and user selector
- **Avoid when:** records with more than 10 numeric columns that require a full table
- **Preserve when adapting:** drag-handle-position, property-pill-order, hover-actions
- **Replace when adapting:** priority-icons, label-palette, user-avatar-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.35/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** checkbox, avatar, badge
- **npm dependencies:** react-dnd, lucide-react
- **Used in:** Orbitra Project Hub (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, motion@12.23.24, sonner@^2.0.7, zustand@5.0.8
- **Registry dependencies:** lib-project-hub-utils, ui-avatar, ui-badge, ui-button, ui-command, ui-context-menu, ui-dropdown-menu, ui-popover


### Project Management Issue Tracker

Kanban board and list of engineering issues.

- id: `project-management-issue-tracker`
- Page: https://agentic-ui-kit.com/components/project-management-issue-tracker
- Live preview: https://agentic-ui-kit.com/live/piece/project-management-issue-tracker?piece=project-management-issue-tracker

## Install

```bash
agentic-ui add project-management-issue-tracker
npx shadcn@4.17.0 add @agentic-ui/project-management-issue-tracker
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** list-view, grid-view, group-by-status, drag-and-drop, quick-search, context-menu, filter-state, cycle-summary
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, devtools, operations, saas, support
- **Interaction:** drag-and-drop, view-toggle, quick-search, inline-edit
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** kanban board and list of engineering issues, technical support ticket management with priority reordering, tracking of operational tasks and deliverables per sprint
- **Avoid when:** collections with no need for states or sequential flows
- **Preserve when adapting:** dual-view-model, dnd-reordering-logic, group-status-structure
- **Replace when adapting:** issue-schema, mock-stores, filter-criteria
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.35/10
- **Quality breakdown:** visual 10/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, badge
- **npm dependencies:** react-dnd, react-dnd-html5-backend, @kayron013/lexorank, zustand
- **Used in:** Orbitra Project Hub (template), Project Delivery (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, react-dnd@^16.0.1, react-dnd-html5-backend@^16.0.1, zustand@5.0.8
- **Registry dependencies:** lib-project-hub-utils, project-management-issue-card-grid, project-management-issue-command-palette, project-management-issue-status-board


### Motion Spinner Set

Save button that shows "Saving…" without changing width.

- id: `motion-spinner-set`
- Page: https://agentic-ui-kit.com/components/motion-spinner-set
- Live preview: https://agentic-ui-kit.com/live/component/motion-spinner-set

## Install

```bash
agentic-ui add motion-spinner-set
npx shadcn@4.17.0 add @agentic-ui/motion-spinner-set
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** spinner-variants, personality-tempo, button-loading-state, delayed-reveal, reduced-motion-fallback, informative-state-preservation
- **Intents:** track-status, execute-flow, monitor-live
- **Suits domains:** saas, finance, ecommerce, ai-workspace, devtools, operations
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Save button that shows "Saving…" without changing width, Background refresh of an invoice table, Connecting to a server or waiting for events in devtools consoles
- **Avoid when:** Loads with a known layout (use motion-skeleton-shimmer), Processes with measurable progress (use a determinate progress bar)
- **Preserve when adapting:** status-role-and-label, static-fallback-with-visible-label, personality-tempo-tokens
- **Replace when adapting:** domain-status-labels, tone-colors
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.28/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9.5/10, code 9/10
- **Uses primitives:** button, card
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Streaming Text

An assistant reply that arrives in irregular chunks.

- id: `motion-streaming-text`
- Page: https://agentic-ui-kit.com/components/motion-streaming-text
- Live preview: https://agentic-ui-kit.com/live/component/motion-streaming-text

## Install

```bash
agentic-ui add motion-streaming-text
npx shadcn@4.17.0 add @agentic-ui/motion-streaming-text
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** smoothed-token-reveal, backlog-catch-up, per-word-fade, streaming-caret, announced-stream-status, stop-reveal-all-error-states, personality-tempo, reduced-motion-fallback, informative-state-preservation
- **Intents:** communicate, track-status, monitor-live
- **Suits domains:** ai-workspace, saas, operations, devtools, knowledge, crm
- **Interaction:** click, keyboard-navigation
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** An assistant reply that arrives in irregular chunks, Automatic ticket summary generated in a side card, Output of a process or agent shown as it is produced
- **Avoid when:** Full text available in advance (render it directly), Markdown with code blocks or tables (use an incremental renderer such as ai-stream-renderer and apply only the pacing), Waits without partial text (use motion-typing-indicator or motion-spinner-set)
- **Preserve when adapting:** body-aria-live-off-with-status-region, reveal-never-ahead-of-received-text, instant-reveal-without-motion, personality-tempo-tokens
- **Replace when adapting:** status-labels, stream-source-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.28/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9.5/10, code 9/10
- **Uses primitives:** button, card
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### AI Action Confirmation

Operations agent that asks to drop production tables and shows the rows, size and last use of each one.

- id: `ai-action-confirmation`
- Page: https://agentic-ui-kit.com/components/ai-action-confirmation
- Live preview: https://agentic-ui-kit.com/live/component/ai-action-confirmation

## Install

```bash
agentic-ui add ai-action-confirmation
npx shadcn@4.17.0 add @agentic-ui/ai-action-confirmation
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** human-in-the-loop-approval, impact-diff, field-level-before-after, impact-summary-counts, risk-levels, typed-confirmation-phrase, irreversible-acknowledgement, partial-approval, agent-note, expiry-countdown, execution-error-retry, empty-impact-state, modal-variant, keyboard-navigation
- **Intents:** orchestrate-agents, execute-flow, explore-detail, audit-trail
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, saas, support
- **Interaction:** approve-reject, item-include-toggle, diff-disclosure, typed-confirmation, acknowledge-checkbox, keyboard-submit, modal-dialog
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** operations agent that asks to drop production tables and shows the rows, size and last use of each one, support agent that bulk-reassigns tickets and shows the before/after of assignee and priority, repository agent that deletes a branch after its name is typed, in a blocking modal, secret rotation or key revocation where the reviewer excludes items before approving
- **Avoid when:** actions with no side effects or trivial ones where friction adds nothing (run them directly), approving a multi-step plan before running it (use ai-plan-approval), reviewing AI-suggested text or code (use ai-suggestion-diff or code-diff-viewer)
- **Preserve when adapting:** risk-proportional-friction, dry-run-impact-diff, partial-approval-model, focus-to-outcome
- **Replace when adapting:** domain-copy, resource-types, agent-runtime-adapter, confirmation-phrase-policy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** alert-dialog, badge, button, card, checkbox, input, label, textarea
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Chat Empty State

Assistant chat with no messages that offers four starting points configured by the workspace.

- id: `ai-chat-empty-state`
- Page: https://agentic-ui-kit.com/components/ai-chat-empty-state
- Live preview: https://agentic-ui-kit.com/live/component/ai-chat-empty-state

## Install

```bash
agentic-ui add ai-chat-empty-state
npx shadcn@4.17.0 add @agentic-ui/ai-chat-empty-state
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** prompt-suggestions, customisable-suggestion-set, templated-prompt-variables, variable-fill-form, resolved-prompt-preview, category-filtering, suggestion-search, roving-keyboard-navigation, compact-layout, loading-state, empty-state, error-recovery
- **Intents:** converse, navigate, generate-content
- **Suits domains:** ai-workspace, knowledge, saas, support, devtools
- **Interaction:** select-suggestion, fill-template-variables, filter-by-category, search-suggestions, keyboard-navigation, retry-after-error
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** assistant chat with no messages that offers four starting points configured by the workspace, side help panel with three quick prompts about the open project, support assistant whose team configures templates with product and customer variables, developer console that starts with diff review and test plan prompts
- **Avoid when:** the conversation already has messages: the empty state disappears as soon as there is history, product with no configurable prompts where a static welcome text is enough
- **Preserve when adapting:** suggestions-as-data, variable-resolution-before-submit, roving-focus-model, filter-and-search-composition
- **Replace when adapting:** suggestion-copy, category-taxonomy, hero-copy, suggestion-icons
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, input
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Chat Settings Panel

Side panel of an AI chat to set the model and temperature for that conversation only.

- id: `ai-chat-settings-panel`
- Page: https://agentic-ui-kit.com/components/ai-chat-settings-panel
- Live preview: https://agentic-ui-kit.com/live/component/ai-chat-settings-panel

## Install

```bash
agentic-ui add ai-chat-settings-panel
npx shadcn@4.17.0 add @agentic-ui/ai-chat-settings-panel
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** model-selection, temperature-control, top-p-control, max-tokens-control, system-prompt-editor, prompt-presets, per-conversation-scope, parameter-clamping, dirty-state-tracking, save-and-reset, field-validation, read-only-mode, keyboard-navigation
- **Intents:** configure, create-edit, explore-detail
- **Suits domains:** ai-workspace, ai-agents, saas, settings, devtools
- **Interaction:** model-select, slider-drag, keyboard-stepping, tab-switch, preset-apply, textarea-edit, toggle-switch, save-reset
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** side panel of an AI chat to set the model and temperature for that conversation only, agent settings where the system prompt is chosen from presets reviewed by the team, developer console comparing responses while changing top-p and max tokens, shared conversation in read-only mode where settings can be viewed but not edited
- **Avoid when:** isolated model selection without the rest of the inference parameters (use ai-model-picker), editing prompt templates with variables and versioning (use prompt-editor-variables), global account or workspace preferences that are not per conversation (use a standard settings form)
- **Preserve when adapting:** per-conversation-scoping, parameter-to-model-constraints, dirty-and-save-model, system-prompt-budget-feedback
- **Replace when adapting:** domain-copy, model-catalog, preset-library, persistence-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, label, select, separator, slider, switch, tabs, textarea
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Citations Panel

Conversational support assistant that cites knowledge base articles and resolved tickets.

- id: `ai-citations-panel`
- Page: https://agentic-ui-kit.com/components/ai-citations-panel
- Live preview: https://agentic-ui-kit.com/live/component/ai-citations-panel

## Install

```bash
agentic-ui add ai-citations-panel
npx shadcn@4.17.0 add @agentic-ui/ai-citations-panel
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** rag-source-list, source-preview-inspector, inline-citation-linking, relevance-score-metrics, source-type-filtering, real-time-search, chunk-metadata-inspection, citation-clipboard-actions, empty-state, error-recovery, keyboard-navigation
- **Intents:** retrieve-knowledge, explore-detail, communicate, track-status
- **Suits domains:** ai-workspace, ai-content, knowledge, support, devtools
- **Interaction:** source-selection, chunk-preview-inspection, real-time-search, category-filtering, citation-clipboard-copy, keyboard-navigation
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** conversational support assistant that cites knowledge base articles and resolved tickets, AI workspace for legal or financial analysis that verifies claims against PDF fragments, software engineering assistant that grounds refactoring suggestions by citing repository code, operations console that links automated recommendations to runbooks and postmortems
- **Avoid when:** direct answers without external document grounding or RAG (no citations required), pure relational tables that do not represent cited text fragments
- **Preserve when adapting:** rag-card-layout, preview-inspector-contract, relevance-score-visualization, keyboard-navigation-and-shortcuts, copy-action-feedback
- **Replace when adapting:** domain-sources-data, retrieval-metadata-schema, filter-categories
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, input
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Conversation History

Chat assistant with a side history where the user searches, renames and pins important conversations.

- id: `ai-conversation-history`
- Page: https://agentic-ui-kit.com/components/ai-conversation-history
- Live preview: https://agentic-ui-kit.com/live/component/ai-conversation-history

## Install

```bash
agentic-ui add ai-conversation-history
npx shadcn@4.17.0 add @agentic-ui/ai-conversation-history
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** conversation-list, conversation-search, inline-rename, pin-conversation, archive-conversation, share-conversation, share-scope-control, date-grouping, match-highlighting, delete-conversation, empty-state, no-results-state, error-recovery, keyboard-navigation
- **Intents:** converse, manage-collection, navigate, explore-detail, create-edit
- **Suits domains:** ai-workspace, ai-agents, saas, support, knowledge
- **Interaction:** conversation-search, inline-rename, pin-toggle, archive-toggle, share-dialog, context-menu, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** chat assistant with a side history where the user searches, renames and pins important conversations, agent console that archives closed runs and shares a read-only link with the team, support workspace that finds an earlier conversation by the text of its last message, product copilot that groups sessions by date and keeps pinned ones at the top
- **Avoid when:** listing messages inside an open conversation (use ai-message-list), document version history with diff (use docs-version-history), main application navigation with no conversational entities (use a standard navigation sidebar)
- **Preserve when adapting:** pinned-and-date-grouping, per-conversation-action-model, search-and-highlight-behaviour, share-scope-model
- **Replace when adapting:** domain-copy, conversation-source-adapter, share-link-format
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, dialog, dropdown-menu, skeleton
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Eval Score Chart

Prompt evaluation panel comparing candidate and production versions with a score distribution.

- id: `ai-eval-score-chart`
- Page: https://agentic-ui-kit.com/components/ai-eval-score-chart
- Live preview: https://agentic-ui-kit.com/live/component/ai-eval-score-chart

## Install

```bash
agentic-ui add ai-eval-score-chart
npx shadcn@4.17.0 add @agentic-ui/ai-eval-score-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** score-distribution, prompt-version-comparison, decile-histogram, pass-threshold-control, interactive-rubric-filter, drilldown-case-inspection, accessible-data-table, keyboard-navigation, state-resilience
- **Intents:** evaluate-ai, compare-over-time, explore-detail, track-status
- **Suits domains:** ai-workspace, devtools, analytics, operations, saas
- **Interaction:** prompt-version-comparison, decile-histogram-navigation, threshold-adjustment, rubric-filtering, drilldown-case-inspection, tabular-data-view
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** prompt evaluation panel comparing candidate and production versions with a score distribution, prompt engineering console watching improvements or regressions in factuality and safety tests, CI/CD dashboard for language models that validates acceptance thresholds before release, prompt performance audit with a breakdown of individual cases by decile
- **Avoid when:** only a single scalar metric is required with no case distribution (use stat-card), monitoring individual traces token by token in real time (use ai-trace-detail), non-quantitative evaluations based only on free-form feedback with no numeric score
- **Preserve when adapting:** keyboard-contract, histogram-decile-bins, pass-fail-threshold-dynamics, drilldown-case-inspection, accessible-table-alternative
- **Replace when adapting:** domain-evaluation-data, prompt-versions-list, rubric-criteria-taxonomy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Evals Results Table

Prompt eval suite: each nightly run is a column and each golden set case a row.

- id: `ai-evals-results-table`
- Page: https://agentic-ui-kit.com/components/ai-evals-results-table
- Live preview: https://agentic-ui-kit.com/live/component/ai-evals-results-table

## Install

```bash
agentic-ui add ai-evals-results-table
npx shadcn@4.17.0 add @agentic-ui/ai-evals-results-table
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** runs-by-cases-matrix, score-cell-heatmap, faceted-filtering, full-text-case-search, per-case-trend-sparkline, regression-detection, threshold-driven-pass-rate, column-sorting, cell-drilldown, keyboard-grid-navigation, empty-error-loading-states
- **Intents:** evaluate-ai, compare-over-time, track-status, explore-detail
- **Suits domains:** ai-workspace, devtools, analytics, operations, saas
- **Interaction:** faceted-filtering, case-search, threshold-adjustment, column-sorting, cell-drilldown, keyboard-grid-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** prompt eval suite: each nightly run is a column and each golden set case a row, CI console for models that flags which cases regressed relative to the previous run before promoting a version, rubric-based quality audit filtering only the safety cases that fail in the latest run, review of a specific case by opening the cell to read the grader feedback and its latency
- **Avoid when:** there is only one run and therefore no time axis or trend (use a simple results table), the aggregated score distribution is wanted instead of case-by-case detail (use ai-eval-score-chart), the span tree of a single execution is the object of study (use ai-trace-detail)
- **Preserve when adapting:** matrix-orientation-runs-as-columns, threshold-driven-cell-tinting, trend-derivation-from-last-two-runs, keyboard-grid-contract, empty-error-loading-states
- **Replace when adapting:** domain-evaluation-data, criteria-taxonomy, run-labels-and-versions, grader-feedback-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, table
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Feedback Actions

Rating an assistant response in a chat thread.

- id: `ai-feedback-actions`
- Page: https://agentic-ui-kit.com/components/ai-feedback-actions
- Live preview: https://agentic-ui-kit.com/live/component/ai-feedback-actions

## Install

```bash
agentic-ui add ai-feedback-actions
npx shadcn@4.17.0 add @agentic-ui/ai-feedback-actions
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** binary-rating, structured-reason-collection, free-text-comment, response-regeneration, inline-edit, copy-to-clipboard, optimistic-error-recovery
- **Intents:** communicate, create-edit, audit-trail
- **Suits domains:** ai-workspace, saas, devtools, knowledge, operations
- **Interaction:** click-to-action, keyboard-navigation, inline-editing
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** rating an assistant response in a chat thread, manual correction of a generated draft before publishing it, collecting quality reasons to feed an evaluation set
- **Avoid when:** rating human content, where the quality reason does not apply, long satisfaction surveys, which require a dedicated form
- **Preserve when adapting:** rating-toggle-semantics, reason-before-submit-flow, phase-and-error-announcements, keyboard-cancel-and-confirm
- **Replace when adapting:** feedback-persistence-adapter, regeneration-provider, reason-taxonomy, action-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI File Summary Card

Invoice attached to a chat thread with the amount and due date extracted.

- id: `ai-file-summary-card`
- Page: https://agentic-ui-kit.com/components/ai-file-summary-card
- Live preview: https://agentic-ui-kit.com/live/component/ai-file-summary-card

## Install

```bash
agentic-ui add ai-file-summary-card
npx shadcn@4.17.0 add @agentic-ui/ai-file-summary-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** automatic-summary, key-value-extraction, confidence-scoring, attachment-classification, progressive-disclosure, analysis-cancellation, error-recovery, unsupported-format-handling, delegated-file-actions
- **Intents:** explore-detail, retrieve-knowledge, generate-content
- **Suits domains:** ai-workspace, ai-content, knowledge, file-storage, saas, operations
- **Interaction:** click-to-action, progressive-disclosure, keyboard-navigation, copy-to-clipboard
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** invoice attached to a chat thread with the amount and due date extracted, spreadsheet uploaded to an assistant that reports rows and the period covered, meeting notes summarized with owners and next steps in a knowledge space, support ticket attachment summarized for the agent handling it
- **Avoid when:** summarizing text already visible in the conversation, which is what ai-summary-block is for, previewing the full content of the file, which requires a paginated viewer, file listings where only name and size are needed with no analysis
- **Preserve when adapting:** information-hierarchy, confidence-disclosure, analysis-lifecycle, interaction-model
- **Replace when adapting:** domain-copy, extraction-schema, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, progress
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Generated Gallery

Image generation workspace where each prompt produces a browsable batch with variations.

- id: `ai-generated-gallery`
- Page: https://agentic-ui-kit.com/components/ai-generated-gallery
- Live preview: https://agentic-ui-kit.com/live/component/ai-generated-gallery

## Install

```bash
agentic-ui add ai-generated-gallery
npx shadcn@4.17.0 add @agentic-ui/ai-generated-gallery
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** generated-image-grid, density-switch, image-variations, image-upscale, image-download, bulk-download, multi-select, lightbox-detail, generation-metadata, generation-progress, error-recovery, empty-state, keyboard-navigation
- **Intents:** generate-content, manage-collection, explore-detail, track-status, import-export
- **Suits domains:** ai-content, ai-vision, ai-workspace, media, marketing
- **Interaction:** grid-density-toggle, image-multi-select, variations-action, upscale-action, download-action, lightbox-navigation, copy-prompt
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** image generation workspace where each prompt produces a browsable batch with variations, marketing content studio that selects and bulk-downloads approved assets, media library showing the upscale in progress and the final 4x result, generation review panel with prompt, model and seed details to reproduce a result
- **Avoid when:** galleries of user-uploaded photos without generation metadata (use a standard media grid), previewing attachments inside the chat composer (use ai-image-attachments), annotating regions on a single image (use ai-vision-annotation)
- **Preserve when adapting:** generation-lifecycle-states, per-image-action-model, lightbox-metadata-structure, selection-and-bulk-download-flow
- **Replace when adapting:** domain-copy, model-brand-metadata, image-source-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, dialog, progress, separator, skeleton
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Human Handoff

Support inbox where the AI agent escalates to a human a refund that exceeds its approval limit.

- id: `ai-human-handoff`
- Page: https://agentic-ui-kit.com/components/ai-human-handoff
- Live preview: https://agentic-ui-kit.com/live/component/ai-human-handoff

## Install

```bash
agentic-ui add ai-human-handoff
npx shadcn@4.17.0 add @agentic-ui/ai-human-handoff
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** escalation-reason, context-summary, key-facts, attempt-trail, transcript-excerpt, suggested-reply-editing, assignee-routing, urgency-and-sla, error-recovery, empty-state, keyboard-navigation
- **Intents:** orchestrate-agents, communicate, track-status, execute-flow, explore-detail
- **Suits domains:** ai-agents, support, ai-workspace, operations, crm
- **Interaction:** assignee-selection, suggested-reply-editing, accept-handoff, return-to-agent, error-recovery, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** support inbox where the AI agent escalates to a human a refund that exceeds its approval limit, human review queue for policy-restricted actions (ownership transfer, access), reliability console where the agent escalates a possible multi-customer incident to on-call, handoff from a sales copilot to an account executive with the conversation summary and a proposed reply
- **Avoid when:** the human is already in the conversation and only needs the message thread (use a conversation thread), the escalation provides no summarized context and only transfers the ticket (use a simple assignment control), the step-by-step plan proposed by the agent needs review instead of taking over (use ai-plan-approval)
- **Preserve when adapting:** escalation-reason-visibility, context-summary-first, status-and-error-announcements, routing-keyboard-contract, human-review-before-send
- **Replace when adapting:** domain-copy, reason-taxonomy, assignee-directory, sla-and-urgency-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, avatar, separator, textarea
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Inline Writer

Document editor where the writer selects a paragraph and improves, shortens or expands it without leaving the flow.

- id: `ai-inline-writer`
- Page: https://agentic-ui-kit.com/components/ai-inline-writer
- Live preview: https://agentic-ui-kit.com/live/component/ai-inline-writer

## Install

```bash
agentic-ui add ai-inline-writer
npx shadcn@4.17.0 add @agentic-ui/ai-inline-writer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** selection-bubble-menu, rewrite-improve, rewrite-shorten, rewrite-expand, translate-selection, change-tone, inline-preview-before-apply, accept-discard-rewrite, keyboard-shortcuts, loading-state, error-recovery
- **Intents:** create-edit, generate-content, communicate
- **Suits domains:** ai-content, ai-workspace, notes, knowledge, crm, marketing
- **Interaction:** text-selection, bubble-menu, keyboard-shortcuts, preview-accept-discard, retry-on-error
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** document editor where the writer selects a paragraph and improves, shortens or expands it without leaving the flow, email client that translates or changes the tone of a selected fragment before sending, CRM that rewrites a sales note selected by the agent in a professional tone, internal knowledge base where long passages are condensed while the rest of the article stays intact
- **Avoid when:** a batch of suggestions already computed over the whole document is being reviewed (use ai-suggestion-diff), the text is read-only and cannot be edited by the user, the transformation must be applied automatically without prior human review
- **Preserve when adapting:** selection-anchored-placement, preview-before-apply-contract, keyboard-contract, aria-live-announcements, range-accurate-replacement
- **Replace when adapting:** domain-copy, action-set-and-shortcuts, rewrite-provider
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, separator
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Model Picker

Prompt composer toolbar to select the inference model by cost and latency.

- id: `ai-model-picker`
- Page: https://agentic-ui-kit.com/components/ai-model-picker
- Live preview: https://agentic-ui-kit.com/live/component/ai-model-picker

## Install

```bash
agentic-ui add ai-model-picker
npx shadcn@4.17.0 add @agentic-ui/ai-model-picker
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** cost-badges, speed-badges, category-filtering, real-time-search, context-window-indicator, combobox-keyboard-navigation, empty-state, degraded-state-handling
- **Intents:** configure, orchestrate-agents, explore-detail, generate-content
- **Suits domains:** ai-workspace, ai-content, ai-agents, devtools, saas
- **Interaction:** model-selection, category-filtering, real-time-search, keyboard-navigation
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** prompt composer toolbar to select the inference model by cost and latency, configuration panel for autonomous agents to assign specialized models per task, playground or comparative testing interface for LLM models, control panel for costs and token consumption in SaaS environments
- **Avoid when:** the selection is only between two binary options (use switch or toggle-group), multiple AI models or providers are not handled (use a static label)
- **Preserve when adapting:** combobox-keyboard-contract, aria-listbox-semantics, cost-speed-badge-indicators, search-and-filter-behavior, offline-disabled-guard
- **Replace when adapting:** model-catalog-data, pricing-and-speed-metrics, provider-branding
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, input, popover
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Multi Agent View

Research crew (planner, researcher, SQL analyst, writer, reviewer) coordinating in parallel on a report.

- id: `ai-multi-agent-view`
- Page: https://agentic-ui-kit.com/components/ai-multi-agent-view
- Live preview: https://agentic-ui-kit.com/live/component/ai-multi-agent-view

## Install

```bash
agentic-ui add ai-multi-agent-view
npx shadcn@4.17.0 add @agentic-ui/ai-multi-agent-view
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** parallel-agent-status, crew-status-summary, agent-dependencies, agent-progress, inter-agent-message-feed, message-kind-tagging, agent-focus-filter, pause-resume-agent, retry-agent, live-updates, loading-state, error-recovery, empty-state, keyboard-navigation
- **Intents:** orchestrate-agents, monitor-live, track-status, communicate, explore-detail
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, analytics
- **Interaction:** agent-selection, message-filtering, pause-resume, retry-agent, keyboard-navigation, error-recovery
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** research crew (planner, researcher, SQL analyst, writer, reviewer) coordinating in parallel on a report, orchestration console where a supervisor sees which sub-agent is blocked and by whom, support or content agent pipeline with handoffs between specialists, debugging a multi-agent system: filter the conversation of a specific agent and retry the one that failed
- **Avoid when:** a single agent runs sequential steps (use ai-agent-run-trace), the input/output detail of a tool call is needed (use ai-tool-call-card), the flow is an editable node graph (use the workflow canvas / ai-workflow-node-set)
- **Preserve when adapting:** agents-and-messages-side-by-side, textual-status-labels, attention-first-summary, roving-keyboard-contract, live-region-announcements
- **Replace when adapting:** domain-copy, agent-roles, message-kinds, model-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, avatar, progress, separator, skeleton
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Node Config Panel

Agent workflow editor: selecting an LLM node edits the model, temperature, prompts and JSON output.

- id: `ai-node-config-panel`
- Page: https://agentic-ui-kit.com/components/ai-node-config-panel
- Live preview: https://agentic-ui-kit.com/live/component/ai-node-config-panel

## Install

```bash
agentic-ui add ai-node-config-panel
npx shadcn@4.17.0 add @agentic-ui/ai-node-config-panel
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** schema-generated-form, per-kind-configuration, grouped-fieldsets, conditional-fields, inline-validation, validation-summary, dirty-state, save-reset, async-save-error, read-only-mode, keyboard-shortcuts, empty-state, loading-state, error-state
- **Intents:** configure, create-edit, orchestrate-agents
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, saas
- **Interaction:** schema-form, inline-validation, conditional-fields, keyboard-save, close-on-escape
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** agent workflow editor: selecting an LLM node edits the model, temperature, prompts and JSON output, automation builder where each plugin registers its schema and the panel generates the form without new code, configuring a webhook or cron trigger with pattern validation and conditional fields, human approval node with a list of approvers and an expiration policy
- **Avoid when:** the configuration is a fixed single-screen form with no variation by type (use a settings form), editing deeply nested structures or arbitrary objects is required (use a JSON editor or code-json-viewer), the goal is the canvas with nodes and connections (use ai-workflow-canvas / ai-workflow-node-set)
- **Preserve when adapting:** schema-to-widget-mapping, validation-and-summary-contract, dirty-save-reset-lifecycle, keyboard-contract, focus-management
- **Replace when adapting:** node-schemas, domain-copy, model-and-tool-options, persistence-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, input, label, switch, textarea
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** form-validation-summary, lib-primitives


### AI PII Redaction

Governance settings for an agent platform: which personal data is redacted in prompts, responses and traces.

- id: `ai-pii-redaction`
- Page: https://agentic-ui-kit.com/components/ai-pii-redaction
- Live preview: https://agentic-ui-kit.com/live/component/ai-pii-redaction

## Install

```bash
agentic-ui add ai-pii-redaction
npx shadcn@4.17.0 add @agentic-ui/ai-pii-redaction
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** pii-detection, per-entity-redaction-strategy, mask-partial-token-hash-remove, consistent-pseudonymization, checksum-validation, custom-regex-patterns, regex-validation, custom-term-dictionary, allowlist, redaction-scopes, live-preview, detected-highlights, findings-table, dirty-state-save-discard, save-error-retry, loading-error-read-only-states, keyboard-navigation
- **Intents:** configure, explore-detail
- **Suits domains:** ai-agents, ai-workspace, settings, saas, support, devtools
- **Interaction:** toggle, select, add-remove-chips, regex-input, tabs, live-preview, save-discard, keyboard-shortcut
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** governance settings for an agent platform: which personal data is redacted in prompts, responses and traces, AI support console that pseudonymizes customer emails and phone numbers before sending them to the model, LLM observability that masks API keys and IPs before persisting logs, enterprise admin who adds an employee ID pattern and checks in the preview that it is applied
- **Avoid when:** PII detection with server-side compliance guarantees (the engine is a preview; the runtime enforces the policy), moderation of toxic or safety content (use ai-content-moderation), management of provider keys or usage limits (use ai-provider-keys or ai-usage-policies)
- **Preserve when adapting:** policy-preview-side-by-side, per-entity-strategy, allowlist-over-detection, save-outcome-focus
- **Replace when adapting:** domain-copy, entity-catalog, policy-persistence-adapter, sample-presets
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** alert, badge, button, card, checkbox, input, label, select, skeleton, switch, tabs, textarea
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Plan Approval

Agent proposing a database migration plan with destructive steps that the operator reviews and approves one by one.

- id: `ai-plan-approval`
- Page: https://agentic-ui-kit.com/components/ai-plan-approval
- Live preview: https://agentic-ui-kit.com/live/component/ai-plan-approval

## Install

```bash
agentic-ui add ai-plan-approval
npx shadcn@4.17.0 add @agentic-ui/ai-plan-approval
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** step-by-step-approval, step-editing, step-rejection-feedback, step-reordering, step-deletion, custom-step-addition, plan-level-approval, plan-rejection-feedback, risk-level-indicators, live-execution-progression, empty-state, keyboard-navigation, live-status-announcements
- **Intents:** orchestrate-agents, execute-flow, create-edit, track-status, audit-trail
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, project-management
- **Interaction:** approve-reject, inline-edit, reorder-steps, add-step, execute-plan, rejection-feedback, collapsible-details, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** agent proposing a database migration plan with destructive steps that the operator reviews and approves one by one, DevOps automation console where the agent breaks a release down into sequential steps with command editing, multi-agent research assistant where the user reorders and approves collection sources before running, cloud admin panel where risky steps are discarded and automatic replanning is requested from the LLM
- **Avoid when:** immediate single actions with no sequence of steps (use ai-action-confirmation), inspecting a specific tool call with parameters and result (use ai-tool-call-card), interactive canvas-style node and edge flow diagrams (use workflow-canvas)
- **Preserve when adapting:** step-by-step-approval-contract, risk-level-indicators, live-accessibility-announcements, execution-state-lifecycle
- **Replace when adapting:** domain-copy, agent-metadata, tool-parameter-schemas
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, input, label, textarea
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Prompt Composer

AI agent workspace with contextual mentions of specialized agents and command execution.

- id: `ai-prompt-composer`
- Page: https://agentic-ui-kit.com/components/ai-prompt-composer
- Live preview: https://agentic-ui-kit.com/live/component/ai-prompt-composer

## Install

```bash
agentic-ui add ai-prompt-composer
npx shadcn@4.17.0 add @agentic-ui/ai-prompt-composer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** prompt-input, file-attachments, drag-and-drop-upload, mention-autocomplete, slash-commands-palette, model-selection, token-estimation, stop-generation, error-recovery, keyboard-navigation
- **Intents:** communicate, generate-content, converse, execute-flow
- **Suits domains:** ai-workspace, ai-agents, devtools, project-management, support
- **Interaction:** type-prompt, attach-files, mention-resources, execute-slash-commands, select-model, stop-generation, keyboard-navigation
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** AI agent workspace with contextual mentions of specialized agents and command execution, Development console for AI-assisted debugging with attached logs and architecture diagrams, Customer support inbox to draft quick replies and run automated flows with slash commands, Collaborative task manager with spec generation commands and resource mentions
- **Avoid when:** Static single-field forms that require no AI or interactive commands, Simple search fields where a standard text input is enough, Rich text or WYSIWYG editing environments for long documents
- **Preserve when adapting:** keyboard-contract, mention-and-command-popover-behavior, file-attachment-flow, stop-generation-pattern
- **Replace when adapting:** domain-copy, mention-items, command-palette-entries, model-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Provider Keys

Bring Your Own Key (BYOK) key management for enterprise artificial intelligence agents.

- id: `ai-provider-keys`
- Page: https://agentic-ui-kit.com/components/ai-provider-keys
- Live preview: https://agentic-ui-kit.com/live/component/ai-provider-keys

## Install

```bash
agentic-ui add ai-provider-keys
npx shadcn@4.17.0 add @agentic-ui/ai-provider-keys
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** byok-management, key-rotation-dual-overlap, key-mask-reveal, copy-key, provider-health-check, provider-filter, search-filter, empty-state, error-state, responsive-layout, live-region-announcements, keyboard-navigation
- **Intents:** configure, manage-collection, track-status, audit-trail
- **Suits domains:** ai-workspace, saas, devtools, settings, ai-agents
- **Interaction:** create-edit, copy-key, rotate-key, revoke-key, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Bring Your Own Key (BYOK) key management for enterprise artificial intelligence agents, rotation of OpenAI and Anthropic credentials with an overlap period and drain without downtime, health and latency checks of language model provider endpoints, automatic failover on quota exhaustion or rate limits
- **Avoid when:** applications without model calls or with a single hardcoded provider, end-user password management (it is not a password manager)
- **Preserve when adapting:** rotation-state-model, dual-key-grace-period, masking-and-reveal, provider-validation-rules
- **Replace when adapting:** provider-endpoints, simulated-latency, organization-fixtures
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, card, dialog, alert-dialog, input, label, progress, separator, alert
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Slash Commands

Command palette that drops down when typing / in the composer of an assistant or engineering chat.

- id: `ai-slash-commands`
- Page: https://agentic-ui-kit.com/components/ai-slash-commands
- Live preview: https://agentic-ui-kit.com/live/component/ai-slash-commands

## Install

```bash
agentic-ui add ai-slash-commands
npx shadcn@4.17.0 add @agentic-ui/ai-slash-commands
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** slash-trigger, command-filtering, parameter-prompts, argument-execution, category-tabs, keyboard-navigation, roving-selection, tool-integration, empty-state, gated-disabled-state, screen-reader-announcer, responsive-layout
- **Intents:** communicate, execute-flow, navigate, converse, orchestrate-agents
- **Suits domains:** ai-workspace, ai-agents, devtools, knowledge, project-management, saas
- **Interaction:** slash-trigger, filter-commands, keyboard-navigation, select-command, fill-parameters, execute-command
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** command palette that drops down when typing / in the composer of an assistant or engineering chat, menu for invoking external tools, MCP calls and subagents in an AI work environment, quick selector to change the model, adjust temperature or reset the context of a conversation, panel of shortcuts and utilities to generate summaries, refactor code or create test suites
- **Avoid when:** global search of entities across the whole system without chat interaction (use search-global-palette), selecting files or context attachments for a prompt (use ai-context-picker), generic application context menu without prompt or agent context (use dropdown-menu)
- **Preserve when adapting:** combobox-keyboard-contract, roving-selection-and-active-descendant, parameter-prompt-interaction, aria-live-announcements, f04-design-tokens
- **Replace when adapting:** command-catalog-list, category-labels-and-icons, parameter-definitions, execution-handler
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, input
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Stream Renderer

Assistant response written token by token in a chat thread.

- id: `ai-stream-renderer`
- Page: https://agentic-ui-kit.com/components/ai-stream-renderer
- Live preview: https://agentic-ui-kit.com/live/component/ai-stream-renderer

## Install

```bash
agentic-ui add ai-stream-renderer
npx shadcn@4.17.0 add @agentic-ui/ai-stream-renderer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** incremental-markdown-parsing, stable-block-identity, flicker-free-reconciliation, streaming-cursor, unterminated-fence-tolerance, fenced-code-blocks, tables-and-lists, inline-marks, copy-to-clipboard, stream-status-reporting, empty-state, error-recovery
- **Intents:** monitor-live, communicate, explore-detail
- **Suits domains:** ai-workspace, knowledge, devtools, saas, operations
- **Interaction:** streaming-cursor, copy-response, retry-after-error, keyboard-navigation
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** assistant response written token by token in a chat thread, summary generated live inside a research side panel, streaming output from an agent that emits code and tables in the developer console, incremental report of an operations runbook while the model drafts it
- **Avoid when:** already complete static markdown, where incremental reconciliation or a cursor is not needed, plain text with no block structure that does not justify a markdown parser
- **Preserve when adapting:** block-identity-and-memoisation, cursor-as-sibling-element, partial-syntax-tolerance, live-region-announcement-strategy
- **Replace when adapting:** response-copy, model-attribution, syntax-highlighting-theme
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Streaming Message

Conversational chat interface with a live view of consumed tokens and tok/s speed.

- id: `ai-streaming-message`
- Page: https://agentic-ui-kit.com/components/ai-streaming-message
- Live preview: https://agentic-ui-kit.com/live/component/ai-streaming-message

## Install

```bash
agentic-ui add ai-streaming-message
npx shadcn@4.17.0 add @agentic-ui/ai-streaming-message
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** token-telemetry, tool-call-visualization, streaming-cursor, stop-generation, regenerate-response, copy-message, feedback-actions, error-recovery, empty-thinking-state, keyboard-navigation
- **Intents:** converse, generate-content, orchestrate-agents, track-status, communicate
- **Suits domains:** ai-workspace, ai-agents, devtools, saas, operations
- **Interaction:** streaming-cursor, collapsible-tool-calls, token-inspector, stop-generation, copy-action, feedback-action
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** conversational chat interface with a live view of consumed tokens and tok/s speed, agent console where the response streaming and the tools run in parallel are observed, LLM observability panel with tool-call inspection, TTFT latency and error recovery, technical support assistant where the user can pause generation or copy formatted responses
- **Avoid when:** simple two-way human chat messages with no LLM models or streaming (use a standard chat-bubble), only the isolated tool-call card is needed with no text message (use ai-tool-call-card), prompt input forms (use ai-prompt-composer)
- **Preserve when adapting:** streaming-state-lifecycle, token-telemetry-structure, tool-call-disclosure-model, accessibility-live-regions
- **Replace when adapting:** domain-copy, model-brand-metadata, tool-call-syntax-highlighter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, collapsible, tooltip
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Suggestion Diff

Support copilot that suggests improvements to ticket drafts with granular accept or reject per change.

- id: `ai-suggestion-diff`
- Page: https://agentic-ui-kit.com/components/ai-suggestion-diff
- Live preview: https://agentic-ui-kit.com/live/component/ai-suggestion-diff

## Install

```bash
agentic-ui add ai-suggestion-diff
npx shadcn@4.17.0 add @agentic-ui/ai-suggestion-diff
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** per-change-accept-reject, inline-diff-view, split-diff-view, batch-accept-all, batch-reject-all, change-navigation, resulting-preview, empty-state, error-recovery, keyboard-navigation
- **Intents:** create-edit, communicate, generate-content, explore-detail
- **Suits domains:** ai-content, ai-workspace, support, crm, notes
- **Interaction:** per-change-accept-reject, batch-accept-reject, diff-mode-toggle, change-navigation, keyboard-shortcuts
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** support copilot that suggests improvements to ticket drafts with granular accept or reject per change, AI-assisted content editor where the writer reviews tone, clarity and grammar proposals, CRM assistant that adjusts sales emails before sending, allowing individual changes to be approved, agent workspace that shows proposed revisions to markdown documents with a preview
- **Avoid when:** the content is static, has no suggestions and needs no review, real-time multiplayer collaborative editing with concurrent cursors is required, the comparison is between binaries or images with no readable text
- **Preserve when adapting:** keyboard-contract, aria-live-announcements, granular-accept-reject-flow, resulting-preview-computation, diff-status-tracking
- **Replace when adapting:** domain-copy, suggestions-fixture-data, document-apply-handler
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, separator, tabs
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Tool Call Card

Agent run console where each tool call shows collapsible parameters and results.

- id: `ai-tool-call-card`
- Page: https://agentic-ui-kit.com/components/ai-tool-call-card
- Live preview: https://agentic-ui-kit.com/live/component/ai-tool-call-card

## Install

```bash
agentic-ui add ai-tool-call-card
npx shadcn@4.17.0 add @agentic-ui/ai-tool-call-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** collapsible-input, collapsible-output, status-indicator, duration-tracking, copy-payload, error-recovery, empty-state, keyboard-navigation
- **Intents:** orchestrate-agents, track-status, explore-detail, audit-trail, execute-flow
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, analytics
- **Interaction:** collapsible-input, collapsible-output, copy-payload, error-recovery, keyboard-navigation
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** agent run console where each tool call shows collapsible parameters and results, LLM observability panel with the duration of calls to external APIs and error inspection, tool sandbox where the developer can retry failed runs or copy payloads, multi-agent run timeline where the payload sent to each tool is audited
- **Avoid when:** the interaction does not involve function or tool calls (use standard informational cards), interactive editing of tool schemas is required instead of run inspection (use ai-tool-registry), a global timeline of multiple parallel agents is required without focus on the individual call (use ai-agent-run-trace)
- **Preserve when adapting:** keyboard-contract, collapsible-disclosure-model, status-and-error-announcements, copy-feedback-cycle, error-retry-mechanism
- **Replace when adapting:** domain-copy, tool-name-and-namespace, payload-formatter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** AI App (blueprint)
- **Registry dependencies:** lib-primitives


### AI Tool Registry

Admin console where system operators configure and monitor active tools for autonomous agents.

- id: `ai-tool-registry`
- Page: https://agentic-ui-kit.com/components/ai-tool-registry
- Live preview: https://agentic-ui-kit.com/live/component/ai-tool-registry

## Install

```bash
agentic-ui add ai-tool-registry
npx shadcn@4.17.0 add @agentic-ui/ai-tool-registry
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** tool-catalog-listing, tool-status-toggle, permission-level-configuration, approval-policy-enforcement, rate-limit-tuning, environment-scope-filtering, schema-inspection, interactive-sandbox-test, search-filtering, category-filtering, telemetry-hud, keyboard-navigation, live-status-announcements, empty-state, error-recovery
- **Intents:** orchestrate-agents, manage-collection, configure, track-status, execute-flow
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, saas
- **Interaction:** toggle-status, configure-permissions, test-execution, search-filter, category-filter, schema-inspection, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** admin console where system operators configure and monitor active tools for autonomous agents, interactive test sandbox to validate tool argument and response schemas before enabling them, enterprise governance panel to restrict destructive permissions and enforce real-time human approval, agent configuration screen within a SaaS platform with filtering by category and rate limits
- **Avoid when:** inspecting an individual step in an agent's execution trace (use ai-agent-run-trace), interactive approval of a multi-step plan proposed by the agent (use ai-plan-approval), real-time confirmation of a single destructive action (use ai-action-confirmation)
- **Preserve when adapting:** tool-catalog-layout, permission-governance-model, test-runner-interaction-model, live-accessibility-announcements
- **Replace when adapting:** tool-definitions, execution-backend, schema-types, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, input, label, separator, switch, textarea
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Usage Meter

Token consumption and budget control panel in an AI workspace.

- id: `ai-usage-meter`
- Page: https://agentic-ui-kit.com/components/ai-usage-meter
- Live preview: https://agentic-ui-kit.com/live/component/ai-usage-meter

## Install

```bash
agentic-ui add ai-usage-meter
npx shadcn@4.17.0 add @agentic-ui/ai-usage-meter
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** token-breakdown, cost-vs-budget-tracking, model-cost-distribution, timeframe-switching, threshold-alert-state, rate-limit-saturation, interactive-budget-adjustment, empty-state, error-recovery, keyboard-navigation
- **Intents:** track-status, monitor-live, explore-detail, configure
- **Suits domains:** ai-workspace, billing, analytics, saas, devtools
- **Interaction:** timeframe-switch, budget-limit-adjustment, breakdown-tab-toggle, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** token consumption and budget control panel in an AI workspace, widget for monitoring inference cost and rate limits in developer consoles, billing and LLM model quota section in multi-tenant SaaS platforms, AI agent operations dashboard with per-model consumption tracking
- **Avoid when:** metrics that do not involve token consumption or inference cost, purely fixed-subscription billing with no volumetric usage component
- **Preserve when adapting:** meter-aria-contract, budget-threshold-color-logic, token-type-breakdown-hierarchy, model-cost-distribution-layout
- **Replace when adapting:** workspace-usage-data, currency-formatting, model-catalog-names
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, progress
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** AI App (blueprint)
- **Registry dependencies:** lib-primitives


### AI Usage Policies

SaaS admin console where team leads define maximum inference budgets and assign models based on user seniority.

- id: `ai-usage-policies`
- Page: https://agentic-ui-kit.com/components/ai-usage-policies
- Live preview: https://agentic-ui-kit.com/live/component/ai-usage-policies

## Install

```bash
agentic-ui add ai-usage-policies
npx shadcn@4.17.0 add @agentic-ui/ai-usage-policies
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** spend-limit-quotas, token-quota-allocation, model-whitelisting, role-based-access, live-usage-tracking, rate-limiting, enforcement-actions, pii-redaction-guardrail, human-approval-threshold, tool-capability-controls, policy-creation-and-duplication, read-only-audit-mode, keyboard-navigation, live-status-announcements, empty-state, error-recovery
- **Intents:** configure, manage-collection, track-status, audit-trail, create-edit
- **Suits domains:** settings, saas, ai-agents, billing, operations, ai-workspace
- **Interaction:** configure-limits, toggle-model-whitelist, switch-tabs, inline-edit, filter-by-scope, create-policy, duplicate-policy, delete-policy, save-discard, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** SaaS admin console where team leads define maximum inference budgets and assign models based on user seniority, enterprise governance panel that restricts expensive reasoning models to Data Science and downgrades to eco models when the limit is reached, security audit view to certify that all policies enforce mandatory PII anonymization, API limit manager for autonomous agents with a human approval threshold before running expensive tasks
- **Avoid when:** management of provider API keys and BYOK secret rotation (use ai-provider-keys), global catalog of models available in the organization without association to users or limits (use ai-model-registry), detailed audit of individual agent execution traces (use ai-audit-actions or ai-agent-run-trace)
- **Preserve when adapting:** usage-limits-and-quota-contract, model-whitelist-selection-logic, live-consumption-indicators, enterprise-guardrails-toggles, live-accessibility-announcements
- **Replace when adapting:** domain-copy, model-catalog, currency-and-rate-metrics
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, checkbox, dialog, input, label, progress, select, separator, switch, tabs, alert
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Voice Input Button

Voice dictation button in the composer bar of a chat assistant.

- id: `ai-voice-input-button`
- Page: https://agentic-ui-kit.com/components/ai-voice-input-button
- Live preview: https://agentic-ui-kit.com/live/component/ai-voice-input-button

## Install

```bash
agentic-ui add ai-voice-input-button
npx shadcn@4.17.0 add @agentic-ui/ai-voice-input-button
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** push-to-talk, live-waveform, toggle-recording, microphone-permission-handling, keyboard-activation, recording-duration-limit, transcription-handoff
- **Intents:** communicate, create-edit, monitor-live
- **Suits domains:** ai-workspace, saas, devtools, notes, operations
- **Interaction:** press-and-hold, keyboard-navigation, click-to-action
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** voice dictation button in the composer bar of a chat assistant, capturing audio notes in a personal productivity application, voice command to trigger actions in an operations console
- **Avoid when:** playback of already recorded audio, which requires a player with a scrubber, forms without audio capture capability or a dictation alternative
- **Preserve when adapting:** push-to-talk-interaction-model, live-waveform-feedback, permission-and-error-states, keyboard-activation-and-cancel
- **Replace when adapting:** audio-capture-adapter, transcription-provider, status-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card
- **npm dependencies:** @agentic-ui/motion-voice-waveform, lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** motion-voice-waveform


### AI Workflow Canvas

Infinite canvas to build and supervise complex AI agent flows with pan, zoom and minimap.

- id: `ai-workflow-canvas`
- Page: https://agentic-ui-kit.com/components/ai-workflow-canvas
- Live preview: https://agentic-ui-kit.com/live/fixture/ai-workflow-canvas?piece=ai-workflow-canvas

## Install

```bash
agentic-ui add ai-workflow-canvas
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-canvas
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** infinite-canvas, pan-and-zoom, minimap, canvas-controls, grid-background, multi-selection, keyboard-shortcuts, empty-state, selection-toolbar, node-alignment
- **Intents:** orchestrate-agents, execute-flow, configure, create-edit
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, saas
- **Interaction:** node-selection, keyboard-shortcuts, canvas-pan-zoom, multi-selection-drag
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** infinite canvas to build and supervise complex AI agent flows with pan, zoom and minimap, visual pipeline editor where the user selects multiple nodes with a drag rectangle and aligns them horizontally, orchestration interface where keyboard shortcuts let users navigate, duplicate and delete branches without a mouse, workflow configuration screen with a toggleable grid and a thumbnail overview
- **Avoid when:** the flow is a fixed linear sequence with no branching (use a stepper or sequential list), only the configuration form of a single node is needed (use ai-node-config-panel), only the typed definition of the nodes is required without the canvas (use ai-workflow-node-set)
- **Preserve when adapting:** canvas-pan-zoom-contracts, multi-selection-and-alignment-logic, keyboard-shortcuts-accessibility, empty-and-loading-states
- **Replace when adapting:** domain-workflow-fixtures, custom-node-types, canvas-toolbar-actions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge
- **npm dependencies:** @xyflow/react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** @xyflow/react@^12.10.2


### AI Workflow Debug Panel

Debug an agentic workflow run by reviewing what each node received and returned.

- id: `ai-workflow-debug-panel`
- Page: https://agentic-ui-kit.com/components/ai-workflow-debug-panel
- Live preview: https://agentic-ui-kit.com/live/component/ai-workflow-debug-panel

## Install

```bash
agentic-ui add ai-workflow-debug-panel
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-debug-panel
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** execution-selection, node-timeline, input-inspection, output-inspection, variable-inspection, error-detail, copy-payload, keyboard-navigation, empty-state
- **Intents:** orchestrate-agents, explore-detail, track-status, audit-trail, execute-flow
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, analytics
- **Interaction:** execution-selection, node-selection, collapsible-sections, copy-payload, keyboard-navigation
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** debug an agentic workflow run by reviewing what each node received and returned, inspect the variable scope after a condition node to understand why a branch was taken, diagnose a tool node that timed out, with its error code and no misleading output, review an in-progress run where an LLM node has not yet emitted output
- **Avoid when:** the workflow graph needs to be edited rather than a run inspected (use ai-workflow-canvas), a test run with a new payload needs to be launched (use ai-workflow-test-input), only the aggregate run state is required without per-node detail (use ai-workflow-run-mode)
- **Preserve when adapting:** node-timeline-to-inspector-model, keyboard-contract, input-output-separation, variable-scope-table, error-and-running-announcements
- **Replace when adapting:** domain-copy, node-kind-labels, payload-formatter, variable-value-preview
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, scroll-area
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Workflow Node Set

Agent workflow editor where the user chains trigger, LLM and tool with typed ports.

- id: `ai-workflow-node-set`
- Page: https://agentic-ui-kit.com/components/ai-workflow-node-set
- Live preview: https://agentic-ui-kit.com/live/component/ai-workflow-node-set

## Install

```bash
agentic-ui add ai-workflow-node-set
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-node-set
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** typed-ports, node-kind-set, connection-validation, run-status, node-selection, keyboard-connection, empty-state, error-state
- **Intents:** orchestrate-agents, execute-flow, configure, create-edit
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, saas
- **Interaction:** typed-connection, node-selection, keyboard-connection, connection-validation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** agent workflow editor where the user chains trigger, LLM and tool with typed ports, support pipeline with a confidence condition, a per-document loop and human approval before replying, automation builder where incompatible connections are rejected with the reason for the type mismatch, live execution view where each node shows queued/running/done/error
- **Avoid when:** the flow is linear and fixed with no branching or per-step configuration (use a step list or stepper), the infinite canvas with pan/zoom/minimap is needed instead of the node set (use ai-workflow-canvas), the schema-generated per-node configuration form is required (use ai-node-config-panel)
- **Preserve when adapting:** typed-port-contract, connection-compatibility-rules, node-kind-taxonomy, status-and-error-announcements, keyboard-contract
- **Replace when adapting:** domain-copy, node-titles-and-subtitles, config-chips, port-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Workflow Schedule

Entry trigger in an AI orchestration canvas to fire a periodic run with cron parameters or receive external webhook events.

- id: `ai-workflow-schedule`
- Page: https://agentic-ui-kit.com/components/ai-workflow-schedule
- Live preview: https://agentic-ui-kit.com/live/component/ai-workflow-schedule

## Install

```bash
agentic-ui add ai-workflow-schedule
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-schedule
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** cron-expression-builder, visual-recurrence-presets, timezone-selection, next-runs-calculator, concurrency-policy, catch-up-policy, webhook-endpoint-generation, hmac-secret-rotation, json-payload-contract, curl-snippet-generation, manual-trigger-simulation, trigger-telemetry-log
- **Intents:** configure, execute-flow, orchestrate-agents
- **Suits domains:** ai-workspace, ai-agents, devtools, operations, saas
- **Interaction:** tab-navigation, preset-selection, cron-expression-input, timezone-selection, webhook-toggle, secret-rotation, copy-to-clipboard, payload-template-selection, manual-trigger-simulation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Entry trigger in an AI orchestration canvas to fire a periodic run with cron parameters or receive external webhook events, Scheduling batch jobs for summary and triage LLM agents that run every weekday at 09:00, HTTP integration point that receives GitHub or Stripe webhooks and kicks off an automated decision pipeline, Control panel to pause, manually test or rotate secret credentials of a production workflow trigger
- **Avoid when:** Editing recurrence rules in interactive RFC 5545 calendars with RRULE/EXDATE is required (use scheduling-recurrence-editor), Building or visualizing the internal nodes and connections of the flow is needed (use ai-workflow-canvas), Only running ad-hoc tests with debug payloads in draft is required (use ai-workflow-test-input)
- **Preserve when adapting:** cron-syntax-and-validation, webhook-security-contract, output-context-variables-structure, accessibility-and-screen-reader-announcements
- **Replace when adapting:** domain-webhook-presets, api-domain-urls, default-workflow-naming
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, input, label, separator, switch, tabs, textarea
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### AI Workflow Test Input

Workflow orchestration canvas where the author tests an agent graph with a mock payload before publishing to production.

- id: `ai-workflow-test-input`
- Page: https://agentic-ui-kit.com/components/ai-workflow-test-input
- Live preview: https://agentic-ui-kit.com/live/component/ai-workflow-test-input

## Install

```bash
agentic-ui add ai-workflow-test-input
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-test-input
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** payload-preset-selection, json-payload-editor, syntax-validation, dry-run-execution, node-trace-inspection, output-payload-viewer, payload-diff, execution-metrics, keyboard-shortcuts, error-recovery
- **Intents:** execute-flow, orchestrate-agents, configure, explore-detail, track-status
- **Suits domains:** ai-workspace, ai-agents, devtools, operations, saas
- **Interaction:** payload-preset-selection, json-payload-editor, syntax-validation, dry-run-execution, node-trace-inspection, output-payload-viewer, payload-diff, execution-metrics, keyboard-shortcuts, error-recovery
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** workflow orchestration canvas where the author tests an agent graph with a mock payload before publishing to production, integration sandbox where corrupted payloads are injected to check that fallback nodes activate correctly, LLM pipeline debugging panel to inspect the raw input, the formatted output and token consumption, webhook editor where incoming events are simulated to verify routing conditions
- **Avoid when:** visual editing of graph nodes and connections is required instead of a payload test run (use ai-workflow-canvas), periodic or cron runs need to be scheduled instead of ad-hoc one-off tests (use ai-workflow-schedule), only atomic tool calls within an agent need to be inspected (use ai-tool-call-card)
- **Preserve when adapting:** dry-run-safety-contract, keyboard-shortcuts-and-focus, screen-reader-announcements, node-trace-visualizer, error-recovery-cycle
- **Replace when adapting:** workflow-domain-presets, workflow-name-and-entrypoints, custom-runner-function
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, tabs, textarea
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Workflow Versioning

Draft vs published lifecycle management for agent and LLM flows.

- id: `ai-workflow-versioning`
- Page: https://agentic-ui-kit.com/components/ai-workflow-versioning
- Live preview: https://agentic-ui-kit.com/live/component/ai-workflow-versioning

## Install

```bash
agentic-ui add ai-workflow-versioning
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-versioning
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** draft-vs-published, version-history, rollback-restore, diff-viewer, release-notes, audit-trail, environment-target, publish-validation
- **Intents:** audit-trail, track-status, compare-over-time, orchestrate-agents
- **Suits domains:** ai-workspace, ai-agents, devtools, operations, saas
- **Interaction:** version-switching, rollback-confirmation, diff-inspection, publish-workflow, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** draft vs published lifecycle management for agent and LLM flows, version history with an audit of changes to nodes and prompt parameters, safe rollback of production workflows with restore to draft
- **Avoid when:** workflows with no persistence or draft states (purely ephemeral flows), direct visualization of node graphs (use ai-workflow-canvas)
- **Preserve when adapting:** versioning-lifecycle, rollback-safety-model, draft-published-separation
- **Replace when adapting:** node-types, domain-metadata, validation-rules
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, input, label, textarea
- **Registry dependencies:** lib-primitives


### AI Workspace Search Dialog

Command palette and quick search for an artificial intelligence workspace.

- id: `ai-workspace-search-dialog`
- Page: https://agentic-ui-kit.com/components/ai-workspace-search-dialog
- Live preview: https://agentic-ui-kit.com/live/fixture/ai-workspace-search-dialog?piece=ai-workspace-search-dialog

## Install

```bash
agentic-ui add ai-workspace-search-dialog
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-search-dialog
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** instant-fuzzy-search, keyboard-arrows-navigation, category-section-badges, quick-route-navigation
- **Intents:** navigate
- **Suits domains:** ai-workspace, devtools, project-management, saas
- **Interaction:** search-query-input, arrow-key-selection, enter-key-navigation
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** command palette and quick search for an artificial intelligence workspace, modal for quickly locating conversations and project resources, global navigation spotlight in complex web products
- **Avoid when:** exhaustive searches with complex boolean filters that require a dedicated page
- **Preserve when adapting:** keyboard-navigation-logic, modal-backdrop-positioning, result-list-item-structure
- **Replace when adapting:** search-index-sources, routing-destinations, category-icons
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** dialog, button
- **npm dependencies:** lucide-react, zustand
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-ai-workspace-utils, ui-button, ui-dialog


### AI Workspace Sidebar Nav

Main navigation of an AI and agents platform.

- id: `ai-workspace-sidebar-nav`
- Page: https://agentic-ui-kit.com/components/ai-workspace-sidebar-nav
- Live preview: https://agentic-ui-kit.com/live/template/ai-workspace?piece=ai-workspace-sidebar-nav

## Install

```bash
agentic-ui add ai-workspace-sidebar-nav
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-sidebar-nav
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** collapsible-nav, recents-history, quick-search-trigger, user-dropdown, favorites-filter
- **Intents:** navigate
- **Suits domains:** ai-workspace, devtools, saas, project-management
- **Interaction:** nav-item-click, sidebar-collapse, search-open, account-menu
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** main navigation of an AI and agents platform, side menu for developer tools and technical consoles, SaaS product navigation panel with session history
- **Avoid when:** public websites or landing pages with no application structure
- **Preserve when adapting:** collapsible-behavior, recents-list-derivation, nav-item-layout
- **Replace when adapting:** nav-links, brand-identity, user-profile
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** sidebar, button, avatar, dropdown-menu, collapsible
- **npm dependencies:** lucide-react, zustand
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** ai-workspace-search-dialog, lib-ai-workspace-utils, ui-avatar, ui-collapsible, ui-dropdown-menu, ui-sidebar


### Auth Forgot Reset

Access recovery in multi-tenant SaaS.

- id: `auth-forgot-reset`
- Page: https://agentic-ui-kit.com/components/auth-forgot-reset
- Live preview: https://agentic-ui-kit.com/live/component/auth-forgot-reset

## Install

```bash
agentic-ui add auth-forgot-reset
npx shadcn@4.17.0 add @agentic-ui/auth-forgot-reset
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** email-recovery, otp-verification, password-reset, strength-meter, session-invalidation
- **Intents:** authenticate, execute-flow
- **Suits domains:** auth, saas, billing, ecommerce, devtools
- **Interaction:** keyboard-navigation, click-to-action
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** access recovery in multi-tenant SaaS, secure credential reset with OTP code
- **Avoid when:** passwordless authentication based exclusively on WebAuthn/Passkeys
- **Preserve when adapting:** recovery-flow-model, password-policy-enforcement, step-machine-architecture
- **Replace when adapting:** brand-identity, password-strength-rules, otp-length, support-contact-info
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, input, label, alert, badge, progress, separator
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Auth Login Signup

Sign-in to a SaaS dashboard with email, GitHub and Google.

- id: `auth-login-signup`
- Page: https://agentic-ui-kit.com/components/auth-login-signup
- Live preview: https://agentic-ui-kit.com/live/component/auth-login-signup

## Install

```bash
agentic-ui add auth-login-signup
npx shadcn@4.17.0 add @agentic-ui/auth-login-signup
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** email-password-login, account-signup, oauth-providers, magic-link, configurable-password-requirements, password-reveal, inline-form-validation, mode-switching, pending-and-error-states
- **Intents:** authenticate, execute-flow, create-edit
- **Suits domains:** auth, saas, billing, ecommerce, devtools
- **Interaction:** mode-switch, method-tabs, password-reveal, live-requirement-feedback, keyboard-navigation
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Sign-in to a SaaS dashboard with email, GitHub and Google, Account sign-up with password requirements defined by the organization, Passwordless sign-in via a one-time link
- **Avoid when:** Second factor or one-time code verification (use auth-mfa-passkey), Access recovery for an existing account (use auth-forgot-reset)
- **Preserve when adapting:** three-method-model, requirement-feedback-contract, validation-and-focus-model, callback-only-submission
- **Replace when adapting:** brand-identity, provider-list, password-requirements, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, input, label, checkbox, tabs, separator, badge, progress
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** SaaS Backoffice (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Auth MFA Passkey

Second-factor authentication with TOTP app (Google Authenticator, 1Password).

- id: `auth-mfa-passkey`
- Page: https://agentic-ui-kit.com/components/auth-mfa-passkey
- Live preview: https://agentic-ui-kit.com/live/component/auth-mfa-passkey

## Install

```bash
agentic-ui add auth-mfa-passkey
npx shadcn@4.17.0 add @agentic-ui/auth-mfa-passkey
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** totp-authentication, passkey-authentication, recovery-codes, segmented-otp, resend-cooldown, device-trust
- **Intents:** authenticate, execute-flow
- **Suits domains:** auth, saas, billing, devtools, operations
- **Interaction:** keyboard-navigation, click-to-action
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** second-factor authentication with TOTP app (Google Authenticator, 1Password), biometric authentication with Passkey (Touch ID, Face ID, YubiKey), emergency access using downloadable backup recovery codes
- **Avoid when:** simple login flows without multi-factor authentication requirements
- **Preserve when adapting:** mfa-multi-method-model, segmented-otp-keyboard-handling, passkey-webauthn-flow
- **Replace when adapting:** brand-styling, totp-issuer-name, backup-codes-count
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, input, label, alert, badge, separator
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Billing Checkout Flow

SaaS subscription sign-up with an annual plan, extra seats and VAT.

- id: `billing-checkout-flow`
- Page: https://agentic-ui-kit.com/components/billing-checkout-flow
- Live preview: https://agentic-ui-kit.com/live/component/billing-checkout-flow

## Install

```bash
agentic-ui add billing-checkout-flow
npx shadcn@4.17.0 add @agentic-ui/billing-checkout-flow
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** order-summary, promotion-code, tax-breakdown, trial-deferred-charge, payment-capture, card-brand-detection, luhn-validation, fixed-clock-expiry, deterministic-receipt, decline-states, keyboard-navigation
- **Intents:** execute-flow, create-edit
- **Suits domains:** billing, saas, ecommerce, payments
- **Interaction:** stage-navigation, text-entry, keyboard-navigation, promotion-apply, form-submit
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** SaaS subscription sign-up with an annual plan, extra seats and VAT, checkout with a promo code and the committed total versus today's amount, sign-up with a free trial where nothing is charged today, e-commerce cart with confirmation and order reference
- **Avoid when:** managing already saved payment methods without an associated purchase, in-person payments or flows that require a real payment gateway
- **Preserve when adapting:** stage-progression-model, totals-reconciliation, accessible-status-announcement, synthetic-payment-boundary
- **Replace when adapting:** domain-copy, plan-data, tax-rules, currency-locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, input, label, badge, progress, separator
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Billing Dunning States

Handling failed charges and the grace period in SaaS subscriptions.

- id: `billing-dunning-states`
- Page: https://agentic-ui-kit.com/components/billing-dunning-states
- Live preview: https://agentic-ui-kit.com/live/component/billing-dunning-states

## Install

```bash
agentic-ui add billing-dunning-states
npx shadcn@4.17.0 add @agentic-ui/billing-dunning-states
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** past-due-state, grace-period-state, suspended-state, empty-state, payment-retry, payment-method-update, timeline-retry-history, invoice-breakdown, keyboard-navigation
- **Intents:** track-status, execute-flow
- **Suits domains:** billing, saas, ecommerce, fintech
- **Interaction:** dialog-toggle, keyboard-navigation, cta-selection
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** handling failed charges and the grace period in SaaS subscriptions, notification of suspension for non-payment with immediate reactivation, panel for resolving overdue invoices and updating the payment method
- **Avoid when:** initial checkout or first purchase screens (use billing-checkout-flow), comparative selection of commercial plans (use billing-pricing-table)
- **Preserve when adapting:** dunning-state-progression, accessible-alert-announcements, modal-card-input-validation
- **Replace when adapting:** domain-copy, currency-formatting, branding-and-support-links
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** alert, badge, button, card, dialog, input, label, progress, tabs
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Billing Usage Meter

Control panel for resource and quota consumption on multi-tenant SaaS platforms.

- id: `billing-usage-meter`
- Page: https://agentic-ui-kit.com/components/billing-usage-meter
- Live preview: https://agentic-ui-kit.com/live/component/billing-usage-meter

## Install

```bash
agentic-ui add billing-usage-meter
npx shadcn@4.17.0 add @agentic-ui/billing-usage-meter
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** consumption-vs-limit, threshold-alerts, resource-meters, billing-cycle-tracking, spend-budget-progress, timeframe-switching, capacity-limit-adjustment, overage-policy-display, empty-state, error-recovery, keyboard-navigation
- **Intents:** track-status, monitor-live, explore-detail, configure
- **Suits domains:** billing, saas, finance, analytics, devtools
- **Interaction:** timeframe-switch, capacity-limit-adjustment, view-mode-toggle, alert-dismissal, notification-preferences-toggle, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** control panel for resource and quota consumption on multi-tenant SaaS platforms, monitoring API usage limits, team seats and database storage, billing section and budget alerts with overage policies, subscription cycle summary and accumulated spend for developer consoles
- **Avoid when:** fixed flat-price billing with no volumetric metrics or quotas, purely statistical business metrics that do not determine limits or costs
- **Preserve when adapting:** meter-aria-contract, threshold-status-color-logic, billing-spend-budget-hierarchy, resource-metric-breakdown-layout
- **Replace when adapting:** billing-metrics-data, currency-and-quota-formatting, plan-tier-descriptions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** alert, badge, button, card, progress, switch, tabs
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### Calendar Month Week Agenda

Shift and availability planning for operations teams.

- id: `calendar-month-week-agenda`
- Page: https://agentic-ui-kit.com/components/calendar-month-week-agenda
- Live preview: https://agentic-ui-kit.com/live/component/calendar-month-week-agenda

## Install

```bash
agentic-ui add calendar-month-week-agenda
npx shadcn@4.17.0 add @agentic-ui/calendar-month-week-agenda
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** month-grid, week-time-grid, agenda-list, drag-between-days, keyboard-reschedule, multi-day-events, all-day-events, locked-events, event-overflow, period-navigation
- **Intents:** track-status, manage-collection, create-edit
- **Suits domains:** operations, project-management, crm, healthcare, logistics
- **Interaction:** drag-and-drop, keyboard-navigation, view-switching, period-navigation, event-selection
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** shift and availability planning for operations teams, calendar of sprints, milestones and deliveries in project management, schedule of sales appointments and account follow-up in a CRM, booking of consultations and rooms in clinical settings, delivery windows and transport slots in logistics
- **Avoid when:** selecting a date range to filter (use form-date-range-picker), read-only view of a single date with no associated events
- **Preserve when adapting:** calendar-grammar, interaction-model, keyboard-shortcuts, drag-semantics
- **Replace when adapting:** domain-copy, event-categories, date-formatting, locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, tabs, skeleton, label, switch, card
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Chart Candlestick

Stock and cryptocurrency price chart with OHLC Japanese candlesticks and daily volume.

- id: `chart-candlestick`
- Page: https://agentic-ui-kit.com/components/chart-candlestick
- Live preview: https://agentic-ui-kit.com/live/component/chart-candlestick

## Install

```bash
agentic-ui add chart-candlestick
npx shadcn@4.17.0 add @agentic-ui/chart-candlestick
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** candlestick-ohlc, volume-bars, crosshair-tooltip, timeframe-selection, indicator-ma-overlay, keyboard-scrubbing, empty-states, responsive-svg
- **Intents:** compare-over-time, show-composition, track-status
- **Suits domains:** fintech, finance, analytics, operations
- **Interaction:** hover-crosshair, timeframe-selection, keyboard-scrubbing, toggle-moving-average, candle-inspect
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Stock and cryptocurrency price chart with OHLC Japanese candlesticks and daily volume, Fintech technical analysis panel with moving averages (SMA) and intraday volatility metrics, Real-time monitor of financial asset activity and liquidity
- **Avoid when:** Qualitative comparisons or simple cumulative metrics where a line or bar chart is enough, Time series without open, high, low and close (OHLC) information
- **Preserve when adapting:** ohlc-candle-geometry, volume-alignment, crosshair-interaction-model
- **Replace when adapting:** ticker-symbol, currency-formatting, price-ranges
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Fintech Trading (analytics live) (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Chart Cohort Retention

Weekly retention of product sign-up cohorts over the first twelve weeks.

- id: `chart-cohort-retention`
- Page: https://agentic-ui-kit.com/components/chart-cohort-retention
- Live preview: https://agentic-ui-kit.com/live/component/chart-cohort-retention

## Install

```bash
agentic-ui add chart-cohort-retention
npx shadcn@4.17.0 add @agentic-ui/chart-cohort-retention
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** cohort-grid, triangular-matrix, intensity-scale, weekly-monthly-granularity, metric-switching, weighted-period-average, half-life-detection, cell-inspector, keyboard-grid-navigation, intensity-highlight, empty-states
- **Intents:** compare-over-time, track-status, explore-detail
- **Suits domains:** analytics, saas, billing, ecommerce, operations
- **Interaction:** granularity-toggle, metric-toggle, intensity-highlight, cell-selection, keyboard-grid-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Weekly retention of product sign-up cohorts over the first twelve weeks, Monthly subscriber survival by subscription month and half-life detection, Buyer retention by acquisition campaign in e-commerce
- **Avoid when:** A single time series without grouping by entry cohort (use chart-sparkline or a time series), Intensity matrix without relative survival semantics, such as activity by hour and day (use chart-heatmap-matrix)
- **Preserve when adapting:** triangular-cohort-geometry, relative-period-semantics, intensity-scale-steps, keyboard-contract
- **Replace when adapting:** cohort-labels-and-locale, metric-copy, period-granularity-naming
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Analytics (blueprint), Marketing Analytics (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Chart Funnel Conversion

E-commerce checkout funnel from visits to completed order with the drop-off rate per step.

- id: `chart-funnel-conversion`
- Page: https://agentic-ui-kit.com/components/chart-funnel-conversion
- Live preview: https://agentic-ui-kit.com/live/component/chart-funnel-conversion

## Install

```bash
agentic-ui add chart-funnel-conversion
npx shadcn@4.17.0 add @agentic-ui/chart-funnel-conversion
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** funnel-stages, per-stage-dropoff, bottleneck-highlighting, orientation-toggle, rate-basis-toggle, unit-mode-toggle, segment-filter, stage-inspector, keyboard-scrubbing, kpi-summary-ribbon, empty-states, responsive-svg
- **Intents:** show-composition, compare-over-time, track-status, explore-detail
- **Suits domains:** ecommerce, analytics, marketing, saas, operations
- **Interaction:** unit-toggle, orientation-toggle, rate-basis-toggle, segment-filter, stage-click-inspect, keyboard-scrubbing
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** E-commerce checkout funnel from visits to completed order with the drop-off rate per step, SaaS activation funnel: sign-up, onboarding, integration setup and first subscription, Digital marketing campaign conversion flow by channel and traffic segment
- **Avoid when:** Continuous time series of stock quotes with no sequential stages (use chart-candlestick), Isolated single metrics with no sequential step breakdown (use a stat card or chart-sparkline)
- **Preserve when adapting:** funnel-geometry, dropoff-calculation-model, keyboard-contract, summary-metrics-ribbon
- **Replace when adapting:** stage-labels-and-keys, entity-labels, dataset-sources
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Analytics (blueprint), Marketing Analytics (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Chart Heatmap Matrix

Distribution of traffic and API requests by hour and day of the week.

- id: `chart-heatmap-matrix`
- Page: https://agentic-ui-kit.com/components/chart-heatmap-matrix
- Live preview: https://agentic-ui-kit.com/live/component/chart-heatmap-matrix

## Install

```bash
agentic-ui add chart-heatmap-matrix
npx shadcn@4.17.0 add @agentic-ui/chart-heatmap-matrix
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** hours-by-day-grid, contributions-grid, intensity-scale, cell-tooltip, keyboard-grid-navigation, cell-selection, metric-selector, legend-filtering, empty-state, loading-skeleton, error-fallback
- **Intents:** compare-over-time, show-composition, track-status
- **Suits domains:** analytics, operations, devtools, marketing, project-management
- **Interaction:** cell-hover-tooltip, keyboard-navigation, cell-selection, view-switching, legend-filtering
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** distribution of traffic and API requests by hour and day of the week, history of contributions and commits per developer over the year, frequency of incidents and operational alarms by time slot, volume of marketing campaign opens by time of day, deployment and build activity in CI/CD pipelines
- **Avoid when:** comparing continuous high-frequency series (use a line chart or timeseries), tracking a single simple scalar metric (use stat-card or gauge-kpi)
- **Preserve when adapting:** grid-grammar, interaction-model, keyboard-shortcuts, intensity-scale
- **Replace when adapting:** domain-copy, metric-units, color-palette-tokens, date-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, tooltip, skeleton, select, tabs
- **Used in:** Marketing Analytics (blueprint)


### Chart Order Book

Spot order book of a crypto exchange with adjustable price grouping.

- id: `chart-order-book`
- Page: https://agentic-ui-kit.com/components/chart-order-book
- Live preview: https://agentic-ui-kit.com/live/component/chart-order-book

## Install

```bash
agentic-ui add chart-order-book
npx shadcn@4.17.0 add @agentic-ui/chart-order-book
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** bid-ask-ladder, cumulative-depth-chart, depth-bars-per-level, price-grouping, spread-and-mid-readout, level-inspection, keyboard-navigation, empty-states, responsive-svg
- **Intents:** monitor-live, show-composition, explore-detail, track-status
- **Suits domains:** fintech, finance, analytics, operations, saas
- **Interaction:** price-grouping, level-hover-inspect, keyboard-navigation, retry
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** spot order book of a crypto exchange with adjustable price grouping, FX market depth with one side much more liquid than the other, trading panel showing spread, mid and resting size per level, market maker liquidity view for deciding execution size
- **Avoid when:** the series is temporal and not a liquidity-by-price snapshot (use chart-candlestick), only the last price or the aggregate spread is needed, with no levels (use a stat card), the book has hundreds of levels per side that require virtualization and incremental streaming
- **Preserve when adapting:** bid-ask-ordering-around-the-spread, cumulative-depth-semantics, keyboard-contract, loading-and-error-announcement
- **Replace when adapting:** symbol-and-currency-labels, price-and-size-precision, tick-size-ladder, book-data-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Fintech Trading (analytics live) (blueprint)
- **Registry dependencies:** lib-primitives


### Chart Radar Compare

Comparative evaluation of vendors across six weighted criteria.

- id: `chart-radar-compare`
- Page: https://agentic-ui-kit.com/components/chart-radar-compare
- Live preview: https://agentic-ui-kit.com/live/component/chart-radar-compare

## Install

```bash
agentic-ui add chart-radar-compare
npx shadcn@4.17.0 add @agentic-ui/chart-radar-compare
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-dimensional-comparison, radar-polygon-plot, polygon-or-circle-grid, per-axis-normalization, axis-keyboard-inspection, series-legend-toggle, textual-axis-readout, range-validation, loading-skeleton, error-fallback, empty-state
- **Intents:** show-composition, compare-over-time, track-status
- **Suits domains:** analytics, operations, saas, ai-workspace, project-management, crm
- **Interaction:** keyboard-navigation, hover-inspection, legend-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Comparative evaluation of vendors across six weighted criteria, Operations scorecard contrasting the current quarter, the previous one and the target, Capability profile of two AI models on latency, accuracy and coverage
- **Avoid when:** More than eight dimensions or more than three simultaneous series: the polygon becomes hard to read, Continuous time series with many observations, where a line chart fits
- **Preserve when adapting:** radial-geometry, axis-normalization, keyboard-interaction-model
- **Replace when adapting:** domain-copy, axis-labels, series-metrics
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0


### Chart Sankey Flow

Marketing attribution from acquisition channel to subscribed plan.

- id: `chart-sankey-flow`
- Page: https://agentic-ui-kit.com/components/chart-sankey-flow
- Live preview: https://agentic-ui-kit.com/live/component/chart-sankey-flow

## Install

```bash
agentic-ui add chart-sankey-flow
npx shadcn@4.17.0 add @agentic-ui/chart-sankey-flow
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-stage-flow-diagram, proportional-ribbons, loss-leak-highlighting, node-selection, connected-path-highlighting, unit-toggle-absolute-percent, flow-breakdown-panel, keyboard-graph-navigation, category-legend, empty-state, loading-skeleton, error-fallback
- **Intents:** show-composition, explore-detail, track-status
- **Suits domains:** marketing, analytics, support, operations, finance
- **Interaction:** node-selection, connected-path-highlighting, keyboard-navigation, unit-switching, loss-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** marketing attribution from acquisition channel to subscribed plan, conversion funnel with a breakdown of bounce and drop-off per stage, routing of support tickets across triage, escalation and closure levels, budget allocation across departments, line items and actual spend, inventory flow between warehouses, transit, delivery and shrinkage
- **Avoid when:** evolution of a metric over time (use a line chart or timeseries), splitting a single total into parts without transitions between stages (use a donut or treemap), dense graphs without direction or column hierarchy (use a network graph)
- **Preserve when adapting:** flow-grammar, proportional-thickness, interaction-model, keyboard-shortcuts
- **Replace when adapting:** domain-copy, node-categories, color-palette-tokens, value-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, skeleton
- **Used in:** Marketing Analytics (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Chart Sparkline

MRR and ARR revenue trend micro-chart embedded in an executive KPI card.

- id: `chart-sparkline`
- Page: https://agentic-ui-kit.com/components/chart-sparkline
- Live preview: https://agentic-ui-kit.com/live/component/chart-sparkline

## Install

```bash
agentic-ui add chart-sparkline
npx shadcn@4.17.0 add @agentic-ui/chart-sparkline
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** inline-trend-sparkline, smooth-bezier-spline, area-gradient-fill, bidirectional-bars, keyboard-scrubbing, accessible-aria-slider, stat-card-integration, table-cell-integration, loading-skeleton, error-fallback, empty-state
- **Intents:** compare-over-time, track-status, show-composition
- **Suits domains:** finance, billing, analytics, operations, ecommerce, devtools
- **Interaction:** hover-scrubbing, keyboard-navigation, selection-detail
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** MRR and ARR revenue trend micro-chart embedded in an executive KPI card, Inline sparkline in a table column for the 7-day evolution of price and volume of financial assets, Inline positive/negative bar chart for live monitoring of microservice latency and error rate
- **Avoid when:** Complex multi-axis visualizations with more than 3 simultaneous metric dimensions, Market depth analysis or advanced OHLC candlesticks that require labeled time axes
- **Preserve when adapting:** math-normalization, svg-path-generators, keyboard-interaction-model
- **Replace when adapting:** domain-metrics, formatting-prefixes, stat-card-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, table
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0


### Chart Waterfall

Corporate financial results bridge from gross revenue to net profit (P&L bridge).

- id: `chart-waterfall`
- Page: https://agentic-ui-kit.com/components/chart-waterfall
- Live preview: https://agentic-ui-kit.com/live/component/chart-waterfall

## Install

```bash
agentic-ui add chart-waterfall
npx shadcn@4.17.0 add @agentic-ui/chart-waterfall
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** waterfall-bridge, floating-step-bars, connecting-lines, intermediate-subtotals, unit-mode-toggle, step-inspector, keyboard-scrubbing, kpi-summary-ribbon, empty-states, responsive-svg
- **Intents:** show-composition, compare-over-time, track-status, explore-detail
- **Suits domains:** finance, billing, analytics, saas, fintech
- **Interaction:** unit-toggle, subtotals-toggle, category-filter, step-hover-inspect, keyboard-scrubbing
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Corporate financial results bridge from gross revenue to net profit (P&L bridge), Accounting reconciliation of operating line items, gross margin, EBITDA and tax impact, Breakdown of unit margins and cost absorption in SaaS and e-commerce platforms
- **Avoid when:** Continuous time series of stock quotes without additive components (use chart-candlestick), Isolated single metrics without a sequential breakdown of line items (use stat card or chart-sparkline)
- **Preserve when adapting:** financial-bridge-geometry, step-floating-delta-semantics, keyboard-contract, summary-metrics-ribbon
- **Replace when adapting:** accounting-categories, currency-symbol-and-locale, step-labels-and-descriptions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Code JSON Viewer

Inspect the payload of a webhook or an API response.

- id: `code-json-viewer`
- Page: https://agentic-ui-kit.com/components/code-json-viewer
- Live preview: https://agentic-ui-kit.com/live/component/code-json-viewer

## Install

```bash
agentic-ui add code-json-viewer
npx shadcn@4.17.0 add @agentic-ui/code-json-viewer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** collapsible-tree, copy-path, expand-collapse-all, type-aware-syntax-colors, keyboard-tree-navigation, empty-state, error-state
- **Intents:** explore-detail, audit-trail
- **Suits domains:** devtools, saas, analytics, operations
- **Interaction:** expand-collapse, copy-path, keyboard-navigation
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** inspect the payload of a webhook or an API response, review the effective configuration of a deployment, explore the state diff of an event in an audit log
- **Avoid when:** JSON editing (use an editor with per-field validation), documents with thousands of nodes without prior virtualization
- **Preserve when adapting:** tree-disclosure-model, json-path-semantics, keyboard-interaction-model
- **Replace when adapting:** domain-payload, root-label, value-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, scroll-area
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Collab Announcement Composer

Communicating product launches and news to users by segment.

- id: `collab-announcement-composer`
- Page: https://agentic-ui-kit.com/components/collab-announcement-composer
- Live preview: https://agentic-ui-kit.com/live/component/collab-announcement-composer

## Install

```bash
agentic-ui add collab-announcement-composer
npx shadcn@4.17.0 add @agentic-ui/collab-announcement-composer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rich-text-editing, segment-targeting, reach-estimation, delivery-scheduling, channel-distribution, multi-format-preview, expiration-policy, draft-management, keyboard-navigation, empty-and-error-states, responsive-layout
- **Intents:** communicate, create-edit
- **Suits domains:** saas, project-management, social, marketing
- **Interaction:** announcement-authoring, segment-filtering, schedule-configuration, channel-selection, format-preview-toggle, draft-persistence, keyboard-navigation
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** communicating product launches and news to users by segment, scheduling planned maintenance notices with a downtime window, notifications targeted at customers based on their plan or subscription status, broadcast messages to internal teams or project members
- **Avoid when:** real-time person-to-person messaging, purchase approval or support ticket flow
- **Preserve when adapting:** segment-targeting-model, scheduling-time-window-contract, preview-rendering-modes, keyboard-navigation-contracts
- **Replace when adapting:** segment-data-source, delivery-engine-api, domain-copy-and-categories
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, card, textarea, input, switch, separator, alert
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Collab Comments Thread

Review of designs and specifications in a product management platform.

- id: `collab-comments-thread`
- Page: https://agentic-ui-kit.com/components/collab-comments-thread
- Live preview: https://agentic-ui-kit.com/live/component/collab-comments-thread

## Install

```bash
agentic-ui add collab-comments-thread
npx shadcn@4.17.0 add @agentic-ui/collab-comments-thread
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** nested-replies, thread-resolve, mention-autocomplete, file-attachments, reaction-picker, inline-editing, optimistic-post, filter-by-status, keyboard-navigation, empty-and-error-states, responsive-layout
- **Intents:** communicate, create-edit
- **Suits domains:** saas, project-management, social, support
- **Interaction:** comment-creation, nested-reply, thread-resolve, mention-autocomplete, attachment-management, reaction-toggle, inline-edit, keyboard-navigation
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** review of designs and specifications in a product management platform, nested comment threads on issues and development tasks, contextual communication and mentions in collaborative documents, feedback and question resolution system between support and customers
- **Avoid when:** high-frequency real-time chat in an instant messaging style, closed survey forms or simple polls
- **Preserve when adapting:** comment-tree-hierarchy, resolve-workflow-semantics, mention-interaction-model, keyboard-navigation-contracts
- **Replace when adapting:** user-directory-source, storage-attachment-provider, domain-copy, status-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, badge, textarea, input, avatar, separator, tooltip
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Collab Email Template Editor

Design and composition of transactional emails and product newsletters.

- id: `collab-email-template-editor`
- Page: https://agentic-ui-kit.com/components/collab-email-template-editor
- Live preview: https://agentic-ui-kit.com/live/component/collab-email-template-editor

## Install

```bash
agentic-ui add collab-email-template-editor
npx shadcn@4.17.0 add @agentic-ui/collab-email-template-editor
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** block-based-composition, variable-interpolation, device-viewport-preview, template-preset-library, undo-redo-history, inspector-property-editing, drag-and-drop-reordering, html-source-export, test-email-dispatch, validation-diagnostics, keyboard-shortcuts, responsive-layout
- **Intents:** communicate, create-edit
- **Suits domains:** saas, marketing, crm, project-management
- **Interaction:** email-block-authoring, variable-token-insertion, device-viewport-toggle, dark-mode-simulation, template-preset-selection, live-html-source-export, undo-redo-keyboard-history
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** design and composition of transactional emails and product newsletters, simultaneous responsive preview of email templates on desktop, tablet and mobile, insertion of dynamic variable tokens for recipient, billing and subscription, pre-flight verification of CAN-SPAM regulatory compliance and unsubscribe links
- **Avoid when:** collaborative document editing in the style of Google Docs or Notion, real-time person-to-person interactive chat
- **Preserve when adapting:** block-schema-and-layout-hierarchy, variable-token-interpolation-engine, device-viewport-simulation-contracts, can-spam-compliance-rules
- **Replace when adapting:** variable-dictionary-and-sample-profiles, email-transport-dispatch-api, template-persistence-backend
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, card, input, textarea, separator, tabs
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Collab Presence Avatars

Real-time view of collaborators editing documents in SaaS platforms.

- id: `collab-presence-avatars`
- Page: https://agentic-ui-kit.com/components/collab-presence-avatars
- Live preview: https://agentic-ui-kit.com/live/component/collab-presence-avatars

## Install

```bash
agentic-ui add collab-presence-avatars
npx shadcn@4.17.0 add @agentic-ui/collab-presence-avatars
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** avatar-stack, live-presence, status-indicator, overflow-popover, follow-collaborator, status-filter, self-status-toggle, keyboard-navigation, responsive-layout, empty-and-error-states
- **Intents:** monitor-live, track-status, communicate
- **Suits domains:** saas, project-management, notes, knowledge
- **Interaction:** avatar-hover-popover, overflow-popover, status-filter, self-status-toggle, follow-action, keyboard-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** real-time view of collaborators editing documents in SaaS platforms, presence indicators and cursor tracking in design and project management tools, conflict detection and concurrent editing in wikis and knowledge bases, monitoring of active viewers in spreadsheets and technical specifications
- **Avoid when:** static or single-user views with no concurrency or collaboration, contact lists or corporate directories with no real-time session status
- **Preserve when adapting:** presence-aggregation-model, overflow-partitioning-logic, status-badge-conventions, keyboard-interaction-contracts
- **Replace when adapting:** realtime-transport-provider, user-identity-source, domain-copy, document-context-bindings
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** avatar, button, badge, popover, tooltip, separator, dropdown-menu
- **npm dependencies (registry):** lucide-react@0.577.0


### Collab Reactions

Team reactions in comment threads of task management.

- id: `collab-reactions`
- Page: https://agentic-ui-kit.com/components/collab-reactions
- Live preview: https://agentic-ui-kit.com/live/component/collab-reactions

## Install

```bash
agentic-ui add collab-reactions
npx shadcn@4.17.0 add @agentic-ui/collab-reactions
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** emoji-picker, reaction-counters, user-attribution-tooltip, optimistic-toggle, quick-reactions, search-filter, keyboard-navigation, empty-and-readonly-states, responsive-density
- **Intents:** communicate, track-status
- **Suits domains:** saas, project-management, social, notes
- **Interaction:** emoji-toggle, picker-search, quick-reaction-select, keyboard-navigation, user-list-tooltip
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** team reactions in comment threads of task management, quick emoji interaction in shared documents and notes, corporate social activity feed and internal announcements, code review and contextual feedback on PRs and tickets
- **Avoid when:** structured text entry forms with no social dimension, weighted voting with biometric or legal validation
- **Preserve when adapting:** emoji-counter-interaction-model, active-state-visual-feedback, keyboard-accessibility-contracts
- **Replace when adapting:** emoji-dictionary-set, user-identity-resolver, avatar-display-component
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, popover, tooltip, badge, input, scroll-area
- **npm dependencies (registry):** @radix-ui/react-popover@^1.1.15, @radix-ui/react-tooltip@^1.2.8, lucide-react@0.577.0


### Collab Video Call Panel

Video call room in a collaboration product with a participant grid, side chat and mic and camera controls.

- id: `collab-video-call-panel`
- Page: https://agentic-ui-kit.com/components/collab-video-call-panel
- Live preview: https://agentic-ui-kit.com/live/component/collab-video-call-panel

## Install

```bash
agentic-ui add collab-video-call-panel
npx shadcn@4.17.0 add @agentic-ui/collab-video-call-panel
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** participant-grid, speaker-layout, active-speaker-indication, mute-and-camera-toggles, screen-share-toggle, raise-hand, participant-pinning, host-moderation, side-chat, participant-list, unread-badge, call-timer, recording-indicator, keyboard-shortcuts, keyboard-navigation, live-announcements, connecting-error-and-waiting-states, responsive-layout
- **Intents:** communicate, monitor-live
- **Suits domains:** saas, project-management, education, support
- **Interaction:** mic-toggle, camera-toggle, screen-share-toggle, raise-hand, layout-switch, pin-participant, mute-participant, send-chat-message, side-panel-tabs, keyboard-shortcuts, keyboard-navigation
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** video call room in a collaboration product with a participant grid, side chat and mic and camera controls, team meeting in a project management tool with speaker view, raised hands and host moderation, virtual classroom with attendee list, raised hand and session chat, support video call with a customer: screen sharing, recording and invite link
- **Avoid when:** audio-only calls or asynchronous messaging (use a comment thread or a text chat), playback of recorded video without live participants (use a media player)
- **Preserve when adapting:** participant-ordering-engine, control-toggle-semantics, active-speaker-indication, focus-return-contracts, live-status-region
- **Replace when adapting:** media-stream-surface, participants-source, chat-transport, session-metadata, call-action-handlers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** avatar, button, scroll-area, sheet, skeleton, textarea, tooltip
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Commerce Gift Card

Interface for buying and customizing digital gift cards with a dynamic preview and scheduled delivery.

- id: `commerce-gift-card`
- Page: https://agentic-ui-kit.com/components/commerce-gift-card
- Live preview: https://agentic-ui-kit.com/live/component/commerce-gift-card

## Install

```bash
agentic-ui add commerce-gift-card
npx shadcn@4.17.0 add @agentic-ui/commerce-gift-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** gift-card-purchase, gift-card-redemption, balance-checker, transaction-ledger, real-time-preview, design-picker, custom-denominations, live-status-announcements, keyboard-navigation, empty-state
- **Intents:** execute-flow, track-status, explore-detail, manage-collection
- **Suits domains:** ecommerce, saas, marketing, fintech
- **Interaction:** tab-switching, amount-selection, form-input, code-redemption, balance-query, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** interface for buying and customizing digital gift cards with a dynamic preview and scheduled delivery, module for redeeming promo codes and purchase vouchers to credit a customer's balance, public and private lookup of the available balance on prepaid cards and vouchers with a movement history, loyalty and corporate rewards block issuing multi-theme gift vouchers
- **Avoid when:** processing credit cards or standard banking gateways (use billing-checkout-flow), payroll accounting or bulk vendor payments (use admin-kit-payments)
- **Preserve when adapting:** gift-card-purchase-redeem-balance-tab-structure, realtime-visual-card-preview, code-formatting-and-validation-flow, transaction-ledger-table-layout, accessible-live-announcements
- **Replace when adapting:** currency-code-and-symbol, preset-denomination-amounts, card-visual-themes-and-gradients, backend-gift-card-validation-endpoints
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, input, separator
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Commerce Inventory Alerts

Inventory alerts panel for a retail warehouse with a reorder point per SKU and a demand forecast.

- id: `commerce-inventory-alerts`
- Page: https://agentic-ui-kit.com/components/commerce-inventory-alerts
- Live preview: https://agentic-ui-kit.com/live/component/commerce-inventory-alerts

## Install

```bash
agentic-ui add commerce-inventory-alerts
npx shadcn@4.17.0 add @agentic-ui/commerce-inventory-alerts
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** low-stock-detection, reorder-point-tracking, demand-forecast, severity-triage, stockout-date-projection, forecast-sparkline, purchase-order-drafting, alert-snoozing, severity-filtering, text-search, sortable-columns, keyboard-navigation
- **Intents:** track-status, monitor-live, manage-collection, explore-detail
- **Suits domains:** ecommerce, logistics, operations, saas
- **Interaction:** keyboard-navigation, severity-filtering, text-search, column-sorting, horizon-switching, reorder-dialog, snooze-undo
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** inventory alerts panel for a retail warehouse with a reorder point per SKU and a demand forecast, replenishment view for logistics operations with a purchase order draft and an arrival date, marketplace stock monitor with severity classification and stockout projection, purchasing board of an inventory management SaaS with alert snooze and severity filters
- **Avoid when:** catalog without stock levels or demand history (use a simple product table), digital products or services without physical inventory (use usage-meter or plan-comparison)
- **Preserve when adapting:** forecast-engine, severity-ladder, live-status-region, keyboard-navigation
- **Replace when adapting:** inventory-items, severity-thresholds, currency-locale, reorder-handler
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, dialog, input, label, separator, skeleton, table
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Commerce Loyalty Points

Rewards page of an online store with a points balance, coupon redemption and Bronze/Silver/Gold/Platinum tiers.

- id: `commerce-loyalty-points`
- Page: https://agentic-ui-kit.com/components/commerce-loyalty-points
- Live preview: https://agentic-ui-kit.com/live/component/commerce-loyalty-points

## Install

```bash
agentic-ui add commerce-loyalty-points
npx shadcn@4.17.0 add @agentic-ui/commerce-loyalty-points
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** points-balance-summary, cash-value-conversion, pending-and-expiring-points, tier-progress-bar, tier-ladder-with-perks, transaction-history-table, history-type-filters, pagination-show-more, reward-redemption-with-confirm, live-region-announcements, empty-state, error-state, keyboard-navigation, responsive-layout
- **Intents:** track-status, audit-trail, explore-detail, execute-flow
- **Suits domains:** ecommerce, saas, billing, marketing, travel
- **Interaction:** filter-history, show-more, redeem-reward, confirm-cancel, retry, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** rewards page of an online store with a points balance, coupon redemption and Bronze/Silver/Gold/Platinum tiers, loyalty panel of an airline or hotel chain with available miles, expiry and member status, credits of a SaaS platform with usage history, bonuses and plan levels, points program of a restaurant app with visit history and redeemable rewards
- **Avoid when:** gamified achievements or streaks with no redeemable points economy (use gamify-achievements / gamify-streak-tracker), real monetary billing and payment methods (use billing-usage-meter / billing-checkout-flow)
- **Preserve when adapting:** balance-tier-history-hierarchy, tier-resolution-logic, redeem-confirm-model, transaction-type-semantics, accessible-live-announcements
- **Replace when adapting:** program-copy-and-tier-names, point-value-currency-and-locale, transaction-and-reward-data, brand-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, progress, separator, table
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Commerce Order Tracking

Order tracking page in an online store with statuses, ETA and the carrier's route map.

- id: `commerce-order-tracking`
- Page: https://agentic-ui-kit.com/components/commerce-order-tracking
- Live preview: https://agentic-ui-kit.com/live/component/commerce-order-tracking

## Install

```bash
agentic-ui add commerce-order-tracking
npx shadcn@4.17.0 add @agentic-ui/commerce-order-tracking
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-timeline, progress-percent, exception-states, tracking-event-log, route-map-optional, map-toggle, copy-tracking-number, eta-relative-label, line-items-summary, shipping-address, empty-state, error-state-retry, keyboard-navigation, reduced-motion-fallback
- **Intents:** track-status, explore-detail, monitor-live
- **Suits domains:** ecommerce, operations, travel, saas
- **Interaction:** map-toggle, copy-to-clipboard, expand-collapse, retry, keyboard-navigation
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** order tracking page in an online store with statuses, ETA and the carrier's route map, B2B shipment detail with hub checkpoints and a delay notice due to an incident, tracking delivery of spare parts or equipment in field operations, status of luggage or a shipment in a travel marketplace with intermediate stops
- **Avoid when:** listings of many orders (use ecommerce-order-list), return flows with item selection (use commerce-returns-flow), precise geographic maps with real tiles (use ecommerce-shipment-tracker-map)
- **Preserve when adapting:** six-stage-lifecycle-model, timeline-state-semantics, route-map-projection, live-announcements, empty-error-states
- **Replace when adapting:** order-and-route-fixtures, stage-labels-and-copy, locale-timezone-currency, support-action-handlers, brand-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, progress, alert, separator
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives, lib-tokens


### Commerce Promo Builder

Online store admin panel to define coupons and promotions with a cart preview.

- id: `commerce-promo-builder`
- Page: https://agentic-ui-kit.com/components/commerce-promo-builder
- Live preview: https://agentic-ui-kit.com/live/component/commerce-promo-builder

## Install

```bash
agentic-ui add commerce-promo-builder
npx shadcn@4.17.0 add @agentic-ui/commerce-promo-builder
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** discount-rule-editor, percentage-fixed-bxgy-free-shipping-rules, rule-scope-cart-or-category, minimum-subtotal-conditions, percentage-cap, stackable-or-best-rule-resolution, live-cart-preview, per-line-discount-breakdown, customer-facing-message-preview, inline-validation-and-error-state, rule-enable-disable, add-remove-rules, empty-state, keyboard-navigation, responsive-two-column-layout
- **Intents:** create-edit, configure, explore-detail
- **Suits domains:** ecommerce, saas, billing, marketing
- **Interaction:** add-remove-rule, edit-rule-fields, toggle-rule, select-scope, live-preview, save, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** online store admin panel to define coupons and promotions with a cart preview, discount configurator by category or whole cart with a maximum cap and minimum subtotal, editor for buy-x-get-y and free shipping campaigns with a simulated sample order, marketing tool to validate promo codes before publishing them
- **Avoid when:** applying a coupon from the customer checkout (use billing-checkout-flow), managing base catalog prices (use ecommerce-product-editor)
- **Preserve when adapting:** rule-editor-list-layout, live-preview-panel, validation-and-error-state, rule-status-badges, accessible-live-announcements
- **Replace when adapting:** discount-engine-rules, sample-cart-data, currency-and-locale, save-endpoint, brand-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, input, label, select, switch, separator, table, alert
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Commerce Returns Flow

Self-service return flow for a fashion or electronics ecommerce shopper.

- id: `commerce-returns-flow`
- Page: https://agentic-ui-kit.com/components/commerce-returns-flow
- Live preview: https://agentic-ui-kit.com/live/component/commerce-returns-flow

## Install

```bash
agentic-ui add commerce-returns-flow
npx shadcn@4.17.0 add @agentic-ui/commerce-returns-flow
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** item-selection, quantity-stepper, final-sale-guards, reason-selection, photo-upload-dropzone, store-credit-incentive, shipping-label-generation, qr-code-dropoff, packing-instructions, status-timeline, keyboard-navigation, minor-units-math
- **Intents:** execute-flow, manage-collection, track-status
- **Suits domains:** ecommerce, logistics, support, operations
- **Interaction:** stage-navigation, item-selection, reason-selection, file-upload, label-printing, status-tracking, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** self-service return flow for a fashion or electronics ecommerce shopper, RMA request with prepaid label generation and a paperless QR code, bonus store credit incentive versus a refund to the original credit card, tracking the return lifecycle from pickup to settlement
- **Avoid when:** immediate cancellation of orders before they have been packed or shipped, B2B returns with consignment contracts or complex customs inspections
- **Preserve when adapting:** return-stage-progression, minor-units-math, prepaid-label-layout, lifecycle-status-timeline
- **Replace when adapting:** carrier-branding, return-reasons-catalog, policy-window-duration, store-credit-incentive-rate
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, checkbox, dialog, input, label, progress, radio-group, select, separator, tooltip
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0


### Commerce Reviews Block

Customer ratings and reviews section on e-commerce product pages.

- id: `commerce-reviews-block`
- Page: https://agentic-ui-kit.com/components/commerce-reviews-block
- Live preview: https://agentic-ui-kit.com/live/component/commerce-reviews-block

## Install

```bash
agentic-ui add commerce-reviews-block
npx shadcn@4.17.0 add @agentic-ui/commerce-reviews-block
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rating-summary, rating-distribution, star-filtering, verified-buyer-filter, search-filter, sort-options, helpful-voting, editable-rating-input, half-step-ratings, review-submission, keyboard-navigation, empty-and-error-states, responsive-layout
- **Intents:** explore-detail, create-edit
- **Suits domains:** ecommerce, culinary, books, saas
- **Interaction:** star-distribution-filter, verified-buyer-toggle, keyword-search, sort-change, helpful-vote-toggle, rating-input-keyboard-pointer, review-form-submit
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** customer ratings and reviews section on e-commerce product pages, block of food reviews and dish ratings in digital menus, reader reviews and book ratings on publishing platforms, verified user reviews and testimonials in B2B marketplaces or SaaS
- **Avoid when:** real-time messaging or chat systems, internal company closed-ended survey forms
- **Preserve when adapting:** rating-aggregation-semantics, helpful-voting-state-model, half-step-rating-interaction, keyboard-accessible-slider-contract
- **Replace when adapting:** product-id-and-catalog-service, customer-verification-service, domain-copy-and-labels, image-upload-endpoint
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, badge, input, textarea, separator
- **Used in:** Marketplace (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Commerce Variant Picker

Variant picker for technical apparel and footwear with a color, size and fabric matrix.

- id: `commerce-variant-picker`
- Page: https://agentic-ui-kit.com/components/commerce-variant-picker
- Live preview: https://agentic-ui-kit.com/live/component/commerce-variant-picker

## Install

```bash
agentic-ui add commerce-variant-picker
npx shadcn@4.17.0 add @agentic-ui/commerce-variant-picker
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-attribute-selection, cross-availability-matrix, real-time-stock-status, sku-resolution, price-modifier-calculation, quantity-stepper, backorder-waitlist-notification, size-guide-modal, full-matrix-inspection, keyboard-navigation
- **Intents:** configure, explore-detail, create-edit
- **Suits domains:** ecommerce, logistics, saas, marketing
- **Interaction:** keyboard-navigation, variant-switching, cross-availability-filtering, size-guide-modal, matrix-inspection
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** variant picker for technical apparel and footwear with a color, size and fabric matrix, configurator for physical products with complex stock and finish combinations, hardware or merchandise selection panel in an omnichannel retail checkout, sports equipment picker with a size chart and restock alert
- **Avoid when:** selecting a single simple value with no cross dependencies (use a simple select or radio-group), digital products with no inventory or physical dimensions (use pricing-table or plan-comparison)
- **Preserve when adapting:** cross-availability-engine, radiogroup-semantics, price-delta-calculation, keyboard-navigation
- **Replace when adapting:** product-attributes, color-swatches, pricing-rules, currency-locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, dialog, input, separator, tooltip
- **npm dependencies (registry):** lucide-react@0.577.0


### Commerce Wishlist

Wishlist panel in an online store with visual alerts for price drops and remaining stock.

- id: `commerce-wishlist`
- Page: https://agentic-ui-kit.com/components/commerce-wishlist
- Live preview: https://agentic-ui-kit.com/live/component/commerce-wishlist

## Install

```bash
agentic-ui add commerce-wishlist
npx shadcn@4.17.0 add @agentic-ui/commerce-wishlist
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** price-drop-badge, stock-status-indicators, batch-cart-actions, multi-item-selection, search-filter, stock-filtering, price-drop-filtering, savings-summary-metrics, wishlist-share, empty-state, keyboard-navigation, responsive-grid
- **Intents:** manage-collection, track-status, explore-detail, execute-flow
- **Suits domains:** ecommerce, saas, marketing, operations
- **Interaction:** filter-search, item-selection, move-to-cart, remove-item, sort-selection, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** wishlist panel in an online store with visual alerts for price drops and remaining stock, interface for items saved for later purchase with bulk actions to the cart, tracking of items of interest with real-time calculation of accumulated savings, favorite products block with availability filters and restock alerts for sold-out items
- **Avoid when:** final checkout or payment processing (use billing-checkout-flow), internal catalog and warehouse management for administrators (use inventory-ops)
- **Preserve when adapting:** wishlist-grid-card-layout, stock-status-indicators, price-drop-badge-logic, batch-selection-model, accessible-live-announcements
- **Replace when adapting:** product-catalog-data, currency-symbol-and-locale, cart-action-endpoints, brand-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, checkbox, input, separator
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Core Settings Billing

Management of payment methods and invoices.

- id: `core-settings-billing`
- Page: https://agentic-ui-kit.com/components/core-settings-billing
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/settings/billing?piece=core-settings-billing

## Install

```bash
agentic-ui add core-settings-billing
npx shadcn@4.17.0 add @agentic-ui/core-settings-billing
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** payment-methods, invoice-history, tax-id, billing-address
- **Intents:** configure, manage-collection
- **Suits domains:** billing, finance, settings, saas
- **Interaction:** update-card, download-invoice, edit-tax-info
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Management of payment methods and invoices, Subscription tax information
- **Avoid when:** Free tools without billing
- **Preserve when adapting:** payment-method-card-layout, invoice-download-table
- **Replace when adapting:** payment-gateway-integration, tax-jurisdictions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, table, input
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template), SaaS Backoffice (blueprint)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, @tabler/icons-react@^3.41.1, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-input, ui-admin-kit-scroll-area, ui-admin-kit-select, ui-admin-kit-separator, ui-form, ui-radio-group


### Core Settings Connected Apps

Directory of software integrations (Slack, GitHub, Google).

- id: `core-settings-connected-apps`
- Page: https://agentic-ui-kit.com/components/core-settings-connected-apps
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/settings/connected-apps?piece=core-settings-connected-apps

## Install

```bash
agentic-ui add core-settings-connected-apps
npx shadcn@4.17.0 add @agentic-ui/core-settings-connected-apps
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** oauth-connect, permissions-review, disconnect-integration, sync-status
- **Intents:** configure, track-status
- **Suits domains:** settings, saas, devtools, operations
- **Interaction:** toggle-connection, configure-app-permissions
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Directory of software integrations (Slack, GitHub, Google), Data connectors hub
- **Avoid when:** Isolated systems without external APIs
- **Preserve when adapting:** integration-card-template, sync-indicator-pill
- **Replace when adapting:** integration-catalog, oauth-flow-endpoints
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, switch
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @tabler/icons-react@^3.41.1
- **Registry dependencies:** lib-admin-kit-utils, ui-accordion, ui-admin-kit-scroll-area, ui-admin-kit-separator


### Core Settings Notifications

Alert and email preferences.

- id: `core-settings-notifications`
- Page: https://agentic-ui-kit.com/components/core-settings-notifications
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/settings/notifications?piece=core-settings-notifications

## Install

```bash
agentic-ui add core-settings-notifications
npx shadcn@4.17.0 add @agentic-ui/core-settings-notifications
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** channel-toggles, digest-frequency, event-subscriptions, sound-alerts
- **Intents:** configure
- **Suits domains:** settings, saas, personal-productivity, social
- **Interaction:** toggle-switch, select-frequency
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Alert and email preferences, Notification frequency settings
- **Avoid when:** Systems with no messaging service
- **Preserve when adapting:** notification-row-pattern, section-divider-style
- **Replace when adapting:** notification-topics, delivery-channels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, switch, button, radio-group
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template), Internal Operations — public status variant (blueprint), Internal Operations (blueprint), Support Desk (blueprint)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-scroll-area, ui-admin-kit-separator, ui-admin-kit-switch, ui-form, ui-radio-group


### Core Settings Profile

Personal profile settings.

- id: `core-settings-profile`
- Page: https://agentic-ui-kit.com/components/core-settings-profile
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/settings/profile?piece=core-settings-profile

## Install

```bash
agentic-ui add core-settings-profile
npx shadcn@4.17.0 add @agentic-ui/core-settings-profile
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** avatar-upload, bio-input, public-handle, contact-details
- **Intents:** configure, create-edit
- **Suits domains:** settings, saas, auth, personal-productivity
- **Interaction:** change-avatar, edit-bio, save-profile
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Personal profile settings, Configuration of public account data
- **Avoid when:** Corporate environments with read-only identity
- **Preserve when adapting:** avatar-change-preview, profile-form-grid
- **Replace when adapting:** profile-fields-schema, save-profile-action
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, input, textarea, avatar
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, @tabler/icons-react@^3.41.1, date-fns@4.1.0, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-command, ui-admin-kit-input, ui-admin-kit-popover, ui-admin-kit-scroll-area, ui-admin-kit-select, ui-admin-kit-separator, ui-calendar, ui-form


### Core Tasks Mutate Drawer

Task edit drawer.

- id: `core-tasks-mutate-drawer`
- Page: https://agentic-ui-kit.com/components/core-tasks-mutate-drawer
- Live preview: https://agentic-ui-kit.com/live/fixture/core-tasks-mutate-drawer?piece=core-tasks-mutate-drawer

## Install

```bash
agentic-ui add core-tasks-mutate-drawer
npx shadcn@4.17.0 add @agentic-ui/core-tasks-mutate-drawer
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** slide-over-form, task-creation, task-updating, validation
- **Intents:** create-edit
- **Suits domains:** project-management, operations, saas, crm
- **Interaction:** open-drawer, submit-form, close-drawer
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Task edit drawer, Quick ticket creation drawer
- **Avoid when:** Complex multi-step forms with a wizard
- **Preserve when adapting:** sheet-slideover-animation, form-layout-vertical
- **Replace when adapting:** task-input-fields, validation-schema
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** sheet, button, input, textarea, select
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, @tabler/icons-react@^3.41.1, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-sheet, ui-form, ui-radio-group


### Core Tasks Table

Table component for issue management.

- id: `core-tasks-table`
- Page: https://agentic-ui-kit.com/components/core-tasks-table
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/tasks?piece=core-tasks-table

## Install

```bash
agentic-ui add core-tasks-table
npx shadcn@4.17.0 add @agentic-ui/core-tasks-table
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** tanstack-table-view, selectable-rows, sortable-headers, pagination-controls
- **Intents:** manage-collection, track-status
- **Suits domains:** operations, project-management, saas, devtools
- **Interaction:** select-all, select-row, sort-column
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Table component for issue management, Dense task listing
- **Avoid when:** Card views or unstructured blocks
- **Preserve when adapting:** table-header-interaction, checkbox-column-width
- **Replace when adapting:** row-definitions, action-menu-handlers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** table, checkbox, badge, button
- **npm dependencies:** @tanstack/react-table, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @radix-ui/react-icons@^1.3.2, @tabler/icons-react@^3.41.1, @tanstack/react-table@^8.21.3, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-command, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-popover, ui-admin-kit-select, ui-admin-kit-separator, ui-table


### Core User Profile Detail

Administrative employee record.

- id: `core-user-profile-detail`
- Page: https://agentic-ui-kit.com/components/core-user-profile-detail
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/users?follow=%5E%5C%2Fcore%5C%2Fusers%5C%2F%5B%5E%2F%5D%2B%24&piece=core-user-profile-detail

## Install

```bash
agentic-ui add core-user-profile-detail
npx shadcn@4.17.0 add @agentic-ui/core-user-profile-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** profile-editing, role-assignment, security-audit, personal-info
- **Intents:** explore-detail, create-edit, configure
- **Suits domains:** saas, auth, operations, crm
- **Interaction:** update-user-data, change-role, navigate-breadcrumb
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Administrative employee record, User detail and modification view
- **Avoid when:** General listings without a selected user
- **Preserve when adapting:** profile-header-with-avatar, breadcrumb-navigation
- **Replace when adapting:** user-schema, update-user-mutation
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, input, breadcrumb
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @faker-js/faker@^10.3.0, @hookform/resolvers@^5.2.2, @tabler/icons-react@^3.41.1, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-breadcrumb, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-separator, ui-admin-kit-switch, ui-alert, ui-alert-dialog, ui-form, ui-radio-group


### Core Users Directory

Company employee directory.

- id: `core-users-directory`
- Page: https://agentic-ui-kit.com/components/core-users-directory
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/users?piece=core-users-directory

## Install

```bash
agentic-ui add core-users-directory
npx shadcn@4.17.0 add @agentic-ui/core-users-directory
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** user-search, role-faceted-filter, invite-modal, status-toggle, bulk-actions
- **Intents:** manage-collection, configure, track-status
- **Suits domains:** saas, auth, operations, crm
- **Interaction:** search-user, filter-role, invite-dialog, deactivate-user
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Company employee directory, Team member administration panel
- **Avoid when:** Systems without users or access control
- **Preserve when adapting:** user-directory-layout, role-badging-system
- **Replace when adapting:** user-roles-list, invitation-mechanism
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** table, badge, button, input, dropdown-menu, dialog
- **npm dependencies:** @tanstack/react-table, lucide-react
- **Used in:** Kestrel Admin Kit (template), Legal Operations (blueprint), People Operations (blueprint), SaaS Admin Starter (blueprint), SaaS Backoffice (blueprint)
- **npm dependencies (registry):** @faker-js/faker@^10.3.0, @hookform/resolvers@^5.2.2, @radix-ui/react-icons@^1.3.2, @tabler/icons-react@^3.41.1, @tanstack/react-table@^8.21.3, date-fns@4.1.0, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** core-users-invite-dialog, core-users-kpi-stats, core-users-table, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-breadcrumb, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-dialog, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-select, ui-admin-kit-tooltip, ui-alert, ui-alert-dialog, ui-form


### Core Users Invite Dialog

Modal to send an invitation to the platform.

- id: `core-users-invite-dialog`
- Page: https://agentic-ui-kit.com/components/core-users-invite-dialog
- Live preview: https://agentic-ui-kit.com/live/fixture/core-users-invite-dialog?piece=core-users-invite-dialog

## Install

```bash
agentic-ui add core-users-invite-dialog
npx shadcn@4.17.0 add @agentic-ui/core-users-invite-dialog
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** email-invitation, role-picker, custom-message, batch-invite
- **Intents:** create-edit, communicate
- **Suits domains:** saas, auth, operations, crm
- **Interaction:** enter-email, select-role, send-invite
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Modal to send an invitation to the platform, Adding collaborators by email
- **Avoid when:** Public self-service sign-up without an invitation
- **Preserve when adapting:** modal-form-flow, role-select-dropdown
- **Replace when adapting:** available-roles, invitation-email-template
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** dialog, button, input, select, textarea
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template), SaaS Backoffice (blueprint)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, @tabler/icons-react@^3.41.1, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-dialog, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-textarea, ui-form


### Core Users Table

Organization members table.

- id: `core-users-table`
- Page: https://agentic-ui-kit.com/components/core-users-table
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/users?piece=core-users-table

## Install

```bash
agentic-ui add core-users-table
npx shadcn@4.17.0 add @agentic-ui/core-users-table
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** user-row-avatar, role-pill, status-badge, actions-context-menu
- **Intents:** manage-collection, track-status
- **Suits domains:** saas, auth, operations, crm
- **Interaction:** click-user, trigger-row-action
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Organization members table, User account listing
- **Avoid when:** Individual profile views
- **Preserve when adapting:** user-identity-cell, status-badge-formatting
- **Replace when adapting:** user-schema-attributes, role-definitions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** table, avatar, badge, button, dropdown-menu
- **npm dependencies:** @tanstack/react-table, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @radix-ui/react-icons@^1.3.2, @tabler/icons-react@^3.41.1, @tanstack/react-table@^8.21.3, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-command, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-popover, ui-admin-kit-select, ui-admin-kit-separator, ui-table


### Dashboard Leaderboard

Sales ranking of account executives with weekly change.

- id: `dashboard-leaderboard`
- Page: https://agentic-ui-kit.com/components/dashboard-leaderboard
- Live preview: https://agentic-ui-kit.com/live/component/dashboard-leaderboard

## Install

```bash
agentic-ui add dashboard-leaderboard
npx shadcn@4.17.0 add @agentic-ui/dashboard-leaderboard
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** ranking-list, position-delta-tracking, podium-highlight, time-range-filter, search-filter, entity-selection, keyboard-navigation, empty-state, error-state
- **Intents:** compare-over-time, track-status, explore-detail
- **Suits domains:** saas, analytics, operations, crm, hr
- **Interaction:** time-period-filter, search-filter, entity-selection, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Sales ranking of account executives with weekly change, Leaderboard for technical support ticket resolution, Performance and points ranking in gamified team challenges
- **Avoid when:** The metric does not allow competitive or ordinal ordering, Continuous time series visualization is required instead of an entity ranking
- **Preserve when adapting:** ranking-hierarchy, position-delta-model, accessibility-labels
- **Replace when adapting:** entity-data, period-presets, score-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** avatar, badge, button, card, input, table, tabs
- **Registry dependencies:** lib-primitives


### Dashboard Scorecard

Executive Monthly Recurring Revenue (MRR) scorecard with a 30-day sparkline, percentage change and quarterly target.

- id: `dashboard-scorecard`
- Page: https://agentic-ui-kit.com/components/dashboard-scorecard
- Live preview: https://agentic-ui-kit.com/live/component/dashboard-scorecard

## Install

```bash
agentic-ui add dashboard-scorecard
npx shadcn@4.17.0 add @agentic-ui/dashboard-scorecard
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** metric-value-display, delta-calculation, trend-indicator, sparkline-microchart, timeframe-switching, polarity-inversion, interactive-scrubbing, target-progress-tracking, secondary-stats-breakdown, keyboard-navigation, accessible-aria-slider, empty-and-error-states, scorecard-grid
- **Intents:** track-status, compare-over-time, show-composition, explore-detail
- **Suits domains:** analytics, finance, saas, devops-status, operations, ecommerce
- **Interaction:** timeframe-switching, sparkline-scrubbing, sparkline-variant-toggle, keyboard-navigation, retry-action
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Executive Monthly Recurring Revenue (MRR) scorecard with a 30-day sparkline, percentage change and quarterly target, Real-time P99 latency monitoring card with inverted polarity (a decrease is green) and an SLA threshold, Widget tracking Daily Active Users (DAU) and conversion rate with a period selector (7D, 30D, 90D)
- **Avoid when:** Dense tables of individual transactions with dozens of non-aggregated columns (use table or responsive-table-to-cards), Complex multi-axis visualizations with more than 4 overlapping simultaneous time series (use chart-timeseries)
- **Preserve when adapting:** metric-delta-trend-composition, sparkline-vector-geometry, keyboard-scrubbing-contract, polarity-inversion-logic
- **Replace when adapting:** metric-title-and-units, timeframe-presets, target-thresholds
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Dashboard Widget Grid

Executive panel with customizable KPIs, interactive traffic charts and a live audit log.

- id: `dashboard-widget-grid`
- Page: https://agentic-ui-kit.com/components/dashboard-widget-grid
- Live preview: https://agentic-ui-kit.com/live/component/dashboard-widget-grid

## Install

```bash
agentic-ui add dashboard-widget-grid
npx shadcn@4.17.0 add @agentic-ui/dashboard-widget-grid
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** widget-drag-reorder, widget-resize-grid, layout-persistence, widget-catalog-browser, accessible-keyboard-navigation, resizable-split-panels, responsive-grid-reflow, empty-and-error-states
- **Intents:** configure, monitor-live, manage-collection
- **Suits domains:** analytics, operations, saas, devtools, finance
- **Interaction:** drag-and-drop, resize-column, toggle-collapse, add-widget-dialog, preset-selector, keyboard-reorder
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Executive panel with customizable KPIs, interactive traffic charts and a live audit log, Operations and infrastructure console with drag-and-drop reordering of status and alert cards, Interactive dashboard builder with persistent layout saving and a resizable panel comparator
- **Avoid when:** Linear data entry forms or continuous text documents without a widget structure
- **Preserve when adapting:** grid-reorder-engine, layout-persistence-contract, resize-snap-system, keyboard-accessibility
- **Replace when adapting:** widget-library-catalog, data-sources, visual-themes, default-presets
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, dialog
- **npm dependencies:** @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, react-resizable-panels, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, @dnd-kit/sortable@10.0.0, @dnd-kit/utilities@3.2.2, lucide-react@0.577.0, react-resizable-panels@^4.5.6
- **Registry dependencies:** lib-primitives


### Devtools API Keys

API token administration.

- id: `devtools-api-keys`
- Page: https://agentic-ui-kit.com/components/devtools-api-keys
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/developers/api-keys?piece=devtools-api-keys

## Install

```bash
agentic-ui add devtools-api-keys
npx shadcn@4.17.0 add @agentic-ui/devtools-api-keys
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** key-generation, token-revocation, permission-scopes, copy-token
- **Intents:** configure, authenticate, manage-collection
- **Suits domains:** devtools, auth, saas, operations
- **Interaction:** copy-key, revoke-key, create-key-modal
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** API token administration, Management of third-party access secrets
- **Avoid when:** Applications with no programmatic authentication
- **Preserve when adapting:** key-masking-strategy, scope-badge-display, table-actions-menu
- **Replace when adapting:** token-prefixes, scope-taxonomy, expiry-presets
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, table, dropdown-menu, dialog
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template), SaaS Backoffice (blueprint)
- **npm dependencies (registry):** @tabler/icons-react@^3.41.1, date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** devtools-create-api-key-dialog, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-tabs, ui-admin-kit-tooltip, ui-alert


### Devtools Command Menubar

Main command bar of a debugging console to toggle panels, throttling and logging options.

- id: `devtools-command-menubar`
- Page: https://agentic-ui-kit.com/components/devtools-command-menubar
- Live preview: https://agentic-ui-kit.com/live/component/devtools-command-menubar

## Install

```bash
agentic-ui add devtools-command-menubar
npx shadcn@4.17.0 add @agentic-ui/devtools-command-menubar
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** horizontal-command-menus, nested-submenus, checkbox-items, radio-groups, keyboard-traversal, shortcut-hints, responsive-compact, state-synchronization, empty-state, error-state
- **Intents:** navigate, manage-collection, execute-flow
- **Suits domains:** devtools, ai-workspace, saas, operations
- **Interaction:** click, keyboard-arrow-navigation, submenu-open, checkbox-toggle, radio-select
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** main command bar of a debugging console to toggle panels, throttling and logging options, top menu of a technical inspection tool with export submenus and profiling modes, IDE-style command interface with visible shortcuts and exclusive radio selections, operations console with network control, user agent emulation and log clearing
- **Avoid when:** primary web navigation between public marketing pages (use navigation-menu), pop-up context menu triggered by right-click (use context-menu)
- **Preserve when adapting:** menubar-keyboard-contract, submenu-and-choice-hierarchy, state-synchronization-model, accessible-empty-and-error-states
- **Replace when adapting:** menu-structure-and-labels, command-actions-and-handlers, shortcut-bindings, devtools-specific-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** menubar, button, badge, separator
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** @radix-ui/react-menubar@^1.1.6, clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0


### Devtools Create API Key Dialog

Service token creation modal.

- id: `devtools-create-api-key-dialog`
- Page: https://agentic-ui-kit.com/components/devtools-create-api-key-dialog
- Live preview: https://agentic-ui-kit.com/live/piece/devtools-create-api-key-dialog?activate=button&piece=devtools-create-api-key-dialog

## Install

```bash
agentic-ui add devtools-create-api-key-dialog
npx shadcn@4.17.0 add @agentic-ui/devtools-create-api-key-dialog
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** modal-form, permission-checkboxes, expiry-picker, token-reveal
- **Intents:** create-edit, configure
- **Suits domains:** devtools, auth, saas, operations
- **Interaction:** form-submit, scope-toggle, modal-dismiss
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Service token creation modal, Issuing credentials with an expiry
- **Avoid when:** Full-page embedded forms
- **Preserve when adapting:** security-warning-banner, scope-selection-grid, one-time-reveal-step
- **Replace when adapting:** permission-matrix, default-expiration-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** dialog, button, input, checkbox, select
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** ui-admin-kit-button, ui-admin-kit-dialog, ui-admin-kit-input, ui-form


### Docs Approval Flow

Internal policy that moves from draft to legal and security review before being published.

- id: `docs-approval-flow`
- Page: https://agentic-ui-kit.com/components/docs-approval-flow
- Live preview: https://agentic-ui-kit.com/live/component/docs-approval-flow

## Install

```bash
agentic-ui add docs-approval-flow
npx shadcn@4.17.0 add @agentic-ui/docs-approval-flow
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** approval-state-machine, draft-review-approved-stages, reviewer-assignment, required-approval-gating, blocking-comment-gating, threaded-review-comments, comment-resolution, change-request-round-trip, audit-trail, read-only-history, empty-state, error-state, dark-mode
- **Intents:** execute-flow, track-status, communicate, audit-trail
- **Suits domains:** knowledge, project-management, operations, saas, hr
- **Interaction:** submit-for-review, record-approval, request-changes, resubmit, add-comment, reply-to-comment, resolve-comment, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Internal policy that moves from draft to legal and security review before being published, Technical proposal (RFC) that requires approval from two leads and resolution of blocking comments, Contract or addendum circulated among owners with comments anchored to sections, Operating procedure resubmitted for review after a round of requested changes
- **Avoid when:** Immediate publishing with no reviewers or signature, where the only state is published, Legally binding electronic signature with signer order (use docs-esignature-flow), Line-by-line code review with a diff (use code-diff-viewer)
- **Preserve when adapting:** state-machine-contract, approval-gating-rules, audit-trail-model, keyboard-accessibility-model
- **Replace when adapting:** domain-copy, reviewer-directory, notification-handlers, persistence-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, textarea, progress, avatar
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0


### Docs Editor Shell

Product documentation space (PRD) with a section outline and word goal tracking.

- id: `docs-editor-shell`
- Page: https://agentic-ui-kit.com/components/docs-editor-shell
- Live preview: https://agentic-ui-kit.com/live/component/docs-editor-shell

## Install

```bash
agentic-ui add docs-editor-shell
npx shadcn@4.17.0 add @agentic-ui/docs-editor-shell
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rich-text-editing, formatting-toolbar, document-outline, heading-navigation, word-count-telemetry, reading-time-estimation, target-word-goal, template-switching, multi-format-export, read-only-mode, zen-focus-mode, dark-mode
- **Intents:** create-edit, generate-content, configure, navigate
- **Suits domains:** knowledge, notes, project-management, ai-workspace, saas
- **Interaction:** edit-rich-text, toggle-formatting, jump-to-heading, filter-outline, switch-template, export-document, toggle-zen-mode, keyboard-shortcuts
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Product documentation space (PRD) with a section outline and word goal tracking, Engineering technical proposals and RFCs with heading navigation and Markdown export, Meeting minutes and sprint notes editor with checkable task lists and reading indicators, Knowledge base hub where articles are drafted with a clear structure before publishing
- **Avoid when:** Short single-line text fields or simple transactional forms, Environments that require pure source code editing with specialized syntax highlighting (use Monaco/CodeMirror), Spreadsheets or complex tabular matrices with formulas
- **Preserve when adapting:** tiptap-schema-contract, outline-extraction-logic, metrics-calculation-contract, keyboard-accessibility-model
- **Replace when adapting:** document-templates, custom-marks-extensions, export-handlers, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, input
- **npm dependencies:** @tiptap/react, @tiptap/starter-kit, @tiptap/extension-placeholder, @tiptap/extension-task-list, @tiptap/extension-task-item, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** @tiptap/extension-placeholder@^3.24.0, @tiptap/extension-task-item@^3.24.0, @tiptap/extension-task-list@^3.24.0, @tiptap/react@^3.24.0, @tiptap/starter-kit@^3.24.0, lucide-react@0.577.0


### Docs Esignature Flow

Master services agreement (MSA) with sequential signing between legal counsel, CFO and investor client.

- id: `docs-esignature-flow`
- Page: https://agentic-ui-kit.com/components/docs-esignature-flow
- Live preview: https://agentic-ui-kit.com/live/component/docs-esignature-flow

## Install

```bash
agentic-ui add docs-esignature-flow
npx shadcn@4.17.0 add @agentic-ui/docs-esignature-flow
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** signature-fields, signing-order-management, sequential-workflow, parallel-workflow, signer-role-assignment, interactive-signing-session, signature-capture-modal, cursive-type-signature, drawn-canvas-signature, decline-to-sign, audit-trail, certificate-of-completion, cryptographic-hash-verification, empty-state, error-state, dark-mode
- **Intents:** execute-flow, track-status, audit-trail, create-edit
- **Suits domains:** knowledge, operations, saas, hr, finance
- **Interaction:** reorder-signers, add-signature-field, adopt-signature, type-signature, draw-signature, complete-signing, decline-signing, verify-certificate, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Master services agreement (MSA) with sequential signing between legal counsel, CFO and investor client, Commercial lease contract with signature, date and legal verification fields, Mutual non-disclosure agreement (NDA) with multiple signers and a completion certificate, Job offer or onboarding letter signed by the candidate and human resources
- **Avoid when:** Simple internal approval flow with no legal value or signature fields (use docs-approval-flow), Real-time collaborative rich-text editing and writing (use docs-editor-shell), Passive viewing of PDF documents without signature placement (use docs-pdf-viewer)
- **Preserve when adapting:** signing-order-state-machine, signer-sequence-contract, audit-trail-model, field-placement-model
- **Replace when adapting:** document-content, recipient-directory, signature-backend-provider, notification-service
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, dialog, tabs, textarea, progress, avatar
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0


### Docs FAQ Block

Frequently asked questions section in help centers and technical support.

- id: `docs-faq-block`
- Page: https://agentic-ui-kit.com/components/docs-faq-block
- Live preview: https://agentic-ui-kit.com/live/component/docs-faq-block

## Install

```bash
agentic-ui add docs-faq-block
npx shadcn@4.17.0 add @agentic-ui/docs-faq-block
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** faq-accordion, search-filtering, category-filtering, search-highlighting, expand-collapse-all, keyboard-navigation, feedback-rating, copy-link, empty-state, error-state
- **Intents:** explore-detail, retrieve-knowledge, navigate
- **Suits domains:** knowledge, support, saas, devtools
- **Interaction:** accordion-toggle, search-filter, category-filter, expand-collapse-all, feedback-rating, keyboard-navigation
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** frequently asked questions section in help centers and technical support, API documentation and developer guides with interactive search, questions and answers about billing, plans and security in SaaS applications, internal knowledge base for user onboarding self-service
- **Avoid when:** long documents that require pagination or a PDF viewer (use docs-pdf-viewer), collaborative document editing with an approval flow (use docs-approval-flow)
- **Preserve when adapting:** accordion-pattern, search-highlighting, keyboard-navigation, feedback-flow
- **Replace when adapting:** faq-content, categories, token-palette, locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** accordion, badge, button, card, input, separator, skeleton
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Docs Knowledge Base

Help center and technical knowledge base with article navigation and rating.

- id: `docs-knowledge-base`
- Page: https://agentic-ui-kit.com/components/docs-knowledge-base
- Live preview: https://agentic-ui-kit.com/live/component/docs-knowledge-base

## Install

```bash
agentic-ui add docs-knowledge-base
npx shadcn@4.17.0 add @agentic-ui/docs-knowledge-base
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** article-viewer, table-of-contents, reading-progress-indicator, scroll-spy, related-articles-grid, article-feedback-rating, in-article-search, category-filter-sidebar, code-snippet-copy, keyboard-navigation
- **Intents:** retrieve-knowledge, explore-detail, navigate
- **Suits domains:** knowledge, devtools, saas, support
- **Interaction:** keyboard-navigation, article-selection, section-anchoring, feedback-rating, search-filter
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** help center and technical knowledge base with article navigation and rating, interactive documentation of APIs, webhooks and step-by-step developer guides, enterprise self-service and support portal with related articles and reactive search, operations manuals, runbooks and security policies with a dynamic table of contents
- **Avoid when:** real-time collaborative document editing (use docs-editor-shell), viewer and pagination for binary PDF documents (use docs-pdf-viewer)
- **Preserve when adapting:** toc-structure, feedback-workflow, callout-grammar, keyboard-navigation
- **Replace when adapting:** article-content, categories, brand-palette, author-metadata
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** avatar, badge, button, card, input, separator, skeleton
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Docs Version History

Auditing and change control in legal documents, agreements and contracts.

- id: `docs-version-history`
- Page: https://agentic-ui-kit.com/components/docs-version-history
- Live preview: https://agentic-ui-kit.com/live/component/docs-version-history

## Install

```bash
agentic-ui add docs-version-history
npx shadcn@4.17.0 add @agentic-ui/docs-version-history
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** version-timeline, word-level-diff, paragraph-diff, inline-diff-view, side-by-side-diff-view, version-restore-dialog, revision-tagging, version-filter-search, keyboard-navigation
- **Intents:** explore-detail, audit-trail, compare-over-time
- **Suits domains:** devtools, ai-workspace, saas, operations
- **Interaction:** keyboard-navigation, view-switching, version-restore, search-filter
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** auditing and change control in legal documents, agreements and contracts, revision history in knowledge base articles or internal documentation, version comparison and restoration of prompts or specs in an ai-workspace, traceability of collaborative changes to corporate policies in a SaaS panel
- **Avoid when:** source code editing at the syntax tree level (use code-diff-viewer), comparison of continuous time series (use chart compare-over-time)
- **Preserve when adapting:** diff-grammar, timeline-structure, restore-confirmation, keyboard-navigation
- **Replace when adapting:** document-content, author-roles, token-palette, locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** alert, alert-dialog, avatar, badge, button, card, input, scroll-area, separator, skeleton, tooltip
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Events Seat Map

Seat selection when buying tickets for a theater or stadium.

- id: `events-seat-map`
- Page: https://agentic-ui-kit.com/components/events-seat-map
- Live preview: https://agentic-ui-kit.com/live/component/events-seat-map

## Install

```bash
agentic-ui add events-seat-map
npx shadcn@4.17.0 add @agentic-ui/events-seat-map
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** canvas-seat-rendering, seat-status-model, price-tier-grouping, pointer-seat-selection, keyboard-seat-navigation, accessible-dom-mirror, selection-limit-enforcement, rejection-reasoning, zoom-and-fit-viewport, venue-feature-rendering, live-region-announcement, selection-total-pricing, capacity-summary
- **Intents:** manage-collection, explore-detail, execute-flow
- **Suits domains:** ecommerce, operations, travel, media, saas
- **Interaction:** pointer-selection, keyboard-arrow-navigation, zoom-controls, live-region-feedback
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** seat selection when buying tickets for a theater or stadium, cinema floor plan with pricing by zone and accessible seats, seat assignment in a training room or a corporate event, organizer panel showing sold, held and blocked capacity
- **Avoid when:** seats with no fixed position, where a list or a quantity selector is enough, general admission venues without numbering, geographic plans over real cartography, which call for a map rather than a venue
- **Preserve when adapting:** seat-status-semantics, accessible-dom-mirror, selection-rules, keyboard-model
- **Replace when adapting:** venue-geometry, tier-pricing, domain-copy, currency-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10


### Feedback Announcement Banner

Informational notice of a planned maintenance window with a link to the calendar.

- id: `feedback-announcement-banner`
- Page: https://agentic-ui-kit.com/components/feedback-announcement-banner
- Live preview: https://agentic-ui-kit.com/live/component/feedback-announcement-banner

## Install

```bash
agentic-ui add feedback-announcement-banner
npx shadcn@4.17.0 add @agentic-ui/feedback-announcement-banner
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** announcement-banner, info-variant, warning-variant, promo-variant, dismissible, persistent-dismissal, keyboard-navigation, visible-focus-ring, escape-dismiss, responsive-layout, live-region-announcement
- **Intents:** communicate, track-status, navigate
- **Suits domains:** saas, marketing, operations, devops-status, ecommerce
- **Interaction:** primary-action, secondary-action, dismiss-action, keyboard-activation, escape-dismiss
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** informational notice of a planned maintenance window with a link to the calendar, preventive alert on quota consumption or API limit with a button to manage usage, promotional banner for a new feature or discount with a button to claim the offer
- **Avoid when:** full navigation pages or system-down status (use feedback-status-page or feedback-error-pages), transient or ephemeral action confirmation notifications (use toast or sonner), field validation messages inside forms (use form-validation-summary)
- **Preserve when adapting:** variant-semantics, dismissal-behavior, keyboard-accessibility
- **Replace when adapting:** promotional-copy, action-destinations, brand-gradient-accents
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge
- **npm dependencies:** lucide-react
- **Motion:** profile none, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Feedback Changelog Modal

'What's New' modal after a version update in a SaaS application.

- id: `feedback-changelog-modal`
- Page: https://agentic-ui-kit.com/components/feedback-changelog-modal
- Live preview: https://agentic-ui-kit.com/live/component/feedback-changelog-modal

## Install

```bash
agentic-ui add feedback-changelog-modal
npx shadcn@4.17.0 add @agentic-ui/feedback-changelog-modal
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** versioned-releases, change-categorization, unread-badge-tracking, mark-all-read, feedback-reaction, category-filter, search-filter, version-history-navigation, keyboard-navigation, empty-and-error-states, responsive-dialog
- **Intents:** communicate, track-status, explore-detail
- **Suits domains:** saas, devtools, project-management, operations, analytics
- **Interaction:** version-selection, category-filter, search-filter, feedback-reaction-toggle, mark-all-read, dialog-trigger-open-close, keyboard-escape-dismiss
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** 'What's New' modal after a version update in a SaaS application, interactive summary of the changelog and breaking changes in a developer portal, notification of new features and improvements for users in an analytics console, version history with feedback reactions and links to technical documentation
- **Avoid when:** high-frequency chat or interpersonal messaging channels, simple transactional data entry forms
- **Preserve when adapting:** version-timeline-and-card-layout, change-type-badge-color-semantics, accessible-dialog-modal-behavior, keyboard-shortcuts-and-focus-trap
- **Replace when adapting:** changelog-release-data-source, feedback-reaction-mutation-handler, version-tracking-storage-adapter, release-cta-links
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** dialog, button, badge, card, input, separator, tooltip
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Feedback Empty State

Invoice table with no records that offers to create the first one or import a CSV.

- id: `feedback-empty-state`
- Page: https://agentic-ui-kit.com/components/feedback-empty-state
- Live preview: https://agentic-ui-kit.com/live/component/feedback-empty-state

## Install

```bash
agentic-ui add feedback-empty-state
npx shadcn@4.17.0 add @agentic-ui/feedback-empty-state
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** empty-state, no-results-state, error-recovery, permission-notice, first-use-onboarding, archived-state, query-echo, primary-action, secondary-action, loading-placeholder, size-scaling, live-region-announcement
- **Intents:** track-status, navigate, explore-detail, configure
- **Suits domains:** saas, operations, analytics, support, settings
- **Interaction:** primary-action, secondary-action, query-echo, size-switch, keyboard-activation
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** invoice table with no records that offers to create the first one or import a CSV, filtered search that returns no matches and echoes the search term, reports panel that fails to load and offers a retry next to the request-id for support, billing settings restricted to administrators with a request-access action, fully archived inbox communicated as finished work and not as an error
- **Avoid when:** full-page navigation error pages 404, 500, offline or maintenance (use feedback-error-pages), validation errors of a field inside a form (use form-validation-summary), transient notices about already loaded content (use a toast or a banner)
- **Preserve when adapting:** variant-to-situation-mapping, announcement-semantics, action-hierarchy
- **Replace when adapting:** domain-copy, iconography, action-targets
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile none, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Feedback Error Pages

Nonexistent route after changing a panel's link structure.

- id: `feedback-error-pages`
- Page: https://agentic-ui-kit.com/components/feedback-error-pages
- Live preview: https://agentic-ui-kit.com/live/component/feedback-error-pages

## Install

```bash
agentic-ui add feedback-error-pages
npx shadcn@4.17.0 add @agentic-ui/feedback-error-pages
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** http-error-presentation, offline-detection, maintenance-window, user-initiated-retry, recovery-navigation, support-diagnostics
- **Intents:** track-status, navigate, communicate
- **Suits domains:** saas, operations, ecommerce, devtools, devops-status
- **Interaction:** retry-action, recovery-navigation, keyboard-navigation, connectivity-awareness
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** nonexistent route after changing a panel's link structure, API failure with a request identifier to open a ticket, loss of connection in an application used from a phone, scheduled maintenance window with an announced return time
- **Avoid when:** a field validation error, which is resolved next to the field itself, absence of data on a screen that did load, which belongs to an empty state
- **Preserve when adapting:** retry-policy-per-variant, status-announcement-semantics, recovery-action-hierarchy, support-diagnostics-visibility
- **Replace when adapting:** error-copy, brand-illustration, support-links, maintenance-window-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Feedback Notification Center

Real-time notification and alert inbox in an operations and support console.

- id: `feedback-notification-center`
- Page: https://agentic-ui-kit.com/components/feedback-notification-center
- Live preview: https://agentic-ui-kit.com/live/component/feedback-notification-center

## Install

```bash
agentic-ui add feedback-notification-center
npx shadcn@4.17.0 add @agentic-ui/feedback-notification-center
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** time-grouping, category-grouping, priority-grouping, unread-tracking, mark-all-read, per-item-actions, search-filter, pin-notifications, archive-notifications, snooze-notifications, keyboard-navigation, empty-and-error-states, responsive-layout
- **Intents:** track-status, communicate, manage-collection
- **Suits domains:** saas, support, operations, devops-status
- **Interaction:** unread-toggle, mark-all-read, item-action-execution, time-grouping-collapse, domain-filtering, keyword-search, notification-pinning, notification-archival, keyboard-shortcuts
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** real-time notification and alert inbox in an operations and support console, infrastructure alerts and incidents center in a devops dashboard, team mentions, assigned tickets and code reviews on a SaaS platform, panel of notices and customer support events in Support Desk
- **Avoid when:** high-frequency real-time instant messaging chat, massive log systems with no direct human interaction
- **Preserve when adapting:** grouping-and-filtering-interaction-model, unread-status-and-counter-semantics, item-action-dispatch-contracts, keyboard-navigation-behavior
- **Replace when adapting:** event-stream-source, user-directory-actor-adapter, domain-action-callbacks, category-definitions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, badge, input, avatar, separator, tooltip
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Feedback Onboarding Tour

Guided welcome tour for new users in a SaaS dashboard.

- id: `feedback-onboarding-tour`
- Page: https://agentic-ui-kit.com/components/feedback-onboarding-tour
- Live preview: https://agentic-ui-kit.com/live/component/feedback-onboarding-tour

## Install

```bash
agentic-ui add feedback-onboarding-tour
npx shadcn@4.17.0 add @agentic-ui/feedback-onboarding-tour
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** element-anchoring, viewport-aware-flipping, viewport-clamping, spotlight-highlight, focus-trap, keyboard-navigation, step-sequencing, missing-target-skipping, scroll-into-view, progress-announcement, reduced-motion, dismissible
- **Intents:** navigate, explore-detail, execute-flow, track-status, configure
- **Suits domains:** saas, operations, analytics, ai-workspace, devtools
- **Interaction:** step-navigation, keyboard-activation, spotlight-focus, dismiss-action
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** guided welcome tour for new users in a SaaS dashboard, step-by-step introduction to new features or redesigns of devtools, guided explanation of key metrics and filters in analytics dashboards, initial onboarding about the work areas in an ai-workspace environment, interactive guide for the first setup of flows in operations platforms
- **Avoid when:** full welcome pages or wizards outside the context of the main screen (use a dedicated onboarding layout), floating informational messages not anchored to a specific element (use feedback-announcement-banner or a toast), guides with blocking steps that require completing forms before moving on (use a stepper or modal wizard)
- **Preserve when adapting:** anchoring-algorithm, spotlight-cutout-model, keyboard-trap-and-escape-contract, data-driven-step-definition
- **Replace when adapting:** tour-step-copy, custom-accent-colors, target-selectors
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### Feedback Status Page

Public status page of a cloud or SaaS platform with 90-day availability.

- id: `feedback-status-page`
- Page: https://agentic-ui-kit.com/components/feedback-status-page
- Live preview: https://agentic-ui-kit.com/live/component/feedback-status-page

## Install

```bash
agentic-ui add feedback-status-page
npx shadcn@4.17.0 add @agentic-ui/feedback-status-page
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** uptime-bars-90-days, service-health-monitoring, incident-history, severity-badges, incident-timeline, system-status-indicator, subscribe-updates, keyboard-navigation, empty-state, error-recovery
- **Intents:** track-status, monitor-live, explore-detail
- **Suits domains:** devops-status, devtools, operations, saas, support
- **Interaction:** keyboard-navigation, filter, search, accordion, modal
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** public status page of a cloud or SaaS platform with 90-day availability, internal incident ops and SLA monitoring console for DevOps, availability transparency portal for enterprise customers with alert subscriptions, infrastructure and microservice health panel with a dependency breakdown
- **Avoid when:** real-time analytics dashboard of continuous high-frequency metrics (use time-series charts), postmortem editor or in-depth incident document management, a simple boolean status badge with no history or per-service breakdown
- **Preserve when adapting:** 90-day-bar-grid-model, severity-badge-hierarchy, keyboard-contract, accessible-status-announcements
- **Replace when adapting:** service-catalog, incident-data, brand-identity, notification-channels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, dialog, input, tabs
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Internal Operations — public status variant (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Form Async Combobox

Multiple assignment of reviewers with avatars, roles and teams in issue management.

- id: `form-async-combobox`
- Page: https://agentic-ui-kit.com/components/form-async-combobox
- Live preview: https://agentic-ui-kit.com/live/component/form-async-combobox

## Install

```bash
agentic-ui add form-async-combobox
npx shadcn@4.17.0 add @agentic-ui/form-async-combobox
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** controlled-selection, single-selection, multiple-selection, removable-chips, chip-overflow-collapse, disabled-option-protection, debounced-search, race-condition-protection, matched-text-highlight, rich-option-rendering, loading-empty-error-states, suggestion-input-mode, free-text-commit, selection-only-commit, keyboard-navigation, clear-selection
- **Intents:** create-edit, manage-collection, explore-detail, configure
- **Suits domains:** saas, crm, project-management, billing, operations, devtools
- **Interaction:** async-search, single-select, multi-select, remove-chip, clear-all, collapse-overflow, free-text-input, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Multiple assignment of reviewers with avatars, roles and teams in issue management, Tag and category picker with the option to create a new term on the fly, City or location autocomplete in billing forms with match highlighting, Async search filter over corporate directories with retry when the service goes down
- **Avoid when:** Very short static lists (fewer than 5 options) where a native select or radio group is simpler, Hierarchical or tree selection of nested categories that requires level-by-level navigation, Dates or time ranges where a calendar or date-picker is required
- **Preserve when adapting:** async-search-engine, race-condition-contract, commit-modes, keyboard-contract, chip-overflow-behavior
- **Replace when adapting:** option-data-source, row-render-layout, placeholder-copy, empty-and-error-messages
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, popover, separator, input
- **npm dependencies:** cmdk, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** cmdk@1.1.1, lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Fx Aurora Background

Luminous aurora hero section on high-end SaaS landing page.

- id: `fx-aurora-background`
- Page: https://agentic-ui-kit.com/components/fx-aurora-background
- Live preview: https://agentic-ui-kit.com/live/fx/fx-aurora-background

## Install

```bash
agentic-ui add fx-aurora-background
npx shadcn@4.17.0 add @agentic-ui/fx-aurora-background
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** drifting-aurora-gradients, token-derived-palettes, intensity-scaling, edge-and-radial-fade-masks, filter-free-radial-layers, offscreen-pause, motion-personality-gating, static-reduced-motion-fallback, low-tier-static-fallback, polymorphic-container, aa-contrast-preservation
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Luminous aurora hero section on high-end SaaS landing page, Section divider with subtle dual-fade mask between feature blocks, Ambient backdrop for AI chat and generation interfaces, Highlighted card surface for pricing tiers or product launches
- **Avoid when:** High-density data tables or spreadsheets where background motion causes visual distraction, Static document reading or legal contracts
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-palettes, offscreen-pause-and-static-fallback
- **Replace when adapting:** palette-and-intensity, mask-fade-direction, hero-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Background Patterns

Dot grid background with radial fade behind an AI chat landing hero.

- id: `fx-background-patterns`
- Page: https://agentic-ui-kit.com/components/fx-background-patterns
- Live preview: https://agentic-ui-kit.com/live/fx/fx-background-patterns

## Install

```bash
agentic-ui add fx-background-patterns
npx shadcn@4.17.0 add @agentic-ui/fx-background-patterns
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** dot-grid-pattern, line-grid-pattern, diagonal-stripes-pattern, film-grain-noise-pattern, radial-fade-mask, configurable-scale, configurable-opacity, token-color-theming, offscreen-pause, reduced-motion-fallback, personality-tempo-gating, pure-css-svg-performance
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Dot grid background with radial fade behind an AI chat landing hero, Line grid Cartesian backdrop for a workflow canvas or devtools panel, Subtle diagonal stripes texture for SaaS pricing tier cards, Film grain noise overlay for dark mode marketing hero sections
- **Avoid when:** Dense data tables where background textures could reduce readability, Mobile views with low contrast displays without radial fading, Unmasked high opacity patterns directly behind long-form body text
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** pattern-variant-and-scale, radial-fade-center-and-extent, pattern-opacity-and-tone
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Fx Beam Border

Feature cards with an energetic travelling beam of light along the contour.

- id: `fx-beam-border`
- Page: https://agentic-ui-kit.com/components/fx-beam-border
- Live preview: https://agentic-ui-kit.com/live/fx/fx-beam-border

## Install

```bash
agentic-ui add fx-beam-border
npx shadcn@4.17.0 add @agentic-ui/fx-beam-border
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** conic-gradient-beam, card-border-beam, button-border-beam, frame-border-beam, configurable-speed, configurable-color, configurable-thickness, configurable-radius, motion-personality-integration, offscreen-pause, reduced-motion-fallback, accessible-decorative-layer
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Feature cards with an energetic travelling beam of light along the contour, High-conversion CTA buttons highlighted with an animated perimeter ray, Media and code preview frames with dynamic accent lighting, Dark mode dashboard panels accentuating primary stats and metrics
- **Avoid when:** Dense data grids where continuous animation causes cognitive overload, High-frequency notifications or ephemeral toast messages, Low-powered legacy embedded displays without GPU hardware acceleration
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** speed-and-beam-thickness, border-radius-and-color, container-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Blob Morph

Floating organic aurora blobs behind an AI agent landing hero.

- id: `fx-blob-morph`
- Page: https://agentic-ui-kit.com/components/fx-blob-morph
- Live preview: https://agentic-ui-kit.com/live/fx/fx-blob-morph

## Install

```bash
agentic-ui add fx-blob-morph
npx shadcn@4.17.0 add @agentic-ui/fx-blob-morph
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** organic-blob-morph, token-color-palettes, liquid-blur-diffusion, multiple-layout-variants, noise-grain-texture, offscreen-pause, reduced-motion-fallback, personality-tempo-gating, pure-css-transform-performance, wcag-aa-contrast-verified
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Floating organic aurora blobs behind an AI agent landing hero, Vibrant glowing accent blob cluster highlight in a dashboard KPI card, Atmospheric ambient background for conversational chat interfaces, Top spotlight beam over a pricing tier comparison header
- **Avoid when:** Dense tabular data grids where fluid colors might distract from reading numbers, Low-contrast unmasked body text when set to vibrant intensity, Situations where absolute minimal visual noise is required
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** layout-variant-and-placement, color-palette-or-tone, blur-diffusion-level
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Flickering Grid

Status page header behind the overall system state and subscribe action.

- id: `fx-flickering-grid`
- Page: https://agentic-ui-kit.com/components/fx-flickering-grid
- Live preview: https://agentic-ui-kit.com/live/component/fx-flickering-grid

## Install

```bash
agentic-ui add fx-flickering-grid
npx shadcn@4.17.0 add @agentic-ui/fx-flickering-grid
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** flickering-cell-grid, square-cells, dot-cells, single-canvas-12fps, seeded-static-noise-frame, edge-and-radial-fade, token-tone-and-intensity, light-dark-theming, offscreen-pause, reduced-motion-fallback, accessible-decorative-layer
- **Intents:** monitor-live, communicate
- **Suits domains:** saas, devtools, ai-workspace, analytics, crm
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Status page header behind the overall system state and subscribe action, Developer tool hero with a technical, data-like texture, Dashboard section header for a live infrastructure view, Marketing band behind a short headline and call to action
- **Avoid when:** Dense tables, charts or forms where flickering cells compete with data, Signalling a real incident, because the effect is decorative and carries no status, Stacking with another ambient background in the same viewport
- **Preserve when adapting:** decorative-canvas-aria-hidden, single-canvas-12fps-draw, static-noise-frame-fallback
- **Replace when adapting:** variant-and-cell-size, tone-and-intensity, density-and-fade, container-children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library canvas, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Foundation

Glowing hero panel on a dark marketing landing page.

- id: `fx-foundation`
- Page: https://agentic-ui-kit.com/components/fx-foundation
- Live preview: https://agentic-ui-kit.com/live/fx/fx-foundation

## Install

```bash
agentic-ui add fx-foundation
npx shadcn@4.17.0 add @agentic-ui/fx-foundation
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** glow-tokens, light-shadow-tokens, theme-derived-gradient-scale, radial-linear-edge-fade-masks, shared-visibility-hook, shared-reduced-motion-hook, personality-motion-gating, offscreen-pause, composed-surface, light-beam-border, sheen-sweep, glass-surface, glass-solid-fallback, device-tier-fallback
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Glowing hero panel on a dark marketing landing page, Feature cards with a gradient ring and top highlight, Pricing tier highlighted with a travelling beam of light, Fading the edges of a marquee or screenshot strip with edgeFade
- **Avoid when:** Dense data tables or forms where decoration competes with the data, Glass variant over busy imagery without checking text contrast on the real backdrop, More than one or two animated beams in the same viewport, More than two glass surfaces visible at once (extra ones render solid)
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** tone-and-secondary-tone, variant-border-shine-combination, surface-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Fx Glass Surface

Floating glass navigation bar with blur and subtle bottom rim highlight.

- id: `fx-glass-surface`
- Page: https://agentic-ui-kit.com/components/fx-glass-surface
- Live preview: https://agentic-ui-kit.com/live/fx/fx-glass-surface

## Install

```bash
agentic-ui add fx-glass-surface
npx shadcn@4.17.0 add @agentic-ui/fx-glass-surface
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** backdrop-blur, specular-rim-border, light-reflection, unsupported-filter-fallback, panel-navbar-card-presets, theme-derived-contrast, personality-motion-gating, offscreen-pause
- **Intents:** communicate, navigate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, marketing, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Floating glass navigation bar with blur and subtle bottom rim highlight, Premium dark mode landing hero panel with specular glare and high contrast, Feature metric cards with animated sheen light sweep and inner specular border, High-legibility fallback surface when backdrop-filter is disabled or unsupported
- **Avoid when:** Dense data tables where transparent backgrounds cause visual interference, Complex multi-layered nested glass surfaces that degrade rendering performance, Placing low-contrast muted elements over glass without verified background luminosity
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-glass-backgrounds, backdrop-filter-fallback-behavior, offscreen-pause-and-static-frame
- **Replace when adapting:** preset-and-blur-level, reflection-and-border-style, surface-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Gradient Border

Interactive feature cards on marketing landing with cursor-tracking gradient hover border.

- id: `fx-gradient-border`
- Page: https://agentic-ui-kit.com/components/fx-gradient-border
- Live preview: https://agentic-ui-kit.com/live/fx/fx-gradient-border

## Install

```bash
agentic-ui add fx-gradient-border
npx shadcn@4.17.0 add @agentic-ui/fx-gradient-border
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** static-gradient-border, animated-conic-border, animated-flow-border, cursor-tracking-hover-glow, double-border-layering, card-panel-specializations, theme-token-integration, offscreen-pause, reduced-motion-fallback, motion-personality-scaling
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Interactive feature cards on marketing landing with cursor-tracking gradient hover border, Active AI generation or streaming panel framed in animated rotating conic gradient border, Double-border KPI metrics cards providing layered depth in financial or observability dashboards, High-priority CTA panel with static dual-tone gradient border and ambient glow
- **Avoid when:** Dense spreadsheet or tabular grid cells where decorative borders distract from data reading, Subtle secondary utility controls that should remain visually quiet, Low-power battery-constrained mobile contexts where excessive simultaneous animated loops are unneeded
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** tone-and-secondary-tone, border-width-and-radius, card-panel-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Gradient Text

Hero headline on dark marketing landing page with traveling shimmer light sweep.

- id: `fx-gradient-text`
- Page: https://agentic-ui-kit.com/components/fx-gradient-text
- Live preview: https://agentic-ui-kit.com/live/fx/fx-gradient-text

## Install

```bash
agentic-ui add fx-gradient-text
npx shadcn@4.17.0 add @agentic-ui/fx-gradient-text
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** animated-shimmer-highlight, static-gradient-text, continuous-wave-flow, ambient-glow-underlay, accessible-solid-fallback, semantic-heading-hierarchy, theme-token-integration, offscreen-pause, reduced-motion-fallback, motion-personality-scaling
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Hero headline on dark marketing landing page with traveling shimmer light sweep, Feature section title with static dual-tone gradient matching brand accent tokens, AI workspace prompt title or status header with continuous oscillating gradient flow, Metric counter headline with solid accessible fallback for high-contrast viewing
- **Avoid when:** Dense data tables or body copy where gradient fill interferes with reading speed, Small captions or fine print under 16px where multi-tone gradients reduce letter clarity, Low-contrast backgrounds without verifying text tone luminance
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** tone-and-secondary-tone, preset-and-angle, heading-text-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Light Beams

High-impact landing page hero headers with illuminated focal spotlight.

- id: `fx-light-beams`
- Page: https://agentic-ui-kit.com/components/fx-light-beams
- Live preview: https://agentic-ui-kit.com/live/fx/fx-light-beams

## Install

```bash
agentic-ui add fx-light-beams
npx shadcn@4.17.0 add @agentic-ui/fx-light-beams
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** vertical-rays, conic-spotlight, hero-combined-beams, configurable-density, configurable-color, light-dark-theming, motion-personality-integration, offscreen-pause, reduced-motion-fallback, accessible-decorative-layer
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** High-impact landing page hero headers with illuminated focal spotlight, AI workspace chat entry backdrops with shimmering vertical beam columns, Premium SaaS dashboard banners highlighting flagship announcements, Developer portal welcome sections with subtle animated beam atmosphere
- **Avoid when:** Dense tabular data grids where background animation impairs data legibility, Ephemeral notification toasts or small dialog popovers, Ultra low-end embedded devices lacking hardware CSS acceleration
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** ray-density-and-speed, spotlight-spread-and-tone, container-children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Noise Grain

Gradient landing hero with fine film grain to remove colour banding.

- id: `fx-noise-grain`
- Page: https://agentic-ui-kit.com/components/fx-noise-grain
- Live preview: https://agentic-ui-kit.com/live/component/fx-noise-grain

## Install

```bash
agentic-ui add fx-noise-grain
npx shadcn@4.17.0 add @agentic-ui/fx-noise-grain
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** generated-svg-turbulence-tile, fine-coarse-paper-textures, token-tinted-grain-mask, blend-mode-overlay, fx-intensity-scaling, stepped-8fps-shimmer, offscreen-pause, motion-personality-gating, reduced-motion-static-tile, decorative-aria-hidden
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, marketing, ai-workspace, media, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Gradient landing hero with fine film grain to remove colour banding, Glass pricing or feature card with a static grain finish, Editorial or print-style section with paper fibre texture, Poster-like product card with coarse grain and an optional stepped shimmer
- **Avoid when:** Dense data tables, charts or forms where texture competes with information, Photography or video that already carries its own grain, Surfaces where exact flat brand colour must be reproduced
- **Preserve when adapting:** decorative-layers-aria-hidden, content-above-grain, static-tile-when-motion-is-off
- **Replace when adapting:** variant-and-scale, tone-and-blend, opacity-and-intensity
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 8 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Ripple Background

Empty inbox state with the rings centred on the inbox icon.

- id: `fx-ripple-background`
- Page: https://agentic-ui-kit.com/components/fx-ripple-background
- Live preview: https://agentic-ui-kit.com/live/component/fx-ripple-background

## Install

```bash
agentic-ui add fx-ripple-background
npx shadcn@4.17.0 add @agentic-ui/fx-ripple-background
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** concentric-rings, concentric-squares, configurable-focal-point, static-focal-glow, token-tone-and-intensity, light-dark-theming, offscreen-pause, reduced-motion-fallback, accessible-decorative-layer
- **Intents:** communicate, monitor-live
- **Suits domains:** saas, ai-workspace, notes, crm, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Empty inbox state with the rings centred on the inbox icon, Listening hero behind a voice or microphone control, Waiting-for-first-event panel in a webhook or integration setup, Onboarding step that waits for a device or agent to connect
- **Avoid when:** Dense tables or forms where moving rings compete with data, Signalling a real alert or error, because the effect is decorative and carries no status, Stacking with another ambient background in the same viewport
- **Preserve when adapting:** decorative-layers-aria-hidden, transform-opacity-only-loop, static-rings-fallback
- **Replace when adapting:** variant-and-ring-count, tone-and-intensity, focal-point, container-children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Spotlight Grid

Pricing section backdrop behind plan cards.

- id: `fx-spotlight-grid`
- Page: https://agentic-ui-kit.com/components/fx-spotlight-grid
- Live preview: https://agentic-ui-kit.com/live/component/fx-spotlight-grid

## Install

```bash
agentic-ui add fx-spotlight-grid
npx shadcn@4.17.0 add @agentic-ui/fx-spotlight-grid
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** dot-grid, line-grid, cross-grid, pointer-following-spotlight, static-centre-glow, token-tone-and-intensity, light-dark-theming, offscreen-pause, reduced-motion-fallback, accessible-decorative-layer
- **Intents:** communicate, explore-detail
- **Suits domains:** saas, billing, ai-workspace, devtools, analytics
- **Interaction:** pointer-tracking, theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Pricing section backdrop behind plan cards, Developer product hero with a blueprint-style line grid, Feature overview band that reacts to the pointer without moving content, Empty workspace canvas with a quiet dot grid
- **Avoid when:** Dense tables or forms where a patterned background competes with data, Touch-first surfaces where the pointer spotlight never engages and a plain background is enough, Stacking with another ambient background in the same viewport
- **Preserve when adapting:** decorative-layers-aria-hidden, transform-only-spotlight, static-centred-fallback
- **Replace when adapting:** pattern-and-cell-size, tone-and-intensity, spotlight-radius, container-children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Fx Wave Divider

Landing page hero to features section transition with dark premium crest waves.

- id: `fx-wave-divider`
- Page: https://agentic-ui-kit.com/components/fx-wave-divider
- Live preview: https://agentic-ui-kit.com/live/fx/fx-wave-divider

## Install

```bash
agentic-ui add fx-wave-divider
npx shadcn@4.17.0 add @agentic-ui/fx-wave-divider
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-layer-svg-waves, top-bottom-positioning, vertical-horizontal-inversion, parallax-drift-animation, token-derived-wave-colors, responsive-height-clamp, offscreen-pause, motion-personality-gating, reduced-motion-static-fallback, decorative-aria-hidden
- **Intents:** communicate, explore-detail, navigate
- **Suits domains:** saas, marketing, ai-workspace, analytics, ecommerce, devtools
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Landing page hero to features section transition with dark premium crest waves, Pricing section header with gentle wave divider, Card or tinted container top cap with inverted wave divider, Subtle low-amplitude bottom section transition in enterprise analytics dashboard
- **Avoid when:** Dense tabular data grids or spreadsheet editors where decorative dividers add noise, Inline form inputs where dividing elements break field hierarchy, Scenarios requiring hard rectilinear grid boundaries
- **Preserve when adapting:** decorative-layers-aria-hidden, token-derived-colors, offscreen-pause-and-static-fallback
- **Replace when adapting:** wave-variant-and-layers, tone-and-fill-color, responsive-height
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Gamify Points History

Points history of a loyalty program with a running balance and transaction reversal.

- id: `gamify-points-history`
- Page: https://agentic-ui-kit.com/components/gamify-points-history
- Live preview: https://agentic-ui-kit.com/live/component/gamify-points-history

## Install

```bash
agentic-ui add gamify-points-history
npx shadcn@4.17.0 add @agentic-ui/gamify-points-history
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** running-balance-ledger, earn-spend-summary, day-grouped-timeline, earn-spend-filtering, entry-drilldown, entry-reversal, accessible-data-table, keyboard-navigation, tier-progress-hint, state-resilience
- **Intents:** track-status, audit-trail, explore-detail, manage-collection
- **Suits domains:** saas, ecommerce, marketing, education, personal-productivity
- **Interaction:** earn-spend-filtering, day-grouped-timeline-navigation, drilldown-entry-inspection, entry-reversal, tabular-data-view
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** points history of a loyalty program with a running balance and transaction reversal, rewards ledger for streaks and achievements in a habit or learning app, support console auditing a member's manual adjustments and point expirations, engagement panel showing progress toward the next program tier
- **Avoid when:** a single scalar points metric without history (use stat-card), real monetary transactions with accounting obligations (use finance-transaction-ledger), competitive leaderboards between members (a ranking, not an individual ledger)
- **Preserve when adapting:** keyboard-contract, running-balance-semantics, earn-spend-filter-model, drilldown-entry-inspection, accessible-table-alternative
- **Replace when adapting:** domain-copy, reason-taxonomy, tier-model, fixture-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Gamify Streak Tracker

Daily study streak in a learning app with weekly lesson targets.

- id: `gamify-streak-tracker`
- Page: https://agentic-ui-kit.com/components/gamify-streak-tracker
- Live preview: https://agentic-ui-kit.com/live/component/gamify-streak-tracker

## Install

```bash
agentic-ui add gamify-streak-tracker
npx shadcn@4.17.0 add @agentic-ui/gamify-streak-tracker
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** streak-counter, mini-calendar, weekly-goal-progress, freeze-protection, day-detail, keyboard-navigation, empty-state, error-recovery
- **Intents:** track-status, monitor-live, explore-detail
- **Suits domains:** personal-productivity, education, healthcare, saas, operations
- **Interaction:** click, keyboard-navigation, day-selection, freeze-recovery
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** daily study streak in a learning app with weekly lesson targets, adherence to a workout or medication routine with freeze tokens forgiving a missed day, habit consistency tracking in a personal dashboard with an 8-week calendar view, SaaS onboarding program engagement tracking consecutive active days
- **Avoid when:** the metric is cumulative volume rather than daily consistency (use a time-series chart), a full calendar with events, scheduling, or appointment editing is needed (use calendar-month-week-agenda), the relevant timeframe spans multiple years requiring monthly aggregation instead of daily cells
- **Preserve when adapting:** streak-computation-rules, calendar-grid-model, keyboard-contract, status-color-semantics, empty-and-error-states
- **Replace when adapting:** domain-copy, goal-unit-labels, locale-and-week-start, status-palette
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, progress, separator
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### Kanban Swimlanes

Kanban board with swimlanes by team or priority and work-in-progress (WIP) limits.

- id: `kanban-swimlanes`
- Page: https://agentic-ui-kit.com/components/kanban-swimlanes
- Live preview: https://agentic-ui-kit.com/live/component/kanban-swimlanes

## Install

```bash
agentic-ui add kanban-swimlanes
npx shadcn@4.17.0 add @agentic-ui/kanban-swimlanes
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** swimlane-workflow, wip-limits, card-dragging, lane-collapsing, priority-filtering, keyboard-card-movement, empty-states
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, devtools, saas, operations
- **Interaction:** drag-card, lane-collapse-toggle, keyboard-move-shortcut, filter-by-priority, card-click
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Kanban board with swimlanes by team or priority and work-in-progress (WIP) limits, Agile tracking of critical incidents and platform tasks with a differentiated visual flow, Sprint capacity management with bottleneck detection and warnings
- **Avoid when:** Numeric grids or tabular accounting reports where a data table is preferred
- **Preserve when adapting:** swimlane-row-matrix, wip-limit-threshold-feedback, accessible-keyboard-reordering
- **Replace when adapting:** workflow-columns, swimlane-taxonomies, card-fields
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, dropdown-menu, input, scroll-area, avatar
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Mobile Pull Refresh

Mobile notification feed that reloads by dragging from the top edge.

- id: `mobile-pull-refresh`
- Page: https://agentic-ui-kit.com/components/mobile-pull-refresh
- Live preview: https://agentic-ui-kit.com/live/component/mobile-pull-refresh

## Install

```bash
agentic-ui add mobile-pull-refresh
npx shadcn@4.17.0 add @agentic-ui/mobile-pull-refresh
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** pull-gesture, rubber-band-damping, threshold-arming, determinate-progress-indicator, async-refresh-lifecycle, success-confirmation, error-recovery, reduced-motion-fallback, disabled-surface, empty-state-handling
- **Intents:** monitor-live, manage-collection, track-status, navigate
- **Suits domains:** saas, operations, social, ecommerce, logistics, devops-status
- **Interaction:** pull-gesture, pointer-drag, keyboard-retry, live-region
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** mobile notification feed that reloads by dragging from the top edge, order list in a delivery app that refreshes status without a visible button, incident inbox in an on-call console checked from a phone, empty collection that allows retrying the load without a visible control
- **Avoid when:** desktop surfaces with an explicit, always-visible refresh control, paginated content where the gesture competes with upward infinite scroll, data that only changes through the user's own action
- **Preserve when adapting:** gesture-threshold-model, phase-lifecycle, indicator-feedback-contract, accessibility-announcements
- **Replace when adapting:** refresh-callback, indicator-copy, list-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives, lib-tokens


### Mobile Swipe Actions

Inbox where each message is archived or deleted without opening it.

- id: `mobile-swipe-actions`
- Page: https://agentic-ui-kit.com/components/mobile-swipe-actions
- Live preview: https://agentic-ui-kit.com/live/component/mobile-swipe-actions

## Install

```bash
agentic-ui add mobile-swipe-actions
npx shadcn@4.17.0 add @agentic-ui/mobile-swipe-actions
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** swipe-to-archive, swipe-to-delete, full-swipe-shortcut, action-tray-reveal, keyboard-reveal, undo-window, destructive-confirmation, directional-actions, rubber-band-clamp, vertical-scroll-deference, disabled-rows, row-exit-collapse
- **Intents:** manage-collection, track-status, execute-flow
- **Suits domains:** saas, operations, crm, support, personal-productivity, ecommerce
- **Interaction:** swipe-drag, full-swipe, keyboard-reveal, button-activation, undo
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** inbox where each message is archived or deleted without opening it, task or notification list with quick dismiss and undo, support ticket queue with resolution and assignment from the row, mobile order list with cancel and mark-as-shipped actions
- **Avoid when:** irreversible actions with no undo option or explicit confirmation, rows whose only action is navigating to the detail (a link is enough), desktop tables with multi-select and a bulk actions bar
- **Preserve when adapting:** gesture-affordance, keyboard-parity, undo-semantics, destructive-action-guarding
- **Replace when adapting:** row-content, action-set, action-copy, tone-mapping
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### Motion Chart Enter

Requests per day chart animating in on dashboard load.

- id: `motion-chart-enter`
- Page: https://agentic-ui-kit.com/components/motion-chart-enter
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-chart-enter?piece=motion-chart-enter

## Install

```bash
agentic-ui add motion-chart-enter
npx shadcn@4.17.0 add @agentic-ui/motion-chart-enter
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** chart-entrance, staggered-bars, data-normalization, retrigger
- **Intents:** compare-over-time, track-status, show-composition
- **Suits domains:** analytics, saas, finance, operations, ecommerce
- **Interaction:** entrance, retrigger-on-data-change
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Requests per day chart animating in on dashboard load, Weekly revenue bars re-entering after a filter change, Signups per channel chart on a marketing overview
- **Avoid when:** Dense timeseries with hundreds of points (use a charting library), Print or static export contexts
- **Preserve when adapting:** timing-tokens, stagger-calculation, reduced-motion-fallback, informative-state
- **Replace when adapting:** data-source, bar-styling, axis-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** react, @agentic-ui/motion, @agentic-ui/tokens, @agentic-ui/motion-chart-enter
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion, lib-motion-chart-enter


### Motion Counter Ticker

MRR KPI card that ticks to the new value on refresh.

- id: `motion-counter-ticker`
- Page: https://agentic-ui-kit.com/components/motion-counter-ticker
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-counter-ticker?piece=motion-counter-ticker

## Install

```bash
agentic-ui add motion-counter-ticker
npx shadcn@4.17.0 add @agentic-ui/motion-counter-ticker
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** animated-counter, value-transition, kpi-ticker, raf-interpolation
- **Intents:** track-status, monitor-live, compare-over-time
- **Suits domains:** analytics, saas, finance, operations, devtools
- **Interaction:** value-update, live-refresh
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** MRR KPI card that ticks to the new value on refresh, Active users counter on a live operations dashboard, Daily signups total updating from a streaming feed
- **Avoid when:** Values change faster than ~2 updates per second continuously, Static reports where animation adds no temporal meaning
- **Preserve when adapting:** timing-tokens, easing-curve, reduced-motion-fallback, informative-state
- **Replace when adapting:** number-formatting, prefix-suffix, data-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** react, @agentic-ui/motion, @agentic-ui/tokens, @agentic-ui/motion-counter-ticker-odometer
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Used in:** Fintech Trading (analytics live) (blueprint)
- **Registry dependencies:** lib-motion-counter-ticker-odometer


### Motion Gradient Mesh

Hero section background for next-generation AI platforms.

- id: `motion-gradient-mesh`
- Page: https://agentic-ui-kit.com/components/motion-gradient-mesh
- Live preview: https://agentic-ui-kit.com/live/component/motion-gradient-mesh

## Install

```bash
agentic-ui add motion-gradient-mesh
npx shadcn@4.17.0 add @agentic-ui/motion-gradient-mesh
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** canvas-gradient-mesh, organic-ambient-flow, personality-gating, reduced-motion-fallback, interactive-pointer-warp, informative-state-preservation, theme-adaptive-palette
- **Intents:** monitor-live, track-status, communicate, navigate
- **Suits domains:** saas, ai-workspace, operations, devtools, ecommerce
- **Interaction:** pointer-hover, theme-switch, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Hero section background for next-generation AI platforms, Ambient backdrop for status and command centers, Engaging visual accent for product launch banners
- **Avoid when:** Dense data tables requiring high contrast monochromatic focus, Low-powered embedded kiosks or strictly conservative document readers
- **Preserve when adapting:** mesh-node-physics, personality-speed-ratios, reduced-motion-fallback, informative-overlay-structure
- **Replace when adapting:** hero-headlines, gradient-color-stops, call-to-actions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile expressive, library canvas, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Layered Hover

Template or starter-kit gallery in a product onboarding flow.

- id: `motion-layered-hover`
- Page: https://agentic-ui-kit.com/components/motion-layered-hover
- Live preview: https://agentic-ui-kit.com/live/component/motion-layered-hover

## Install

```bash
agentic-ui add motion-layered-hover
npx shadcn@4.17.0 add @agentic-ui/motion-layered-hover
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** layered-depth-shift, hover-and-focus-parity, focus-only-variant, personality-tuning, reduced-motion-fallback, informative-state-preservation
- **Intents:** explore-detail, navigate, manage-collection
- **Suits domains:** saas, marketing, ecommerce, media, books
- **Interaction:** hover, keyboard-navigation, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Template or starter-kit gallery in a product onboarding flow, Product cards in an ecommerce collection grid, Album or collection covers in a media library
- **Avoid when:** Tables or dense lists where rows, not cards, carry the data, Projects whose personality excludes the depth group (linear, enterprise), where the card always renders static, A single hero card that should follow the pointer in 3D; use the tilt card instead
- **Preserve when adapting:** hover-focus-parity, per-layer-depth-order, static-layered-fallback, informative-badges-and-actions
- **Replace when adapting:** card-content-and-copy, preview-illustration, color-palette-tokens, click-handlers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Live Pulse

API health indicator with requests-per-minute readout.

- id: `motion-live-pulse`
- Page: https://agentic-ui-kit.com/components/motion-live-pulse
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-live-pulse?piece=motion-live-pulse

## Install

```bash
agentic-ui add motion-live-pulse
npx shadcn@4.17.0 add @agentic-ui/motion-live-pulse
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** live-status, pulse-ring, status-variants, realtime-metric
- **Intents:** monitor-live, track-status
- **Suits domains:** operations, devtools, saas, analytics, aviation
- **Interaction:** live-refresh
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** API health indicator with requests-per-minute readout, Queue status beacon on an ops console, Webhook endpoint last-seen status in an integrations list
- **Avoid when:** Historical or batch data with no live dimension, Screens already saturated with competing live indicators
- **Preserve when adapting:** pulse-timing-tokens, status-semantics, reduced-motion-fallback, informative-state
- **Replace when adapting:** status-source, label-copy, metric-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** react, @agentic-ui/motion, @agentic-ui/tokens
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Used in:** Fintech Trading (analytics live) (blueprint)
- **Registry dependencies:** lib-motion


### Motion Magnetic Hover

Main call-to-action (CTA) button in a SaaS product hero.

- id: `motion-magnetic-hover`
- Page: https://agentic-ui-kit.com/components/motion-magnetic-hover
- Live preview: https://agentic-ui-kit.com/live/component/motion-magnetic-hover

## Install

```bash
agentic-ui add motion-magnetic-hover
npx shadcn@4.17.0 add @agentic-ui/motion-magnetic-hover
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** magnetic-pointer-tracking, elastic-spring-physics, layer-depth-parallax, personality-tuning, reduced-motion-fallback, keyboard-focus-ring, informative-state-preservation
- **Intents:** navigate, execute-flow, communicate
- **Suits domains:** saas, marketing, project-management, personal-productivity, devtools
- **Interaction:** hover, click, keyboard-navigation
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Main call-to-action (CTA) button in a SaaS product hero, Floating toolbar with quick-access pills that react to the cursor, Key save or publish actions in productivity panels
- **Avoid when:** Dense data tables or large forms with hundreds of cells (use static controls), Strictly conservative systems that forbid motion (degrades cleanly to none), Touch-only interfaces without a mouse pointer
- **Preserve when adapting:** m01-personality-spring-physics, reduced-motion-static-fallback, informative-badges-and-status-feedback, wcag-focus-ring-model
- **Replace when adapting:** button-labels-and-icons, color-palette-tokens, click-handlers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Modal Enter

Deployment confirmation modal dialog.

- id: `motion-modal-enter`
- Page: https://agentic-ui-kit.com/components/motion-modal-enter
- Live preview: https://agentic-ui-kit.com/live/component/motion-modal-enter

## Install

```bash
agentic-ui add motion-modal-enter
npx shadcn@4.17.0 add @agentic-ui/motion-modal-enter
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** modal-enter, modal-exit, backdrop-transition, personality-adaptation, reduced-motion-fallback, keyboard-dismiss, focus-trap, informative-status
- **Intents:** execute-flow, configure, explore-detail
- **Suits domains:** saas, billing, ecommerce, operations, settings
- **Interaction:** click, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Deployment confirmation modal dialog, Settings configuration popup with focus management, High-impact action prompt with static informative status fallback
- **Avoid when:** Persistent inline dashboard content that does not require an overlay dialog
- **Preserve when adapting:** transition-physics, reduced-motion-contract, focus-management, informative-state
- **Replace when adapting:** modal-content, dialog-copy, action-buttons
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** dialog, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Motion Progress Animated

Deploy rollout percentage advancing during a release.

- id: `motion-progress-animated`
- Page: https://agentic-ui-kit.com/components/motion-progress-animated
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-progress-animated?piece=motion-progress-animated

## Install

```bash
agentic-ui add motion-progress-animated
npx shadcn@4.17.0 add @agentic-ui/motion-progress-animated
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** progress-fill, value-transition, determinate-progress
- **Intents:** track-status, monitor-live, execute-flow
- **Suits domains:** operations, saas, devtools, analytics, project-management
- **Interaction:** value-update, live-refresh
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Deploy rollout percentage advancing during a release, Data warehouse sync progress on an ops dashboard, Onboarding checklist completion bar
- **Avoid when:** Indeterminate waits with no measurable progress (use a spinner), Values that only ever toggle between 0 and 100
- **Preserve when adapting:** timing-tokens, progressbar-semantics, reduced-motion-fallback, informative-state
- **Replace when adapting:** data-source, fill-color, label-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** react, @agentic-ui/motion, @agentic-ui/tokens, @agentic-ui/motion-progress-animated-segmented
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion, lib-motion-progress-animated-segmented


### Motion Spotlight Card

Showcase of key features or services on landing pages and heroes.

- id: `motion-spotlight-card`
- Page: https://agentic-ui-kit.com/components/motion-spotlight-card
- Live preview: https://agentic-ui-kit.com/live/component/motion-spotlight-card

## Install

```bash
agentic-ui add motion-spotlight-card
npx shadcn@4.17.0 add @agentic-ui/motion-spotlight-card
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** pointer-spotlight-tracking, border-glow-illumination, radial-surface-gradient, spring-physics, keyboard-spotlight-navigation, personality-tuning, reduced-motion-fallback, informative-state-preservation
- **Intents:** explore-detail, navigate, manage-collection
- **Suits domains:** saas, marketing, ecommerce, media, analytics
- **Interaction:** hover, keyboard-navigation, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Showcase of key features or services on landing pages and heroes, Interactive pricing plan or subscription tier cards, Project or repository cards in dashboards and developer consoles
- **Avoid when:** High-density lists or tables where multiple focal points compete visually, Strictly JavaScript-free environments where only plain HTML is required, Projects in none mode that prefer flat cards with no border overlay at all
- **Preserve when adapting:** m01-personality-spring-physics, reduced-motion-static-fallback, informative-badges-and-status-feedback, keyboard-spotlight-navigation
- **Replace when adapting:** card-content-and-copy, color-palette-tokens, click-handlers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Stagger Entrance

Dashboard card stagger entrance on load.

- id: `motion-stagger-entrance`
- Page: https://agentic-ui-kit.com/components/motion-stagger-entrance
- Live preview: https://agentic-ui-kit.com/live/component/motion-stagger-entrance

## Install

```bash
agentic-ui add motion-stagger-entrance
npx shadcn@4.17.0 add @agentic-ui/motion-stagger-entrance
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** stagger, entrance, list-animation, flip-reorder, add-remove
- **Intents:** manage-collection, track-status, navigate
- **Suits domains:** saas, ecommerce, crm, analytics, project-management
- **Interaction:** entrance, click, drag-drop, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Dashboard card stagger entrance on load, Interactive sortable task list with entrance animations, Filterable item feed with animated additions and removals
- **Avoid when:** Infinite lists with thousands of virtualized rows rendered simultaneously without chunking
- **Preserve when adapting:** timing-tokens, stagger-calculation, reduced-motion-fallback, informative-state
- **Replace when adapting:** item-renderers, data-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** react, @agentic-ui/motion, @agentic-ui/tokens
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Motion Tilt Card

Gallery of blueprints or templates on a product landing page.

- id: `motion-tilt-card`
- Page: https://agentic-ui-kit.com/components/motion-tilt-card
- Live preview: https://agentic-ui-kit.com/live/component/motion-tilt-card

## Install

```bash
agentic-ui add motion-tilt-card
npx shadcn@4.17.0 add @agentic-ui/motion-tilt-card
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** pointer-3d-tilt, spring-physics, glare-highlight, depth-layers, keyboard-tilt, personality-tuning, reduced-motion-fallback, informative-state-preservation
- **Intents:** explore-detail, navigate, manage-collection
- **Suits domains:** saas, marketing, ecommerce, media, analytics
- **Interaction:** hover, keyboard-navigation, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Gallery of blueprints or templates on a product landing page, Featured product cards in an e-commerce hero, Collection covers in a media library
- **Avoid when:** Dense tables or lists with dozens of cards visible at once, Projects with motion.profile restrained that aim for zero depth (use a static card; degrades to subtle ≤4°), Touch-only interfaces, where there is no hover to trigger the effect
- **Preserve when adapting:** m01-personality-spring-physics, reduced-motion-flat-fallback, informative-badges-and-status-feedback, keyboard-tilt-model
- **Replace when adapting:** card-content-and-copy, color-palette-tokens, click-handlers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Org Permissions Matrix

Organization settings defining what each role can do on projects, members and billing.

- id: `org-permissions-matrix`
- Page: https://agentic-ui-kit.com/components/org-permissions-matrix
- Live preview: https://agentic-ui-kit.com/live/component/org-permissions-matrix

## Install

```bash
agentic-ui add org-permissions-matrix
npx shadcn@4.17.0 add @agentic-ui/org-permissions-matrix
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** roles-by-resources-grid, tri-state-rollup, bulk-toggle, locked-role, read-only-mode, live-announcements, density-switch, empty-state, error-recovery, keyboard-navigation
- **Intents:** configure, manage-collection, track-status, audit-trail
- **Suits domains:** auth, settings, saas, operations, project-management
- **Interaction:** toggle-permission, bulk-toggle, density-switch, keyboard-navigation, error-recovery
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** organization settings defining what each role can do on projects, members and billing, multi-tenant console with custom roles and granular per-resource permissions, read-only audit view of effective permissions before approving an access change, RBAC editor where the owner role is locked and the rest is editable
- **Avoid when:** only a flat role is assigned per user with no granular permissions (use a role picker), a member directory with activity and teams is needed rather than a permissions matrix (use project-management-org-members-directory), the number of resources and actions makes the grid unreadable and a per-resource editor with search is better
- **Preserve when adapting:** roles-as-rows-resources-as-columns, tri-state-rollup-semantics, accessible-cell-naming, live-region-feedback, locked-role-contract
- **Replace when adapting:** domain-copy, role-catalog, resource-and-action-catalog, persistence-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, checkbox, switch
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### Org Switcher

Organization selector in the sidebar of a multi-tenant control panel.

- id: `org-switcher`
- Page: https://agentic-ui-kit.com/components/org-switcher
- Live preview: https://agentic-ui-kit.com/live/component/org-switcher

## Install

```bash
agentic-ui add org-switcher
npx shadcn@4.17.0 add @agentic-ui/org-switcher
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** combobox-selection, live-search-filtering, organization-grouping, plan-badging, keyboard-navigation, create-org-dialog, slug-auto-generation, plan-selection, zero-state-handling, live-announcements, controlled-and-uncontrolled
- **Intents:** manage-collection, configure, navigate, create-edit
- **Suits domains:** saas, auth, settings, project-management, operations
- **Interaction:** combobox-select, search-filter, keyboard-navigation, create-modal, slug-auto-generation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** organization selector in the sidebar of a multi-tenant control panel, workspace selector in the top bar with an option to create a new company, switcher between a personal account and work organizations on a B2B platform, initial onboarding flow where the user creates their first organization
- **Avoid when:** single-tenant applications where there is no concept of multiple organizations or spaces, simple selectors over a small static list of fewer than 3 fixed options where a native select is enough, deep hierarchical trees of folders or directories with infinite subfolders
- **Preserve when adapting:** combobox-interaction-model, create-org-dialog-flow, wai-aria-accessibility-contracts, slug-generation-logic
- **Replace when adapting:** brand-colors, plan-tiers-and-pricing, initial-fixtures, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, dialog, input, label, popover, separator
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** SaaS Backoffice (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Pm Create Issue Sheet

Side panel for task creation in Kanban or backlog.

- id: `pm-create-issue-sheet`
- Page: https://agentic-ui-kit.com/components/pm-create-issue-sheet
- Live preview: https://agentic-ui-kit.com/live/fixture/pm-create-issue-sheet?piece=pm-create-issue-sheet

## Install

```bash
agentic-ui add pm-create-issue-sheet
npx shadcn@4.17.0 add @agentic-ui/pm-create-issue-sheet
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** side-sheet-drawer, priority-select, assignee-combobox, rich-description-input, label-picker
- **Intents:** create-edit
- **Suits domains:** project-management, devtools, saas, support, crm
- **Interaction:** form-submit, select-priority, close-sheet
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Side panel for task creation in Kanban or backlog, Quick form for bug reports and requests
- **Avoid when:** Extremely long forms with more than 20 sequential fields
- **Preserve when adapting:** sheet-drawer-container, form-field-order
- **Replace when adapting:** field-schema, default-assignees
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** sheet, button, input, textarea, select, badge, label
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** ui-admin-kit-button, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-sheet, ui-admin-kit-textarea, ui-field


### Prompt Editor Variables

Support prompt library where each template declares tone, plan and account data and is previewed against real customers.

- id: `prompt-editor-variables`
- Page: https://agentic-ui-kit.com/components/prompt-editor-variables
- Live preview: https://agentic-ui-kit.com/live/component/prompt-editor-variables

## Install

```bash
agentic-ui add prompt-editor-variables
npx shadcn@4.17.0 add @agentic-ui/prompt-editor-variables
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** template-authoring, typed-variables, placeholder-highlighting, auto-declaration, type-validation, live-preview, data-set-switching, keyboard-navigation, copy-rendered-output, read-only-template
- **Intents:** create-edit, generate-content, configure, evaluate-ai
- **Suits domains:** ai-workspace, ai-agents, ai-content, devtools, saas
- **Interaction:** edit-template, insert-variable, declare-variable-type, fill-variable-values, switch-data-set, toggle-preview, copy-output, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Support prompt library where each template declares tone, plan and account data and is previewed against real customers, Developer console for versioning system prompts with typed variables and validation before publishing them, Content generator with templates parameterized by audience, length and publication date, Evaluation panel where the same prompt is rendered against several data sets before launching the run
- **Avoid when:** Fixed prompts with no parameters, where a simple textarea is enough, Editing long documents or free-form rich text, Templates with control logic (conditionals or loops) that require a full template engine
- **Preserve when adapting:** placeholder-syntax, type-validation-contract, preview-round-trip, keyboard-contract
- **Replace when adapting:** domain-copy, variable-declarations, data-sets, submit-action
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, input, textarea, label
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### RAG Citation Cards

Assistant reply with sources [1]-[n] whose full passage is inspected by hovering over each card.

- id: `rag-citation-cards`
- Page: https://agentic-ui-kit.com/components/rag-citation-cards
- Live preview: https://agentic-ui-kit.com/live/component/rag-citation-cards

## Install

```bash
agentic-ui add rag-citation-cards
npx shadcn@4.17.0 add @agentic-ui/rag-citation-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** numbered-source-cards, hover-intent-preview, inline-citation-linking, relevance-score-metrics, source-type-badges, retrieval-metadata-inspection, pinned-preview, empty-state, error-recovery, loading-skeleton, keyboard-navigation
- **Intents:** retrieve-knowledge, explore-detail, communicate, track-status
- **Suits domains:** ai-workspace, ai-content, knowledge, support, devtools
- **Interaction:** hover-intent-preview, focus-preview-parity, pinned-preview, inline-marker-linking, keyboard-navigation
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** assistant reply with sources [1]-[n] whose full passage is inspected by hovering over each card, support console showing cited knowledge base articles with a quick preview without leaving the conversation, engineering assistant that cites code files and shows the retrieved snippet on hover, claim verifier that links inline markers to numbered source cards
- **Avoid when:** persistent in-depth side-by-side inspection is needed (use ai-citations-panel with a fixed inspector), responses without external document grounding or RAG
- **Preserve when adapting:** numbered-card-layout, hover-intent-preview-contract, relevance-score-visualization, keyboard-navigation-and-shortcuts, inline-marker-linking
- **Replace when adapting:** domain-sources-data, retrieval-metadata-schema, type-categories-and-icons
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### RAG Freshness Badge

RAG source manager that flags which indexed documents have become obsolete.

- id: `rag-freshness-badge`
- Page: https://agentic-ui-kit.com/components/rag-freshness-badge
- Live preview: https://agentic-ui-kit.com/live/component/rag-freshness-badge

## Install

```bash
agentic-ui add rag-freshness-badge
npx shadcn@4.17.0 add @agentic-ui/rag-freshness-badge
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** source-age-display, staleness-thresholds, obsolete-content-alert, index-lag-detection, reindex-recovery, alert-dismissal, details-disclosure, compact-variant, empty-state, keyboard-navigation
- **Intents:** retrieve-knowledge, track-status, audit-trail, monitor-live
- **Suits domains:** knowledge, ai-workspace, ai-agents, devtools, operations
- **Interaction:** details-disclosure, reindex-recovery, alert-dismissal, keyboard-navigation
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** RAG source manager that flags which indexed documents have become obsolete, citation panel where each retrieved source shows its age next to the snippet, vector database maintenance console that detects indexes older than the latest document revision, document governance view with a retention window and a reindex action
- **Avoid when:** the source has no notion of age or expiry (use generic status labels), the full version history of the document is needed instead of the freshness indicator (use a revision timeline), the full indexing lifecycle with upload and re-sync must be managed (use rag-source-manager)
- **Preserve when adapting:** freshness-tier-model, threshold-configurability, alert-and-status-announcements, keyboard-contract, deterministic-age-computation
- **Replace when adapting:** domain-copy, threshold-values, date-formatting, retention-policy-wording
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### RAG Retrieval Inspector

RAG debugging console that breaks down why a chunk did or did not pass the vector similarity and reranker cutoff threshold.

- id: `rag-retrieval-inspector`
- Page: https://agentic-ui-kit.com/components/rag-retrieval-inspector
- Live preview: https://agentic-ui-kit.com/live/component/rag-retrieval-inspector

## Install

```bash
agentic-ui add rag-retrieval-inspector
npx shadcn@4.17.0 add @agentic-ui/rag-retrieval-inspector
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** retrieval-fragments-list, score-breakdown-visualization, cross-encoder-rerank-analysis, dense-vector-similarity, sparse-bm25-lexical-match, interactive-threshold-simulation, query-term-matching, provenance-metadata-inspection, chunk-copy, keyboard-navigation, empty-state, error-recovery
- **Intents:** retrieve-knowledge, explore-detail, audit-trail, track-status
- **Suits domains:** knowledge, ai-workspace, devtools, support, saas
- **Interaction:** interactive-threshold-slider, fragment-selection-inspection, keyboard-listbox-navigation, status-filter-toggle, query-keyword-highlight
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** RAG debugging console that breaks down why a chunk did or did not pass the vector similarity and reranker cutoff threshold, LLM answer auditor that inspects the provenance and term overlap of fragments retrieved from the vector store, test bench to dynamically calibrate the minimum similarity threshold before injecting context into the prompt, observability explorer for hybrid search pipelines combining dense vectors and sparse BM25
- **Avoid when:** direct editing or uploading of documents is required (use rag-source-manager), simple answers without grounding or a retrieval pipeline
- **Preserve when adapting:** master-detail-layout, score-breakdown-visualization, dynamic-threshold-filtering, keyboard-navigation-contract
- **Replace when adapting:** domain-documents-and-metadata, retrieval-engine-metrics, color-threshold-scales
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### RAG Search Playground

Test console to evaluate natural-language queries against the vector store and calibrate retrieval parameters.

- id: `rag-search-playground`
- Page: https://agentic-ui-kit.com/components/rag-search-playground
- Live preview: https://agentic-ui-kit.com/live/component/rag-search-playground

## Install

```bash
agentic-ui add rag-search-playground
npx shadcn@4.17.0 add @agentic-ui/rag-search-playground
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** vector-query-testing, similarity-threshold-tuning, top-k-adjustment, hybrid-dense-sparse-toggle, vector-embedding-inspection, score-decomposition, preset-queries, collection-selector, chunk-preview-copy, keyboard-navigation, empty-state, error-recovery
- **Intents:** retrieve-knowledge, explore-detail, track-status, manage-collection
- **Suits domains:** knowledge, ai-workspace, devtools, saas, support
- **Interaction:** vector-query-testing, parameter-tuning-slider, mode-selection, result-inspection, keyboard-navigation
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** test console to evaluate natural-language queries against the vector store and calibrate retrieval parameters, hybrid search test bench combining dense embedding similarity and BM25 lexical matching, vector store diagnostic tool to inspect scores, dimensions and returned fragments, interactive environment to tune similarity thresholds and top-k before sending context to the generative model
- **Avoid when:** management of bulk document ingestion without running searches (use rag-source-manager), traditional tabular search based solely on SQL without vectors
- **Preserve when adapting:** query-and-parameter-layout, vector-match-score-decomposition, keyboard-navigation-contract, telemetry-hud
- **Replace when adapting:** vector-collection-fixtures, embedding-dimensions-and-models, domain-documents
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### Restaurant Floor Plan

Table plan for a dinner service with per-table status and assigned diners.

- id: `restaurant-floor-plan`
- Page: https://agentic-ui-kit.com/components/restaurant-floor-plan
- Live preview: https://agentic-ui-kit.com/live/component/restaurant-floor-plan

## Install

```bash
agentic-ui add restaurant-floor-plan
npx shadcn@4.17.0 add @agentic-ui/restaurant-floor-plan
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** spatial-table-layout, status-visualization, table-selection, detail-inspection, status-filtering, section-filtering, zoom-control, keyboard-spatial-navigation, roving-tabindex, occupancy-summary, text-equivalent-listing, live-region-announcement
- **Intents:** monitor-live, manage-collection, explore-detail, track-status
- **Suits domains:** operations, logistics, healthcare, education, crm, saas
- **Interaction:** table-selection, keyboard-arrow-navigation, status-filter-toggle, section-filter, zoom-in-out, double-click-activate
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** table plan for a dinner service with per-table status and assigned diners, map of seats or desks in an office with booking by zone, layout of beds or bays per floor in a hospital unit, map of slots in a warehouse or loading area with live occupancy
- **Avoid when:** the spatial arrangement adds no information and a sortable table is enough, the user must edit the floor plan by dragging tables: this component visualizes and selects, it does not compose the plan, there is a single zone with fewer than five positions, where the plan adds noise
- **Preserve when adapting:** spatial-model-in-real-units, status-legend-pairing, keyboard-navigation-contract, text-equivalent-listing
- **Replace when adapting:** domain-copy, status-vocabulary, room-geometry, party-fields
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10


### Scheduling Availability Editor

Configuring working hours and holidays for sales appointments.

- id: `scheduling-availability-editor`
- Page: https://agentic-ui-kit.com/components/scheduling-availability-editor
- Live preview: https://agentic-ui-kit.com/live/component/scheduling-availability-editor

## Install

```bash
agentic-ui add scheduling-availability-editor
npx shadcn@4.17.0 add @agentic-ui/scheduling-availability-editor
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** weekly-hours-configuration, interval-manipulation, split-shifts, interval-validation, overlap-detection, date-overrides-exceptions, holiday-blocking, meeting-buffers, min-notice-limits, booking-window-configuration, buffer-visualizer-timeline, timezone-selection, schedule-presets, copy-to-weekdays, weekly-hours-calculation, read-only-mode, empty-and-error-states, keyboard-navigation
- **Intents:** configure, create-edit
- **Suits domains:** saas, operations, personal-productivity, crm
- **Interaction:** tab-navigation, day-toggle, interval-selection, date-override-addition, buffer-adjustment, preset-application, timezone-selection, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** configuring working hours and holidays for sales appointments, defining medical clinic shifts with lunch breaks and sanitization buffers, support hours with exceptions for national holidays, freelance consultant availability with a 24-hour notice margin
- **Avoid when:** time slot selection by the customer or final guest (use scheduling-slot-picker), booking rooms or physical inventory with capacity control (use scheduling-resource-booking)
- **Preserve when adapting:** weekly-schedule-model, interval-validation-rules, date-overrides-semantics, buffer-calculation-logic, visual-timeline-grammar
- **Replace when adapting:** domain-copy, default-timezones, default-presets, default-intervals
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, badge, switch, tabs, input, label, separator, alert
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Scheduling Recurrence Editor

Repeat editor when creating a calendar event or a recurring meeting.

- id: `scheduling-recurrence-editor`
- Page: https://agentic-ui-kit.com/components/scheduling-recurrence-editor
- Live preview: https://agentic-ui-kit.com/live/component/scheduling-recurrence-editor

## Install

```bash
agentic-ui add scheduling-recurrence-editor
npx shadcn@4.17.0 add @agentic-ui/scheduling-recurrence-editor
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rrule-builder, recurrence-presets, weekday-selection, nth-weekday-pattern, end-condition, occurrence-preview, occurrence-exceptions, rrule-parsing
- **Intents:** create-edit, configure, execute-flow
- **Suits domains:** saas, operations, project-management, crm, personal-productivity
- **Interaction:** preset-selection, weekday-toggle, nth-weekday-selection, end-condition-selection, occurrence-exception, copy-rrule
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Repeat editor when creating a calendar event or a recurring meeting, Configuring shifts and recurring availability in a booking tool, Scheduling reports or automated jobs with a monthly cadence such as 'last Friday'
- **Avoid when:** Single-occurrence events with no need for repetition, Arbitrary cadences that cannot be expressed as an RFC 5545 RRULE
- **Preserve when adapting:** rrule-grammar, preset-to-custom-progression, occurrence-preview-feedback
- **Replace when adapting:** domain-copy, date-formatting, week-start-convention
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, input, label, separator
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Scheduling Resource Booking

Booking corporate conference rooms and audiovisual equipment.

- id: `scheduling-resource-booking`
- Page: https://agentic-ui-kit.com/components/scheduling-resource-booking
- Live preview: https://agentic-ui-kit.com/live/component/scheduling-resource-booking

## Install

```bash
agentic-ui add scheduling-resource-booking
npx shadcn@4.17.0 add @agentic-ui/scheduling-resource-booking
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-resource-selection, room-scheduling, equipment-bundling, real-time-conflict-detection, automated-conflict-resolution, timeline-matrix-view, booking-management, capacity-filtering, keyboard-navigation
- **Intents:** manage-collection, create-edit, execute-flow
- **Suits domains:** saas, operations, healthcare, education
- **Interaction:** resource-selection, conflict-resolution, equipment-bundling, timeline-navigation, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** booking corporate conference rooms and audiovisual equipment, management of operating rooms and specialized medical equipment, scheduling university computer labs and projectors, booking recording studios and camera or microphone kits
- **Avoid when:** selecting availability on a Calendly-style public calendar for a single person, passive read-only calendar of past events
- **Preserve when adapting:** conflict-detection-logic, resolution-heuristics, timeline-interval-model, accessibility-semantics
- **Replace when adapting:** resource-catalog, amenities-list, business-operating-hours, domain-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, badge, input, label, separator, alert, checkbox
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Scheduling Slot Picker

Sales demo booking with 30-minute slots across several time zones.

- id: `scheduling-slot-picker`
- Page: https://agentic-ui-kit.com/components/scheduling-slot-picker
- Live preview: https://agentic-ui-kit.com/live/component/scheduling-slot-picker

## Install

```bash
agentic-ui add scheduling-slot-picker
npx shadcn@4.17.0 add @agentic-ui/scheduling-slot-picker
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** month-calendar, availability-density, slot-selection, timezone-switching, dst-aware-offsets, part-of-day-grouping, booking-confirmation, empty-and-error-states, keyboard-navigation
- **Intents:** execute-flow, create-edit
- **Suits domains:** saas, operations, healthcare, support
- **Interaction:** slot-selection, calendar-navigation, timezone-switching, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** sales demo booking with 30-minute slots across several time zones, clinical appointment by room and practitioner with a 20-minute duration, support schedule with shifts published per team, booking internal resources with limited capacity per slot
- **Avoid when:** selecting a date range without specific times, editing the calendar owner's recurring availability
- **Preserve when adapting:** calendar-grammar, availability-semantics, timezone-model, interaction-model
- **Replace when adapting:** domain-copy, slot-duration, timezone-list, resource-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, badge, select, label, separator, skeleton
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Search Autocomplete

Global search in a SaaS with suggestions grouped by dashboards, documents, people and commands.

- id: `search-autocomplete`
- Page: https://agentic-ui-kit.com/components/search-autocomplete
- Live preview: https://agentic-ui-kit.com/live/component/search-autocomplete

## Install

```bash
agentic-ui add search-autocomplete
npx shadcn@4.17.0 add @agentic-ui/search-autocomplete
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** ranked-suggestions, match-highlighting, diacritic-insensitive-matching, did-you-mean-correction, kind-grouping, local-or-async-source, debounce-and-abort, loading-state, empty-state, error-state-with-retry, initial-suggestions, keyboard-navigation, aria-combobox, live-announcements, popover-or-inline-layout, responsive
- **Intents:** navigate, explore-detail, manage-collection
- **Suits domains:** saas, ecommerce, knowledge, crm, devtools, file-storage, project-management
- **Interaction:** type-to-suggest, keyboard-navigation, select-suggestion, accept-correction, submit-query, clear, retry
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** global search in a SaaS with suggestions grouped by dashboards, documents, people and commands, e-commerce catalog search with term highlighting, SKU matching and spelling correction, knowledge base search field against a remote index with debounce and server-side «did you mean», contact or account picker in a CRM with keyboard navigation and Enter to accept
- **Avoid when:** a modal command palette with global actions and shortcuts is needed (use search-global-palette or project-management-issue-command-palette), the field must select a form value with chips or multi-selection (use form-async-combobox), results are shown on a full page with facets and pagination instead of inline suggestions
- **Preserve when adapting:** combobox-aria-model, ranking-and-highlight-logic, did-you-mean-vocabulary-correction, async-debounce-abort-contract, keyboard-and-focus-model, live-announcements
- **Replace when adapting:** suggestion-source-and-corpus, entity-kinds-icons-and-labels, navigation-on-select, copy-and-locale, brand-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Search Faceted Sidebar

Multi-faceted filtering side panel for a product catalog with counts by category, brands, price ranges and ratings.

- id: `search-faceted-sidebar`
- Page: https://agentic-ui-kit.com/components/search-faceted-sidebar
- Live preview: https://agentic-ui-kit.com/live/component/search-faceted-sidebar

## Install

```bash
agentic-ui add search-faceted-sidebar
npx shadcn@4.17.0 add @agentic-ui/search-faceted-sidebar
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** facet-counts, multi-select, clear-all, clear-facet, facet-search, range-slider-filter, collapsible-facet-groups, active-filter-badges, responsive-sheet-drawer, empty-state-handling, keyboard-navigation, accessible-labels
- **Intents:** manage-collection, explore-detail, navigate
- **Suits domains:** ecommerce, saas, knowledge, file-storage, operations, travel
- **Interaction:** click, checkbox-toggle, multi-select, clear-all, facet-search-input, range-slider-change, collapsible-toggle, drawer-open-close, keyboard-tab-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** multi-faceted filtering side panel for a product catalog with counts by category, brands, price ranges and ratings, document search sidebar with filters by file type, author, topic tags and modification dates, search navigation in a travel marketplace filtering by destinations, price range, amenities and reviews, advanced search sidebar in a help desk or issue tracker with statuses, priorities and assignees
- **Avoid when:** simple single-dimension filters over a small table that are solved with an inline select or dropdown, global search of application commands or actions, which corresponds to a command palette
- **Preserve when adapting:** multi-select-state-logic, facet-count-calculation, clear-all-and-clear-facet-affordances, responsive-sheet-on-mobile, collapsible-group-keyboard-accessibility
- **Replace when adapting:** facet-definitions-and-options, data-filtering-predicate, range-slider-bounds-and-step, icons-and-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** checkbox, badge, button, input, separator, slider, sheet, collapsible
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Search Global Palette

Multi-entity global search in a SaaS platform to quickly navigate between projects, tickets and users.

- id: `search-global-palette`
- Page: https://agentic-ui-kit.com/components/search-global-palette
- Live preview: https://agentic-ui-kit.com/live/component/search-global-palette

## Install

```bash
agentic-ui add search-global-palette
npx shadcn@4.17.0 add @agentic-ui/search-global-palette
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** entity-grouping, contextual-actions, prefix-routing, live-search-filtering, matched-text-highlight, preview-pane, recent-searches, filter-chips, keyboard-navigation, shortcut-trigger, empty-error-loading-states, modal-and-inline-modes
- **Intents:** navigate, execute-flow, explore-detail, manage-collection
- **Suits domains:** saas, project-management, devtools, knowledge, crm, operations
- **Interaction:** live-search, entity-filter, prefix-routing, execute-primary-action, execute-secondary-action, keyboard-arrow-navigation, modal-dialog-open-close, clear-recent-searches
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Multi-entity global search in a SaaS platform to quickly navigate between projects, tickets and users, keyboard-first command palette to locate issues and trigger quick actions such as assign or close, Search and navigation console in developer tools with prefix support to filter by resource type, Shortcut overlay for productivity applications with recent search history and metadata preview
- **Avoid when:** Simple forms where only a text field or basic autocomplete is required, Data tables that require exhaustive column filtering and pagination of thousands of rows, Fixed primary navigation in a sidebar or a permanent navbar
- **Preserve when adapting:** entity-grouping-engine, prefix-routing-algorithm, action-execution-contract, keyboard-navigation-scheme, cmdk-wrapper-surface
- **Replace when adapting:** entity-types-and-icons, mock-data-sources, placeholder-copy, action-handlers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** dialog, badge, button, input, scroll-area, separator
- **npm dependencies:** cmdk, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** cmdk@1.1.1, lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Search Recently Viewed

«recently viewed» panel on a SaaS home to return to opened documents, dashboards or people.

- id: `search-recently-viewed`
- Page: https://agentic-ui-kit.com/components/search-recently-viewed
- Live preview: https://agentic-ui-kit.com/live/component/search-recently-viewed

## Install

```bash
agentic-ui add search-recently-viewed
npx shadcn@4.17.0 add @agentic-ui/search-recently-viewed
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** local-persistence, generated-thumbnails, image-thumbnails, time-grouping, kind-filter, search-filter, dedupe-and-cap, cross-instance-sync, grid-list-layout, clear-with-confirmation, keyboard-navigation, focus-management, empty-state, storage-error-state, live-announcements, responsive-grid
- **Intents:** navigate, explore-detail, manage-collection
- **Suits domains:** saas, ecommerce, knowledge, file-storage, project-management, crm
- **Interaction:** open-item, remove-item, clear-all-confirm, search-filter, kind-filter, layout-toggle, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** «recently viewed» panel on a SaaS home to return to opened documents, dashboards or people, local history of visited products in a store with a thumbnail and a direct jump to the product page, block of recent files or pages in a knowledge base, fed from the router or the command palette, resume shortcut in a CRM with contacts and accounts consulted in recent days
- **Avoid when:** the history must sync across devices or be audited on the server (use devtools-recent-activity-feed or an activity feed with a backend), the list exceeds dozens of entries or requires global search over the whole corpus (use search-global-palette or ai-workspace-search-dialog)
- **Preserve when adapting:** history-dedupe-and-cap-logic, time-bucket-grouping, thumbnail-per-kind-sketches, storage-adapter-contract, keyboard-and-focus-model, accessible-live-announcements
- **Replace when adapting:** entity-kinds-and-labels, storage-key-and-max-items, navigation-target-on-open, copy-and-locale, brand-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, input, alert, alert-dialog, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Search Saved Views

Saved views bar in an issue or project tracker to switch between active tasks and backlog.

- id: `search-saved-views`
- Page: https://agentic-ui-kit.com/components/search-saved-views
- Live preview: https://agentic-ui-kit.com/live/component/search-saved-views

## Install

```bash
agentic-ui add search-saved-views
npx shadcn@4.17.0 add @agentic-ui/search-saved-views
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** save-filters-view, restore-view-criteria, share-view-url, url-serialization, rename-view, duplicate-view, delete-with-confirmation, default-view-setting, pin-unpin-views, dirty-state-detection, view-item-counters, keyboard-navigation, focus-management
- **Intents:** navigate, manage-collection, explore-detail
- **Suits domains:** saas, project-management, crm, file-storage, devtools, operations
- **Interaction:** select-view, save-view-criteria, update-active-view, revert-criteria, duplicate-view, rename-view, set-default-view, delete-with-confirmation, copy-shareable-link, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Saved views bar in an issue or project tracker to switch between active tasks and backlog, URL-shareable views in a CRM to share filters for specific customers or sales, Saved filters panel in operations consoles or log explorers, Predefined and custom views for catalogs or file explorers
- **Avoid when:** One-off exploratory search with no need for repeatable filters (use search-global-palette), Automatic chronological history of recently opened items (use search-recently-viewed)
- **Preserve when adapting:** view-criteria-data-model, url-codec-serialization, keyboard-tablist-model, dirty-state-tracking, confirmation-modal-flow
- **Replace when adapting:** criteria-filter-fields, mock-data-entities, brand-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, dialog, popover, tooltip
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0


### Security Sessions Devices

SaaS account security panel for revoking inactive or unrecognized sessions.

- id: `security-sessions-devices`
- Page: https://agentic-ui-kit.com/components/security-sessions-devices
- Live preview: https://agentic-ui-kit.com/live/component/security-sessions-devices

## Install

```bash
agentic-ui add security-sessions-devices
npx shadcn@4.17.0 add @agentic-ui/security-sessions-devices
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** active-sessions-listing, connected-devices-inspection, current-session-highlight, device-category-filtering, granular-session-revocation, bulk-sessions-revocation, accessible-confirmation-dialog, search-filter, live-region-status-announcement, empty-and-error-states
- **Intents:** authenticate, manage-collection, audit-trail, configure
- **Suits domains:** auth, settings, saas, billing, devtools
- **Interaction:** revoke-single-session, revoke-all-other-sessions, search-and-filter, device-detail-inspection, keyboard-navigation
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** SaaS account security panel for revoking inactive or unrecognized sessions, Bulk session sign-out after a password update or suspected compromise, Audit of connected mobile and desktop devices in an enterprise workspace
- **Avoid when:** Access control based on organizational roles (use org-permissions-matrix), Initial registration or login of a new user (use auth-login-signup)
- **Preserve when adapting:** current-session-protection-pattern, confirmation-dialog-interaction-model, accessible-live-region-feedback, two-level-revocation-model
- **Replace when adapting:** domain-copy, device-metadata-format, session-timeout-policy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, dialog, alert-dialog, input, separator
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0


### Table Tree Hierarchy

Multi-level repository and project explorer (folders, packages, services and files with bulk selection).

- id: `table-tree-hierarchy`
- Page: https://agentic-ui-kit.com/components/table-tree-hierarchy
- Live preview: https://agentic-ui-kit.com/live/component/table-tree-hierarchy

## Install

```bash
agentic-ui add table-tree-hierarchy
npx shadcn@4.17.0 add @agentic-ui/table-tree-hierarchy
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** hierarchical-tree, expand-collapse, cascading-checkboxes, tri-state-selection, ancestor-auto-expansion, search-filter, density-toggle, bulk-actions, keyboard-navigation, live-announcements, empty-state, error-recovery, read-only-mode
- **Intents:** manage-collection, explore-detail, track-status, navigate
- **Suits domains:** project-management, devtools, saas, operations, file-storage
- **Interaction:** toggle-expand, cascade-checkbox-selection, search-filter, density-toggle, bulk-expand-collapse, keyboard-navigation, error-recovery
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** multi-level repository and project explorer (folders, packages, services and files with bulk selection), nested task manager (epics, user stories, tasks and subtasks with status tracking), organizer for ledger accounts or charts of accounts in enterprise finance and billing, tree of categories, subcategories and product references in large e-commerce catalogs, document manager with cascading permissions and hierarchical file selection for download or archiving
- **Avoid when:** the data is strictly flat with no parent-child relationships (use a standard data table), the hierarchy exceeds hundreds of thousands of nodes without server-side virtualized pagination, a visual graph-style tree or flowchart is required instead of a table
- **Preserve when adapting:** hierarchical-tree-structure, cascading-selection-logic, tri-state-rollup-semantics, accessible-treegrid-roles-and-announcements, keyboard-interaction-model
- **Replace when adapting:** domain-columns-and-data-model, node-type-badges-and-icons, row-action-handlers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, checkbox, input, table
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Tasks Deleted Archive

Trash of deleted tasks.

- id: `tasks-deleted-archive`
- Page: https://agentic-ui-kit.com/components/tasks-deleted-archive
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo/deleted?piece=tasks-deleted-archive

## Install

```bash
agentic-ui add tasks-deleted-archive
npx shadcn@4.17.0 add @agentic-ui/tasks-deleted-archive
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** restore-task, permanent-delete, batch-purge, undo-mutation
- **Intents:** manage-collection, configure
- **Suits domains:** personal-productivity, file-storage, saas, project-management
- **Interaction:** restore-item, empty-trash, permanent-remove
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Trash of deleted tasks, Recovery inbox for archived items
- **Avoid when:** Systems with no soft delete support
- **Preserve when adapting:** warning-banner-styling, restore-action-flow
- **Replace when adapting:** retention-period-message, purge-endpoint
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, dialog
- **npm dependencies:** lucide-react, zustand
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, sonner@^2.0.7, zustand@5.0.8
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, tasks-sortable-list, ui-empty


### Tasks List Item

Individual task row in a list.

- id: `tasks-list-item`
- Page: https://agentic-ui-kit.com/components/tasks-list-item
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo?piece=tasks-list-item

## Install

```bash
agentic-ui add tasks-list-item
npx shadcn@4.17.0 add @agentic-ui/tasks-list-item
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** strikethrough-animation, priority-flag, due-date-pill, quick-actions
- **Intents:** track-status, manage-collection
- **Suits domains:** personal-productivity, project-management, saas, operations
- **Interaction:** toggle-checkbox, click-priority-flag, open-actions-menu
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Individual task row in a list, Verification checklist item
- **Avoid when:** Dense multi-column table views
- **Preserve when adapting:** strikethrough-transition, priority-badge-placement
- **Replace when adapting:** item-data-props, quick-menu-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** checkbox, badge, button, dropdown-menu
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, lucide-react@0.577.0, motion@12.23.24, sonner@^2.0.7, zustand@5.0.8
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-dialog, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-tooltip, ui-item


### Tasks Notifications Center

Inbox of due-date alerts.

- id: `tasks-notifications-center`
- Page: https://agentic-ui-kit.com/components/tasks-notifications-center
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo/notifications?piece=tasks-notifications-center

## Install

```bash
agentic-ui add tasks-notifications-center
npx shadcn@4.17.0 add @agentic-ui/tasks-notifications-center
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** unread-badging, reminder-alerts, mark-as-read, link-to-task
- **Intents:** communicate, track-status
- **Suits domains:** personal-productivity, saas, project-management, social
- **Interaction:** mark-read, click-notification-target, clear-all
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Inbox of due-date alerts, Mention notifications in tasks
- **Avoid when:** Applications without asynchronous notifications
- **Preserve when adapting:** notification-card-anatomy, unread-dot-indicator
- **Replace when adapting:** notification-types, action-routes
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, avatar
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-tabs, ui-empty, ui-item


### Tasks Productivity Settings

Productivity user preferences.

- id: `tasks-productivity-settings`
- Page: https://agentic-ui-kit.com/components/tasks-productivity-settings
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo/settings?piece=tasks-productivity-settings

## Install

```bash
agentic-ui add tasks-productivity-settings
npx shadcn@4.17.0 add @agentic-ui/tasks-productivity-settings
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** theme-selection, notification-prefs, integration-toggles, display-options
- **Intents:** configure
- **Suits domains:** personal-productivity, settings, saas, devtools
- **Interaction:** tab-switch, toggle-preference, save-settings
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Productivity user preferences, Display and calendar settings
- **Avoid when:** Content consumption views without personalization
- **Preserve when adapting:** tabbed-settings-layout, preference-switch-row
- **Replace when adapting:** configurable-options, persisted-storage-keys
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, tabs, switch, button, select
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, motion@12.23.24, nuqs@^2.8.9, react-icons@5.5.0, sonner@^2.0.7
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-input, ui-admin-kit-scroll-area, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-switch, ui-admin-kit-tabs, ui-field, ui-item


### Util Copy Block

Showing a package installation snippet with npm, pnpm and yarn tabs.

- id: `util-copy-block`
- Page: https://agentic-ui-kit.com/components/util-copy-block
- Live preview: https://agentic-ui-kit.com/live/component/util-copy-block

## Install

```bash
agentic-ui add util-copy-block
npx shadcn@4.17.0 add @agentic-ui/util-copy-block
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** file-language-tabs, syntax-highlighting, copy-to-clipboard, copy-success-feedback, copy-failure-feedback, line-numbers, long-line-horizontal-scroll, line-wrapping-toggle, markup-escaping, keyboard-tab-switching, empty-state, responsive-header
- **Intents:** explore-detail, import-export, communicate
- **Suits domains:** devtools, ai-workspace, knowledge, saas, operations, settings
- **Interaction:** tab-switch, keyboard-arrow-tab-switch, copy-click, horizontal-scroll, line-wrap-toggle, line-number-toggle
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** showing a package installation snippet with npm, pnpm and yarn tabs, documenting an API response with the request and the JSON payload in tabs, delivering the code block of an assistant response for the user to copy, exposing a theme configuration snippet on a developer settings page
- **Avoid when:** code editing with autocomplete, diagnostics and saving, side-by-side comparison of two versions, which corresponds to a diff viewer
- **Preserve when adapting:** tab-to-content-and-clipboard-consistency, markup-escaping-by-construction, copy-feedback-and-live-region, accessible-tab-semantics
- **Replace when adapting:** fixture-snippets, language-token-palette, clipboard-transport, filename-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** tabs, button, badge, scroll-area, separator
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Util Export Menu

Exporting financial transaction ledgers to CSV format with currency formatting.

- id: `util-export-menu`
- Page: https://agentic-ui-kit.com/components/util-export-menu
- Live preview: https://agentic-ui-kit.com/live/component/util-export-menu

## Install

```bash
agentic-ui add util-export-menu
npx shadcn@4.17.0 add @agentic-ui/util-export-menu
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** csv-export, pdf-export, png-capture, json-export, clipboard-copy, custom-configuration-dialog, column-filtering, scope-selection, keyboard-navigation, empty-state-handling, error-recovery
- **Intents:** import-export, manage-collection, configure, audit-trail, explore-detail
- **Suits domains:** analytics, saas, operations, crm, finance, devtools
- **Interaction:** dropdown-menu, dialog-configuration, format-selection, column-toggle, clipboard-copy
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** exporting financial transaction ledgers to CSV format with currency formatting, capturing an analytics chart view or dashboard to a high-resolution PNG image for reports, generating printable PDF summary sheets with an institutional letterhead, downloading filtered datasets with a column selector and a selected-records scope
- **Avoid when:** import flows or input file uploads (use dedicated file-upload components), simple sharing via web link or social networks (use util-share-dialog)
- **Preserve when adapting:** export-engine-contracts, dropdown-menu-structure, keyboard-navigation-model, column-mapping-interface
- **Replace when adapting:** trigger-styling, domain-columns, custom-formatters
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, checkbox, dialog, dropdown-menu, input, label, separator, tabs
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Internal Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Util Print Styles

Printing invoices and account statements with a corporate header and a legal block on paper only.

- id: `util-print-styles`
- Page: https://agentic-ui-kit.com/components/util-print-styles
- Live preview: https://agentic-ui-kit.com/live/component/util-print-styles

## Install

```bash
agentic-ui add util-print-styles
npx shadcn@4.17.0 add @agentic-ui/util-print-styles
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** page-setup, paper-size-selection, orientation-control, margin-presets, print-scaling, running-header-footer, print-region-scoping, page-break-control, print-only-content, sheet-preview, print-color-adjust, link-url-expansion
- **Intents:** import-export, configure, explore-detail, audit-trail
- **Suits domains:** billing, finance, operations, saas, analytics, healthcare
- **Interaction:** radiogroup-selection, slider-scaling, toggle-options, preview-switch, print-invocation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** printing invoices and account statements with a corporate header and a legal block on paper only, exporting analytical reports to paper with forced page breaks per section, operational worksheets in landscape A3 with narrow margins and printed backgrounds, clinical or contractual documents with a signature line that must not appear on screen
- **Avoid when:** server-side PDF generation or binary file download (use util-export-menu), documents whose screen design is already identical to paper and require no configuration
- **Preserve when adapting:** page-setup-contract, print-region-model, page-break-semantics, stylesheet-generation
- **Replace when adapting:** document-content, header-footer-copy, default-paper-size
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, checkbox, input, label, separator, slider
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Util Share Dialog

Share a document with a link, expiration and per-person permissions in a collaborative suite.

- id: `util-share-dialog`
- Page: https://agentic-ui-kit.com/components/util-share-dialog
- Live preview: https://agentic-ui-kit.com/live/component/util-share-dialog

## Install

```bash
agentic-ui add util-share-dialog
npx shadcn@4.17.0 add @agentic-ui/util-share-dialog
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** access-level-selection, link-generation, link-permission-control, link-expiry-control, password-protection-toggle, recipient-invitation, per-recipient-permissions, recipient-removal, embed-snippet, copy-to-clipboard-feedback, public-exposure-warning, empty-and-error-states, keyboard-navigation, responsive-dialog
- **Intents:** configure, execute-flow, communicate
- **Suits domains:** saas, file-storage, project-management, knowledge, devtools, operations
- **Interaction:** access-level-select, link-permission-select, link-expiry-select, password-protection-toggle, copy-link-click, copy-embed-click, recipient-invite-submit, recipient-permission-change, recipient-remove, tab-switch, keyboard-escape-dismiss
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** share a document with a link, expiration and per-person permissions in a collaborative suite, publish an analytics report as a read-only link with a public exposure warning, invite external reviewers to a repository or workspace with comment permission, get the iframe snippet to embed a resource in an internal portal
- **Avoid when:** role- and attribute-based ACL management at the corporate directory level, mass social publishing with per-network preview and send scheduling
- **Preserve when adapting:** access-level-escalation-scale, permission-downgrade-safeguards, copy-feedback-and-live-region, accessible-dialog-modal-behavior
- **Replace when adapting:** share-link-generation-endpoint, recipient-directory-source, invitation-delivery-service, embed-host-domain
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** dialog, button, badge, card, input, label, separator, switch, tabs
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Util Shortcuts Overlay

Shortcut reference sheet for an admin console opened with the ? key.

- id: `util-shortcuts-overlay`
- Page: https://agentic-ui-kit.com/components/util-shortcuts-overlay
- Live preview: https://agentic-ui-kit.com/live/component/util-shortcuts-overlay

## Install

```bash
agentic-ui add util-shortcuts-overlay
npx shadcn@4.17.0 add @agentic-ui/util-shortcuts-overlay
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** global-key-binding, key-sequence-chords, shortcut-search, grouped-listing, platform-aware-key-caps, input-focus-suppression, hidden-bindings, reference-only-mode, keyboard-navigation, empty-state-handling
- **Intents:** navigate, configure, execute-flow, explore-detail
- **Suits domains:** saas, operations, analytics, devtools, project-management, settings
- **Interaction:** keyboard-shortcut, modal-dialog, search-filter, focus-trap
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** shortcut reference sheet for an admin console opened with the ? key, keyboard-first navigation with g+d / g+s sequences between sections of a workspace, discovery of editing shortcuts in a collaborative document editor, reference-only listing of combinations in an app whose binding is managed by the host
- **Avoid when:** a single action with a one-off shortcut (a tooltip with the combination is enough), touch-only surfaces with no physical keyboard
- **Preserve when adapting:** binding-registry-contract, keyboard-interaction-model, grouping-and-search-structure, focus-management
- **Replace when adapting:** shortcut-catalogue, group-names, trigger-binding
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, dialog, input, scroll-area, separator
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Motion Reveal On Scroll

Staggered entrance of KPI cards when scrolling a dashboard.

- id: `motion-reveal-on-scroll`
- Page: https://agentic-ui-kit.com/components/motion-reveal-on-scroll
- Live preview: https://agentic-ui-kit.com/live/component/motion-reveal-on-scroll

## Install

```bash
agentic-ui add motion-reveal-on-scroll
npx shadcn@4.17.0 add @agentic-ui/motion-reveal-on-scroll
```

## Metadata

- **Level:** primitive
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** intersection-observer-reveal, staggered-entrance, reveal-variants, personality-gating, reduced-motion-fallback, informative-state-preservation
- **Intents:** navigate, communicate, monitor-live, track-status
- **Suits domains:** saas, ai-workspace, operations, devtools, ecommerce
- **Interaction:** scroll, theme-switch, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Staggered entrance of KPI cards when scrolling a dashboard, Revealing sections on landing pages and changelogs, Activity timeline that appears as it is scrolled through
- **Avoid when:** Dense tables or content the user needs to scan immediately, Virtualized lists where nodes are constantly mounted and unmounted
- **Preserve when adapting:** reduced-motion-fallback, personality-timing-table, stagger-cap, visible-before-hydration
- **Replace when adapting:** demo-content, reveal-variant, threshold-and-root-margin
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.17/10
- **Quality breakdown:** visual 8.8/10, responsive 9/10, accessibility 9.2/10, code 9/10
- **Uses primitives:** card
- **npm dependencies:** @agentic-ui/motion, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Scroll Progress

Top reading progress bar in long articles and technical documentation.

- id: `motion-scroll-progress`
- Page: https://agentic-ui-kit.com/components/motion-scroll-progress
- Live preview: https://agentic-ui-kit.com/live/component/motion-scroll-progress

## Install

```bash
agentic-ui add motion-scroll-progress
npx shadcn@4.17.0 add @agentic-ui/motion-scroll-progress
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** scroll-linked-progress, progress-bar-indicator, circular-progress-indicator, reading-analytics, section-milestones, personality-gating, reduced-motion-fallback, informative-state-preservation
- **Intents:** track-status, navigate, explore-detail, monitor-live
- **Suits domains:** saas, knowledge, marketing, operations, ecommerce
- **Interaction:** scroll, click, keyboard-navigation, theme-switch
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Top reading progress bar in long articles and technical documentation, Progress indicator with back-to-top in analytics dashboards and reports, Progress tracking in terms and agreements modals and audit flows
- **Avoid when:** Static pages that fit entirely within the initial viewport, Single-step input forms or modals without scrollable content
- **Preserve when adapting:** reduced-motion-fallback, personality-timing-table, aria-progressbar-semantics, back-to-top-keyboard-action, reading-time-estimation
- **Replace when adapting:** reading-content, accent-colors, milestone-sections
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.17/10
- **Quality breakdown:** visual 8.8/10, responsive 9/10, accessibility 9.2/10, code 9/10
- **Uses primitives:** button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Typing Indicator

Assistant or copilot preparing a reply before the first token.

- id: `motion-typing-indicator`
- Page: https://agentic-ui-kit.com/components/motion-typing-indicator
- Live preview: https://agentic-ui-kit.com/live/component/motion-typing-indicator

## Install

```bash
agentic-ui add motion-typing-indicator
npx shadcn@4.17.0 add @agentic-ui/motion-typing-indicator
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** typing-dots, variants-dots-pulse-wave, named-typers-label, stalled-wait-state, elapsed-seconds, announced-status, personality-tempo, reduced-motion-fallback, informative-state-preservation
- **Intents:** communicate, track-status, monitor-live
- **Suits domains:** ai-workspace, saas, crm, social, operations, devtools
- **Interaction:** keyboard-navigation
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Assistant or copilot preparing a reply before the first token, Customer typing in a support inbox (compact list view), Several teammates typing in a team channel
- **Avoid when:** Partial text is already arriving (use motion-streaming-text), Data or page loads with no counterpart (use motion-spinner-set or motion-skeleton-shimmer), Waits with measurable progress (use motion-progress-animated)
- **Preserve when adapting:** always-mounted-polite-status, glyph-aria-hidden, visible-label-without-motion, personality-tempo-tokens
- **Replace when adapting:** labels, typers-source-adapter, stalled-threshold
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.13/10
- **Quality breakdown:** visual 8.5/10, responsive 9/10, accessibility 9.5/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Fx Perspective Grid

Product launch or launch-week banner with a neon horizon grid.

- id: `fx-perspective-grid`
- Page: https://agentic-ui-kit.com/components/fx-perspective-grid
- Live preview: https://agentic-ui-kit.com/live/component/fx-perspective-grid

## Install

```bash
agentic-ui add fx-perspective-grid
npx shadcn@4.17.0 add @agentic-ui/fx-perspective-grid
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** retro-horizon-grid, single-painted-gradient-layer, transform-only-scroll-loop, neon-subtle-blueprint-variants, token-tinted-lines, adjustable-horizon-and-cell, horizon-fade, fx-intensity-scaling, pause-on-hover-and-focus, offscreen-pause, motion-personality-gating, reduced-motion-static-grid, decorative-aria-hidden
- **Intents:** communicate
- **Suits domains:** saas, marketing, devtools, ai-workspace, media, music
- **Interaction:** hover-pause, focus-pause, theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Product launch or launch-week banner with a neon horizon grid, Release notes or changelog header with a subtle hairline floor, Engineering or roadmap section backdrop in the blueprint style, Event, game or music landing hero with a retro look
- **Avoid when:** Dense dashboards, tables or forms where moving lines compete with data, Brands with a calm or conservative tone where a retro look feels off, Sections with long body text that would sit over the floor
- **Preserve when adapting:** decorative-layers-aria-hidden, content-above-the-horizon, pause-on-hover-and-focus, static-grid-when-motion-is-off
- **Replace when adapting:** variant-and-tone, horizon-and-cell, speed-and-intensity, banner-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.1/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** fx-foundation, lib-motion


### A11y Focus Manager

Confirmation dialog that returns focus to the button that opened it.

- id: `a11y-focus-manager`
- Page: https://agentic-ui-kit.com/components/a11y-focus-manager
- Live preview: https://agentic-ui-kit.com/live/component/a11y-focus-manager

## Install

```bash
agentic-ui add a11y-focus-manager
npx shadcn@4.17.0 add @agentic-ui/a11y-focus-manager
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** focus-trap, focus-restore, initial-focus-resolution, tab-cycle-loop, nested-scope-stack, escape-dismissal, tabbable-resolution, empty-scope-containment, step-flow-focus-handoff, live-region-step-announcement, non-modal-scope, programmatic-focus-recovery
- **Intents:** execute-flow, navigate, configure
- **Suits domains:** saas, operations, billing, auth, settings, healthcare
- **Interaction:** keyboard-tab-cycle, escape-dismissal, programmatic-focus, step-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** confirmation dialog that returns focus to the button that opened it, multi-step onboarding wizard that moves focus to each step's heading, filters drawer that contains focus without declaring itself modal, nested delete dialog over an edit dialog, where only the inner one responds to Escape
- **Avoid when:** always-visible content that must not capture focus from the rest of the page, menus and listboxes from a primitive that already manages its own focus, full route transitions, where focus is managed by the router and not a local scope
- **Preserve when adapting:** focus-containment, focus-restoration, nested-scope-precedence, step-announcement
- **Replace when adapting:** surface-styling, dialog-copy, step-definitions, announcement-language
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 10/10, code 9/10


### A11y Live Announcer

Announce the number of results when filtering a table without reloading the page.

- id: `a11y-live-announcer`
- Page: https://agentic-ui-kit.com/components/a11y-live-announcer
- Live preview: https://agentic-ui-kit.com/live/component/a11y-live-announcer

## Install

```bash
agentic-ui add a11y-live-announcer
npx shadcn@4.17.0 add @agentic-ui/a11y-live-announcer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** aria-live-regions, polite-announcements, assertive-announcements, announcement-queue, dedupe-by-key, repeat-announcement, auto-clear, announcement-history, visible-transcript, imperative-api, declarative-on-change
- **Intents:** monitor-live, communicate, track-status
- **Suits domains:** saas, operations, analytics, ecommerce, billing, settings
- **Interaction:** imperative-announce, announce-on-change, clear-regions
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** announce the number of results when filtering a table without reloading the page, report that an autosave finished or failed, communicate progress and completion of an upload or a background job, interrupt with an expired-session error that requires immediate action
- **Avoid when:** static content that does not change without navigation, messages that already have their own focus, such as a modal dialog opening, high-frequency ungrouped flows, where announcing each event overwhelms the user
- **Preserve when adapting:** live-region-mounting, politeness-semantics, queue-serialisation, focus-neutrality
- **Replace when adapting:** announcement-copy, transcript-presentation, clear-timings
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 10/10, code 9/10
- **Uses primitives:** badge, button, card, input, label, separator
- **Motion:** profile none, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### A11y Skip Links

Skip the side navigation and header to reach the main content.

- id: `a11y-skip-links`
- Page: https://agentic-ui-kit.com/components/a11y-skip-links
- Live preview: https://agentic-ui-kit.com/live/component/a11y-skip-links

## Install

```bash
agentic-ui add a11y-skip-links
npx shadcn@4.17.0 add @agentic-ui/a11y-skip-links
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** skip-to-landmark, focus-on-activation, reveal-on-focus, visually-hidden-at-rest, multiple-destinations, focusable-landmark-wrapper, broken-target-reporting, fragment-history-sync, no-js-anchor-fallback
- **Intents:** navigate, configure
- **Suits domains:** saas, operations, settings, ecommerce, knowledge, education
- **Interaction:** keyboard-focus, link-activation, focus-move
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** skip the side navigation and header to reach the main content, reach a long results table directly from the first Tab, WCAG 2.4.1 (Bypass Blocks) requirement in an application template, reach the search box without going through a menu of dozens of links
- **Avoid when:** single-region pages with no repeated blocks to bypass, replacing proper landmarks and headings: the set complements them, it does not replace them, modal flows where focus should be trapped, not skipped
- **Preserve when adapting:** focus-movement-semantics, reveal-on-focus, landmark-tabindex, tab-order-position
- **Replace when adapting:** link-labels, destination-ids, surface-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 10/10, code 9/10
- **Motion:** profile subtle, library css, reduced-motion fallback yes


### AI Message Bubble

An assistant reply with a formula, a comparison table and a copyable SQL query in a chat.

- id: `ai-message-bubble`
- Page: https://agentic-ui-kit.com/components/ai-message-bubble
- Live preview: https://agentic-ui-kit.com/live/component/ai-message-bubble

## Install

```bash
agentic-ui add ai-message-bubble
npx shadcn@4.17.0 add @agentic-ui/ai-message-bubble
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** markdown-rendering, fenced-code-blocks, code-block-copy, message-copy, aligned-tables, latex-inline-and-display, latex-source-copy, malformed-tex-fallback, currency-safe-dollar-parsing, role-alignment, author-avatar-and-timestamp, sending-and-streaming-states, empty-state, error-recovery
- **Intents:** communicate, explore-detail
- **Suits domains:** ai-workspace, knowledge, devtools, saas, analytics
- **Interaction:** copy-code-block, copy-message, copy-latex-source, retry-after-error, keyboard-navigation
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** an assistant reply with a formula, a comparison table and a copyable SQL query in a chat, a data copilot message that explains a metric with LaTeX and returns the snippet to reproduce it, a technical support thread where the agent attaches shell commands with a copy button, a system notice in a conversation when the model or configuration changes
- **Avoid when:** replies that are still arriving token by token and need flicker-free reconciliation: use ai-stream-renderer inside the thread, long editable or collaborative documents, where an editor rather than a chat bubble is appropriate
- **Preserve when adapting:** role-based-alignment, per-block-copy-with-live-announcement, display-math-segmentation-before-markdown, focusable-scroll-containers
- **Replace when adapting:** message-copy, author-identity, bubble-tints, katex-macros
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** avatar, badge, button, table
- **npm dependencies:** katex
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** katex@^0.16.22
- **Registry dependencies:** ai-stream-renderer, lib-primitives


### AI Workspace App Header

Active conversation header with rename and export options.

- id: `ai-workspace-app-header`
- Page: https://agentic-ui-kit.com/components/ai-workspace-app-header
- Live preview: https://agentic-ui-kit.com/live/piece/ai-workspace-app-header?piece=ai-workspace-app-header

## Install

```bash
agentic-ui add ai-workspace-app-header
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-app-header
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** chat-context-menu, share-trigger, theme-toggle, sidebar-trigger
- **Intents:** navigate, configure
- **Suits domains:** ai-workspace, devtools, saas, personal-productivity
- **Interaction:** context-menu-toggle, share-modal-open, theme-change
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** active conversation header with rename and export options, top toolbar in analytics or agent consoles, minimalist header for productivity tools
- **Avoid when:** monolithic pages without a top status bar
- **Preserve when adapting:** contextual-title-model, action-grouping, light-dark-toggle
- **Replace when adapting:** chat-actions, external-links
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, dropdown-menu
- **npm dependencies:** lucide-react, zustand
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, zustand@5.0.8
- **Registry dependencies:** ai-workspace-share-dialog, lib-ai-workspace-utils, ui-button, ui-dropdown-menu, ui-sidebar


### AI Workspace Chat History List

Historical directory of conversations with AI assistants.

- id: `ai-workspace-chat-history-list`
- Page: https://agentic-ui-kit.com/components/ai-workspace-chat-history-list
- Live preview: https://agentic-ui-kit.com/live/piece/ai-workspace-chat-history-list?piece=ai-workspace-chat-history-list

## Install

```bash
agentic-ui add ai-workspace-chat-history-list
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-chat-history-list
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** period-grouping, filter-tabs, search-filter, chat-actions-menu, pin-star-archive
- **Intents:** manage-collection, track-status, navigate
- **Suits domains:** ai-workspace, devtools, crm, notes, saas
- **Interaction:** search-typing, tab-selection, chat-row-click, dropdown-action
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** historical directory of conversations with AI assistants, chronological log of technical support sessions, list of notes and transcripts grouped by date
- **Avoid when:** non-temporal collections or massive server-paginated datasets
- **Preserve when adapting:** period-grouping-logic, status-filtering, row-action-model
- **Replace when adapting:** chat-schema, time-buckets, project-tags
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, input, badge, dropdown-menu
- **npm dependencies:** lucide-react, zustand, date-fns
- **Used in:** Quillmind AI Workspace (template), AI App (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-ai-workspace-utils, ui-badge, ui-button, ui-dropdown-menu, ui-input


### AI Workspace Home Overview

Assistant home that mixes a composer with workspace KPIs.

- id: `ai-workspace-home-overview`
- Page: https://agentic-ui-kit.com/components/ai-workspace-home-overview
- Live preview: https://agentic-ui-kit.com/live/piece/ai-workspace-home-overview?piece=ai-workspace-home-overview

## Install

```bash
agentic-ui add ai-workspace-home-overview
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-home-overview
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** dated-greeting, inline-composer, starter-tiles, pick-up-list, kpi-tiles, per-space-bar-chart, scheduled-jobs-list, session-allowance-bar
- **Intents:** navigate, explore-detail, communicate
- **Suits domains:** ai-workspace, devtools, personal-productivity, saas
- **Interaction:** starter-tile-click, composer-submission, thread-row-click, chart-tooltip-hover
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** assistant home that mixes a composer with workspace KPIs, team copilot desk showing activity per project space, personal start page with threads to resume and scheduled jobs
- **Avoid when:** applications without a conversational or guided search flow
- **Preserve when adapting:** two-column-desk-layout, composer-with-starter-tiles, kpi-tiles-and-chart-column
- **Replace when adapting:** kpi-definitions, starter-prompts, scheduled-jobs-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** badge, progress, chart
- **npm dependencies:** lucide-react, recharts, zustand
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1, zustand@5.0.8
- **Registry dependencies:** ai-workspace-prompt-composer, lib-ai-workspace-utils, ui-badge, ui-chart, ui-progress


### AI Workspace Project Card

Project card with counters for chats and knowledge documents.

- id: `ai-workspace-project-card`
- Page: https://agentic-ui-kit.com/components/ai-workspace-project-card
- Live preview: https://agentic-ui-kit.com/live/template/ai-workspace/projects?piece=ai-workspace-project-card

## Install

```bash
agentic-ui add ai-workspace-project-card
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-project-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** accent-color-stripe, visibility-indicator, pinned-status, resource-counters, collaborators-avatar-stack
- **Intents:** explore-detail, track-status
- **Suits domains:** ai-workspace, project-management, notes, saas, knowledge
- **Interaction:** click-to-open, hover-lift
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** project card with counters for chats and knowledge documents, gallery item for shared team folders, summary card for strategic initiatives in management software
- **Avoid when:** compact high-density table rows
- **Preserve when adapting:** card-header-stripe, meta-counter-layout, avatar-stack-alignment
- **Replace when adapting:** color-palette, icon-indicators, metric-keys
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** avatar
- **npm dependencies:** lucide-react
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-ai-workspace-utils, ui-avatar


### AI Workspace Projects Gallery

Directory of projects and workspaces for AI teams.

- id: `ai-workspace-projects-gallery`
- Page: https://agentic-ui-kit.com/components/ai-workspace-projects-gallery
- Live preview: https://agentic-ui-kit.com/live/piece/ai-workspace-projects-gallery?piece=ai-workspace-projects-gallery

## Install

```bash
agentic-ui add ai-workspace-projects-gallery
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-projects-gallery
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** tab-filtering, sort-dropdown, search-filtering, new-project-modal, project-detail-dialog
- **Intents:** manage-collection, navigate, create-edit
- **Suits domains:** ai-workspace, project-management, devtools, saas, knowledge
- **Interaction:** tab-switch, sort-select, search-filter, new-project-create, card-click
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** directory of projects and workspaces for AI teams, gallery of initiatives and repositories in a corporate portal, catalog of collaborative projects with visibility management
- **Avoid when:** tabular lists with more than 20 columns of numeric data
- **Preserve when adapting:** gallery-layout, dialog-lifecycle, filtering-sorting-engine
- **Replace when adapting:** project-schema, tab-definitions, create-fields
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, input, dropdown-menu, dialog, field, textarea
- **npm dependencies:** lucide-react, zustand
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** ai-workspace-project-card, lib-ai-workspace-utils, ui-ai-workspace-field, ui-button, ui-dialog, ui-dropdown-menu, ui-input, ui-textarea


### AI Workspace Settings Hub

Account settings center and AI workspace preferences.

- id: `ai-workspace-settings-hub`
- Page: https://agentic-ui-kit.com/components/ai-workspace-settings-hub
- Live preview: https://agentic-ui-kit.com/live/piece/ai-workspace-settings-hub?piece=ai-workspace-settings-hub

## Install

```bash
agentic-ui add ai-workspace-settings-hub
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-settings-hub
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-tab-settings, profile-editor, capabilities-toggles, auth-token-management
- **Intents:** configure, authenticate
- **Suits domains:** ai-workspace, saas, devtools, settings
- **Interaction:** section-switch, profile-update, capability-toggle, token-revoke
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** account settings center and AI workspace preferences, user preferences administration panel in a SaaS application, manager for developer credentials and profiles
- **Avoid when:** single one-step forms such as a basic sign-up
- **Preserve when adapting:** section-navigation-pattern, field-group-structure, danger-zone-styling
- **Replace when adapting:** settings-schema, auth-methods, capability-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, input, textarea, switch, avatar, select, field
- **npm dependencies:** lucide-react, zustand
- **Used in:** Quillmind AI Workspace (template), AI App (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1, zustand@5.0.8
- **Registry dependencies:** lib-ai-workspace-utils, ui-ai-workspace-field, ui-avatar, ui-badge, ui-button, ui-chart, ui-input, ui-progress, ui-select, ui-switch, ui-textarea


### AI Workspace Share Dialog

Publish and shared link dialog for chat transcripts.

- id: `ai-workspace-share-dialog`
- Page: https://agentic-ui-kit.com/components/ai-workspace-share-dialog
- Live preview: https://agentic-ui-kit.com/live/fixture/ai-workspace-share-dialog?piece=ai-workspace-share-dialog

## Install

```bash
agentic-ui add ai-workspace-share-dialog
npx shadcn@4.17.0 add @agentic-ui/ai-workspace-share-dialog
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Quillmind AI Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** privacy-level-selection, copy-link-action, plan-badge-indicator, security-explanation
- **Intents:** configure, execute-flow
- **Suits domains:** ai-workspace, devtools, project-management, saas
- **Interaction:** privacy-option-click, copy-link-click
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** publish and shared link dialog for chat transcripts, modal for configuring access permissions to a document or project, invite flow and link permissions for teams
- **Avoid when:** management of complex ACL permissions at the attribute or directory role level
- **Preserve when adapting:** privacy-level-card-layout, copy-feedback-state, dialog-frame
- **Replace when adapting:** privacy-levels, link-generation-endpoint, plan-restrictions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** dialog, button, badge
- **npm dependencies:** lucide-react
- **Used in:** Quillmind AI Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-ai-workspace-utils, ui-badge, ui-button, ui-dialog


### Core Budget Progress

Project budget consumption.

- id: `core-budget-progress`
- Page: https://agentic-ui-kit.com/components/core-budget-progress
- Live preview: https://agentic-ui-kit.com/live/piece/core-budget-progress?piece=core-budget-progress

## Install

```bash
agentic-ui add core-budget-progress
npx shadcn@4.17.0 add @agentic-ui/core-budget-progress
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** budget-burn-rate, percentage-fill, remaining-amount, status-color
- **Intents:** track-status, show-composition
- **Suits domains:** finance, billing, operations, project-management
- **Interaction:** hover-details
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Project budget consumption, Accumulated monthly spend vs limit
- **Avoid when:** Metrics without a defined limit or maximum cap
- **Preserve when adapting:** progress-bar-design, metric-callout-layout
- **Replace when adapting:** budget-thresholds, currency-symbol
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, progress, badge
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-card, ui-admin-kit-progress


### Core Dashboard Analytics

Main corporate administration panel.

- id: `core-dashboard-analytics`
- Page: https://agentic-ui-kit.com/components/core-dashboard-analytics
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/dashboard-10?piece=core-dashboard-analytics

## Install

```bash
agentic-ui add core-dashboard-analytics
npx shadcn@4.17.0 add @agentic-ui/core-dashboard-analytics
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, revenue-timeseries, traffic-breakdown, geographical-distribution
- **Intents:** compare-over-time, show-composition, track-status
- **Suits domains:** saas, analytics, operations, finance, ecommerce
- **Interaction:** tab-filter, chart-hover, date-select
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Main corporate administration panel, Executive dashboard of key metrics
- **Avoid when:** Single-purpose views with a single data point
- **Preserve when adapting:** kpi-header-grid, overview-chart-hierarchy
- **Replace when adapting:** metric-sources, currency-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button, tabs
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template), Analytics (blueprint), SaaS Admin Starter (blueprint), SaaS Backoffice (blueprint)
- **npm dependencies (registry):** @tabler/icons-react@^3.41.1, @tanstack/react-table@^8.21.3, date-fns@4.1.0, lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-chart, ui-admin-kit-checkbox, ui-admin-kit-command, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-popover, ui-admin-kit-tabs, ui-admin-kit-tooltip, ui-calendar, ui-table


### Core Dashboard Finance

Budget allocation dashboard.

- id: `core-dashboard-finance`
- Page: https://agentic-ui-kit.com/components/core-dashboard-finance
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/dashboard-12?piece=core-dashboard-finance

## Install

```bash
agentic-ui add core-dashboard-finance
npx shadcn@4.17.0 add @agentic-ui/core-dashboard-finance
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** budget-tracking, radar-analysis, stacked-barchart, cost-breakdown
- **Intents:** compare-over-time, show-composition
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** radar-hover, legend-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Budget allocation dashboard, Tracking operating costs by department
- **Avoid when:** Views without multidimensional numeric data
- **Preserve when adapting:** radar-chart-geometry, budget-progress-cards
- **Replace when adapting:** budget-categories, fiscal-periods
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button, progress
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @tabler/icons-react@^3.41.1, date-fns@4.1.0, lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** core-budget-progress, core-radar-metric-card, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-chart, ui-admin-kit-popover, ui-calendar


### Core Dashboard Operations

Live operations monitoring panel.

- id: `core-dashboard-operations`
- Page: https://agentic-ui-kit.com/components/core-dashboard-operations
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/original/dashboard-11?piece=core-dashboard-operations

## Install

```bash
agentic-ui add core-dashboard-operations
npx shadcn@4.17.0 add @agentic-ui/core-dashboard-operations
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** realtime-visitors, activity-feed, conversion-funnel, kpi-stats
- **Intents:** monitor-live, track-status, audit-trail
- **Suits domains:** operations, saas, analytics, ecommerce
- **Interaction:** live-refresh, activity-click
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Live operations monitoring panel, Support and telemetry dashboard
- **Avoid when:** Exclusively historical analysis without real time
- **Preserve when adapting:** live-activity-stream, visitor-counter-card
- **Replace when adapting:** event-sources, visitor-metrics
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button, avatar
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @faker-js/faker@^10.3.0, @tabler/icons-react@^3.41.1, date-fns@4.1.0, lucide-react@0.577.0, recharts@3.8.1, zod@4.3.6
- **Registry dependencies:** core-visitor-stats-card, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-chart, ui-admin-kit-select, ui-table


### Core Radar Metric Card

Assessment of competencies or skills.

- id: `core-radar-metric-card`
- Page: https://agentic-ui-kit.com/components/core-radar-metric-card
- Live preview: https://agentic-ui-kit.com/live/piece/core-radar-metric-card?piece=core-radar-metric-card

## Install

```bash
agentic-ui add core-radar-metric-card
npx shadcn@4.17.0 add @agentic-ui/core-radar-metric-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** radar-chart, multi-axis-comparison, category-scoring
- **Intents:** show-composition, compare-over-time
- **Suits domains:** analytics, finance, saas, operations
- **Interaction:** axis-hover
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Assessment of competencies or skills, Spending distribution by cost center
- **Avoid when:** Continuous chronological series of more than 8 points
- **Preserve when adapting:** polar-grid-styling, polygon-accent-stroke
- **Replace when adapting:** dimension-axes, metric-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** recharts@3.8.1
- **Registry dependencies:** ui-admin-kit-card, ui-admin-kit-chart


### Core Tasks Detail Viewer

Technical issue viewer.

- id: `core-tasks-detail-viewer`
- Page: https://agentic-ui-kit.com/components/core-tasks-detail-viewer
- Live preview: https://agentic-ui-kit.com/live/fixture/core-tasks-detail-viewer?activate=button&piece=core-tasks-detail-viewer

## Install

```bash
agentic-ui add core-tasks-detail-viewer
npx shadcn@4.17.0 add @agentic-ui/core-tasks-detail-viewer
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** task-inspection, metadata-grid, status-transition, priority-visualizer
- **Intents:** explore-detail, track-status
- **Suits domains:** project-management, operations, saas, devtools
- **Interaction:** open-view, copy-task-id, close-modal
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Technical issue viewer, Quick sheet for the selected task
- **Avoid when:** Bulk editing of records
- **Preserve when adapting:** detail-grid-structure, metadata-row-format
- **Replace when adapting:** task-fields, badge-variants
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** dialog, badge, button, separator
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @tabler/icons-react@^3.41.1, zod@4.3.6
- **Registry dependencies:** ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dialog


### Core Users KPI Stats

Counters of active and invited users.

- id: `core-users-kpi-stats`
- Page: https://agentic-ui-kit.com/components/core-users-kpi-stats
- Live preview: https://agentic-ui-kit.com/live/piece/core-users-kpi-stats?piece=core-users-kpi-stats

## Install

```bash
agentic-ui add core-users-kpi-stats
npx shadcn@4.17.0 add @agentic-ui/core-users-kpi-stats
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** total-users-counter, active-now-counter, role-counts, trend-pill
- **Intents:** track-status, show-composition
- **Suits domains:** saas, operations, auth, analytics
- **Interaction:** stat-card-click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Counters of active and invited users, Summary of assigned licenses
- **Avoid when:** Views with no aggregate metrics
- **Preserve when adapting:** kpi-card-metrics-layout, icon-wrapper-style
- **Replace when adapting:** stat-computation-logic, card-titles
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @tabler/icons-react@^3.41.1, zod@4.3.6
- **Registry dependencies:** ui-admin-kit-card, ui-admin-kit-tooltip


### Core Visitor Stats Card

Quick view of daily traffic.

- id: `core-visitor-stats-card`
- Page: https://agentic-ui-kit.com/components/core-visitor-stats-card
- Live preview: https://agentic-ui-kit.com/live/piece/core-visitor-stats-card?piece=core-visitor-stats-card

## Install

```bash
agentic-ui add core-visitor-stats-card
npx shadcn@4.17.0 add @agentic-ui/core-visitor-stats-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** daily-visitors, bar-distribution, growth-percentage
- **Intents:** compare-over-time, track-status
- **Suits domains:** analytics, saas, ecommerce, operations
- **Interaction:** bar-hover
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Quick view of daily traffic, Active sessions counter
- **Avoid when:** Detailed views with multiple filters
- **Preserve when adapting:** micro-barchart-layout, growth-pill-badge
- **Replace when adapting:** visitor-counts, time-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** ui-admin-kit-card, ui-admin-kit-chart


### Dashboard Embed Chart

Monthly revenue vs operating costs chart that a finance lead downloads as a branded PNG for a board deck.

- id: `dashboard-embed-chart`
- Page: https://agentic-ui-kit.com/components/dashboard-embed-chart
- Live preview: https://agentic-ui-kit.com/live/fixture/dashboard-embed-chart?piece=dashboard-embed-chart

## Install

```bash
agentic-ui add dashboard-embed-chart
npx shadcn@4.17.0 add @agentic-ui/dashboard-embed-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** timeseries, comparison, chart-type-switching, series-toggle, tooltip, keyboard-inspection, brand-theming, png-export, svg-export, csv-export, iframe-embed-code, embed-route-options, empty-and-error-states
- **Intents:** compare-over-time, import-export, show-composition
- **Suits domains:** analytics, saas, finance, billing, operations, ecommerce
- **Interaction:** tooltip, keyboard-inspection, chart-type-switch, series-toggle, export-download, copy-embed-code, retry-action
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Monthly revenue vs operating costs chart that a finance lead downloads as a branded PNG for a board deck, Customer-facing usage chart embedded in a help-center article through the generated iframe snippet, Weekly uptime chart exported as CSV for an SLA report
- **Avoid when:** The chart must stream live updates every few seconds (use a monitoring timeseries without export), Data is hierarchical or flow-based, such as funnels or Sankey diagrams (use the dedicated chart blocks), Exports must be generated server-side for scheduled email reports
- **Preserve when adapting:** branded-header-and-attribution, export-and-embed-dialog-flow, keyboard-inspection-contract, embed-url-parameters
- **Replace when adapting:** brand-name-mark-and-accent, series-and-categories, value-formatting, embed-base-url
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** card, button, dialog, tabs, switch, input, textarea, label, alert, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Devtools Add Webhook Modal

Modal to register a new webhook.

- id: `devtools-add-webhook-modal`
- Page: https://agentic-ui-kit.com/components/devtools-add-webhook-modal
- Live preview: https://agentic-ui-kit.com/live/piece/devtools-add-webhook-modal?activate=button&piece=devtools-add-webhook-modal

## Install

```bash
agentic-ui add devtools-add-webhook-modal
npx shadcn@4.17.0 add @agentic-ui/devtools-add-webhook-modal
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** url-validation, event-multiselect, secret-generation, form-modal
- **Intents:** create-edit, configure
- **Suits domains:** devtools, saas, operations, payments
- **Interaction:** enter-url, select-events, submit-webhook
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Modal to register a new webhook, Webhook event subscription form
- **Avoid when:** Embedded views without a modal dialog
- **Preserve when adapting:** event-checkbox-grid, form-action-buttons
- **Replace when adapting:** available-events-list, url-validation-rules
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** dialog, button, input, checkbox
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @faker-js/faker@^10.3.0, @hookform/resolvers@^5.2.2, lucide-react@0.577.0, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-input, ui-admin-kit-sheet, ui-admin-kit-textarea, ui-form, ui-radio-group


### Devtools API Latency Chart

Latency SLA monitoring.

- id: `devtools-api-latency-chart`
- Page: https://agentic-ui-kit.com/components/devtools-api-latency-chart
- Live preview: https://agentic-ui-kit.com/live/piece/devtools-api-latency-chart?piece=devtools-api-latency-chart

## Install

```bash
agentic-ui add devtools-api-latency-chart
npx shadcn@4.17.0 add @agentic-ui/devtools-api-latency-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** latency-tracking, percentile-comparison, threshold-alerting
- **Intents:** compare-over-time, track-status
- **Suits domains:** devtools, operations, saas, analytics
- **Interaction:** line-hover, range-zoom
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Latency SLA monitoring, Microservice response times
- **Avoid when:** Discrete or categorical metrics
- **Preserve when adapting:** line-chart-curve, latency-threshold-markers
- **Replace when adapting:** latency-samples, service-names
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-card, ui-admin-kit-chart


### Devtools API Requests Chart

Hourly API call volume.

- id: `devtools-api-requests-chart`
- Page: https://agentic-ui-kit.com/components/devtools-api-requests-chart
- Live preview: https://agentic-ui-kit.com/live/piece/devtools-api-requests-chart?piece=devtools-api-requests-chart

## Install

```bash
agentic-ui add devtools-api-requests-chart
npx shadcn@4.17.0 add @agentic-ui/devtools-api-requests-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** timeseries, request-volume, status-breakdown, range-selector
- **Intents:** compare-over-time, monitor-live
- **Suits domains:** devtools, operations, saas, fintech
- **Interaction:** bar-hover, time-window-change
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Hourly API call volume, Payment gateway throughput monitoring
- **Avoid when:** Metrics with no continuous temporal component
- **Preserve when adapting:** recharts-configuration, time-axis-formatting, status-palette
- **Replace when adapting:** request-series-data, metric-unit
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template), AI App (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-card, ui-admin-kit-chart


### Devtools Audit Log Table

Server HTTP logs table.

- id: `devtools-audit-log-table`
- Page: https://agentic-ui-kit.com/components/devtools-audit-log-table
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/developers/events-&-logs?piece=devtools-audit-log-table

## Install

```bash
agentic-ui add devtools-audit-log-table
npx shadcn@4.17.0 add @agentic-ui/devtools-audit-log-table
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** faceted-filtering, row-expansion, status-pill, monospace-id
- **Intents:** audit-trail, manage-collection
- **Suits domains:** devtools, operations, billing, saas
- **Interaction:** row-click, copy-event-id
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Server HTTP logs table, Security events viewer
- **Avoid when:** Tables without a need for dense display
- **Preserve when adapting:** column-alignment-rules, http-method-color-coding
- **Replace when adapting:** log-fields, row-details-renderer
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** table, badge, button
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @tabler/icons-react@^3.41.1
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-popover, ui-admin-kit-tooltip, ui-table


### Devtools Overview

API control panel.

- id: `devtools-overview`
- Page: https://agentic-ui-kit.com/components/devtools-overview
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/developers/overview?piece=devtools-overview

## Install

```bash
agentic-ui add devtools-overview
npx shadcn@4.17.0 add @agentic-ui/devtools-overview
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** api-metrics, latency-monitoring, visitor-analytics, activity-feed
- **Intents:** monitor-live, compare-over-time
- **Suits domains:** devtools, saas, operations, analytics
- **Interaction:** period-filter, chart-hover, refresh-metrics
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** API control panel, Telemetry and service health dashboard
- **Avoid when:** Systems with no API endpoints or network traffic
- **Preserve when adapting:** telemetry-grid-layout, chart-grammar, metric-card-structure
- **Replace when adapting:** api-endpoints-mock, metric-labels, domain-brand
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button, tabs
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @radix-ui/react-icons@^1.3.2, @tabler/icons-react@^3.41.1, react-day-picker-v9@npm:react-day-picker@^9.14.0
- **Registry dependencies:** devtools-api-latency-chart, devtools-api-requests-chart, devtools-recent-activity-feed, devtools-visitor-traffic-chart, ui-admin-kit-button, ui-admin-kit-popover, ui-admin-kit-select, ui-admin-kit-separator, ui-calendar


### Devtools Recent Activity Feed

Latest keys created.

- id: `devtools-recent-activity-feed`
- Page: https://agentic-ui-kit.com/components/devtools-recent-activity-feed
- Live preview: https://agentic-ui-kit.com/live/piece/devtools-recent-activity-feed?piece=devtools-recent-activity-feed

## Install

```bash
agentic-ui add devtools-recent-activity-feed
npx shadcn@4.17.0 add @agentic-ui/devtools-recent-activity-feed
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** event-chronology, actor-tagging, status-icons, relative-timestamps
- **Intents:** audit-trail, track-status
- **Suits domains:** devtools, saas, operations, crm
- **Interaction:** event-click, view-all-link
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Latest keys created, Dispatched webhook events, Recent deployments
- **Avoid when:** Non-chronological lists or static catalogs
- **Preserve when adapting:** timeline-connector-styling, status-icon-mapping
- **Replace when adapting:** event-payloads, actor-identities
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, avatar
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-card


### Devtools Webhook Detail

Webhook endpoint detail with delivery history.

- id: `devtools-webhook-detail`
- Page: https://agentic-ui-kit.com/components/devtools-webhook-detail
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/developers/webhooks?follow=%5E%5C%2Fdevelopers%5C%2Fwebhooks%5C%2F%5B%5E%2F%5D%2B%24&piece=devtools-webhook-detail

## Install

```bash
agentic-ui add devtools-webhook-detail
npx shadcn@4.17.0 add @agentic-ui/devtools-webhook-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** delivery-logs, retry-dispatch, payload-viewer, secret-management
- **Intents:** explore-detail, audit-trail, track-status
- **Suits domains:** devtools, saas, operations, payments
- **Interaction:** retry-delivery, view-payload, rotate-secret
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Webhook endpoint detail with delivery history, Retry debugging viewer
- **Avoid when:** General listings without a selected entity
- **Preserve when adapting:** inspector-header-layout, delivery-log-columns
- **Replace when adapting:** endpoint-metadata, delivery-attempts-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, button, badge, table, tabs
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @faker-js/faker@^10.3.0, @hookform/resolvers@^5.2.2, date-fns@4.1.0, lucide-react@0.577.0, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** devtools-webhook-logs-table, lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-sheet, ui-admin-kit-textarea, ui-alert-dialog, ui-form, ui-radio-group


### Devtools Webhooks

Catalog of webhook endpoints.

- id: `devtools-webhooks`
- Page: https://agentic-ui-kit.com/components/devtools-webhooks
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/developers/webhooks?piece=devtools-webhooks

## Install

```bash
agentic-ui add devtools-webhooks
npx shadcn@4.17.0 add @agentic-ui/devtools-webhooks
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** endpoint-registration, event-subscription, secret-signing, health-status
- **Intents:** configure, manage-collection, track-status
- **Suits domains:** devtools, saas, operations, payments
- **Interaction:** add-endpoint, toggle-enabled, view-delivery-history
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Catalog of webhook endpoints, Outgoing event subscriptions
- **Avoid when:** Systems without event-driven integration
- **Preserve when adapting:** webhook-row-layout, event-tag-badges
- **Replace when adapting:** event-catalog, signature-algorithm-notes
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, button, badge, table, dialog, dropdown-menu
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template), SaaS Backoffice (blueprint)
- **npm dependencies (registry):** @faker-js/faker@^10.3.0, @radix-ui/react-icons@^1.3.2, @tabler/icons-react@^3.41.1, @tanstack/react-table@^8.21.3, lucide-react@0.577.0, zod@4.3.6
- **Registry dependencies:** devtools-add-webhook-modal, devtools-webhooks-table, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-popover, ui-admin-kit-tooltip


### Docs Template Gallery

Gallery of document templates (contracts, proposals, reports) in a collaborative editor.

- id: `docs-template-gallery`
- Page: https://agentic-ui-kit.com/components/docs-template-gallery
- Live preview: https://agentic-ui-kit.com/live/component/docs-template-gallery

## Install

```bash
agentic-ui add docs-template-gallery
npx shadcn@4.17.0 add @agentic-ui/docs-template-gallery
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** card-grid, document-preview, preview-dialog, search-filter, category-filter, sort, favorites, keyboard-navigation, use-template-action, empty-loading-error-states
- **Intents:** manage-collection, create-edit, explore-detail
- **Suits domains:** knowledge, notes, saas, file-storage, project-management
- **Interaction:** search-filter, category-chips, sort, favorite-toggle, preview-dialog, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** gallery of document templates (contracts, proposals, reports) in a collaborative editor, 'new document' starting point in a block-based workspace with a preview before creating, library of page or form templates in a SaaS panel with per-user favorites, catalog of project or meeting templates in a management tool
- **Avoid when:** collections of arbitrary files with no notion of template (use file-storage-collections-grid), dense listings that require a table with column sorting and bulk selection
- **Preserve when adapting:** card-grid-hierarchy, preview-before-use, roving-keyboard-model, filter-toolbar
- **Replace when adapting:** template-content, categories, thumbnail-renderer, token-palette, locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** alert, badge, button, dialog, input, scroll-area, select, separator, skeleton
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Mobile Bottom Sheet

Order detail with delivery tracking opened from a card on mobile.

- id: `mobile-bottom-sheet`
- Page: https://agentic-ui-kit.com/components/mobile-bottom-sheet
- Live preview: https://agentic-ui-kit.com/live/component/mobile-bottom-sheet

## Install

```bash
agentic-ui add mobile-bottom-sheet
npx shadcn@4.17.0 add @agentic-ui/mobile-bottom-sheet
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** snap-points, drag-to-dismiss, drag-handle, keyboard-snap-controls, focus-trap, escape-dismiss, snap-point-announcement, controlled-and-uncontrolled, empty-state-handling, error-recovery, scrollable-body, footer-actions
- **Intents:** explore-detail, track-status, configure, execute-flow
- **Suits domains:** ecommerce, logistics, saas, personal-productivity, operations
- **Interaction:** drag, snap-to-height, keyboard-navigation, escape-dismiss, focus-trap, tap
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** order detail with delivery tracking opened from a card on mobile, filter sheet that expands to half height and then to full screen, confirmation of an action with primary actions pinned to the sheet footer, detail panel with no content yet that shows its empty state inside the sheet
- **Avoid when:** long-form reading content, where a full detail page is appropriate, permanent navigation between sections, which corresponds to a bottom destinations bar
- **Preserve when adapting:** snap-point-model, focus-and-dismiss-behaviour, handle-affordance, keyboard-snap-controls
- **Replace when adapting:** domain-copy, body-content, footer-actions, icon-set
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** badge, button
- **npm dependencies:** vaul, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0, vaul@1.1.2


### Pm Dashboard Executive

Main project management panel.

- id: `pm-dashboard-executive`
- Page: https://agentic-ui-kit.com/components/pm-dashboard-executive
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/dashboard-1?piece=pm-dashboard-executive

## Install

```bash
agentic-ui add pm-dashboard-executive
npx shadcn@4.17.0 add @agentic-ui/pm-dashboard-executive
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** metrics-summary, project-progress, work-hour-chart, task-breakdown, team-workload, recent-activities
- **Intents:** track-status, compare-over-time
- **Suits domains:** project-management, saas, operations, analytics, devtools
- **Interaction:** filter-by-date, chart-tooltip, status-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Main project management panel, Tracking team hours and tasks, Executive view of progress and performance
- **Avoid when:** Applications without time metrics or task tracking
- **Preserve when adapting:** kpi-card-grid, work-hour-chart-layout, project-progress-table
- **Replace when adapting:** mock-project-data, domain-labels, brand-accent-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button, progress, select, table, avatar
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, asset-admin-kit-images-project-backgrounds-1-png, asset-admin-kit-images-project-backgrounds-10-png, asset-admin-kit-images-project-backgrounds-11-png, asset-admin-kit-images-project-backgrounds-12-png, asset-admin-kit-images-project-backgrounds-2-png, asset-admin-kit-images-project-backgrounds-3-png, asset-admin-kit-images-project-backgrounds-4-png, asset-admin-kit-images-project-backgrounds-5-png, asset-admin-kit-images-project-backgrounds-6-png, asset-admin-kit-images-project-backgrounds-7-png, asset-admin-kit-images-project-backgrounds-8-png, asset-admin-kit-images-project-backgrounds-9-png, lib-admin-kit-utils, pm-work-hour-analysis-card, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-sheet, ui-admin-kit-tabs


### Pm Issue Detail Workspace

Detailed issue record in the style of Linear or Jira.

- id: `pm-issue-detail-workspace`
- Page: https://agentic-ui-kit.com/components/pm-issue-detail-workspace
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-detail-1?piece=pm-issue-detail-workspace

## Install

```bash
agentic-ui add pm-issue-detail-workspace
npx shadcn@4.17.0 add @agentic-ui/pm-issue-detail-workspace
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** rich-description, metadata-panel, linked-assets, subtask-list, comment-stream
- **Intents:** explore-detail, create-edit
- **Suits domains:** project-management, devtools, saas, support
- **Interaction:** tab-switch, status-change, assignee-select, add-subtask
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Detailed issue record in the style of Linear or Jira, Workspace for resolving bugs and features
- **Avoid when:** Listings or summary views without focus on a single item
- **Preserve when adapting:** issue-layout-grid, property-sidebar-structure
- **Replace when adapting:** issue-status-taxonomy, custom-fields
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, badge, avatar, tabs, separator, textarea, select
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-figma-png, asset-admin-kit-pdf-png, asset-admin-kit-zip-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-sheet


### Pm Issue Details Sheet

Quick issue inspection without navigating away from the Kanban board.

- id: `pm-issue-details-sheet`
- Page: https://agentic-ui-kit.com/components/pm-issue-details-sheet
- Live preview: https://agentic-ui-kit.com/live/fixture/pm-issue-details-sheet?piece=pm-issue-details-sheet

## Install

```bash
agentic-ui add pm-issue-details-sheet
npx shadcn@4.17.0 add @agentic-ui/pm-issue-details-sheet
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** side-drawer-inspect, live-status-update, comment-box, metadata-editor
- **Intents:** explore-detail
- **Suits domains:** project-management, devtools, saas, support
- **Interaction:** tab-navigation, inline-comment-send, status-change
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Quick issue inspection without navigating away from the Kanban board, Task detail side panel for compact views
- **Avoid when:** Views that already have a dedicated full issue page
- **Preserve when adapting:** sheet-layout-tabs, property-editor-widgets
- **Replace when adapting:** status-workflow, custom-attributes
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** sheet, button, badge, avatar, tabs, textarea, select
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** ui-admin-kit-button, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-sheet, ui-admin-kit-textarea, ui-field


### Pm Issue Kanban Board

Trello- or keyboard-first Kanban board for development.

- id: `pm-issue-kanban-board`
- Page: https://agentic-ui-kit.com/components/pm-issue-kanban-board
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-kanban-1?piece=pm-issue-kanban-board

## Install

```bash
agentic-ui add pm-issue-kanban-board
npx shadcn@4.17.0 add @agentic-ui/pm-issue-kanban-board
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** column-workflow, card-dragging, issue-creation, tag-filtering, assignee-avatars
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, devtools, saas, operations
- **Interaction:** drag-card, add-issue-trigger, card-click, filter-by-tag
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Trello- or keyboard-first Kanban board for development, Tracking of the task pipeline and delivery states
- **Avoid when:** Massive tabular data where a spreadsheet grid is preferred
- **Preserve when adapting:** kanban-column-container, task-card-anatomy
- **Replace when adapting:** workflow-columns, tag-taxonomies
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, badge, avatar, card, scroll-area, dropdown-menu
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template), CRM (blueprint), People Operations (blueprint), Project Delivery (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-black-2-png, lib-admin-kit-utils, pm-create-issue-sheet, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-dropdown-menu


### Pm Issue Kanban Status Bar

Interactive kanban with a quick filters bar and view controls.

- id: `pm-issue-kanban-status-bar`
- Page: https://agentic-ui-kit.com/components/pm-issue-kanban-status-bar
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-kanban-3?piece=pm-issue-kanban-status-bar

## Install

```bash
agentic-ui add pm-issue-kanban-status-bar
npx shadcn@4.17.0 add @agentic-ui/pm-issue-kanban-status-bar
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** status-toolbar, open-board-state, filter-presets, board-settings
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, devtools, saas, operations
- **Interaction:** bottom-toolbar-toggle, preset-filter-click
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Interactive kanban with a quick filters bar and view controls, Sprint triage surface with a status panel
- **Avoid when:** Mobile flows with very restricted height
- **Preserve when adapting:** floating-status-bar, board-control-layout
- **Replace when adapting:** filter-presets, view-actions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, badge, avatar, card, scroll-area
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **Registry dependencies:** pm-issue-kanban-board


### Pm Issue Kanban With Stats

Kanban board with aggregated metrics per column.

- id: `pm-issue-kanban-with-stats`
- Page: https://agentic-ui-kit.com/components/pm-issue-kanban-with-stats
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-kanban-2?piece=pm-issue-kanban-with-stats

## Install

```bash
agentic-ui add pm-issue-kanban-with-stats
npx shadcn@4.17.0 add @agentic-ui/pm-issue-kanban-with-stats
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** column-workflow, cumulative-stats, wip-limits, velocity-indicators
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, devtools, saas, operations
- **Interaction:** stat-badge-inspect, drag-card
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Kanban board with aggregated metrics per column, Flow management with WIP (Work in Progress) limits
- **Avoid when:** Minimalist visualizations with no need for column KPIs
- **Preserve when adapting:** stat-summary-bar, kanban-column-layout
- **Replace when adapting:** kpi-definitions, limit-thresholds
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, badge, avatar, card, scroll-area
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **Registry dependencies:** pm-issue-kanban-board


### Pm Issue List Table

Listing of issues and backlog in tabular format.

- id: `pm-issue-list-table`
- Page: https://agentic-ui-kit.com/components/pm-issue-list-table
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-list-1?piece=pm-issue-list-table

## Install

```bash
agentic-ui add pm-issue-list-table
npx shadcn@4.17.0 add @agentic-ui/pm-issue-list-table
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** tabular-view, column-sorting, status-badges, assignee-filter, pagination
- **Intents:** manage-collection, explore-detail
- **Suits domains:** project-management, devtools, saas, support
- **Interaction:** sort-column, filter-assignee, pagination-next-prev, row-click
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Listing of issues and backlog in tabular format, Table view for quick ticket review
- **Avoid when:** Visual flows where dependencies or the kanban are primary
- **Preserve when adapting:** data-table-structure, column-definition-schema
- **Replace when adapting:** issue-statuses, priority-weights
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** table, button, badge, avatar, input, dropdown-menu, pagination
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-black-2-png, lib-admin-kit-utils, pm-create-issue-sheet, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-dropdown-menu


### Pm Member List Directory

Engineering team member directory.

- id: `pm-member-list-directory`
- Page: https://agentic-ui-kit.com/components/pm-member-list-directory
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/member-list-1?piece=pm-member-list-directory

## Install

```bash
agentic-ui add pm-member-list-directory
npx shadcn@4.17.0 add @agentic-ui/pm-member-list-directory
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** member-search, role-filtering, contact-actions, status-indicator, workload-badge
- **Intents:** manage-collection, explore-detail
- **Suits domains:** project-management, hr, saas, operations
- **Interaction:** search-by-name, filter-by-role, view-profile
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Engineering team member directory, Catalog of members and project assignments
- **Avoid when:** Single-person systems with no user directory
- **Preserve when adapting:** member-card-grid, search-filter-header
- **Replace when adapting:** role-options, department-taxonomies
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** input, button, badge, avatar, select, card
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-command, ui-admin-kit-popover, ui-admin-kit-tooltip


### Pm Project Description Editor

Editor for project descriptions and specifications with rich formatting.

- id: `pm-project-description-editor`
- Page: https://agentic-ui-kit.com/components/pm-project-description-editor
- Live preview: https://agentic-ui-kit.com/live/piece/pm-project-description-editor?piece=pm-project-description-editor

## Install

```bash
agentic-ui add pm-project-description-editor
npx shadcn@4.17.0 add @agentic-ui/pm-project-description-editor
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** wysiwyg-toolbar, formatting-controls, heading-levels, list-bullets, code-block
- **Intents:** create-edit
- **Suits domains:** project-management, notes, knowledge, saas
- **Interaction:** toggle-format, type-content
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Editor for project descriptions and specifications with rich formatting, WYSIWYG editor for meeting notes and collaborative documentation
- **Avoid when:** Single-line plain text input fields
- **Preserve when adapting:** tiptap-toolbar-actions, editor-canvas-styling
- **Replace when adapting:** toolbar-buttons, placeholder-text
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, separator, toggle, toggle-group
- **npm dependencies:** lucide-react, @tiptap/react, @tiptap/starter-kit
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @tiptap/extension-placeholder@^3.24.0, @tiptap/extension-task-item@^3.24.0, @tiptap/extension-task-list@^3.24.0, @tiptap/react@^3.24.0, @tiptap/starter-kit@^3.24.0, lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils


### Pm Project Detail Overview

Command center for a single project with files, notes and tasks.

- id: `pm-project-detail-overview`
- Page: https://agentic-ui-kit.com/components/pm-project-detail-overview
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/project-detail-1?piece=pm-project-detail-overview

## Install

```bash
agentic-ui add pm-project-detail-overview
npx shadcn@4.17.0 add @agentic-ui/pm-project-detail-overview
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** project-tabs, header-stats, contributors-rail, asset-files, task-backlog, notes-feed
- **Intents:** explore-detail, track-status
- **Suits domains:** project-management, saas, operations, devtools
- **Interaction:** switch-tab, upload-file-modal, create-note-modal, task-status-toggle
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Command center for a single project with files, notes and tasks, Comprehensive space for managing client deliverables
- **Avoid when:** Listings or dashboards with no focus on a single project
- **Preserve when adapting:** project-workspace-shell, metadata-rail-layout
- **Replace when adapting:** project-tab-structure, kpi-definitions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** tabs, button, badge, avatar, card, progress, separator, table
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, sonner@^2.0.7
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-figma-png, asset-admin-kit-pdf-png, asset-admin-kit-zip-png, lib-admin-kit-utils, pm-issue-gantt-roadmap, pm-issue-kanban-board, pm-issue-spreadsheet-grid, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-separator, ui-admin-kit-sheet, ui-admin-kit-skeleton, ui-admin-kit-tabs, ui-admin-kit-tooltip


### Pm Project List Cards

Visual catalog of the company's active projects.

- id: `pm-project-list-cards`
- Page: https://agentic-ui-kit.com/components/pm-project-list-cards
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/project-list-1?piece=pm-project-list-cards

## Install

```bash
agentic-ui add pm-project-list-cards
npx shadcn@4.17.0 add @agentic-ui/pm-project-list-cards
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** project-grid, progress-bar, deadline-badge, team-avatars, search-bar
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, saas, operations, devtools
- **Interaction:** search-projects, card-click, status-filter
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Visual catalog of the company's active projects, Project portfolio view for clients
- **Avoid when:** Managing thousands of projects where a paginated table is essential
- **Preserve when adapting:** project-card-anatomy, progress-indicator-style
- **Replace when adapting:** project-status-types, mock-projects
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button, avatar, progress, input
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, asset-admin-kit-images-project-backgrounds-1-png, asset-admin-kit-images-project-backgrounds-10-png, asset-admin-kit-images-project-backgrounds-11-png, asset-admin-kit-images-project-backgrounds-12-png, asset-admin-kit-images-project-backgrounds-2-png, asset-admin-kit-images-project-backgrounds-3-png, asset-admin-kit-images-project-backgrounds-4-png, asset-admin-kit-images-project-backgrounds-5-png, asset-admin-kit-images-project-backgrounds-6-png, asset-admin-kit-images-project-backgrounds-7-png, asset-admin-kit-images-project-backgrounds-8-png, asset-admin-kit-images-project-backgrounds-9-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select


### Pm Team List Grid

Catalog of agile teams and technical squads.

- id: `pm-team-list-grid`
- Page: https://agentic-ui-kit.com/components/pm-team-list-grid
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/team-list-1?piece=pm-team-list-grid

## Install

```bash
agentic-ui add pm-team-list-grid
npx shadcn@4.17.0 add @agentic-ui/pm-team-list-grid
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** team-cards, lead-avatar, member-count, active-projects-list, department-filter
- **Intents:** manage-collection, explore-detail
- **Suits domains:** project-management, hr, saas, operations
- **Interaction:** search-team, filter-department, card-click
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Catalog of agile teams and technical squads, Engineering organizational structure by department
- **Avoid when:** Organizations without a team structure, or one-person projects
- **Preserve when adapting:** team-card-layout, avatar-stack-component
- **Replace when adapting:** department-tags, team-names
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, avatar, button, input
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-command, ui-admin-kit-popover, ui-admin-kit-tooltip


### Pm Work Hour Analysis Card

Billable hours analysis card in management dashboards.

- id: `pm-work-hour-analysis-card`
- Page: https://agentic-ui-kit.com/components/pm-work-hour-analysis-card
- Live preview: https://agentic-ui-kit.com/live/piece/pm-work-hour-analysis-card?piece=pm-work-hour-analysis-card

## Install

```bash
agentic-ui add pm-work-hour-analysis-card
npx shadcn@4.17.0 add @agentic-ui/pm-work-hour-analysis-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** timeseries-barchart, billable-vs-nonbillable, date-range-toggle, summary-kpis
- **Intents:** compare-over-time, track-status
- **Suits domains:** project-management, finance, billing, operations, saas
- **Interaction:** range-toggle, chart-hover
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Billable hours analysis card in management dashboards, Time allocation metrics in timesheet applications
- **Avoid when:** Systems that do not track hours or time
- **Preserve when adapting:** bar-chart-configuration, kpi-stat-layout
- **Replace when adapting:** hour-categories, date-range-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button, select
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-card, ui-admin-kit-chart


### Project Management Issue Command Palette

Global issue search with Cmd+K.

- id: `project-management-issue-command-palette`
- Page: https://agentic-ui-kit.com/components/project-management-issue-command-palette
- Live preview: https://agentic-ui-kit.com/live/fixture/project-management-issue-command-palette?piece=project-management-issue-command-palette

## Install

```bash
agentic-ui add project-management-issue-command-palette
npx shadcn@4.17.0 add @agentic-ui/project-management-issue-command-palette
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** fuzzy-search, keyboard-navigation, status-preview, direct-navigation
- **Intents:** explore-detail, manage-collection
- **Suits domains:** project-management, devtools, saas, knowledge, personal-productivity
- **Interaction:** command-search, keyboard-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** global issue search with Cmd+K, quick navigation palette across tickets and projects, interactive record finder in an enterprise console
- **Avoid when:** advanced faceted search with complex boolean operators
- **Preserve when adapting:** search-input-layout, result-item-format, keybinding-handler
- **Replace when adapting:** result-data-source, item-action
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** command
- **npm dependencies:** cmdk, lucide-react, zustand
- **Used in:** Orbitra Project Hub (template), Project Delivery (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-project-hub-utils, project-management-issue-row


### Project Management Project Portfolio Table

Portfolio of strategic initiatives and active projects.

- id: `project-management-project-portfolio-table`
- Page: https://agentic-ui-kit.com/components/project-management-project-portfolio-table
- Live preview: https://agentic-ui-kit.com/live/piece/project-management-project-portfolio-table?piece=project-management-project-portfolio-table

## Install

```bash
agentic-ui add project-management-project-portfolio-table
npx shadcn@4.17.0 add @agentic-ui/project-management-project-portfolio-table
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** portfolio-list, health-indicator, progress-bar, lead-assignment, date-range-picker
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, operations, saas, billing, analytics
- **Interaction:** filter, popover-select, date-pick
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** portfolio of strategic initiatives and active projects, tracking team milestones and delivery deadlines, catalog of corporate initiatives with completion percentage
- **Avoid when:** granular tracking of individual subtasks at the ticket level
- **Preserve when adapting:** health-metric-progress-layout, column-proportions
- **Replace when adapting:** health-statuses, progress-formula, date-format
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, progress, popover, avatar
- **npm dependencies:** lucide-react, date-fns, zustand
- **Used in:** Orbitra Project Hub (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** project-management-project-summary-row


### Property Lease Tracker

Rental portfolio with renewal notices coming due.

- id: `property-lease-tracker`
- Page: https://agentic-ui-kit.com/components/property-lease-tracker
- Live preview: https://agentic-ui-kit.com/live/component/property-lease-tracker

## Install

```bash
agentic-ui add property-lease-tracker
npx shadcn@4.17.0 add @agentic-ui/property-lease-tracker
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** fixed-term-contracts, notice-window-tracking, derived-lifecycle-status, renewal-decision, rent-escalation, urgency-ordering, status-filtering, portfolio-search, exposure-summary, term-progress, empty-state
- **Intents:** track-status, manage-collection, explore-detail
- **Suits domains:** operations, finance, billing, saas, crm, logistics
- **Interaction:** filtering, search, row-selection, decision-actions, keyboard-activation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** rental portfolio with renewal notices coming due, commercial lease agreements with agreed rent escalation, service contracts with a fixed term and a cancellation window, licenses and policies that renew automatically if nobody acts before a date
- **Avoid when:** subscriptions that renew indefinitely until someone cancels, with no fixed term or notice period, listings of properties for sale, where there is no term or tenant, a single isolated obligation, which reads better as a detail than as a portfolio
- **Preserve when adapting:** notice-window-model, derived-status-from-dates, urgency-ordering, consequence-of-inaction
- **Replace when adapting:** domain-copy, currency-and-locale, status-thresholds, fixture-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** badge, button, card, input, label, progress, separator, table
- **Motion:** profile none, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### Tasks Activity Timeline

Change history for project tasks.

- id: `tasks-activity-timeline`
- Page: https://agentic-ui-kit.com/components/tasks-activity-timeline
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo/activity?piece=tasks-activity-timeline

## Install

```bash
agentic-ui add tasks-activity-timeline
npx shadcn@4.17.0 add @agentic-ui/tasks-activity-timeline
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** action-feed, timestamp-tracking, author-attribution, mutation-history
- **Intents:** audit-trail, track-status
- **Suits domains:** personal-productivity, project-management, saas, devtools
- **Interaction:** filter-by-user, inspect-change
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Change history for project tasks, User productivity log
- **Avoid when:** Read-only views without an operations history
- **Preserve when adapting:** vertical-timeline-styling, mutation-icon-set
- **Replace when adapting:** activity-event-types, user-metadata
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, avatar
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, nuqs@^2.8.9, zustand@5.0.8
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-command, ui-admin-kit-popover, ui-empty, ui-item


### Tasks Creator View

New task creation page.

- id: `tasks-creator-view`
- Page: https://agentic-ui-kit.com/components/tasks-creator-view
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo/tasks/new?piece=tasks-creator-view

## Install

```bash
agentic-ui add tasks-creator-view
npx shadcn@4.17.0 add @agentic-ui/tasks-creator-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** rich-description, date-picker, project-assignment, priority-flags
- **Intents:** create-edit
- **Suits domains:** personal-productivity, project-management, operations, saas
- **Interaction:** input-title, pick-due-date, assign-tags, save-task
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** New task creation page, Work ticket creation form
- **Avoid when:** Quick creation in a single text field
- **Preserve when adapting:** form-field-organization, metadata-selector-bar
- **Replace when adapting:** project-list, category-tags
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, input, textarea, button, select, badge
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0, sonner@^2.0.7, zustand@5.0.8
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-checkbox, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-scroll-area, ui-admin-kit-textarea, ui-drawer, ui-input-group


### Tasks Detail Modal

Full task detail with sub-items.

- id: `tasks-detail-modal`
- Page: https://agentic-ui-kit.com/components/tasks-detail-modal
- Live preview: https://agentic-ui-kit.com/live/fixture/tasks-detail-modal?piece=tasks-detail-modal

## Install

```bash
agentic-ui add tasks-detail-modal
npx shadcn@4.17.0 add @agentic-ui/tasks-detail-modal
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** subtask-checklist, comment-thread, date-picker, priority-selector
- **Intents:** explore-detail, create-edit, communicate
- **Suits domains:** personal-productivity, project-management, saas, crm
- **Interaction:** add-subtask, post-comment, change-priority, set-due-date
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Full task detail with sub-items, Activity record with comments
- **Avoid when:** Quick inline edit mode
- **Preserve when adapting:** two-column-modal-layout, subtask-progress-tracker
- **Replace when adapting:** custom-field-inputs, comment-author-model
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** dialog, button, input, textarea, checkbox, badge, avatar
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** frimousse@0.3.0, lucide-react@0.577.0, motion@12.23.24, react-day-picker-v9@npm:react-day-picker@^9.14.0, sonner@^2.0.7, zustand@5.0.8
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, lib-admin-kit-utils, ui-accordion, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-checkbox, ui-admin-kit-dialog, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-scroll-area, ui-admin-kit-textarea, ui-admin-kit-tooltip, ui-drawer, ui-input-group


### Tasks Important View

Tray of highlighted items.

- id: `tasks-important-view`
- Page: https://agentic-ui-kit.com/components/tasks-important-view
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo/important?piece=tasks-important-view

## Install

```bash
agentic-ui add tasks-important-view
npx shadcn@4.17.0 add @agentic-ui/tasks-important-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** starred-filter, priority-hierarchy, urgent-attention, quick-status
- **Intents:** track-status, manage-collection
- **Suits domains:** personal-productivity, project-management, operations, saas
- **Interaction:** toggle-star, change-urgency
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Tray of highlighted items, Critical tasks that block deliveries
- **Avoid when:** Homogeneous collections with no distinction of relevance
- **Preserve when adapting:** priority-highlight-style, favorite-toggle-action
- **Replace when adapting:** importance-threshold, custom-accent-color
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** lucide-react, zustand
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** framer-motion@12.38.0, lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0, sonner@^2.0.7, zustand@5.0.8
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, lib-admin-kit-utils, tasks-calendar-schedule, tasks-kanban-board, tasks-sortable-list, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-scroll-area, ui-admin-kit-separator, ui-admin-kit-tooltip, ui-drawer, ui-empty, ui-input-group


### Tasks Sortable List

Daily prioritization list.

- id: `tasks-sortable-list`
- Page: https://agentic-ui-kit.com/components/tasks-sortable-list
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo?piece=tasks-sortable-list

## Install

```bash
agentic-ui add tasks-sortable-list
npx shadcn@4.17.0 add @agentic-ui/tasks-sortable-list
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** drag-and-drop, keyboard-reorder, inline-checkbox, priority-flag
- **Intents:** manage-collection, track-status
- **Suits domains:** personal-productivity, project-management, saas, operations
- **Interaction:** drag-item, check-complete, click-details
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Daily prioritization list, Task backlog reordering
- **Avoid when:** Paginated tables with a fixed server-side order
- **Preserve when adapting:** dnd-sortable-context, item-row-template
- **Replace when adapting:** task-attributes, drag-handle-position
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, checkbox, badge, button
- **npm dependencies:** @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, @dnd-kit/sortable@10.0.0, @dnd-kit/utilities@3.2.2, zustand@5.0.8
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, tasks-list-item


### Tasks Today View

Personal daily planner.

- id: `tasks-today-view`
- Page: https://agentic-ui-kit.com/components/tasks-today-view
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo/today?piece=tasks-today-view

## Install

```bash
agentic-ui add tasks-today-view
npx shadcn@4.17.0 add @agentic-ui/tasks-today-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** due-today-filtering, time-blocking, quick-triage, completion-progress
- **Intents:** manage-collection, track-status
- **Suits domains:** personal-productivity, project-management, operations, saas
- **Interaction:** complete-task, defer-to-tomorrow
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Personal daily planner, Morning work focus for employees
- **Avoid when:** Long-term strategic planning
- **Preserve when adapting:** daily-focus-header, completion-meter
- **Replace when adapting:** daily-quote-or-greeting, filtering-predicate
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, button, badge, progress
- **npm dependencies:** lucide-react, zustand
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** framer-motion@12.38.0, lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0, sonner@^2.0.7, zustand@5.0.8
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, lib-admin-kit-utils, tasks-calendar-schedule, tasks-kanban-board, tasks-sortable-list, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-scroll-area, ui-admin-kit-separator, ui-admin-kit-tooltip, ui-drawer, ui-empty, ui-input-group


### Tasks Upcoming View

Weekly horizon of tasks.

- id: `tasks-upcoming-view`
- Page: https://agentic-ui-kit.com/components/tasks-upcoming-view
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo/upcoming?piece=tasks-upcoming-view

## Install

```bash
agentic-ui add tasks-upcoming-view
npx shadcn@4.17.0 add @agentic-ui/tasks-upcoming-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** future-horizon, date-grouping, overdue-highlight, schedule-reschedule
- **Intents:** compare-over-time, manage-collection
- **Suits domains:** personal-productivity, project-management, operations, saas
- **Interaction:** reschedule-date, expand-date-section
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Weekly horizon of tasks, View of short- and medium-term commitments
- **Avoid when:** Management of the present moment only
- **Preserve when adapting:** date-group-header-design, overdue-warning-card
- **Replace when adapting:** time-horizon-buckets, task-renderer
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.05/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** lucide-react, zustand
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** framer-motion@12.38.0, lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0, sonner@^2.0.7, zustand@5.0.8
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, lib-admin-kit-utils, tasks-calendar-schedule, tasks-kanban-board, tasks-sortable-list, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-scroll-area, ui-admin-kit-separator, ui-admin-kit-tooltip, ui-drawer, ui-empty, ui-input-group


### AI Workflow Edge

Agent workflow canvas where each connection shows the routing condition and animates while the run carries data.

- id: `ai-workflow-edge`
- Page: https://agentic-ui-kit.com/components/ai-workflow-edge
- Live preview: https://agentic-ui-kit.com/live/component/ai-workflow-edge

## Install

```bash
agentic-ui add ai-workflow-edge
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-edge
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** condition-label, animated-dash-on-flow, branch-status-encoding, typed-port-badge, run-counter, edge-selection, reduced-motion-fallback
- **Intents:** orchestrate-agents, execute-flow, track-status, configure
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, saas
- **Interaction:** edge-selection, keyboard-focus, run-state-switching, condition-inspection
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** agent workflow canvas where each connection shows the routing condition and animates while the run carries data, no-code automation builder where if/else branches can be read without opening the node configuration panel, live execution monitor for an ETL pipeline where the active edge marks where the data is flowing right now, ticket routing rule editor where the blocked branch shows its condition was not met in the last run
- **Avoid when:** the graph only needs decorative connections without condition or state semantics (use the default @xyflow/react edge), the condition must be configured through a schema-generated form rather than displayed (use ai-node-config-panel), the nodes and their typed ports need to be represented instead of the connections (use ai-workflow-node-set)
- **Preserve when adapting:** condition-label-legibility, status-encoding-beyond-motion, keyboard-focus-and-selection, reduced-motion-fallback
- **Replace when adapting:** domain-condition-expressions, port-type-vocabulary, node-graph-fixture
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @xyflow/react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** @xyflow/react@^12.10.2
- **Registry dependencies:** lib-primitives


### AI Workflow Run Mode

Follow an agentic workflow run live, seeing which node is queued, running, finished or failed.

- id: `ai-workflow-run-mode`
- Page: https://agentic-ui-kit.com/components/ai-workflow-run-mode
- Live preview: https://agentic-ui-kit.com/live/component/ai-workflow-run-mode

## Install

```bash
agentic-ui add ai-workflow-run-mode
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-run-mode
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** live-execution, per-node-status, replay, timeline-scrubbing, event-stepping, playback-speed, run-selection, event-log, node-inspection, keyboard-navigation, empty-state, error-state
- **Intents:** monitor-live, execute-flow, track-status, audit-trail, orchestrate-agents
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, analytics
- **Interaction:** play-pause, timeline-scrubbing, event-stepping, playback-speed, run-selection, node-selection, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** follow an agentic workflow run live, seeing which node is queued, running, finished or failed, replay a failed run step by step up to the tool node that timed out, compare the path of a successful run with a failed one of the same workflow, show the progress of a data or CI pipeline with parallel branches
- **Avoid when:** the graph needs to be edited (use ai-workflow-canvas and ai-node-config-panel), the full input/output and variables of each node are needed (use ai-workflow-debug-panel), the process is linear and graph-free: a list of steps or ai-agent-run-trace is enough
- **Preserve when adapting:** event-trace-to-node-state-model, status-vocabulary, live-vs-replay-separation, keyboard-contract, status-announcements
- **Replace when adapting:** domain-copy, workflow-graph, run-fixtures, trace-source-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, scroll-area
- **npm dependencies:** @xyflow/react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** @xyflow/react@^12.10.2
- **Registry dependencies:** ai-workflow-canvas, lib-primitives, lib-tokens


### AI Workflow Templates

Starting gallery when creating a new workflow in an agent builder (support triage, content pipeline, lead qualification).

- id: `ai-workflow-templates`
- Page: https://agentic-ui-kit.com/components/ai-workflow-templates
- Live preview: https://agentic-ui-kit.com/live/component/ai-workflow-templates

## Install

```bash
agentic-ui add ai-workflow-templates
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-templates
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** template-gallery-grid, full-text-search, category-filter, complexity-filter, sorting, workflow-graph-preview, template-detail-dialog, required-variables-and-integrations, canvas-graph-export, start-from-blank, arrow-key-grid-navigation, loading-empty-error-states
- **Intents:** create-edit, orchestrate-agents, navigate
- **Suits domains:** ai-workspace, ai-agents, devtools, operations, saas
- **Interaction:** search, filter-chips, sort-select, arrow-key-navigation, preview-dialog, apply-template, start-from-blank, retry
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Starting gallery when creating a new workflow in an agent builder (support triage, content pipeline, lead qualification), Library of team-shared templates with search by integration or step, Onboarding for an automation product: pick a pre-made flow and open it as a draft on the canvas
- **Avoid when:** Document or text page templates (use docs-template-gallery), Editing the graph itself; the gallery only previews and exports (use ai-workflow-canvas), Fewer than 3 templates: a menu or simple selector is enough
- **Preserve when adapting:** template-graph-contract, canvas-graph-export-shape, filter-and-search-model, keyboard-and-live-region-behaviour
- **Replace when adapting:** fixture-templates, category-taxonomy, integration-names, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, dialog, input, label, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Code Diff Viewer

Review of code changes in developer tools and forges.

- id: `code-diff-viewer`
- Page: https://agentic-ui-kit.com/components/code-diff-viewer
- Live preview: https://agentic-ui-kit.com/live/component/code-diff-viewer

## Install

```bash
agentic-ui add code-diff-viewer
npx shadcn@4.17.0 add @agentic-ui/code-diff-viewer
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** split-view, inline-view, syntax-highlight, hunk-collapse, keyboard-navigation, line-numbers, rename-display, diff-stats, controlled-layout
- **Intents:** explore-detail, audit-trail, compare-over-time
- **Suits domains:** devtools, ai-workspace, saas, operations
- **Interaction:** keyboard-navigation, view-switching, hunk-expansion, error-retry
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** review of code changes in developer tools and forges, inspection of edits generated by an agent in an ai-workspace, comparison of configuration or template versions in a SaaS product, configuration drift audit in operations dashboards
- **Avoid when:** comparison of time series or metrics (use a compare-over-time chart), content editing; the viewer is read-only
- **Preserve when adapting:** diff-grammar, interaction-model, keyboard-shortcuts, layout-switching
- **Replace when adapting:** domain-copy, language-set, token-palette, locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, card, label, switch


### Devtools Log Toolbar

Real-time log filtering bar.

- id: `devtools-log-toolbar`
- Page: https://agentic-ui-kit.com/components/devtools-log-toolbar
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/developers/events-&-logs?piece=devtools-log-toolbar

## Install

```bash
agentic-ui add devtools-log-toolbar
npx shadcn@4.17.0 add @agentic-ui/devtools-log-toolbar
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** search-input, status-dropdown, clear-filters, export-action
- **Intents:** configure, manage-collection
- **Suits domains:** devtools, operations, saas, crm
- **Interaction:** type-search, select-filter, reset-all
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Real-time log filtering bar, Trace search controls
- **Avoid when:** Simple views without multi-faceted filtering
- **Preserve when adapting:** toolbar-spacing, filter-chip-display
- **Replace when adapting:** search-placeholder, filter-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** input, button, select, badge
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @tabler/icons-react@^3.41.1, class-variance-authority@^0.7.1, date-fns@4.1.0, date-fns-tz@3.2.0, lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-collapsible, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-scroll-area, ui-admin-kit-select, ui-admin-kit-tooltip, ui-calendar, ui-drawer


### Docs PDF Viewer

Viewing and reviewing contracts, SLAs and agreements in SaaS platforms.

- id: `docs-pdf-viewer`
- Page: https://agentic-ui-kit.com/components/docs-pdf-viewer
- Live preview: https://agentic-ui-kit.com/live/component/docs-pdf-viewer

## Install

```bash
agentic-ui add docs-pdf-viewer
npx shadcn@4.17.0 add @agentic-ui/docs-pdf-viewer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** pagination, zoom-controls, in-document-search, thumbnail-navigation, document-outline, rotation, keyboard-shortcuts, match-highlighting, page-layout-modes
- **Intents:** explore-detail, manage-collection, navigate, audit-trail
- **Suits domains:** file-storage, knowledge, notes, saas, devtools
- **Interaction:** pagination, zoom-controls, in-document-search, thumbnail-navigation, keyboard-navigation
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** viewing and reviewing contracts, SLAs and agreements in SaaS platforms, exploring technical specifications and architecture documentation, consulting financial reports and audits in file storage, viewer for artifacts generated in knowledge assistants or an AI workspace
- **Avoid when:** interactive real-time document editing (use docs-editor-shell), version comparison or code diff computation (use code-diff-viewer)
- **Preserve when adapting:** viewer-layout, keyboard-shortcuts, search-highlighting, zoom-engine, accessibility-announcements
- **Replace when adapting:** document-fixtures, color-tokens, ui-strings, toolbar-actions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, input, badge, card, tooltip, separator, tabs, slider, skeleton, scroll-area
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Generator Glass

A product team tunes a frosted navigation bar over a hero image and ships it as one CSS class with a solid fallback.

- id: `generator-glass`
- Page: https://agentic-ui-kit.com/components/generator-glass
- Live preview: https://agentic-ui-kit.com/live/component/generator-glass

## Install

```bash
agentic-ui add generator-glass
npx shadcn@4.17.0 add @agentic-ui/generator-glass
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** glass-surface-editor, static-backdrop-blur-capped, backdrop-saturation, theme-token-tint, border-and-highlight, static-noise-texture, wcag-contrast-report, reduced-transparency-fallback-preview, low-tier-fallback-preview, backdrop-sample-switcher, css-supports-fallback-export, tailwind-classes-export, tsx-component-export, shadcn-registry-item-export, presets, versioned-url-state, copy-to-clipboard, file-download
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, analytics, media, ai-workspace
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A product team tunes a frosted navigation bar over a hero image and ships it as one CSS class with a solid fallback., A designer checks that body copy on a tinted glass card passes AA in light and dark themes before handing it off., An app adds glass cards over a gradient mesh that turn solid on low-end devices and under reduced transparency.
- **Avoid when:** Dense data tables or forms where translucency lowers legibility for no gain., Pages that would stack more than two blurred layers in one viewport.
- **Preserve when adapting:** static-backdrop-blur-capped-at-24px, solid-fallback-for-reduced-transparency-and-low-tier, theme-token-colours, contrast-report-before-export, generate-config-purity
- **Replace when adapting:** presets, preview-sample-copy, backdrop-samples
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile none, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** fx-foundation, lib-generator-foundation


### Map Route Animation

Replay of the daily movement of the truck fleet in logistics-fleet (live map with routes).

- id: `map-route-animation`
- Page: https://agentic-ui-kit.com/components/map-route-animation
- Live preview: https://agentic-ui-kit.com/live/component/map-route-animation

## Install

```bash
agentic-ui add map-route-animation
npx shadcn@4.17.0 add @agentic-ui/map-route-animation
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-replay-animation, play-pause, restart, playback-speed, position-scrubber, multi-route-selection, traveled-vs-pending-path, stop-progress-list, distance-readout, delay-note, static-fallback, empty-state, error-state-retry, loading-skeleton, keyboard-navigation, live-announcements
- **Intents:** monitor-live, track-status, explore-detail
- **Suits domains:** maps-ops, operations, ecommerce, travel, aviation
- **Interaction:** play-pause, scrub, speed-toggle, route-select, retry, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** replay of the daily movement of the truck fleet in logistics-fleet (live map with routes), review of a delayed shipment: where the vehicle stopped and which stops remain pending, replay of last-mile delivery trips in an e-commerce operations panel, plotting itineraries or flights with layovers in travel or aviation panels
- **Avoid when:** precise cartography with tiles, zoom and geocoding (use travel-map-explorer or flightops-live-map-console), tracking a single order for an end customer (use commerce-order-tracking), hundreds of simultaneous vehicles (use clustering; map-clustering)
- **Preserve when adapting:** shared-projection-frame, traveled-pending-path-grammar, static-fallback-semantics, playback-controls, live-announcements
- **Replace when adapting:** route-fixtures, stop-codes-and-copy, status-colors, replay-duration, map-background
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, progress, alert, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 50 fps
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-primitives, lib-tokens


### Scheduling Timezone Planner

Choosing the time of a weekly meeting between offices in New York, Madrid and Dubai.

- id: `scheduling-timezone-planner`
- Page: https://agentic-ui-kit.com/components/scheduling-timezone-planner
- Live preview: https://agentic-ui-kit.com/live/component/scheduling-timezone-planner

## Install

```bash
agentic-ui add scheduling-timezone-planner
npx shadcn@4.17.0 add @agentic-ui/scheduling-timezone-planner
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** timezone-overlap-grid, working-hours-window, best-window-detection, slot-selection, duration-fit-check, anchor-zone-switching, day-offset-markers, dst-aware-offsets, add-remove-zones, date-navigation, keyboard-navigation, empty-and-error-states
- **Intents:** compare-over-time, execute-flow
- **Suits domains:** saas, operations, project-management, crm
- **Interaction:** slot-selection, keyboard-navigation, zone-add-remove, anchor-switch, working-hours-slider, date-navigation
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** choosing the time of a weekly meeting between offices in New York, Madrid and Dubai, scheduling a sales demo with a client on another continent respecting their working hours, coordinating follow-the-sun support shifts and seeing where there is no common coverage, setting the window of an incident or maintenance that affects several regional teams
- **Avoid when:** booking on real availability via published slots (use scheduling-slot-picker), a single time zone or participants in the same city
- **Preserve when adapting:** overlap-grammar, comfort-levels, anchor-zone-model, keyboard-model
- **Replace when adapting:** domain-copy, zone-catalog, working-hours-defaults, duration-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, input, label, select, slider
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Orchestra OPS Theme Toggle

Light/dark toggle button with icon rotation.

- id: `orchestra-ops-theme-toggle`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-theme-toggle
- Live preview: https://agentic-ui-kit.com/live/piece/orchestra-ops-theme-toggle?piece=orchestra-ops-theme-toggle

## Install

```bash
agentic-ui add orchestra-ops-theme-toggle
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-theme-toggle
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** theme-toggle, smooth-transition, screen-reader-label
- **Intents:** configure
- **Suits domains:** settings, saas, devtools, media, operations
- **Interaction:** click-toggle
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Light/dark toggle button with icon rotation, Compact theme control for a navigation bar, Visual accessibility shortcut
- **Avoid when:** Dropdown selectors with three or more states (system/automatic)
- **Preserve when adapting:** icon-transition, sr-only-label, variant-ghost
- **Replace when adapting:** size-tokens, icon-set
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.98/10
- **Quality breakdown:** visual 8.5/10, responsive 9/10, accessibility 8.5/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react, next-themes
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6
- **Registry dependencies:** ui-button


### AI Agent Memory Viewer

Assistant settings where the user reviews and corrects what the agent knows about them (time zone, style preferences).

- id: `ai-agent-memory-viewer`
- Page: https://agentic-ui-kit.com/components/ai-agent-memory-viewer
- Live preview: https://agentic-ui-kit.com/live/component/ai-agent-memory-viewer

## Install

```bash
agentic-ui add ai-agent-memory-viewer
npx shadcn@4.17.0 add @agentic-ui/ai-agent-memory-viewer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** scope-filter, search, inline-edit, pin, forget-with-undo, add-memory, input-validation, empty-state, loading-state, error-recovery, read-only-mode, keyboard-navigation
- **Intents:** manage-collection, create-edit, configure, orchestrate-agents
- **Suits domains:** ai-agents, ai-workspace, personal-productivity, devtools, saas
- **Interaction:** scope-filter, search, inline-edit, pin, forget-with-undo, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** assistant settings where the user reviews and corrects what the agent knows about them (time zone, style preferences), project memory for a coding agent: stack, release conventions and repo rules editable by the team, privacy panel where the user forgets remembered personal data with an undo option, read-only view for reviewers auditing what persistent context an agent uses
- **Avoid when:** chunks or embeddings of a vector store need to be inspected (use rag-chunk-viewer), the goal is conversation history rather than distilled facts (use ai-conversation-history), thousands of memories that require server-side pagination or virtualization
- **Preserve when adapting:** keyboard-contract, focus-return-after-edit-and-forget, undo-after-forget, live-announcements, scope-model-user-vs-project
- **Replace when adapting:** domain-copy, agent-name, memory-categories, persistence-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, input, textarea
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Agent Status Badge

Header of an agent run that moves from working to waiting-approval and opens the approval on click.

- id: `ai-agent-status-badge`
- Page: https://agentic-ui-kit.com/components/ai-agent-status-badge
- Live preview: https://agentic-ui-kit.com/live/component/ai-agent-status-badge

## Install

```bash
agentic-ui add ai-agent-status-badge
npx shadcn@4.17.0 add @agentic-ui/ai-agent-status-badge
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** status-indicator, lifecycle-states, live-announcement, detail-tooltip, actionable-state, compact-dot, unknown-status-fallback, reduced-motion, keyboard-navigation
- **Intents:** orchestrate-agents, track-status, monitor-live
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, project-management
- **Interaction:** tooltip, click-to-act, keyboard-navigation, live-announcement
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** header of an agent run that moves from working to waiting-approval and opens the approval on click, roster of parallel agents with status and time in status, workflow node or table row with a compact dot indicator, blocked agent showing the reason in a tooltip and to screen readers
- **Avoid when:** run states of an individual tool with input/output (use ai-tool-call-card), generic states not tied to an agent lifecycle, the full timeline of steps is needed (use ai-agent-run-trace)
- **Preserve when adapting:** five-state-contract, icon-plus-label-signal, transition-only-announcements, unknown-status-fallback
- **Replace when adapting:** domain-copy, status-labels, token-tints
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, tooltip
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Chat Share Export

Share a postmortem generated with the on-call copilot as a read-only link that expires in 30 days.

- id: `ai-chat-share-export`
- Page: https://agentic-ui-kit.com/components/ai-chat-share-export
- Live preview: https://agentic-ui-kit.com/live/component/ai-chat-share-export

## Install

```bash
agentic-ui add ai-chat-share-export
npx shadcn@4.17.0 add @agentic-ui/ai-chat-share-export
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** public-share-link, link-expiry, link-revoke-confirmation, copy-to-clipboard, content-filters, anonymize-authors, export-markdown, export-pdf, export-json, export-preview, workspace-policy-state, error-retry, empty-state, modal-variant, keyboard-navigation
- **Intents:** import-export, communicate, converse
- **Suits domains:** ai-workspace, ai-agents, support, knowledge, notes, saas
- **Interaction:** tab-switch, option-toggle, select-expiry, create-link, copy-link, revoke-confirm, format-radio, file-download, copy-export, modal-dialog
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** share a postmortem generated with the on-call copilot as a read-only link that expires in 30 days, export a conversation with the support agent to PDF to attach it to a ticket, download a session's JSON to archive it or reimport it into another tool, Share button in the chat header that opens the panel in a modal
- **Avoid when:** sharing generic resources with per-person or per-team permissions (use util-share-dialog), exporting tables or tabular datasets to CSV/XLSX (use util-export-menu), real-time collaboration on the conversation (the link is a read-only snapshot)
- **Preserve when adapting:** private-by-default, system-prompt-hidden-by-default, snapshot-link-semantics, revoke-confirmation, focus-management
- **Replace when adapting:** share-service-adapter, url-scheme, export-formats, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, dialog, input, label, select, switch, tabs
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Context Picker

Context bar above an AI chat composer: attach specs, error screenshots and links before sending.

- id: `ai-context-picker`
- Page: https://agentic-ui-kit.com/components/ai-context-picker
- Live preview: https://agentic-ui-kit.com/live/component/ai-context-picker

## Install

```bash
agentic-ui add ai-context-picker
npx shadcn@4.17.0 add @agentic-ui/ai-context-picker
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** entity-mentions, file-attach, image-attach, url-attach, drag-and-drop, paste-files, file-validation, async-processing-with-retry, token-estimate, item-limit, empty-state, error-state, read-only-mode, keyboard-navigation
- **Intents:** create-edit, import-export, communicate
- **Suits domains:** ai-workspace, ai-agents, devtools, knowledge, project-management, saas
- **Interaction:** entity-mention-combobox, file-picker, drag-and-drop, paste, remove-chip, retry, keyboard-navigation
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** context bar above an AI chat composer: attach specs, error screenshots and links before sending, code assistant that mentions project @repos, @issues and @tables as prompt context, knowledge base copilot where the user drops PDFs or pastes documentation URLs, read-only view of the context that accompanied an already sent message
- **Avoid when:** generic file upload with byte progress and resume (use form-file-upload), editing the prompt with typed variables is needed (use prompt-editor-variables), global entity search outside a prompt flow (use search-global-palette)
- **Preserve when adapting:** combobox-keyboard-contract, roving-chip-focus-and-focus-return, validation-messages-with-alert, live-announcements, object-url-cleanup
- **Replace when adapting:** domain-copy, entity-types, accepted-file-types, processing-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, input
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Model Registry

Organization settings for an agent platform: which models the team can use and which is the default for agents, chat and embeddings.

- id: `ai-model-registry`
- Page: https://agentic-ui-kit.com/components/ai-model-registry
- Live preview: https://agentic-ui-kit.com/live/component/ai-model-registry

## Install

```bash
agentic-ui add ai-model-registry
npx shadcn@4.17.0 add @agentic-ui/ai-model-registry
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** org-model-enablement, provider-bulk-toggle, default-model-per-use-case, capability-eligibility-filter, policy-validation, dirty-save-discard, save-error-retry, search-and-status-filter, deprecation-warning, loading-state, load-error-retry, empty-state, read-only-mode, keyboard-navigation
- **Intents:** configure, manage-collection
- **Suits domains:** ai-workspace, ai-agents, settings, saas, devtools
- **Interaction:** toggle, bulk-toggle, select, search, filter, save-discard, retry, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** organization settings for an agent platform: which models the team can use and which is the default for agents, chat and embeddings, enterprise console where an admin retires a deprecated model and reassigns the affected use cases before saving, read-only view for members checking which models are approved, multi-tenant workspace with a policy locked by the parent organization (disabled mode)
- **Avoid when:** the end user picks a model for a specific conversation (use ai-model-picker), managing provider keys / BYOK (use ai-provider-keys), usage limits per user or role (use ai-usage-policies)
- **Preserve when adapting:** capability-eligibility-rules, clear-defaults-on-disable, validation-before-save, live-announcements, save-error-keeps-draft
- **Replace when adapting:** domain-copy, model-catalog, use-case-list, persistence-adapter, currency
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, input, skeleton, switch
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### AI Summary Block

Incident panel with a generated summary and citations to the postmortem, metrics and logs.

- id: `ai-summary-block`
- Page: https://agentic-ui-kit.com/components/ai-summary-block
- Live preview: https://agentic-ui-kit.com/live/component/ai-summary-block

## Install

```bash
agentic-ui add ai-summary-block
npx shadcn@4.17.0 add @agentic-ui/ai-summary-block
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** adjustable-detail-level, inline-citations, cited-source-list, regenerate-summary, error-recovery, empty-state, keyboard-navigation
- **Intents:** communicate, generate-content, retrieve-knowledge, explore-detail
- **Suits domains:** ai-workspace, ai-content, knowledge, support, operations
- **Interaction:** adjustable-detail-level, inline-citations, regenerate-summary, keyboard-navigation
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** incident panel with a generated summary and citations to the postmortem, metrics and logs, research readout where each claim links to the interview or survey that supports it, AI workspace that summarizes a long document with adjustable level of detail, support console that summarizes a long thread citing the original messages
- **Avoid when:** the content is static and needs neither citations nor detail levels (use plain text), generation must stream token by token (this block shows the final result), the user needs to edit the summary (it is not an editor)
- **Preserve when adapting:** keyboard-contract, radiogroup-roving-tabindex, loading-and-error-announcement, citation-source-linking, error-keeps-previous-content
- **Replace when adapting:** domain-copy, content-and-sources-data, regeneration-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### Chart Gauge KPI

Service availability (SLA) against breach bands.

- id: `chart-gauge-kpi`
- Page: https://agentic-ui-kit.com/components/chart-gauge-kpi
- Live preview: https://agentic-ui-kit.com/live/component/chart-gauge-kpi

## Install

```bash
agentic-ui add chart-gauge-kpi
npx shadcn@4.17.0 add @agentic-ui/chart-gauge-kpi
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** threshold-bands, target-marker, delta-indicator, value-readout, loading-state, error-state, empty-state, keyboard-activation
- **Intents:** track-status
- **Suits domains:** operations, saas, analytics, finance
- **Interaction:** click-select, keyboard-activation, value-readout
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** service availability (SLA) against breach bands, cluster utilization where the high end is saturation, error budget consumed in the quarter, CSAT/NPS with detractor, passive and promoter bands
- **Avoid when:** comparing several series or evolution over time (use timeseries), composition by category (use bars or a donut), the scale has no actionable thresholds and a stat card is enough
- **Preserve when adapting:** threshold-band-semantics, keyboard-contract, meter-aria-contract, state-triad-loading-error-empty
- **Replace when adapting:** domain-copy, scale-and-units, band-definitions, value-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Marketing Analytics (blueprint)


### Dashboard KPI Goal

New ARR for the quarter against target with a projection to close.

- id: `dashboard-kpi-goal`
- Page: https://agentic-ui-kit.com/components/dashboard-kpi-goal
- Live preview: https://agentic-ui-kit.com/live/component/dashboard-kpi-goal

## Install

```bash
agentic-ui add dashboard-kpi-goal
npx shadcn@4.17.0 add @agentic-ui/dashboard-kpi-goal
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** goal-progress, pace-marker, linear-projection, run-rate-projection, projection-band, eta-estimate, required-rate, status-derivation, chart-scrubbing, compact-layout, loading-state, error-state, empty-state, keyboard-activation
- **Intents:** track-status, compare-over-time
- **Suits domains:** analytics, saas, finance, crm, operations, marketing
- **Interaction:** click-select, keyboard-activation, chart-scrub, method-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** new ARR for the quarter against target with a projection to close, support backlog that must drop below a threshold before the end of the period, activation OKR with required vs actual daily rate, sales quota per team in compact mode in a sidebar
- **Avoid when:** the metric has no target or bounded period (use a stat card or sparkline), non-cumulative or highly seasonal metrics where a straight line misleads, comparing many series against each other (use a multi-series timeseries)
- **Preserve when adapting:** status-derivation-semantics, projection-math, keyboard-contract, state-triad-loading-error-empty
- **Replace when adapting:** domain-copy, units-and-formatting, status-thresholds, status-palette
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0


### Dashboard Milestone Tracker

Quarterly launch plan with beta, migration and launch milestones against due dates.

- id: `dashboard-milestone-tracker`
- Page: https://agentic-ui-kit.com/components/dashboard-milestone-tracker
- Live preview: https://agentic-ui-kit.com/live/component/dashboard-milestone-tracker

## Install

```bash
agentic-ui add dashboard-milestone-tracker
npx shadcn@4.17.0 add @agentic-ui/dashboard-milestone-tracker
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** milestone-progress, expected-pace, due-date-distance, status-derivation, weighted-overall-progress, timeline-lanes, checklist-progress, status-filter, sorting, expandable-details, roving-keyboard-navigation, compact-layout, loading-state, error-state, empty-state
- **Intents:** track-status, compare-over-time
- **Suits domains:** project-management, saas, operations, analytics, finance
- **Interaction:** disclosure, keyboard-navigation, filter, sort, checklist-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Quarterly launch plan with beta, migration and launch milestones against due dates, Platform team roadmap commitments in a compact sidebar, Client project phases with checklist-driven completion, Audit or compliance deadlines with overdue and blocked items surfaced first
- **Avoid when:** Work items have no dates (use a task list or kanban board), Detailed scheduling with dependencies and resource levelling is needed (use a full Gantt chart), A single metric is tracked against a target over time (use dashboard-kpi-goal)
- **Preserve when adapting:** status-derivation-semantics, pace-model, keyboard-contract, state-triad-loading-error-empty
- **Replace when adapting:** domain-copy, status-thresholds, status-palette, date-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, checkbox, select, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Devtools Route Traffic Metrics

Most requested routes of an API.

- id: `devtools-route-traffic-metrics`
- Page: https://agentic-ui-kit.com/components/devtools-route-traffic-metrics
- Live preview: https://agentic-ui-kit.com/live/piece/devtools-route-traffic-metrics?piece=devtools-route-traffic-metrics

## Install

```bash
agentic-ui add devtools-route-traffic-metrics
npx shadcn@4.17.0 add @agentic-ui/devtools-route-traffic-metrics
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** endpoint-ranking, call-count, error-rate, sparkline
- **Intents:** show-composition, track-status
- **Suits domains:** devtools, analytics, operations, saas
- **Interaction:** route-click
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Most requested routes of an API, Traffic distribution per microservice
- **Avoid when:** Heterogeneous lists without a relative metric value
- **Preserve when adapting:** route-meter-style, metric-bar-animation
- **Replace when adapting:** endpoint-list, traffic-metrics
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, progress
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @tabler/icons-react@^3.41.1
- **Registry dependencies:** ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dialog, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-separator, ui-admin-kit-tabs, ui-pagination, ui-table


### Form File Upload

Attach a CV and degree to an HR job application.

- id: `form-file-upload`
- Page: https://agentic-ui-kit.com/components/form-file-upload
- Live preview: https://agentic-ui-kit.com/live/component/form-file-upload

## Install

```bash
agentic-ui add form-file-upload
npx shadcn@4.17.0 add @agentic-ui/form-file-upload
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** drag-and-drop, file-picker, per-file-progress, type-validation, size-validation, max-files-limit, retry-failed-upload, remove-file, empty-state, keyboard-navigation
- **Intents:** import-export, create-edit
- **Suits domains:** media, file-storage, hr, healthcare, operations
- **Interaction:** drag-and-drop, file-picker, keyboard-navigation, retry, remove
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** attach a CV and degree to an HR job application, import a batch of images into a media library, upload clinical reports to a patient record, attach supporting documentation to an operations ticket
- **Avoid when:** a single required file with no progress or validation (a file input is enough), the upload is a multi-step flow with a prior review (use form-multi-step-wizard), editing or cropping the file after uploading it is needed
- **Preserve when adapting:** validation-feedback, per-file-progress, error-recovery, keyboard-contract
- **Replace when adapting:** domain-copy, accepted-types, size-limits, upload-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, progress
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### Form Inline Edit

CRM contact record where each field is edited in place.

- id: `form-inline-edit`
- Page: https://agentic-ui-kit.com/components/form-inline-edit
- Live preview: https://agentic-ui-kit.com/live/component/form-inline-edit

## Install

```bash
agentic-ui add form-inline-edit
npx shadcn@4.17.0 add @agentic-ui/form-inline-edit
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** click-to-edit, optimistic-save, inline-validation, undo-last-save, error-recovery, empty-state, keyboard-navigation
- **Intents:** create-edit, explore-detail
- **Suits domains:** crm, operations, saas, project-management, settings
- **Interaction:** click-to-edit, keyboard-navigation, inline-validation, undo
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** CRM contact record where each field is edited in place, inventory row where the quantity is corrected without opening a modal, settings panel with fields that are saved one by one, issue detail where the title is renamed inline
- **Avoid when:** the form is submitted all at once (use a form with submit), the field needs a rich editor or a long multiline editor, editing requires destructive confirmation or an approval flow
- **Preserve when adapting:** keyboard-contract, focus-restoration, optimistic-save-with-revert, error-announcement
- **Replace when adapting:** domain-copy, validation-rules, persistence-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, input
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-primitives


### Fx Meteor Shower

Changelog hero card behind the latest release headline.

- id: `fx-meteor-shower`
- Page: https://agentic-ui-kit.com/components/fx-meteor-shower
- Live preview: https://agentic-ui-kit.com/live/component/fx-meteor-shower

## Install

```bash
agentic-ui add fx-meteor-shower
npx shadcn@4.17.0 add @agentic-ui/fx-meteor-shower
```

## Metadata

- **Level:** block
- **Category:** effects
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** diagonal-light-streaks, streak-and-spark-variants, count-capped-by-area, configurable-angle, seeded-layout, compositor-only-keyframe, token-tone-and-intensity, light-dark-theming, offscreen-pause, reduced-motion-fallback, accessible-decorative-layer
- **Intents:** communicate
- **Suits domains:** saas, devtools, ai-workspace, analytics, project-management
- **Interaction:** theme-switch, motion-preference
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Changelog hero card behind the latest release headline, Launch announcement band on a product landing page, Empty dashboard hero with a short welcome and one call to action, Upgrade or what's-new card in a settings area
- **Avoid when:** Dense tables, charts or forms where moving streaks compete with data, Signalling an alert or live status, because the effect is decorative and carries no information, Stacking with another ambient background in the same viewport
- **Preserve when adapting:** decorative-layer-aria-hidden, count-capped-by-area, faint-static-trail-fallback
- **Replace when adapting:** variant-and-angle, tone-and-intensity, count-and-speed, container-children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-foundation, lib-motion


### Gamify Achievements

Course badges with study streak and completed modules.

- id: `gamify-achievements`
- Page: https://agentic-ui-kit.com/components/gamify-achievements
- Live preview: https://agentic-ui-kit.com/live/component/gamify-achievements

## Install

```bash
agentic-ui add gamify-achievements
npx shadcn@4.17.0 add @agentic-ui/gamify-achievements
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** progress-tracking, threshold-unlock, claim-reward, state-badges, empty-state, error-state
- **Intents:** track-status, explore-detail
- **Suits domains:** education, saas, marketing, hr, personal-productivity
- **Interaction:** claim-unlock, keyboard-activation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Course badges with study streak and completed modules, Onboarding milestones of a SaaS workspace, Team recognition for reviews or deliveries
- **Avoid when:** Progress is a continuous magnitude without discrete achievements, The flow is linear by steps and calls for a stepper
- **Preserve when adapting:** threshold-progress-model, unlock-affordance, state-vocabulary
- **Replace when adapting:** achievement-copy, icons, domain-thresholds
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, progress
- **Registry dependencies:** lib-primitives


### Gamify Level Progress

A member's XP progress toward the next tier of the loyalty program.

- id: `gamify-level-progress`
- Page: https://agentic-ui-kit.com/components/gamify-level-progress
- Live preview: https://agentic-ui-kit.com/live/component/gamify-level-progress

## Install

```bash
agentic-ui add gamify-level-progress
npx shadcn@4.17.0 add @agentic-ui/gamify-level-progress
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** xp-total, level-resolution, level-threshold-progress, next-reward-preview, reward-claim, xp-breakdown, max-level-state, empty-state, error-state
- **Intents:** track-status, navigate
- **Suits domains:** saas, education, hr, marketing, personal-productivity
- **Interaction:** reward-disclosure, reward-claim, keyboard-shortcut
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** a member's XP progress toward the next tier of the loyalty program, completion level of a learning path with the reward it unlocks, employee onboarding progress with the next milestone and benefit
- **Avoid when:** a full points ledger with paginated history (use gamify-points-history), progress of a specific task or upload with no level scale or rewards
- **Preserve when adapting:** level-threshold-model, next-reward-framing, progress-semantics
- **Replace when adapting:** domain-copy, level-ladder, reward-catalog, xp-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, progress, badge, button, separator
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Media Clip Range Selector

Trim a fixed 15-second clip out of a 60-second interview recording.

- id: `media-clip-range-selector`
- Page: https://agentic-ui-kit.com/components/media-clip-range-selector
- Live preview: https://agentic-ui-kit.com/live/component/media-clip-range-selector

## Install

```bash
agentic-ui add media-clip-range-selector
npx shadcn@4.17.0 add @agentic-ui/media-clip-range-selector
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** fixed-duration-window, linked-thumbs, pointer-drag, keyboard-stepping, boundary-clamping, configurable-min-max-step, controlled-value, accessible-start-end-labels, value-readouts, disabled-state, reduced-motion-fallback
- **Intents:** create-edit, configure
- **Suits domains:** media, music, social, ai-workspace, saas
- **Interaction:** drag, keyboard-navigation, track-click
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** trim a fixed 15-second clip out of a 60-second interview recording, choose the 30-second preview window of a track before publishing, pick the fixed-length excerpt a transcription or summarisation model should process, select a fixed billing or reporting window inside a longer time axis
- **Avoid when:** both endpoints must move independently (use a plain two-thumb range slider such as the price filter), the value is a single position, e.g. playback progress or volume, the window must be dragged by its middle band; that gesture is not part of this contract
- **Preserve when adapting:** fixed-duration-contract, linked-thumb-model, boundary-clamping, accessible-thumb-labels
- **Replace when adapting:** duration-min-max-step, value-formatting, labels-and-copy, surrounding-waveform-or-timeline
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** slider
- **npm dependencies (registry):** radix-ui@^1.6.7
- **Registry dependencies:** lib-primitives, lib-tokens


### Motion Chart Enter Series

API requests per day entering on dashboard load, then morphing when the week changes.

- id: `motion-chart-enter-series`
- Page: https://agentic-ui-kit.com/components/motion-chart-enter-series
- Live preview: https://agentic-ui-kit.com/live/component/motion-chart-enter-series

## Install

```bash
agentic-ui add motion-chart-enter-series
npx shadcn@4.17.0 add @agentic-ui/motion-chart-enter-series
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** chart-entrance, in-view-trigger, staggered-bars, line-draw, data-morph, change-summary, keyboard-inspection, replay
- **Intents:** compare-over-time, monitor-live, track-status
- **Suits domains:** analytics, saas, operations, devtools, finance, ecommerce
- **Interaction:** entrance, in-view-entrance, data-morph, keyboard-inspection, hover-tooltip, replay
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** API requests per day entering on dashboard load, then morphing when the week changes, p95 latency line that redraws when the time range is switched, Weekly revenue bars that show which days rose or fell after a refresh
- **Avoid when:** Dense timeseries with hundreds of points (use a charting library with zoom), Multi-series or stacked comparisons, Print or static export
- **Preserve when adapting:** m01-personality-timing, entrance-cap-1200ms, reduced-motion-css-fallback, change-summary-and-deltas, roving-focus-keyboard-model
- **Replace when adapting:** data-source, unit-and-copy, chart-colors
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** react, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Item Add Remove

Support triage queue where tickets are added, resolved in bulk and restored with undo.

- id: `motion-item-add-remove`
- Page: https://agentic-ui-kit.com/components/motion-item-add-remove
- Live preview: https://agentic-ui-kit.com/live/component/motion-item-add-remove

## Install

```bash
agentic-ui add motion-item-add-remove
npx shadcn@4.17.0 add @agentic-ui/motion-item-add-remove
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** list-presence, enter-exit-animation, height-collapse, retarget-reenter, focus-handoff, change-announcement, reduced-motion-fallback
- **Intents:** manage-collection, track-status, create-edit
- **Suits domains:** saas, crm, project-management, ecommerce, operations, personal-productivity
- **Interaction:** add, remove, undo, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Support triage queue where tickets are added, resolved in bulk and restored with undo., Cart or wishlist rows removed with an undo toast, without the list jumping., Notification or task list where new items arrive at the top while the user works.
- **Avoid when:** Virtualized lists with thousands of rows; animate only the visible window or skip motion., Reordering existing rows; use a FLIP reorder instead, because this block only animates presence.
- **Preserve when adapting:** exit-before-unmount, inert-exiting-rows, focus-handoff, polite-change-announcement, static-informational-state
- **Replace when adapting:** item-renderer, noun-and-labels, data-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Motion Page Transition

Billing workspace switching between overview, invoices, customers and settings.

- id: `motion-page-transition`
- Page: https://agentic-ui-kit.com/components/motion-page-transition
- Live preview: https://agentic-ui-kit.com/live/component/motion-page-transition

## Install

```bash
agentic-ui add motion-page-transition
npx shadcn@4.17.0 add @agentic-ui/motion-page-transition
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** page-transition, view-transitions-api, direction-aware-slide, history-back-forward, hash-deep-link, focus-to-page-heading, navigation-announcement, interrupt-safe, instant-fallback, reduced-motion-fallback
- **Intents:** navigate, explore-detail
- **Suits domains:** saas, billing, finance, crm, project-management, settings
- **Interaction:** navigate, keyboard-navigation, history
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Billing workspace switching between overview, invoices, customers and settings., Settings sections or a detail page whose tabs are separate routes., Client-side routed dashboard where back and forward should replay the swap in reverse.
- **Avoid when:** Full document navigations across origins; this only animates same-document route changes., Swapping small in-page panels; use a tab indicator or accordion instead of a page-level transition.
- **Preserve when adapting:** single-state-update, direction-from-nav-order, focus-to-page-heading, polite-navigation-announcement, static-informational-state
- **Replace when adapting:** pages-and-content, routing-source, document-title
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Shared Element

Project portfolio where a card opens into the project detail with the same cover and title.

- id: `motion-shared-element`
- Page: https://agentic-ui-kit.com/components/motion-shared-element
- Live preview: https://agentic-ui-kit.com/live/component/motion-shared-element

## Install

```bash
agentic-ui add motion-shared-element
npx shadcn@4.17.0 add @agentic-ui/motion-shared-element
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** shared-element-morph, view-transitions-api, collection-to-detail, detail-stepping, history-back-forward, hash-deep-link, focus-handoff-and-restore, navigation-announcement, interrupt-safe, flip-fallback, instant-fallback, reduced-motion-fallback
- **Intents:** explore-detail, navigate, manage-collection
- **Suits domains:** project-management, ecommerce, media, crm, travel, file-storage
- **Interaction:** navigate, keyboard-navigation, history
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Project portfolio where a card opens into the project detail with the same cover and title., Product grid opening a product page whose hero image is the card thumbnail., Media library or listing gallery stepping between items in the detail view.
- **Avoid when:** Dense tables or lists without a visual anchor to carry across; use a page transition instead., Detail views opened in a separate document or origin; this only morphs same-document swaps.
- **Preserve when adapting:** single-owner-per-shared-name, single-state-update, focus-to-detail-heading-and-back-to-card, polite-view-announcement, static-informational-state
- **Replace when adapting:** items-and-media, routing-source, document-title
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Pm Dashboard Scrum Metrics

Agile sprint performance dashboard.

- id: `pm-dashboard-scrum-metrics`
- Page: https://agentic-ui-kit.com/components/pm-dashboard-scrum-metrics
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/dashboard-3?piece=pm-dashboard-scrum-metrics

## Install

```bash
agentic-ui add pm-dashboard-scrum-metrics
npx shadcn@4.17.0 add @agentic-ui/pm-dashboard-scrum-metrics
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** velocity-chart, burndown-tracking, sprint-progress, defect-density
- **Intents:** track-status, show-composition
- **Suits domains:** project-management, devtools, saas, analytics
- **Interaction:** sprint-selector, metric-tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Agile sprint performance dashboard, Velocity and completion metrics
- **Avoid when:** Non-iterative flows or flows without point estimation
- **Preserve when adapting:** velocity-chart, sprint-kpis
- **Replace when adapting:** sprint-names, story-point-scales
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, button, select, progress
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** framer-motion@12.38.0, lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-chart, ui-admin-kit-input


### Pm Inbox Activity Stream

Project activity and mentions inbox.

- id: `pm-inbox-activity-stream`
- Page: https://agentic-ui-kit.com/components/pm-inbox-activity-stream
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/inbox-1?piece=pm-inbox-activity-stream

## Install

```bash
agentic-ui add pm-inbox-activity-stream
npx shadcn@4.17.0 add @agentic-ui/pm-inbox-activity-stream
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** notification-feed, mention-filtering, quick-reply, unread-counter
- **Intents:** communicate, track-status
- **Suits domains:** project-management, saas, social, support
- **Interaction:** filter-tabs, mark-as-read, search-notifications
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Project activity and mentions inbox, SaaS platform notification center
- **Avoid when:** Systems with no multi-user collaboration
- **Preserve when adapting:** notification-item-layout, filter-tabs
- **Replace when adapting:** notification-types, avatar-sources
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** badge, button, input, avatar, scroll-area, tabs
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Kestrel Admin Kit (template), Project Delivery (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-images-block-avatar-1-webp, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-scroll-area, ui-admin-kit-textarea, ui-drawer


### Pm Project Detail Activity

Project change history and audit.

- id: `pm-project-detail-activity`
- Page: https://agentic-ui-kit.com/components/pm-project-detail-activity
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/project-detail-2?piece=pm-project-detail-activity

## Install

```bash
agentic-ui add pm-project-detail-activity
npx shadcn@4.17.0 add @agentic-ui/pm-project-detail-activity
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** audit-timeline, event-diff, actor-avatar, date-filtering, commit-linking
- **Intents:** explore-detail, audit-trail
- **Suits domains:** project-management, devtools, saas, operations
- **Interaction:** filter-by-actor, expand-event-diff
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Project change history and audit, Team activity log with links to modified tasks
- **Avoid when:** Surfaces that do not record a chronological change history
- **Preserve when adapting:** audit-timeline-spine, event-entry-card
- **Replace when adapting:** event-action-types, log-formatters
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** badge, avatar, button, card, separator
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @xyflow/react@^12.10.2, lucide-react@0.577.0, next-themes@0.4.6
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, pm-issue-gantt-roadmap, pm-issue-kanban-board, pm-issue-spreadsheet-grid, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-sheet


### Pm Project List Timeline Feed

Project portfolio roadmap grouped by quarter.

- id: `pm-project-list-timeline-feed`
- Page: https://agentic-ui-kit.com/components/pm-project-list-timeline-feed
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/project-list-4?piece=pm-project-list-timeline-feed

## Install

```bash
agentic-ui add pm-project-list-timeline-feed
npx shadcn@4.17.0 add @agentic-ui/pm-project-list-timeline-feed
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** timeline-grouping, monthly-milestones, sprint-markers, progress-overview
- **Intents:** manage-collection, compare-over-time
- **Suits domains:** project-management, operations, saas, devops-status
- **Interaction:** scroll-timeline, milestone-click
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Project portfolio roadmap grouped by quarter, Chronological feed of institutional deliverables
- **Avoid when:** Management of short tasks without key delivery dates
- **Preserve when adapting:** timeline-spine-design, monthly-cluster-card
- **Replace when adapting:** date-formatters, milestone-categories
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, button, progress, separator
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, asset-admin-kit-images-project-backgrounds-1-png, asset-admin-kit-images-project-backgrounds-10-png, asset-admin-kit-images-project-backgrounds-11-png, asset-admin-kit-images-project-backgrounds-12-png, asset-admin-kit-images-project-backgrounds-2-png, asset-admin-kit-images-project-backgrounds-3-png, asset-admin-kit-images-project-backgrounds-4-png, asset-admin-kit-images-project-backgrounds-5-png, asset-admin-kit-images-project-backgrounds-6-png, asset-admin-kit-images-project-backgrounds-7-png, asset-admin-kit-images-project-backgrounds-8-png, asset-admin-kit-images-project-backgrounds-9-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-input


### Project Management Issue Card Grid

Issue card for a kanban board.

- id: `project-management-issue-card-grid`
- Page: https://agentic-ui-kit.com/components/project-management-issue-card-grid
- Live preview: https://agentic-ui-kit.com/live/fixture/project-management-issue-card-grid?piece=project-management-issue-card-grid

## Install

```bash
agentic-ui add project-management-issue-card-grid
npx shadcn@4.17.0 add @agentic-ui/project-management-issue-card-grid
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** card-view, responsive-columns, priority-display, due-date, status-badge, drag-source
- **Intents:** track-status
- **Suits domains:** project-management, operations, devtools, crm, personal-productivity
- **Interaction:** drag-and-drop, card-click
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** issue card for a kanban board, user story card in a sprint panel, sales prospect card in a sales funnel
- **Avoid when:** dense views of more than 100 items per page where a list works better
- **Preserve when adapting:** card-anatomy, badge-layout, drag-feedback
- **Replace when adapting:** custom-attributes, priority-colors
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, avatar
- **npm dependencies:** react-dnd, lucide-react
- **Used in:** Orbitra Project Hub (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, motion@12.23.24, react-dnd@^16.0.1, react-dnd-html5-backend@^16.0.1, sonner@^2.0.7, zustand@5.0.8
- **Registry dependencies:** lib-project-hub-utils, ui-avatar, ui-badge, ui-button, ui-command, ui-context-menu, ui-dropdown-menu, ui-popover


### Project Management Issue Status Board

Status column on an agile board (Backlog, Todo, In Progress, Done).

- id: `project-management-issue-status-board`
- Page: https://agentic-ui-kit.com/components/project-management-issue-status-board
- Live preview: https://agentic-ui-kit.com/live/template/project-hub/project-hub/team/CORE/all?piece=project-management-issue-status-board

## Install

```bash
agentic-ui add project-management-issue-status-board
npx shadcn@4.17.0 add @agentic-ui/project-management-issue-status-board
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-grouping, issue-count-badge, drop-target, quick-add-button, collapsible-group
- **Intents:** track-status, manage-collection
- **Suits domains:** project-management, operations, devtools, crm, support
- **Interaction:** drag-and-drop, toggle-expand, quick-add
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** status column on an agile board (Backlog, Todo, In Progress, Done), candidate grouping section in a hiring pipeline, group of sales leads classified by stage
- **Avoid when:** flat non-categorical lists
- **Preserve when adapting:** drop-target-area, status-header-layout, item-counter-placement
- **Replace when adapting:** status-definitions, card-renderer
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, badge
- **npm dependencies:** react-dnd, lucide-react
- **Used in:** Orbitra Project Hub (template)
- **npm dependencies (registry):** lucide-react@0.577.0, motion@12.23.24, react-dnd@^16.0.1, zustand@5.0.8
- **Registry dependencies:** lib-project-hub-utils, project-management-issue-card-grid, project-management-issue-row, ui-button


### Project Management Workspace Settings Form

General workspace settings.

- id: `project-management-workspace-settings-form`
- Page: https://agentic-ui-kit.com/components/project-management-workspace-settings-form
- Live preview: https://agentic-ui-kit.com/live/piece/project-management-workspace-settings-form?piece=project-management-workspace-settings-form

## Install

```bash
agentic-ui add project-management-workspace-settings-form
npx shadcn@4.17.0 add @agentic-ui/project-management-workspace-settings-form
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** org-profile-edit, logo-upload-preview, url-slug-config, danger-zone-actions
- **Intents:** configure
- **Suits domains:** settings, saas, project-management, auth, operations
- **Interaction:** input-edit, file-upload, confirm-delete
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** general workspace settings, organization profile form with slug and logo, account administration and workspace deletion section
- **Avoid when:** billing or subscription forms that require PCI iframes
- **Preserve when adapting:** section-group-cards, danger-zone-treatment, avatar-upload-widget
- **Replace when adapting:** org-fields, destructive-confirmations
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, input, button, avatar
- **npm dependencies:** lucide-react
- **Used in:** Orbitra Project Hub (template), SaaS Admin Starter (blueprint), SaaS Backoffice (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** ui-button


### RAG Chunk Viewer

Inspecting how a document was chunked when indexing it in the vector database.

- id: `rag-chunk-viewer`
- Page: https://agentic-ui-kit.com/components/rag-chunk-viewer
- Live preview: https://agentic-ui-kit.com/live/component/rag-chunk-viewer

## Install

```bash
agentic-ui add rag-chunk-viewer
npx shadcn@4.17.0 add @agentic-ui/rag-chunk-viewer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** chunk-list, overlap-highlight, chunk-metadata, copy-chunk, keyboard-list-navigation, empty-state, error-state
- **Intents:** explore-detail, audit-trail
- **Suits domains:** ai-workspace, knowledge, devtools, saas
- **Interaction:** list-navigation, overlap-toggle, copy-chunk, keyboard-navigation
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** inspecting how a document was chunked when indexing it in the vector database, verifying that the configured overlap covers sentences that cross boundaries, auditing the metadata (source, range, tokens) of the chunks returned by a query
- **Avoid when:** editing the chunk text (it is a read-only viewer), visualizing embeddings or the similarity graph between chunks
- **Preserve when adapting:** overlap-highlight-model, chunk-provenance-metadata, keyboard-interaction-model
- **Replace when adapting:** domain-copy, metadata-fields, chunk-source-fixture
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, scroll-area
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Search Results Highlight

Results list of a documentation search engine with the term highlighted in title, summary and body snippet.

- id: `search-results-highlight`
- Page: https://agentic-ui-kit.com/components/search-results-highlight
- Live preview: https://agentic-ui-kit.com/live/component/search-results-highlight

## Install

```bash
agentic-ui add search-results-highlight
npx shadcn@4.17.0 add @agentic-ui/search-results-highlight
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** term-marking, multi-term-and-phrase-modes, case-and-whole-word-toggles, diacritics-folding, body-snippets-with-context, match-counter, match-navigation, per-result-match-badges, only-matching-filter, keyboard-navigation, live-region-announcements, empty-error-states, inline-highlight-text-primitive
- **Intents:** explore-detail, navigate, manage-collection
- **Suits domains:** saas, knowledge, devtools, project-management, crm, ecommerce, operations
- **Interaction:** live-highlight, match-step-navigation, toggle-case-whole-word-phrase, only-matching-filter, keyboard-result-focus, select-result, clear-and-reset-query, retry-on-error
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Results list of a documentation search engine with the term highlighted in title, summary and body snippet, Search in an issue tracker with a match counter and previous/next navigation between matches, Results of a product or contact catalog where the user switches between partial match, whole word and exact phrase, Inline highlighting (HighlightText) of the searched term inside tables, cards or command palettes
- **Avoid when:** Semantic or vector searches where the result text does not literally contain the queried term, Syntax highlighting of code or user-defined regular expressions, which require a different tokenizer, Lists of thousands of results rendered without virtualization; the block highlights what is visible, it does not paginate
- **Preserve when adapting:** highlight-engine, overlap-resolution, global-match-indexing, live-region-contract, keyboard-scheme
- **Replace when adapting:** result-item-shape, snippet-window-sizes, labels-and-copy, mark-classnames, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** input, button, badge, switch, label, separator
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Travel Listing Card

Accommodation card with a photo carousel.

- id: `travel-listing-card`
- Page: https://agentic-ui-kit.com/components/travel-listing-card
- Live preview: https://agentic-ui-kit.com/live/template/travel-marketplace?piece=travel-listing-card

## Install

```bash
agentic-ui add travel-listing-card
npx shadcn@4.17.0 add @agentic-ui/travel-listing-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** image-carousel, wishlist-toggle, guest-favorite-badge, price-with-strikethrough, rating-display
- **Intents:** manage-collection, explore-detail
- **Suits domains:** travel, ecommerce, media, maps-ops
- **Interaction:** carousel, toggle, navigate
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** accommodation card with a photo carousel, product card with wishlist and a struck-through price, tourist experience card with rating
- **Avoid when:** dense tabular listings, items without a featured image
- **Preserve when adapting:** carousel-interaction, badge-hierarchy, price-block
- **Replace when adapting:** image-set, price-formatting, domain-badges
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** badge, button
- **npm dependencies:** zustand, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-badge


### Collab Live Cursors

Collaborative document editor or whiteboard showing who is working where.

- id: `collab-live-cursors`
- Page: https://agentic-ui-kit.com/components/collab-live-cursors
- Live preview: https://agentic-ui-kit.com/live/component/collab-live-cursors

## Install

```bash
agentic-ui add collab-live-cursors
npx shadcn@4.17.0 add @agentic-ui/collab-live-cursors
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** named-cursors, cursor-chat, presence-avatars, follow-spotlight, idle-detection, join-leave-announcements, label-edge-flip, normalized-coordinates, keyboard-navigation, reduced-motion-fallback, empty-and-error-states, responsive-layout
- **Intents:** monitor-live, communicate
- **Suits domains:** saas, project-management, knowledge, notes, ai-workspace
- **Interaction:** pointer-broadcast, keyboard-cursor-move, cursor-chat, follow-user, toggle-labels, reconnect
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** collaborative document editor or whiteboard showing who is working where, project board with real-time presence and cursor chat among reviewers, shared AI workspace where several users edit the same prompt or canvas, design review session with follow mode to present to a teammate
- **Avoid when:** single-user views or views without a presence channel (use static avatars only), more than ~25 simultaneous cursors or dense telemetry (use a heatmap or presence list), flows where the other user's cursor adds no context (forms, checkout)
- **Preserve when adapting:** normalized-coordinate-model, label-flip-rule, presence-reducer-semantics, keyboard-shortcuts
- **Replace when adapting:** presence-channel-adapter, collaborator-directory, canvas-content, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** avatar, badge, button, card, switch, tooltip
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives, lib-tokens


### Devtools Webhook Logs Table

Table of webhook delivery attempts.

- id: `devtools-webhook-logs-table`
- Page: https://agentic-ui-kit.com/components/devtools-webhook-logs-table
- Live preview: https://agentic-ui-kit.com/live/fixture/devtools-webhook-logs-table?piece=devtools-webhook-logs-table

## Install

```bash
agentic-ui add devtools-webhook-logs-table
npx shadcn@4.17.0 add @agentic-ui/devtools-webhook-logs-table
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** http-status-codes, response-time, retry-trigger, payload-preview
- **Intents:** audit-trail, track-status
- **Suits domains:** devtools, operations, saas, payments
- **Interaction:** click-retry, view-response-body
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Table of webhook delivery attempts, Log of outgoing HTTP invocations
- **Avoid when:** Tables unrelated to network calls
- **Preserve when adapting:** status-code-pill-styling, duration-column-formatting
- **Replace when adapting:** attempt-records, payload-schemas
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** table, badge, button
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @faker-js/faker@^10.3.0, @radix-ui/react-icons@^1.3.2, @tanstack/react-table@^8.21.3, date-fns@4.1.0, lucide-react@0.577.0, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-table


### Devtools Webhooks Table

Table of subscribed webhooks.

- id: `devtools-webhooks-table`
- Page: https://agentic-ui-kit.com/components/devtools-webhooks-table
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/developers/webhooks?piece=devtools-webhooks-table

## Install

```bash
agentic-ui add devtools-webhooks-table
npx shadcn@4.17.0 add @agentic-ui/devtools-webhooks-table
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** url-copy, event-chips, status-badge, actions-dropdown
- **Intents:** manage-collection, track-status
- **Suits domains:** devtools, operations, saas, payments
- **Interaction:** copy-url, row-action-select
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Table of subscribed webhooks, List of notification destinations
- **Avoid when:** Single-detail views
- **Preserve when adapting:** webhook-url-cell, event-tags-container
- **Replace when adapting:** webhook-destinations, supported-events
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** table, badge, button, dropdown-menu
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @faker-js/faker@^10.3.0, @radix-ui/react-icons@^1.3.2, @tanstack/react-table@^8.21.3, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-input, ui-table


### Generator Gradient Mesh

A marketing team builds a hero backdrop from the brand's chart colours and ships it as one CSS class.

- id: `generator-gradient-mesh`
- Page: https://agentic-ui-kit.com/components/generator-gradient-mesh
- Live preview: https://agentic-ui-kit.com/live/component/generator-gradient-mesh

## Install

```bash
agentic-ui add generator-gradient-mesh
npx shadcn@4.17.0 add @agentic-ui/generator-gradient-mesh
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** gradient-mesh-background, layered-radial-gradients, colour-points-editor, draggable-point-markers, theme-or-custom-colours, softness-control, grain-overlay, slow-drift-animation, css-custom-properties-export, tailwind-arbitrary-class-export, tsx-component-export, png-webp-poster-export, shadcn-registry-item-export, presets, versioned-url-state, copy-to-clipboard, file-download
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, analytics, devtools, media
- **Interaction:** click, drag, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A marketing team builds a hero backdrop from the brand's chart colours and ships it as one CSS class., A product adds a soft mesh behind an empty state or onboarding card that follows light and dark themes., A designer exports a 1200 × 630 WebP poster of the same mesh for social cards.
- **Avoid when:** Dense data screens where a colourful backdrop competes with charts and tables., Text-heavy surfaces on custom colours without a contrast check.
- **Preserve when adapting:** radial-gradients-without-blur-filter, theme-token-colours-by-default, drift-transform-and-opacity-only, generate-config-purity
- **Replace when adapting:** presets, preview-sample-copy, poster-sizes
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/fx-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** fx-foundation, lib-generator-foundation, lib-motion


### Motion Counter Ticker Odometer

Storefront operations wall with orders, revenue and sessions updating every few hundred milliseconds.

- id: `motion-counter-ticker-odometer`
- Page: https://agentic-ui-kit.com/components/motion-counter-ticker-odometer
- Live preview: https://agentic-ui-kit.com/live/component/motion-counter-ticker-odometer

## Install

```bash
agentic-ui add motion-counter-ticker-odometer
npx shadcn@4.17.0 add @agentic-ui/motion-counter-ticker-odometer
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** odometer-digit-roll, signed-delta-indicator, retargeting-transitions, kpi-ticker, reduced-motion-fallback, numeric-sweep-variant
- **Intents:** monitor-live, track-status, compare-over-time
- **Suits domains:** analytics, ecommerce, operations, finance, saas, devtools
- **Interaction:** value-update, live-refresh
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Storefront operations wall with orders, revenue and sessions updating every few hundred milliseconds., Error rate KPI where a rise is shown as bad news through positive=down., Trading or auction totals where each digit column should visibly settle.
- **Avoid when:** Values that need a smooth numeric sweep across magnitudes; use variant="sweep" (motion-counter-ticker)., Long free-form numbers or text where per-digit columns would be unreadable.
- **Preserve when adapting:** right-keyed-digit-slots, signed-delta-chip, static-informational-state, polite-atomic-announcement
- **Replace when adapting:** number-formatting, prefix-suffix, tone-colors, data-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Pm Dashboard Workload

Capacity planning in software teams.

- id: `pm-dashboard-workload`
- Page: https://agentic-ui-kit.com/components/pm-dashboard-workload
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/dashboard-2?piece=pm-dashboard-workload

## Install

```bash
agentic-ui add pm-dashboard-workload
npx shadcn@4.17.0 add @agentic-ui/pm-dashboard-workload
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** capacity-planning, workload-heatmap, member-allocation, sprint-burndown
- **Intents:** track-status, compare-over-time
- **Suits domains:** project-management, operations, hr, saas
- **Interaction:** member-tab-select, workload-filter
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Capacity planning in software teams, Monitoring assigned vs available hours
- **Avoid when:** Individual task management without a notion of team
- **Preserve when adapting:** workload-grid, member-capacity-meter
- **Replace when adapting:** member-data, capacity-limits
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button, progress, avatar, tabs
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** framer-motion@12.38.0, lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, asset-admin-kit-images-project-backgrounds-1-png, asset-admin-kit-images-project-backgrounds-10-png, asset-admin-kit-images-project-backgrounds-11-png, asset-admin-kit-images-project-backgrounds-12-png, asset-admin-kit-images-project-backgrounds-2-png, asset-admin-kit-images-project-backgrounds-3-png, asset-admin-kit-images-project-backgrounds-4-png, asset-admin-kit-images-project-backgrounds-5-png, asset-admin-kit-images-project-backgrounds-6-png, asset-admin-kit-images-project-backgrounds-7-png, asset-admin-kit-images-project-backgrounds-8-png, asset-admin-kit-images-project-backgrounds-9-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-chart, ui-admin-kit-dialog, ui-admin-kit-input, ui-admin-kit-tabs, ui-admin-kit-textarea


### Pm Inbox Two Column Split

Inbox with a side preview.

- id: `pm-inbox-two-column-split`
- Page: https://agentic-ui-kit.com/components/pm-inbox-two-column-split
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/inbox-2?piece=pm-inbox-two-column-split

## Install

```bash
agentic-ui add pm-inbox-two-column-split
npx shadcn@4.17.0 add @agentic-ui/pm-inbox-two-column-split
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** master-detail-split, message-preview, status-filter, thread-actions
- **Intents:** communicate, manage-collection
- **Suits domains:** project-management, saas, support, crm
- **Interaction:** select-thread, quick-archive, search-threads
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Inbox with a side preview, Management of support tickets and messages
- **Avoid when:** Mobile-only views without room for two panels
- **Preserve when adapting:** split-view-container, message-thread-card
- **Replace when adapting:** thread-metadata, sender-profiles
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** badge, button, input, avatar, scroll-area, separator
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template), Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-scroll-area, ui-admin-kit-switch, ui-admin-kit-textarea, ui-drawer


### Pm Issue Calendar Monthly

Calendar of deliveries and sprint deadlines.

- id: `pm-issue-calendar-monthly`
- Page: https://agentic-ui-kit.com/components/pm-issue-calendar-monthly
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-calendar-1?piece=pm-issue-calendar-monthly

## Install

```bash
agentic-ui add pm-issue-calendar-monthly
npx shadcn@4.17.0 add @agentic-ui/pm-issue-calendar-monthly
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** monthly-view, event-badges, date-navigation, issue-popover
- **Intents:** track-status, manage-collection
- **Suits domains:** project-management, operations, saas, personal-productivity
- **Interaction:** month-next-prev, event-click, view-toggle
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Calendar of deliveries and sprint deadlines, Monthly planning of product launches
- **Avoid when:** Non-chronological listings without deadlines
- **Preserve when adapting:** calendar-matrix-layout, event-chip-styles
- **Replace when adapting:** event-statuses, priority-palettes
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, badge, select, card
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, pm-create-issue-sheet, pm-issue-details-sheet, ui-admin-kit-button, ui-admin-kit-dropdown-menu


### Pm Issue Spreadsheet Grid

Backlog management in a Notion- or Airtable-style editable grid.

- id: `pm-issue-spreadsheet-grid`
- Page: https://agentic-ui-kit.com/components/pm-issue-spreadsheet-grid
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-spreadsheet-1?piece=pm-issue-spreadsheet-grid

## Install

```bash
agentic-ui add pm-issue-spreadsheet-grid
npx shadcn@4.17.0 add @agentic-ui/pm-issue-spreadsheet-grid
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** cell-inline-edit, column-resize, keyboard-navigation, formula-summary, fast-data-entry
- **Intents:** manage-collection, create-edit
- **Suits domains:** project-management, finance, operations, saas
- **Interaction:** edit-cell-on-click, key-arrow-nav, column-sort
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Backlog management in a Notion- or Airtable-style editable grid, Bulk entry and quick updating of tasks
- **Avoid when:** Mobile touch devices where cell editing is awkward
- **Preserve when adapting:** grid-cell-renderer, inline-editor-lifecycle
- **Replace when adapting:** column-types, validation-rules
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** table, input, select, badge, button, scroll-area
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-black-2-png, lib-admin-kit-utils, pm-create-issue-sheet, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input


### Pm Timeline Gantt Chart

Visual schedule of phases inside the project detail record.

- id: `pm-timeline-gantt-chart`
- Page: https://agentic-ui-kit.com/components/pm-timeline-gantt-chart
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/timeline-gantt?piece=pm-timeline-gantt-chart

## Install

```bash
agentic-ui add pm-timeline-gantt-chart
npx shadcn@4.17.0 add @agentic-ui/pm-timeline-gantt-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** milestone-bars, phase-grouping, start-end-markers, progress-overlay
- **Intents:** track-status, compare-over-time
- **Suits domains:** project-management, operations, saas
- **Interaction:** timeline-scroll, phase-hover
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Visual schedule of phases inside the project detail record, Lightweight Gantt chart for product roadmaps
- **Avoid when:** Visualizations with no notion of calendar or duration
- **Preserve when adapting:** timeline-bar-geometry, phase-group-card
- **Replace when adapting:** phase-names, date-markers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, progress, scroll-area
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-separator


### Tasks Kanban Board

Agile workflow for personal tasks.

- id: `tasks-kanban-board`
- Page: https://agentic-ui-kit.com/components/tasks-kanban-board
- Live preview: https://agentic-ui-kit.com/live/fixture/tasks-kanban-board?piece=tasks-kanban-board

## Install

```bash
agentic-ui add tasks-kanban-board
npx shadcn@4.17.0 add @agentic-ui/tasks-kanban-board
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** column-workflow, card-dragging, status-grouping, wip-indicators
- **Intents:** track-status, manage-collection
- **Suits domains:** personal-productivity, project-management, operations, saas
- **Interaction:** drag-across-columns, add-card-in-column
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Agile workflow for personal tasks, Technical support board
- **Avoid when:** Views where the due date prevails over the status
- **Preserve when adapting:** kanban-column-structure, card-preview-layout
- **Replace when adapting:** workflow-stages, card-badges
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button, scroll-area
- **npm dependencies:** @dnd-kit/core, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, @dnd-kit/sortable@10.0.0, @dnd-kit/utilities@3.2.2, lucide-react@0.577.0, tunnel-rat@0.1.2
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, lib-admin-kit-utils, ui-admin-kit-card, ui-admin-kit-scroll-area


### Tasks Workspace

Personal task application.

- id: `tasks-workspace`
- Page: https://agentic-ui-kit.com/components/tasks-workspace
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/todo?piece=tasks-workspace

## Install

```bash
agentic-ui add tasks-workspace
npx shadcn@4.17.0 add @agentic-ui/tasks-workspace
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** task-creation, filter-views, sorting, priority-tagging, inline-completion
- **Intents:** manage-collection, track-status, create-edit
- **Suits domains:** personal-productivity, project-management, saas, operations
- **Interaction:** add-todo, toggle-done, drag-sort, switch-view-mode
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Personal task application, Team task list with statuses
- **Avoid when:** Rigid wizard-style sequential processes
- **Preserve when adapting:** task-list-interaction-model, category-filter-sidebar
- **Replace when adapting:** task-seed-data, priority-labels
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, button, badge, input, checkbox, dropdown-menu, dialog
- **npm dependencies:** @dnd-kit/core, @dnd-kit/sortable, lucide-react, zustand
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** framer-motion@12.38.0, lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0, sonner@^2.0.7, zustand@5.0.8
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, lib-admin-kit-utils, tasks-calendar-schedule, tasks-kanban-board, tasks-sortable-list, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-scroll-area, ui-admin-kit-separator, ui-admin-kit-tooltip, ui-drawer, ui-empty, ui-input-group


### Travel App Header

Marketplace header with section tabs.

- id: `travel-app-header`
- Page: https://agentic-ui-kit.com/components/travel-app-header
- Live preview: https://agentic-ui-kit.com/live/template/travel-marketplace?piece=travel-app-header

## Install

```bash
agentic-ui add travel-app-header
npx shadcn@4.17.0 add @agentic-ui/travel-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sticky-nav, tabs-navigation, compact-pill-mode, avatar-dropdown, unread-indicator, mobile-sheet, light-dark-toggle
- **Intents:** navigate
- **Suits domains:** travel, ecommerce, saas, operations
- **Interaction:** dropdown, tabs, navigate
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** marketplace header with section tabs, booking app nav with avatar and notifications, rental site header with an embedded search
- **Avoid when:** single-screen apps without sections, checkout flows that require a minimal header
- **Preserve when adapting:** sticky-behavior, tabs-vs-pill-modes, avatar-menu-structure
- **Replace when adapting:** domain-links, brand-mark, notification-source
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** avatar, badge, button, dropdown-menu, sheet, tabs
- **npm dependencies:** next/navigation, zustand, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** date-fns-tz@3.2.0, lucide-react@0.577.0, next-themes@0.4.6, nuqs@^2.8.9, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, travel-stay-search-bar, ui-avatar, ui-button, ui-dropdown-menu, ui-sheet


### Agency Image Annotation

Client review of design proofs in an agency portal.

- id: `agency-image-annotation`
- Page: https://agentic-ui-kit.com/components/agency-image-annotation
- Live preview: https://agentic-ui-kit.com/live/component/agency-image-annotation

## Install

```bash
agentic-ui add agency-image-annotation
npx shadcn@4.17.0 add @agentic-ui/agency-image-annotation
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** pin-annotations, region-annotations, threaded-feedback, resolve-reopen, proof-versions, approval-gate, marker-move, keyboard-placement, zoom, status-filter, view-only-mode, responsive-layout
- **Intents:** communicate, create-edit
- **Suits domains:** project-management, media, saas, ecommerce
- **Interaction:** pin-drop, region-drag, marker-drag, keyboard-placement, threaded-reply, resolve-toggle, approve-request-changes, version-switch, zoom
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Client review of design proofs in an agency portal, Marketing asset sign-off before a campaign launch, Product photo QA with region notes for retouching, Screenshot feedback on a UI build shared with stakeholders
- **Avoid when:** Real-time co-editing of the image itself, Video or multi-page documents that need timecodes or page anchors, Free-form discussion that is not tied to a spot on an image
- **Preserve when adapting:** normalized-coordinate-model, marker-numbering-rules, approval-requires-all-resolved, keyboard-placement-contract
- **Replace when adapting:** proof-asset-source, user-directory, persistence-adapter, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, badge, card, switch, textarea, avatar
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-collab-comments-thread, lib-primitives


### AI Chat Shell

Internal operations copilot with conversation history, a streaming thread and a per-conversation model picker.

- id: `ai-chat-shell`
- Page: https://agentic-ui-kit.com/components/ai-chat-shell
- Live preview: https://agentic-ui-kit.com/live/component/ai-chat-shell

## Install

```bash
agentic-ui add ai-chat-shell
npx shadcn@4.17.0 add @agentic-ui/ai-chat-shell
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** conversation-sidebar, collapsible-sidebar, mobile-drawer-navigation, message-thread, new-chat-empty-state, prompt-composer-dock, per-conversation-drafts, streaming-status, stop-generation, settings-panel, model-sync, responsive-panels, keyboard-shortcuts, region-cycling, skip-link, live-announcements, loading-state, error-recovery
- **Intents:** converse, communicate, navigate, configure
- **Suits domains:** ai-workspace, ai-agents, support, devtools, saas
- **Interaction:** select-conversation, send-message, stop-generation, toggle-panels, keyboard-shortcuts
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** internal operations copilot with conversation history, a streaming thread and a per-conversation model picker, support assistant embedded in a SaaS where the agent switches tickets without losing each conversation's draft, developer agent console with temperature and system prompt settings in a side panel, mobile knowledge base chat with history in a drawer and prompt suggestions in a new conversation
- **Avoid when:** a single embedded thread with no history or settings: ai-message-list and ai-prompt-composer are enough, agent flows with several participants in parallel, where ai-multi-agent-view fits
- **Preserve when adapting:** three-region-layout, per-conversation-drafts, focus-handoff-to-composer, responsive-panel-placement
- **Replace when adapting:** assistant-name-and-copy, conversation-and-message-data, model-catalog, send-and-stream-transport
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** button, badge, sheet
- **npm dependencies:** ai-conversation-history, ai-message-list, ai-chat-empty-state, ai-prompt-composer, ai-chat-settings-panel
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** ai-chat-empty-state, ai-chat-settings-panel, ai-conversation-history, ai-message-list, ai-prompt-composer, lib-primitives


### AI Message List

Copilot thread with hundreds of messages that pages backwards when scrolling up without moving what is being read.

- id: `ai-message-list`
- Page: https://agentic-ui-kit.com/components/ai-message-list
- Live preview: https://agentic-ui-kit.com/live/component/ai-message-list

## Install

```bash
agentic-ui add ai-message-list
npx shadcn@4.17.0 add @agentic-ui/ai-message-list
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** virtualized-rendering, variable-height-measurement, day-grouping, relative-day-labels, floating-day-label, follow-output, smart-scroll-to-bottom, unread-counter, scroll-anchoring, history-paging, keyboard-feed-navigation, live-announcements, loading-state, empty-state, error-recovery
- **Intents:** converse, communicate
- **Suits domains:** ai-workspace, ai-agents, support, devtools, saas
- **Interaction:** scroll-to-bottom, load-older-history, keyboard-navigation, retry-after-error
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** copilot thread with hundreds of messages that pages backwards when scrolling up without moving what is being read, support chat where replies arrive while the agent reviews the history and a button shows '3 new messages', agent console that follows streaming output while the user is at the bottom and stops following when they scroll up, incident channel grouped by day (Today, Yesterday, weekday) with keyboard navigation between messages
- **Avoid when:** short lists of a few messages with no history or streaming: stacking ai-message-bubble is enough, thread views with nested or branching replies, where ai-conversation-branching or a comment tree fits
- **Preserve when adapting:** follow-output-state-machine, message-anchored-scroll-restoration, roving-tabindex-feed, day-grouping-by-time-zone
- **Replace when adapting:** message-renderer, day-label-copy, empty-and-error-copy, page-size-and-fetching
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** button, skeleton
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** ai-message-bubble, lib-primitives


### Commerce Cart Drawer

Storefront side cart opened from the header bag icon after add-to-cart.

- id: `commerce-cart-drawer`
- Page: https://agentic-ui-kit.com/components/commerce-cart-drawer
- Live preview: https://agentic-ui-kit.com/live/component/commerce-cart-drawer

## Install

```bash
agentic-ui add commerce-cart-drawer
npx shadcn@4.17.0 add @agentic-ui/commerce-cart-drawer
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** side-drawer-cart, quantity-stepper, stock-clamped-quantities, remove-with-undo, upsell-suggestions, free-shipping-progress, shipping-estimate, postal-code-validation, async-rate-adapter, order-summary, checkout-handoff, empty-loading-error-states, live-region-announcements
- **Intents:** manage-collection, execute-flow
- **Suits domains:** ecommerce, travel, culinary, wine, books
- **Interaction:** quantity-stepper, remove-undo, upsell-add, shipping-estimate, method-selection, checkout-handoff
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Storefront side cart opened from the header bag icon after add-to-cart, Wine shop cart that nudges toward a free-shipping threshold with pairing upsells, Meal-kit or bookstore order review with delivery estimate before checkout, Travel add-ons basket with quantity steppers and a checkout handoff
- **Avoid when:** Single-item instant purchase flows where a buy-now button is enough, Carts with complex B2B pricing (tiered quotes, approvals) that need a full page, Final checkout with payment capture; this component only hands off to checkout
- **Preserve when adapting:** stock-clamped-steppers, undo-after-remove, sticky-order-summary, async-shipping-adapter-contract, focus-management
- **Replace when adapting:** product-fixtures, rate-table, free-shipping-threshold, currency-locale, upsell-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** sheet, button, badge, input, label, progress, separator, skeleton
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Dashboard Comparison Table

Quarterly business review comparing this quarter with last quarter or the same quarter last year.

- id: `dashboard-comparison-table`
- Page: https://agentic-ui-kit.com/components/dashboard-comparison-table
- Live preview: https://agentic-ui-kit.com/live/component/dashboard-comparison-table

## Install

```bash
agentic-ui add dashboard-comparison-table
npx shadcn@4.17.0 add @agentic-ui/dashboard-comparison-table
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** period-vs-period, entity-vs-entity, dimension-tabs, subject-pickers, swap-sides, direction-aware-sentiment, relative-and-absolute-deltas, percentage-point-deltas, sortable-columns, grouped-metrics, comparison-bars, csv-export, missing-value-handling, mobile-card-list, empty-loading-error-states, live-region-announcements
- **Intents:** compare-over-time, explore-detail
- **Suits domains:** analytics, saas, finance, ecommerce, operations, billing
- **Interaction:** dimension-tabs, subject-select, swap, column-sort, delta-mode-toggle, csv-export
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Quarterly business review comparing this quarter with last quarter or the same quarter last year, Region or store performance side by side (EMEA vs North America), Plan or cohort comparison of revenue, churn and support load, Month-over-month operations scorecard where lower latency and cost count as improvements
- **Avoid when:** More than two subjects must be compared at once; use a multi-series chart or pivot table, Trends over many time points matter more than a single A/B snapshot, Only one headline metric is needed; a scorecard or KPI card is lighter
- **Preserve when adapting:** higher-is-better-semantics, null-last-sorting, distinct-a-b-selection, table-semantics-and-aria-sort, mobile-card-fallback
- **Replace when adapting:** metric-definitions, dimension-fixtures, currency-locale, flat-threshold, copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** card, tabs, select, table, button, label, skeleton
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Devtools Visitor Traffic Chart

Developer traffic on a portal.

- id: `devtools-visitor-traffic-chart`
- Page: https://agentic-ui-kit.com/components/devtools-visitor-traffic-chart
- Live preview: https://agentic-ui-kit.com/live/piece/devtools-visitor-traffic-chart?piece=devtools-visitor-traffic-chart

## Install

```bash
agentic-ui add devtools-visitor-traffic-chart
npx shadcn@4.17.0 add @agentic-ui/devtools-visitor-traffic-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** visitor-counting, trend-analysis, peak-detection
- **Intents:** compare-over-time, show-composition
- **Suits domains:** devtools, analytics, marketing, ecommerce
- **Interaction:** tooltip-inspection
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Developer traffic on a portal, Unique visits to documentation
- **Avoid when:** Systems without external users or sessions
- **Preserve when adapting:** traffic-area-layout, legend-positioning
- **Replace when adapting:** traffic-metrics, granularity-step
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge
- **npm dependencies:** recharts, lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** recharts@3.8.1
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-card, ui-admin-kit-chart


### Finance Income Expense Timeseries

MRR vs previous period.

- id: `finance-income-expense-timeseries`
- Page: https://agentic-ui-kit.com/components/finance-income-expense-timeseries
- Live preview: https://agentic-ui-kit.com/live/piece/finance-income-expense-timeseries?piece=finance-income-expense-timeseries

## Install

```bash
agentic-ui add finance-income-expense-timeseries
npx shadcn@4.17.0 add @agentic-ui/finance-income-expense-timeseries
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** timeseries, comparison, range-selection, tooltip, chart-type-switch, legend-toggle
- **Intents:** compare-over-time
- **Suits domains:** finance, billing, saas, ecommerce, operations
- **Interaction:** tooltip, range-selector, dropdown-menu
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** MRR vs previous period, invoices issued vs collected, API requests vs errors
- **Avoid when:** composition by category, fewer than 3 time observations
- **Preserve when adapting:** information-hierarchy, chart-grammar, interaction-model
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, chart, dropdown-menu
- **npm dependencies:** recharts, lucide-react, zustand
- **Used in:** Fundwell Finance Tracker (template), Analytics (blueprint), Fintech Trading (analytics live) (blueprint), Marketing Analytics (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts-v2@npm:recharts@^2.15.4, zustand@5.0.8
- **Registry dependencies:** lib-finance-tracker-utils, ui-finance-tracker-button, ui-finance-tracker-chart, ui-finance-tracker-dropdown-menu


### Pm Dashboard Milestones

Roadmap and quarterly release tracking.

- id: `pm-dashboard-milestones`
- Page: https://agentic-ui-kit.com/components/pm-dashboard-milestones
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/dashboard-4?piece=pm-dashboard-milestones

## Install

```bash
agentic-ui add pm-dashboard-milestones
npx shadcn@4.17.0 add @agentic-ui/pm-dashboard-milestones
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** milestone-timeline, deliverable-tracking, risk-assessment, status-badges
- **Intents:** track-status, explore-detail
- **Suits domains:** project-management, saas, operations, devops-status
- **Interaction:** milestone-expand, risk-filter
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Roadmap and quarterly release tracking, Status of critical deliverables
- **Avoid when:** Granular management of everyday subtasks
- **Preserve when adapting:** milestone-stepper, deliverable-badges
- **Replace when adapting:** milestone-labels, target-dates
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, button, progress, separator
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @xyflow/react@^12.10.2, framer-motion@12.38.0, lucide-react@0.577.0, next-themes@0.4.6
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-input


### Pm Inbox Compact Triage

Superhuman-style triage inbox for issues.

- id: `pm-inbox-compact-triage`
- Page: https://agentic-ui-kit.com/components/pm-inbox-compact-triage
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/inbox-4?piece=pm-inbox-compact-triage

## Install

```bash
agentic-ui add pm-inbox-compact-triage
npx shadcn@4.17.0 add @agentic-ui/pm-inbox-compact-triage
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** keyboard-navigation, bulk-archive, snooze-notification, quick-mark
- **Intents:** communicate, manage-collection
- **Suits domains:** project-management, saas, devtools, personal-productivity
- **Interaction:** keyboard-select, bulk-action, snooze-item
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Superhuman-style triage inbox for issues, Bulk processing of operational notifications
- **Avoid when:** Visualizations focused on rich content or images
- **Preserve when adapting:** compact-row-grid, shortcut-hints
- **Replace when adapting:** action-icons, categorization-tags
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** badge, button, checkbox, kbd
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-bw-1-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-input, ui-admin-kit-scroll-area


### Pm Member List Table

Member and permission management in the organization settings.

- id: `pm-member-list-table`
- Page: https://agentic-ui-kit.com/components/pm-member-list-table
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/member-list-3?piece=pm-member-list-table

## Install

```bash
agentic-ui add pm-member-list-table
npx shadcn@4.17.0 add @agentic-ui/pm-member-list-table
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** bulk-role-change, permission-matrix, last-active-timestamp, invite-trigger
- **Intents:** manage-collection, configure
- **Suits domains:** project-management, saas, settings, hr
- **Interaction:** role-dropdown, select-multiple-rows, open-actions-menu
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Member and permission management in the organization settings, User table with role assignment and invitation states
- **Avoid when:** Informal social directory views
- **Preserve when adapting:** user-management-table, bulk-action-toolbar
- **Replace when adapting:** role-levels, permission-sets
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** table, button, badge, avatar, dropdown-menu, checkbox, pagination
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, sonner@^2.0.7
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-checkbox, ui-admin-kit-dropdown-menu, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-tabs, ui-field, ui-input-group, ui-table


### Pm Project List Data Table

Financial and budget control of a project portfolio.

- id: `pm-project-list-data-table`
- Page: https://agentic-ui-kit.com/components/pm-project-list-data-table
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/project-list-3?piece=pm-project-list-data-table

## Install

```bash
agentic-ui add pm-project-list-data-table
npx shadcn@4.17.0 add @agentic-ui/pm-project-list-data-table
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** dense-table, multi-column-sort, budget-tracking, export-csv, batch-archive
- **Intents:** manage-collection, explore-detail
- **Suits domains:** project-management, finance, saas, operations
- **Interaction:** sort-column, export-data, row-click
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Financial and budget control of a project portfolio, Executive project tracking table for a PMO
- **Avoid when:** Casual user interfaces focused only on viewing images
- **Preserve when adapting:** project-table-layout, budget-column-formatting
- **Replace when adapting:** financial-metrics, client-taxonomy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** table, button, badge, avatar, input, dropdown-menu, pagination
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, asset-admin-kit-images-project-backgrounds-1-png, asset-admin-kit-images-project-backgrounds-10-png, asset-admin-kit-images-project-backgrounds-11-png, asset-admin-kit-images-project-backgrounds-12-png, asset-admin-kit-images-project-backgrounds-2-png, asset-admin-kit-images-project-backgrounds-3-png, asset-admin-kit-images-project-backgrounds-4-png, asset-admin-kit-images-project-backgrounds-5-png, asset-admin-kit-images-project-backgrounds-6-png, asset-admin-kit-images-project-backgrounds-7-png, asset-admin-kit-images-project-backgrounds-8-png, asset-admin-kit-images-project-backgrounds-9-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-command, ui-admin-kit-popover


### Pm Team List Table

Corporate management of squads and cost centers.

- id: `pm-team-list-table`
- Page: https://agentic-ui-kit.com/components/pm-team-list-table
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/team-list-3?piece=pm-team-list-table

## Install

```bash
agentic-ui add pm-team-list-table
npx shadcn@4.17.0 add @agentic-ui/pm-team-list-table
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** table-view, capacity-metrics, manager-selection, settings-action
- **Intents:** manage-collection, configure
- **Suits domains:** project-management, hr, saas, operations
- **Interaction:** table-sort, open-team-settings
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Corporate management of squads and cost centers, Administrative panel of teams and manager assignments
- **Avoid when:** Casual visualizations with no corporate requirements
- **Preserve when adapting:** team-table-headers, manager-cell-renderer
- **Replace when adapting:** cost-centers, department-names
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** table, button, badge, avatar, dropdown-menu
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-input


### Travel Stay Search Bar

Stay search by destination, dates and guests.

- id: `travel-stay-search-bar`
- Page: https://agentic-ui-kit.com/components/travel-stay-search-bar
- Live preview: https://agentic-ui-kit.com/live/piece/travel-stay-search-bar?piece=travel-stay-search-bar

## Install

```bash
agentic-ui add travel-stay-search-bar
npx shadcn@4.17.0 add @agentic-ui/travel-stay-search-bar
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** anchored-popover-panels, destination-autocomplete, range-calendar, guest-steppers, recent-searches, live-suggestion-filter, query-string-push
- **Intents:** explore-detail, navigate
- **Suits domains:** travel, ecommerce, maps-ops, operations
- **Interaction:** popover, calendar, stepper, autocomplete
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** stay search by destination, dates and guests, flight search with origin/destination and passengers, search for coworking spaces by area and capacity
- **Avoid when:** free-text searches without facets, contexts without a calendar or inventory
- **Preserve when adapting:** segmented-pill-ux, draft-then-apply-model, suggestion-ranking
- **Replace when adapting:** domain-entities, date-semantics, guest-parameters
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 10/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, calendar, input, popover, separator
- **npm dependencies:** nuqs, next/navigation, react-day-picker, date-fns, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template), Marketplace (blueprint)
- **npm dependencies (registry):** date-fns-tz@3.2.0, lucide-react@0.577.0, nuqs@^2.8.9, react-day-picker@10.0.1, usehooks-ts@^3.1.1, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-button, ui-popover, ui-separator, ui-travel-marketplace-calendar


### Orchestra OPS Ensemble Pulse

Distribution of strings, woodwinds, brass and percussion.

- id: `orchestra-ops-ensemble-pulse`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-ensemble-pulse
- Live preview: https://agentic-ui-kit.com/live/piece/orchestra-ops-ensemble-pulse?piece=orchestra-ops-ensemble-pulse

## Install

```bash
agentic-ui add orchestra-ops-ensemble-pulse
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-ensemble-pulse
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** section-column-chart, color-coded-sections, count-labels, total-counter
- **Intents:** show-composition, track-status
- **Suits domains:** music, hr, operations, analytics, logistics
- **Interaction:** route-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Distribution of strings, woodwinds, brass and percussion, Visual breakdown of staffing by department, Column chart for the composition of resources or categories
- **Avoid when:** Continuous time series, Complex multidimensional comparisons
- **Preserve when adapting:** relative-height-math, count-over-column-labels, header-count-layout
- **Replace when adapting:** category-palette, section-labels, data-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.73/10
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 8/10, code 8.5/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react, zustand
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-orchestra-ops-utils, ui-avatar, ui-badge, ui-button


### Orchestra OPS Musician Card

Musician profile with desk, instrument and status.

- id: `orchestra-ops-musician-card`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-musician-card
- Live preview: https://agentic-ui-kit.com/live/piece/orchestra-ops-musician-card?piece=orchestra-ops-musician-card

## Install

```bash
agentic-ui add orchestra-ops-musician-card
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-musician-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** avatar-fallback, instrument-badge, section-tag, chair-status, quick-contact-actions
- **Intents:** explore-detail
- **Suits domains:** music, hr, operations, crm, education
- **Interaction:** contact-click, avatar-hover
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Musician profile with desk, instrument and status, Team member card with a short bio and email, Artist directory item for soloists and tutti players
- **Avoid when:** Massive tables of more than a thousand rows without pagination, Full editing of an employment record
- **Preserve when adapting:** avatar-badge-alignment, contact-button-strip, status-pill
- **Replace when adapting:** musician-attributes, email-handler, instrument-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.73/10
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 8/10, code 8.5/10
- **Uses primitives:** avatar, badge, button
- **npm dependencies:** lucide-react, zustand
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-orchestra-ops-utils, ui-avatar, ui-badge, ui-button, ui-separator, ui-tabs


### Orchestra OPS Programme Card

Programme card with work durations and composer.

- id: `orchestra-ops-programme-card`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-programme-card
- Live preview: https://agentic-ui-kit.com/live/piece/orchestra-ops-programme-card?piece=orchestra-ops-programme-card

## Install

```bash
agentic-ui add orchestra-ops-programme-card
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-programme-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** composer-heading, piece-movements-list, instrumentation-tags, timing-badge, conductor-avatar
- **Intents:** explore-detail, show-composition
- **Suits domains:** music, media, education, knowledge, operations
- **Interaction:** card-hover, work-item-inspect
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Programme card with work durations and composer, Repertoire page with a detailed list of movements, Catalog item for chamber music ensembles
- **Avoid when:** Condensed single-line rows with no room for works, Commercial product cards for checkout
- **Preserve when adapting:** hero-gradient-header, work-duration-row, status-tag
- **Replace when adapting:** piece-metadata, timing-formatting, hue-generator
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.73/10
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 8/10, code 8.5/10
- **Uses primitives:** badge, separator
- **npm dependencies:** lucide-react, zustand
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-orchestra-ops-utils, ui-badge, ui-button, ui-separator, ui-tabs


### AI Agent Run Trace

Agent debug panel showing reasoning, tool calls with input/output, and the final response.

- id: `ai-agent-run-trace`
- Page: https://agentic-ui-kit.com/components/ai-agent-run-trace
- Live preview: https://agentic-ui-kit.com/live/component/ai-agent-run-trace

## Install

```bash
agentic-ui add ai-agent-run-trace
npx shadcn@4.17.0 add @agentic-ui/ai-agent-run-trace
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** step-timeline, thought-tool-result-steps, collapsible-steps, kind-filter, roving-keyboard-navigation, live-announcement, run-summary, step-retry, run-error-state, empty-state, streaming-steps, reduced-motion
- **Intents:** orchestrate-agents, audit-trail, monitor-live, explore-detail
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, analytics
- **Interaction:** expand-collapse, filter, keyboard-navigation, live-announcement, retry
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** agent debug panel showing reasoning, tool calls with input/output, and the final response, live run that receives steps via streaming and announces each new step, post-mortem audit of a failed run with retry of the tool step that failed, filter only the tool calls of a long run
- **Avoid when:** a single tool call with no run context (use ai-tool-call-card), only the agent state is needed (use ai-agent-status-badge), HTTP logs/system events with no agent semantics (use devtools-event-log), several agents in parallel with messages between them (use ai-multi-agent-view)
- **Preserve when adapting:** thought-tool-result-grammar, ordered-timeline-semantics, single-tab-stop-roving-focus, status-text-not-colour-only, change-only-announcements
- **Replace when adapting:** domain-copy, step-fixtures, token-tints
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button
- **npm dependencies:** @agentic-ui/ai-tool-call-card, @agentic-ui/ai-agent-status-badge
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** ai-agent-status-badge, ai-tool-call-card, lib-primitives


### Generator Easing Spring Editor

A design-system team tunes the brand ease and spring and exports them as a tokens.json override for the Stripe personality.

- id: `generator-easing-spring-editor`
- Page: https://agentic-ui-kit.com/components/generator-easing-spring-editor
- Live preview: https://agentic-ui-kit.com/live/component/generator-easing-spring-editor

## Install

```bash
agentic-ui add generator-easing-spring-editor
npx shadcn@4.17.0 add @agentic-ui/generator-easing-spring-editor
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** cubic-bezier-editor, spring-editor, settle-time-readout, spring-response-plot, personality-comparison, personality-fit-warnings, preview-motions, presets, versioned-url-state, css-custom-properties-export, tailwind-ease-token-export, tsx-spring-config-export, motion-tokens-override-export, copy-to-clipboard, file-download, shadcn-registry-item
- **Intents:** configure, create-edit, import-export
- **Suits domains:** devtools, saas, settings, operations
- **Interaction:** click, drag, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A design-system team tunes the brand ease and spring and exports them as a tokens.json override for the Stripe personality., A developer shapes a drawer spring with more mass and copies the TSX config for useSpring., A designer compares an overshooting curve with the Enterprise personality before proposing it for an admin product.
- **Avoid when:** The project only needs the shipped motion tokens; pick a personality instead of editing curves., Animations that must change layout properties such as width or height; the exports target transform and opacity.
- **Preserve when adapting:** controls-preview-code-layout, transform-only-preview, poster-first-offscreen-pause, personality-comparison, motion-token-format
- **Replace when adapting:** presets, token-name, preview-shapes
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-generator-foundation, lib-motion


### Generator Foundation Shell

A background pattern generator that exports CSS, Tailwind classes, a React component and a shadcn registry item.

- id: `generator-foundation-shell`
- Page: https://agentic-ui-kit.com/components/generator-foundation-shell
- Live preview: https://agentic-ui-kit.com/live/component/generator-foundation-shell

## Install

```bash
agentic-ui add generator-foundation-shell
npx shadcn@4.17.0 add @agentic-ui/generator-foundation-shell
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** control-panel, theme-token-colour-picker, cubic-bezier-curve-pad, seeded-randomness, presets, versioned-url-state, poster-first-preview, offscreen-pause, isolated-iframe-preview, code-tabs, copy-to-clipboard, file-download, shadcn-registry-item-builder
- **Intents:** configure, create-edit, import-export
- **Suits domains:** devtools, saas, settings, operations
- **Interaction:** click, drag, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A background pattern generator that exports CSS, Tailwind classes, a React component and a shadcn registry item., An easing and spring editor that shares a curve pad, presets and a copyable link to the current settings., A shadow or glass surface tuner where designers compare light and dark previews and download the token file.
- **Avoid when:** The page only displays fixed code samples; use a plain copy block instead., Settings must be persisted per user on a server; the shell keeps state in the URL only.
- **Preserve when adapting:** controls-preview-code-layout, versioned-url-state, poster-first-offscreen-pause, no-iframe-transforms, copy-download-feedback
- **Replace when adapting:** generator-controls, generate-function, presets, registry-item-metadata
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-copy-success-masked, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-motion, lib-motion-copy-success-masked


### Generator Noise Grain

A marketing team adds fine film grain over a gradient hero to hide banding and pastes the Tailwind class into the section.

- id: `generator-noise-grain`
- Page: https://agentic-ui-kit.com/components/generator-noise-grain
- Live preview: https://agentic-ui-kit.com/live/component/generator-noise-grain

## Install

```bash
agentic-ui add generator-noise-grain
npx shadcn@4.17.0 add @agentic-ui/generator-noise-grain
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** svg-turbulence-tiles, film-grain, paper-noise, base-frequency-octaves-controls, fibre-stretch, seeded-noise, tile-size-and-density, opacity-and-blend-mode, monochrome-or-colour-grain, theme-token-colours, live-static-preview, presets, versioned-url-state, svg-data-uri-export, png-tile-export, css-overlay-export, tailwind-class-export, tsx-noise-grain-export, raw-svg-download, copy-to-clipboard, file-download, shadcn-registry-item
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, analytics, settings, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A marketing team adds fine film grain over a gradient hero to hide banding and pastes the Tailwind class into the section., A note-taking app gives its editor canvas a paper-fibre texture exported as a CSS overlay that follows light and dark themes., A designer exports a colour grain PNG tile at 2x for an email template where SVG data URIs are not supported.
- **Avoid when:** Geometric or line patterns; use the SVG pattern generator instead., Animated grain as the main effect; the exports are static and the optional stepped shimmer belongs to the grain component's motion policy.
- **Preserve when adapting:** controls-preview-code-layout, stitched-turbulence-tile, token-painted-alpha-mask, static-preview
- **Replace when adapting:** presets, sample-content, class-name
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/fx-noise-grain, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile none, library css, reduced-motion fallback yes
- **Registry dependencies:** fx-noise-grain, lib-generator-foundation


### Generator Shadow Elevation

A design system team tunes one elevation scale for cards, menus and dialogs and ships it as CSS variables.

- id: `generator-shadow-elevation`
- Page: https://agentic-ui-kit.com/components/generator-shadow-elevation
- Live preview: https://agentic-ui-kit.com/live/component/generator-shadow-elevation

## Install

```bash
agentic-ui add generator-shadow-elevation
npx shadcn@4.17.0 add @agentic-ui/generator-shadow-elevation
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** elevation-scale, layered-shadows, colour-matched-shadows, light-angle-control, dark-mode-strategies, light-dark-side-by-side-preview, css-custom-properties-export, tailwind-theme-tokens-export, tsx-component-export, theme-spec-fragment-export, shadcn-registry-item-export, presets, versioned-url-state, copy-to-clipboard, file-download
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, settings, devtools, analytics
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A design system team tunes one elevation scale for cards, menus and dialogs and ships it as CSS variables., A product with tinted brand backgrounds gets shadows that pick up the canvas hue instead of flat grey., A dark-first dashboard replaces invisible drop shadows with hairline edges or lighter raised surfaces.
- **Avoid when:** The interface is deliberately flat with no shadows; use borders only., A single one-off shadow is needed; write the box-shadow by hand.
- **Preserve when adapting:** token-derived-shadow-colour, static-shadows-no-animation, light-and-dark-values-per-level, generate-config-purity
- **Replace when adapting:** presets, preview-canvases, level-role-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-generator-foundation


### Generator Svg Pattern

A marketing team adds a faded dot grid behind a pricing hero and pastes the Tailwind class into the section.

- id: `generator-svg-pattern`
- Page: https://agentic-ui-kit.com/components/generator-svg-pattern
- Live preview: https://agentic-ui-kit.com/live/component/generator-svg-pattern

## Install

```bash
agentic-ui add generator-svg-pattern
npx shadcn@4.17.0 add @agentic-ui/generator-svg-pattern
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** seamless-svg-tiles, pattern-families, scale-stroke-gap-controls, rotation-pattern-fill, theme-token-colours, fade-masks, live-static-preview, presets, versioned-url-state, svg-data-uri-export, css-custom-properties-export, tailwind-class-export, tsx-background-pattern-export, raw-svg-download, copy-to-clipboard, file-download, shadcn-registry-item
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, analytics, settings, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A marketing team adds a faded dot grid behind a pricing hero and pastes the Tailwind class into the section., A dashboard empty state gets a muted contour-map background exported as a CSS class that follows light and dark themes., A developer tilts a grid by 15 degrees for an onboarding card and installs the React component on top of the background patterns component.
- **Avoid when:** Photographic or illustrative backgrounds; the generator only draws geometric line and dot tiles., Animated or drifting backgrounds; the exports are static by design, use the background patterns component's motion instead.
- **Preserve when adapting:** controls-preview-code-layout, seamless-tile-geometry, token-painted-alpha-mask, static-preview
- **Replace when adapting:** presets, sample-content, class-name
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/fx-background-patterns, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile none, library css, reduced-motion fallback yes
- **Registry dependencies:** lib-generator-foundation


### Generator Text Effect Playground

A marketing team types its own hero line into the typewriter, tries the rotating and prompt variants at a faster speed, and pastes the exported component with its install command.

- id: `generator-text-effect-playground`
- Page: https://agentic-ui-kit.com/components/generator-text-effect-playground
- Live preview: https://agentic-ui-kit.com/live/component/generator-text-effect-playground

## Install

```bash
agentic-ui add generator-text-effect-playground
npx shadcn@4.17.0 add @agentic-ui/generator-text-effect-playground
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** typewriter-preview, text-scramble-preview, word-rotate-preview, split-reveal-preview, text-annotate-preview, gradient-text-preview, scroll-fill-preview, custom-copy-input, speed-and-stagger-token-timing, trigger-selection, theme-token-colours, personality-and-profile-preview, reduced-motion-preview, live-preview, presets, versioned-url-state, tsx-component-export, registry-install-command, timing-css-variables-export, tailwind-class-export, copy-to-clipboard, file-download, shadcn-registry-item
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, analytics, settings, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A marketing team types its own hero line into the typewriter, tries the rotating and prompt variants at a faster speed, and pastes the exported component with its install command., A designer compares the split reveal under the stripe and enterprise personalities before choosing one for a product page, then copies the timing variables to fade in the subtitle after the heading., A product team checks that a highlighted claim still reads correctly with reduced motion before shipping the annotate export.
- **Avoid when:** Body copy, forms, tables or error messages; text effects belong to headings, claims and hero lines., Live values that must be announced to assistive technology; use a live region or the number pieces instead., Projects that need custom glyph sets or per-character timing curves beyond the pieces' props; edit the exported component instead.
- **Preserve when adapting:** controls-preview-code-layout, shared-usage-for-preview-and-export, token-colours, reduced-motion-fallbacks
- **Replace when adapting:** presets, sample-content, class-name
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/motion, @agentic-ui/motion-typewriter, @agentic-ui/motion-text-scramble, @agentic-ui/motion-word-rotate, @agentic-ui/motion-text-reveal-split, @agentic-ui/motion-text-annotate, @agentic-ui/fx-gradient-text, @agentic-ui/motion-scroll-text-fill, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-gradient-text, lib-generator-foundation, lib-motion, motion-scroll-text-fill, motion-text-annotate, motion-text-reveal-split, motion-text-scramble, motion-typewriter, motion-word-rotate


### Generator Wave Blob

A landing page team generates three layered waves under the hero and pastes the WaveDivider component, which follows light and dark themes through the primary token.

- id: `generator-wave-blob`
- Page: https://agentic-ui-kit.com/components/generator-wave-blob
- Live preview: https://agentic-ui-kit.com/live/component/generator-wave-blob

## Install

```bash
agentic-ui add generator-wave-blob
npx shadcn@4.17.0 add @agentic-ui/generator-wave-blob
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** seeded-organic-blobs, wave-dividers, layered-waves, complexity-and-contrast-controls, seed-randomise, flip-and-position, morph-target-seed, animated-variant-transform-opacity, theme-token-colours, live-preview, presets, versioned-url-state, svg-path-export, tsx-wave-divider-blob-export, css-mask-export, css-clip-path-export, tailwind-class-export, copy-to-clipboard, file-download, shadcn-registry-item
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, analytics, settings, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A landing page team generates three layered waves under the hero and pastes the WaveDivider component, which follows light and dark themes through the primary token., A product team adds a soft blob behind an empty-state illustration using the Tailwind class, with no extra dependency., A designer exports a morphing blob as CSS for a pricing section; it crossfades between two seeds and stays still for users who prefer reduced motion.
- **Avoid when:** Geometric or repeating patterns; use the SVG pattern generator instead., Blurred, glowing ambient backgrounds; use the gradient mesh generator or the blob morph effect instead., Shapes that must interpolate point by point at runtime; the animated variant crossfades two shapes and never animates the path itself.
- **Preserve when adapting:** controls-preview-code-layout, seeded-geometry, token-painted-shapes, transform-opacity-motion
- **Replace when adapting:** presets, sample-content, class-name
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-generator-foundation, lib-motion


### Knowledge AI Prompt Composer

Prompt composer with knowledge base suggestions.

- id: `knowledge-ai-prompt-composer`
- Page: https://agentic-ui-kit.com/components/knowledge-ai-prompt-composer
- Live preview: https://agentic-ui-kit.com/live/template/team-workspace/ai?piece=knowledge-ai-prompt-composer

## Install

```bash
agentic-ui add knowledge-ai-prompt-composer
npx shadcn@4.17.0 add @agentic-ui/knowledge-ai-prompt-composer
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** prompt-input, model-select, suggested-prompts, chat-history
- **Intents:** generate-content, converse
- **Suits domains:** ai-workspace, knowledge, ai-content, saas, personal-productivity
- **Interaction:** type-prompt, select-model, pick-suggestion
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Prompt composer with knowledge base suggestions, Assistant panel integrated into a document workspace
- **Avoid when:** Products without a model backend or generative assistance
- **Preserve when adapting:** composer-layout, suggestion-chips
- **Replace when adapting:** model-list, prompt-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, badge, input, select
- **npm dependencies:** lucide-react
- **Used in:** Pagewell Team Workspace (template), AI App (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-team-workspace-utils, ui-badge, ui-button, ui-input, ui-select


### Knowledge Onboarding Task Board

Phased onboarding plan with progress.

- id: `knowledge-onboarding-task-board`
- Page: https://agentic-ui-kit.com/components/knowledge-onboarding-task-board
- Live preview: https://agentic-ui-kit.com/live/template/team-workspace/tasks?piece=knowledge-onboarding-task-board

## Install

```bash
agentic-ui add knowledge-onboarding-task-board
npx shadcn@4.17.0 add @agentic-ui/knowledge-onboarding-task-board
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** phase-grouping, progress-tracking, view-switch, category-filter
- **Intents:** track-status, manage-collection
- **Suits domains:** knowledge, project-management, hr, personal-productivity, saas
- **Interaction:** check-task, switch-view, filter-category
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Phased onboarding plan with progress, Employee onboarding checklist
- **Avoid when:** Workflows with no defined phases or progression
- **Preserve when adapting:** phase-grouping, progress-summary
- **Replace when adapting:** task-copy, phase-names
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** badge, checkbox, progress, toggle-group, select
- **npm dependencies:** lucide-react
- **Used in:** Pagewell Team Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-team-workspace-utils, ui-badge, ui-checkbox, ui-progress, ui-select, ui-toggle-group


### Knowledge Teamspace Document Library

Document library by team space.

- id: `knowledge-teamspace-document-library`
- Page: https://agentic-ui-kit.com/components/knowledge-teamspace-document-library
- Live preview: https://agentic-ui-kit.com/live/template/team-workspace/library?piece=knowledge-teamspace-document-library

## Install

```bash
agentic-ui add knowledge-teamspace-document-library
npx shadcn@4.17.0 add @agentic-ui/knowledge-teamspace-document-library
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** teamspace-grouping, search-filter, tab-views, access-badges
- **Intents:** manage-collection, navigate
- **Suits domains:** knowledge, notes, file-storage, project-management, saas
- **Interaction:** search, switch-tab, expand-group
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Document library by team space, Navigable index of a corporate wiki
- **Avoid when:** Collections of fewer than a dozen items
- **Preserve when adapting:** teamspace-grouping, access-badges
- **Replace when adapting:** document-titles, teamspace-names
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** badge, button, input, tabs, collapsible
- **npm dependencies:** date-fns, lucide-react
- **Used in:** Pagewell Team Workspace (template), Knowledge Workspace (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-team-workspace-utils, ui-badge, ui-button, ui-collapsible, ui-input, ui-tabs


### Motion Dock

Workspace app switcher (Home, Inbox, Projects, Calendar) with unread badges.

- id: `motion-dock`
- Page: https://agentic-ui-kit.com/components/motion-dock
- Live preview: https://agentic-ui-kit.com/live/component/motion-dock

## Install

```bash
agentic-ui add motion-dock
npx shadcn@4.17.0 add @agentic-ui/motion-dock
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** proximity-magnification, spring-physics, neighbour-push, launch-lift, active-indicator, badges, roving-focus-keyboard, horizontal-and-vertical
- **Intents:** navigate
- **Suits domains:** saas, project-management, personal-productivity, file-storage, media, devtools
- **Interaction:** hover-magnify, keyboard-navigation, activate, tooltip
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Workspace app switcher (Home, Inbox, Projects, Calendar) with unread badges, Side rail of tools in a media or design editor, Launcher for internal devtools consoles in an operations workspace
- **Avoid when:** More than about 12 destinations or deep hierarchies (use a sidebar), Dense enterprise back offices where magnification distracts (use motion none or a static toolbar), Primary mobile navigation (use a bottom nav with labels)
- **Preserve when adapting:** m01-personality-spring, subtle-peak-cap, transform-only-magnification, reduced-motion-css-fallback, active-dot-badges-and-announcement, roving-focus-keyboard-model
- **Replace when adapting:** destinations-and-icons, badge-source, colors
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** react, @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 50 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Hover Card

Assignee mention preview with follow and open-profile actions.

- id: `motion-hover-card`
- Page: https://agentic-ui-kit.com/components/motion-hover-card
- Live preview: https://agentic-ui-kit.com/live/component/motion-hover-card

## Install

```bash
agentic-ui add motion-hover-card
npx shadcn@4.17.0 add @agentic-ui/motion-hover-card
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** hover-intent-open, focus-open, escape-dismiss, focus-restore, keyboard-reachable-actions, tooltip-semantics, entity-preview, progress-preview, media-preview, personality-adaptation, reduced-motion-fallback
- **Intents:** navigate, explore-detail, track-status
- **Suits domains:** saas, project-management, devtools, social, media, crm
- **Interaction:** hover, focus, keyboard-navigation, click
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Assignee mention preview with follow and open-profile actions, Build or job progress summary on a status link (informative tooltip), Attachment preview with play and open-in-library actions
- **Avoid when:** Essential information that must be visible without hover or focus, Touch-first surfaces where a sheet or dedicated detail page is clearer, Forms or multi-step flows inside the preview (use a dialog)
- **Preserve when adapting:** informative-vs-interactive-semantics, escape-and-focus-restore-contract, hover-intent-delays, reduced-motion-contract
- **Replace when adapting:** preset-content, domain-copy, actions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** hover-card, tooltip, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion View Transition API

Project or product grid whose card cover and title morph into the detail page and back.

- id: `motion-view-transition-api`
- Page: https://agentic-ui-kit.com/components/motion-view-transition-api
- Live preview: https://agentic-ui-kit.com/live/component/motion-view-transition-api

## Install

```bash
agentic-ui add motion-view-transition-api
npx shadcn@4.17.0 add @agentic-ui/motion-view-transition-api
```

## Metadata

- **Level:** layout
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** view-transitions-api, nextjs-app-router, cross-route-transition, per-route-transition-types, shared-element-morph, slide-variant, fade-variant, zoom-variant, direction-aware-back-forward, history-traversal-transition, focus-to-page-heading, iframe-instant-navigation, instant-fallback, reduced-motion-fallback
- **Intents:** navigate, explore-detail
- **Suits domains:** saas, project-management, crm, ecommerce, analytics, settings
- **Interaction:** navigate, keyboard-navigation, history
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Project or product grid whose card cover and title morph into the detail page and back, Workspace sections as separate routes that slide by navigation order and reverse on browser back, Greenfield Next.js app with the linear or stripe personality, where it is the default navigation motion
- **Avoid when:** Panels swapped inside a single route (use motion-page-transition or a tab indicator), Routes built around iframes, maps or video embeds that must stay live; they switch instantly anyway, Enterprise personality projects, whose navigation token is instant
- **Preserve when adapting:** single-router-commit-per-transition, direction-from-history-and-navigation-order, focus-to-page-heading, instant-navigation-without-motion, no-transition-on-iframes
- **Replace when adapting:** routes-and-variants, route-pairs, shared-element-names, pages-and-content
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, select, table
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, next, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Payments Dashboard Overview Map

Payments by geographic region.

- id: `payments-dashboard-overview-map`
- Page: https://agentic-ui-kit.com/components/payments-dashboard-overview-map
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/dashboard-4?piece=payments-dashboard-overview-map

## Install

```bash
agentic-ui add payments-dashboard-overview-map
npx shadcn@4.17.0 add @agentic-ui/payments-dashboard-overview-map
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, payment-mix-chart, regions-map, geo-breakdown
- **Intents:** monitor-live, compare-over-time
- **Suits domains:** payments, billing, finance, saas, operations
- **Interaction:** tooltip, tabs, range-selector
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** payments by geographic region, payment method mix by country
- **Avoid when:** data editing flows, fewer than 3 relevant metrics
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-first-layout
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 9/10
- **Uses primitives:** avatar, badge, button, table
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, lib-admin-kit-utils, payments-regions-map, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-table


### Payments Invoice Create

Issuing an invoice with an immediate preview.

- id: `payments-invoice-create`
- Page: https://agentic-ui-kit.com/components/payments-invoice-create
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/create-invoice?piece=payments-invoice-create

## Install

```bash
agentic-ui add payments-invoice-create
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-create
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** multi-section-form, live-preview, line-item-editor, validation
- **Intents:** create-edit, execute-flow
- **Suits domains:** payments, billing, finance, saas
- **Interaction:** form-fields, live-preview, validation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** issuing an invoice with an immediate preview
- **Avoid when:** editing a single field, flows with no preview
- **Preserve when adapting:** form-preview-sync, step-hierarchy, validation-model
- **Replace when adapting:** domain-copy, fields, tax-rules, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 9/10
- **Uses primitives:** accordion, button, dropdown-menu, input, label, select, tabs, textarea
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6
- **Registry dependencies:** asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-accordion, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-select, ui-admin-kit-tabs, ui-admin-kit-textarea


### Payments Webhook Monitor

Webhook deliveries with latency and retries.

- id: `payments-webhook-monitor`
- Page: https://agentic-ui-kit.com/components/payments-webhook-monitor
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/webhooks?piece=payments-webhook-monitor

## Install

```bash
agentic-ui add payments-webhook-monitor
npx shadcn@4.17.0 add @agentic-ui/payments-webhook-monitor
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** endpoint-list, delivery-log, status-codes, retry-actions
- **Intents:** monitor-live, audit-trail
- **Suits domains:** payments, devtools, operations, saas
- **Interaction:** filtering, expand-row, retry
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** webhook deliveries with latency and retries
- **Avoid when:** systems without outgoing events
- **Preserve when adapting:** delivery-log-grammar, status-code-badges
- **Replace when adapting:** domain-copy, event-types, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 9/10
- **Uses primitives:** badge, button
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button


### Pm Issue Gantt Roadmap

Product roadmap with dependencies between milestones.

- id: `pm-issue-gantt-roadmap`
- Page: https://agentic-ui-kit.com/components/pm-issue-gantt-roadmap
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-gantt-1?piece=pm-issue-gantt-roadmap

## Install

```bash
agentic-ui add pm-issue-gantt-roadmap
npx shadcn@4.17.0 add @agentic-ui/pm-issue-gantt-roadmap
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** interactive-timeline, dependency-lines, task-grouping, zoom-controls, quick-add-bar
- **Intents:** track-status, compare-over-time
- **Suits domains:** project-management, operations, saas
- **Interaction:** zoom-slider, pan-timeline, task-bar-drag, quick-add-task
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Product roadmap with dependencies between milestones, Gantt schedule for executing complex projects
- **Avoid when:** Agile management without defined start and end dates
- **Preserve when adapting:** gantt-canvas-engine, timeline-header-grid
- **Replace when adapting:** task-type-colors, zoom-intervals
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 9/10
- **Uses primitives:** button, input, select, badge, scroll-area
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Kestrel Admin Kit (template), Project Delivery (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, pm-create-issue-sheet, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-tooltip


### Project Management App Header

Workspace header with a view selector.

- id: `project-management-app-header`
- Page: https://agentic-ui-kit.com/components/project-management-app-header
- Live preview: https://agentic-ui-kit.com/live/template/project-hub/project-hub/team/CORE/all?piece=project-management-app-header

## Install

```bash
agentic-ui add project-management-app-header
npx shadcn@4.17.0 add @agentic-ui/project-management-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** breadcrumb, filter-controls, display-toggle, notifications-dropdown, action-trigger, theme-toggle
- **Intents:** navigate
- **Suits domains:** project-management, saas, devtools, operations
- **Interaction:** dropdown, filter, navigate, toggle-theme
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** workspace header with a view selector, issue console header with filters and breadcrumb, top bar of an administrative module with notifications
- **Avoid when:** single-page applications with no route hierarchy
- **Preserve when adapting:** breadcrumb-structure, layout-proportions, action-slot-alignment
- **Replace when adapting:** domain-actions, filter-options, route-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** breadcrumb, button, dropdown-menu
- **npm dependencies:** lucide-react, next-themes
- **Used in:** Orbitra Project Hub (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, zustand@5.0.8
- **Registry dependencies:** lib-project-hub-utils, ui-avatar, ui-button, ui-checkbox, ui-command, ui-dropdown-menu, ui-input, ui-popover, ui-sidebar


### Project Management Inbox Issue Preview

Detail panel of an issue linked to a notification.

- id: `project-management-inbox-issue-preview`
- Page: https://agentic-ui-kit.com/components/project-management-inbox-issue-preview
- Live preview: https://agentic-ui-kit.com/live/piece/project-management-inbox-issue-preview?piece=project-management-inbox-issue-preview

## Install

```bash
agentic-ui add project-management-inbox-issue-preview
npx shadcn@4.17.0 add @agentic-ui/project-management-inbox-issue-preview
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** markdown-description, activity-stream, status-property-list, quick-actions
- **Intents:** explore-detail
- **Suits domains:** project-management, devtools, support, saas, operations
- **Interaction:** scroll, action-trigger
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** detail panel of an issue linked to a notification, support ticket preview from the queue, alert inspection from the notification center
- **Avoid when:** complex editing of multi-page forms
- **Preserve when adapting:** metadata-sidebar-layout, activity-feed-format
- **Replace when adapting:** activity-payloads, metadata-fields
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** avatar, badge, button, separator
- **npm dependencies:** lucide-react
- **Used in:** Orbitra Project Hub (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-project-hub-utils, ui-button, ui-textarea


### Project Management Org Members Directory

Organization member directory with access roles.

- id: `project-management-org-members-directory`
- Page: https://agentic-ui-kit.com/components/project-management-org-members-directory
- Live preview: https://agentic-ui-kit.com/live/template/project-hub/project-hub/members?piece=project-management-org-members-directory

## Install

```bash
agentic-ui add project-management-org-members-directory
npx shadcn@4.17.0 add @agentic-ui/project-management-org-members-directory
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** member-table, role-badge, team-assignment-tooltip, activity-status
- **Intents:** manage-collection
- **Suits domains:** project-management, saas, hr, auth, settings
- **Interaction:** tooltip-hover, search-member
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** organization member directory with access roles, list of collaborators in a shared workspace, table of active users with team assignment
- **Avoid when:** complex permission matrices per granular resource
- **Preserve when adapting:** member-row-layout, role-pill-styling
- **Replace when adapting:** user-attributes, role-permissions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** avatar, badge, tooltip
- **npm dependencies:** lucide-react, zustand
- **Used in:** Orbitra Project Hub (template), Fitness Studio Operations (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** ui-avatar, ui-tooltip


### Project Management Project Summary Row

Project summary row in a team portfolio.

- id: `project-management-project-summary-row`
- Page: https://agentic-ui-kit.com/components/project-management-project-summary-row
- Live preview: https://agentic-ui-kit.com/live/template/project-hub/project-hub/projects?piece=project-management-project-summary-row

## Install

```bash
agentic-ui add project-management-project-summary-row
npx shadcn@4.17.0 add @agentic-ui/project-management-project-summary-row
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** health-popover-trigger, progress-completion, date-display, lead-avatar
- **Intents:** track-status
- **Suits domains:** project-management, operations, saas, analytics, personal-productivity
- **Interaction:** popover-toggle, click-navigate
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** project summary row in a team portfolio, initiative item with progress percentage and owner, horizontal milestone card with a risk indicator
- **Avoid when:** full edit views in a single step
- **Preserve when adapting:** progress-gauge-position, lead-avatar-slot
- **Replace when adapting:** project-metadata, health-indicators
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** progress, popover, avatar
- **npm dependencies:** lucide-react
- **Used in:** Orbitra Project Hub (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** lib-project-hub-utils, ui-avatar, ui-button, ui-command, ui-popover, ui-project-hub-calendar


### Project Management Team Roster

Directory of development teams and squads.

- id: `project-management-team-roster`
- Page: https://agentic-ui-kit.com/components/project-management-team-roster
- Live preview: https://agentic-ui-kit.com/live/piece/project-management-team-roster?piece=project-management-team-roster

## Install

```bash
agentic-ui add project-management-team-roster
npx shadcn@4.17.0 add @agentic-ui/project-management-team-roster
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** team-grid, member-avatars-tooltip, project-count-tooltip, team-identifiers
- **Intents:** manage-collection, explore-detail
- **Suits domains:** project-management, saas, hr, operations, devtools
- **Interaction:** tooltip-hover, navigate-team
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** directory of development teams and squads, organizational departments panel in a company portal, management of work groups with project assignment
- **Avoid when:** hierarchical org charts based on complex graphs or trees
- **Preserve when adapting:** team-card-structure, avatar-stack-pattern
- **Replace when adapting:** team-icons, membership-roles
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, avatar, tooltip
- **npm dependencies:** lucide-react, zustand
- **Used in:** Orbitra Project Hub (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-project-hub-utils, ui-avatar, ui-button, ui-tooltip


### Tasks Calendar Schedule

Monthly delivery planner.

- id: `tasks-calendar-schedule`
- Page: https://agentic-ui-kit.com/components/tasks-calendar-schedule
- Live preview: https://agentic-ui-kit.com/live/fixture/tasks-calendar-schedule?piece=tasks-calendar-schedule

## Install

```bash
agentic-ui add tasks-calendar-schedule
npx shadcn@4.17.0 add @agentic-ui/tasks-calendar-schedule
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** monthly-grid, task-chips, date-navigation, overdue-indicator
- **Intents:** compare-over-time, track-status
- **Suits domains:** personal-productivity, project-management, operations, travel
- **Interaction:** month-next-prev, click-day-cell
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Monthly delivery planner, Project milestone calendar
- **Avoid when:** Tasks without a defined due date
- **Preserve when adapting:** calendar-grid-template, task-chip-overflow-handler
- **Replace when adapting:** date-localization, task-color-coding
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, button, badge
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** framer-motion@12.38.0, lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0, sonner@^2.0.7
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, lib-admin-kit-utils, tasks-list-item, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-scroll-area, ui-admin-kit-separator, ui-admin-kit-tooltip, ui-drawer, ui-input-group


### Billing Recurring

Monthly giving page for a charity with a staff view of every donor schedule.

- id: `billing-recurring`
- Page: https://agentic-ui-kit.com/components/billing-recurring
- Live preview: https://agentic-ui-kit.com/live/component/billing-recurring

## Install

```bash
agentic-ui add billing-recurring
npx shadcn@4.17.0 add @agentic-ui/billing-recurring
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** recurring-gift-presenter, frequency-selection, suggested-and-custom-amounts, fund-designation, fee-coverage, schedule-preview, recurring-revenue-summary, status-filters, donor-search, pause-resume, change-amount-frequency, cancel-with-confirmation, empty-state, error-state, keyboard-navigation
- **Intents:** manage-collection, create-edit, execute-flow
- **Suits domains:** billing, crm, payments, saas, finance
- **Interaction:** radio-selection, filter, search, dialog-toggle, confirm-destructive, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Monthly giving page for a charity with a staff view of every donor schedule, Membership or patron dues collected monthly, quarterly or yearly, Creator support tiers where fans choose an amount and can pause at any time
- **Avoid when:** One-time checkout or single donations (use a checkout flow), Plan-based SaaS subscriptions with fixed tiers (use a pricing table and subscription list), Recovering failed card charges in depth (pair with billing-dunning-states)
- **Preserve when adapting:** schedule-status-model, annualized-value-preview, confirm-before-cancel, host-owned-payment-collection
- **Replace when adapting:** domain-copy, fund-list, currency-and-locale, fee-rate
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.6/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** alert, alert-dialog, badge, button, card, checkbox, dialog, input, label, select, table
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Knowledge Notification Inbox Feed

Inbox of mentions and document updates.

- id: `knowledge-notification-inbox-feed`
- Page: https://agentic-ui-kit.com/components/knowledge-notification-inbox-feed
- Live preview: https://agentic-ui-kit.com/live/template/team-workspace/inbox?piece=knowledge-notification-inbox-feed

## Install

```bash
agentic-ui add knowledge-notification-inbox-feed
npx shadcn@4.17.0 add @agentic-ui/knowledge-notification-inbox-feed
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** notification-feed, unread-filter, mark-all-read, mention-grouping
- **Intents:** communicate, track-status
- **Suits domains:** knowledge, social, project-management, saas, support
- **Interaction:** filter-unread, mark-read
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Inbox of mentions and document updates, Notification center of a collaborative product
- **Avoid when:** Products without collaboration or multi-user events
- **Preserve when adapting:** notification-row, filter-toggle
- **Replace when adapting:** notification-copy, avatar-sources
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.6/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** avatar, button, toggle-group
- **npm dependencies:** date-fns, lucide-react
- **Used in:** Pagewell Team Workspace (template), Social Media Manager (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-team-workspace-utils, ui-avatar, ui-button, ui-toggle-group


### Pm Inbox Email Composer

Sending project updates by email.

- id: `pm-inbox-email-composer`
- Page: https://agentic-ui-kit.com/components/pm-inbox-email-composer
- Live preview: https://agentic-ui-kit.com/live/piece/pm-inbox-email-composer?piece=pm-inbox-email-composer

## Install

```bash
agentic-ui add pm-inbox-email-composer
npx shadcn@4.17.0 add @agentic-ui/pm-inbox-email-composer
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** recipient-autocomplete, subject-field, formatted-body, attachment-chips
- **Intents:** communicate, create-edit
- **Suits domains:** project-management, crm, support, saas
- **Interaction:** add-recipient, format-text, attach-file
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Sending project updates by email, Drafting replies to customer tickets
- **Avoid when:** Informal single-line chats
- **Preserve when adapting:** recipient-chip-input, message-composer-layout
- **Replace when adapting:** sender-account, template-replies
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.6/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, input, textarea, badge, separator
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template), CRM (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-6-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-scroll-area, ui-admin-kit-textarea


### Pm Inbox Threaded Discussion

Conversation thread associated with project tasks.

- id: `pm-inbox-threaded-discussion`
- Page: https://agentic-ui-kit.com/components/pm-inbox-threaded-discussion
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/inbox-3?piece=pm-inbox-threaded-discussion

## Install

```bash
agentic-ui add pm-inbox-threaded-discussion
npx shadcn@4.17.0 add @agentic-ui/pm-inbox-threaded-discussion
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** nested-replies, rich-text-input, reaction-picker, issue-linking
- **Intents:** communicate, explore-detail
- **Suits domains:** project-management, saas, social, support
- **Interaction:** reply-thread, react-emoji, quote-message
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Conversation thread associated with project tasks, Comments section in collaborative documents
- **Avoid when:** High-frequency real-time synchronous messaging
- **Preserve when adapting:** comment-bubble-layout, reaction-bar
- **Replace when adapting:** user-data, reaction-icons
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.6/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, textarea, avatar, badge, dropdown-menu
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-bw-1-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-label, ui-admin-kit-scroll-area, ui-admin-kit-switch, ui-admin-kit-textarea, ui-drawer


### Pm Issue Detail Sidebar

Side panel for quick issue editing.

- id: `pm-issue-detail-sidebar`
- Page: https://agentic-ui-kit.com/components/pm-issue-detail-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-detail-2?piece=pm-issue-detail-sidebar

## Install

```bash
agentic-ui add pm-issue-detail-sidebar
npx shadcn@4.17.0 add @agentic-ui/pm-issue-detail-sidebar
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** collapsible-sidebar, inline-editing, quick-actions, activity-log
- **Intents:** explore-detail, configure
- **Suits domains:** project-management, devtools, saas, crm
- **Interaction:** inline-edit, sidebar-toggle
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Side panel for quick issue editing, Ticket properties drawer
- **Avoid when:** Extensive documentation that requires a full-screen WYSIWYG editor
- **Preserve when adapting:** property-row-list, quick-status-pickers
- **Replace when adapting:** field-definitions, priority-icons
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.6/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, badge, avatar, input, select, separator
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-sheet


### Pm Issue List Grouped

Backlog grouped by epics or sprints.

- id: `pm-issue-list-grouped`
- Page: https://agentic-ui-kit.com/components/pm-issue-list-grouped
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-list-2?piece=pm-issue-list-grouped

## Install

```bash
agentic-ui add pm-issue-list-grouped
npx shadcn@4.17.0 add @agentic-ui/pm-issue-list-grouped
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** collapsible-groups, status-grouping, count-badges, batch-selection
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, devtools, saas, operations
- **Interaction:** toggle-group, select-all-in-group
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Backlog grouped by epics or sprints, Issue listing grouped by assignee
- **Avoid when:** Flat searches that require a single global sort
- **Preserve when adapting:** grouped-section-headers, collapsible-mechanics
- **Replace when adapting:** grouping-criteria, group-icons
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.6/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** table, button, badge, avatar, collapsible, checkbox
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-dropdown-menu


### Pm Member List Cards

Productivity and capacity view per member.

- id: `pm-member-list-cards`
- Page: https://agentic-ui-kit.com/components/pm-member-list-cards
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/member-list-2?piece=pm-member-list-cards

## Install

```bash
agentic-ui add pm-member-list-cards
npx shadcn@4.17.0 add @agentic-ui/pm-member-list-cards
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** productivity-score, completed-tasks-counter, skills-tags, quick-assign
- **Intents:** manage-collection, explore-detail
- **Suits domains:** project-management, hr, saas, operations
- **Interaction:** skill-filter, member-card-click
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Productivity and capacity view per member, Resource and skills allocation panel
- **Avoid when:** Administrative listings where a bulk-edit table is preferred
- **Preserve when adapting:** member-kpi-card, skill-chip-array
- **Replace when adapting:** metric-calculations, skill-tags
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.6/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, avatar, button, progress
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-input


### Pm Team List Compact

Compact listing of squads and sprint status.

- id: `pm-team-list-compact`
- Page: https://agentic-ui-kit.com/components/pm-team-list-compact
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/team-list-2?piece=pm-team-list-compact

## Install

```bash
agentic-ui add pm-team-list-compact
npx shadcn@4.17.0 add @agentic-ui/pm-team-list-compact
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** dense-rows, quick-contact, current-sprint-badge, workload-indicator
- **Intents:** manage-collection, track-status
- **Suits domains:** project-management, hr, saas, operations
- **Interaction:** row-hover, team-contact-action
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Compact listing of squads and sprint status, Quick team directory in dashboards
- **Avoid when:** Pages where extensive details of each member need to be explored
- **Preserve when adapting:** compact-team-row, status-chip-alignment
- **Replace when adapting:** sprint-states, team-descriptors
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.6/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** badge, avatar, button, card
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-input


### Travel App Footer

Marketplace footer with a sitemap by category.

- id: `travel-app-footer`
- Page: https://agentic-ui-kit.com/components/travel-app-footer
- Live preview: https://agentic-ui-kit.com/live/template/travel-marketplace?piece=travel-app-footer

## Install

```bash
agentic-ui add travel-app-footer
npx shadcn@4.17.0 add @agentic-ui/travel-app-footer
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** link-columns, locale-currency-selectors, conditional-render-by-route
- **Intents:** navigate
- **Suits domains:** travel, ecommerce, saas, media
- **Interaction:** navigate
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** marketplace footer with a sitemap by category, booking site footer with a currency selector, corporate footer of a content app
- **Avoid when:** dense desktop apps without a footer, full-screen map screens
- **Preserve when adapting:** column-grid, conditional-route-hiding
- **Replace when adapting:** link-sets, legal-copy, locale-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.6/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, separator
- **npm dependencies:** next/navigation, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** lucide-react@0.577.0


### Community Moderation Queue

Community forum moderators clearing reported threads and replies.

- id: `community-moderation-queue`
- Page: https://agentic-ui-kit.com/components/community-moderation-queue
- Live preview: https://agentic-ui-kit.com/live/component/community-moderation-queue

## Install

```bash
agentic-ui add community-moderation-queue
npx shadcn@4.17.0 add @agentic-ui/community-moderation-queue
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** priority-ranking, bulk-selection, range-selection, bulk-approve, bulk-remove, bulk-escalate, removal-reason-dialog, undo, reopen, member-reputation, reputation-tiers, role-permissions, faceted-filters, keyboard-shortcuts, responsive-layout
- **Intents:** manage-collection, track-status
- **Suits domains:** social, saas, ecommerce, knowledge
- **Interaction:** multi-select, shift-range-select, bulk-action-bar, confirm-dialog, undo-toast, keyboard-triage, filter, sort
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Community forum moderators clearing reported threads and replies, Marketplace trust and safety review of flagged listings and reviews, SaaS in-app community or feedback board moderation, Knowledge base comment moderation with contributor reputation
- **Avoid when:** Pre-publication editorial approval with drafts and revisions, Automated content filtering with no human review step, A handful of reports a week, where an inbox or table is enough
- **Preserve when adapting:** reputation-weighted-priority, bulk-preview-before-commit, role-based-skip-not-fail, undo-and-reopen-revert-reputation, keyboard-triage-contract
- **Replace when adapting:** report-reasons-and-severity, reputation-thresholds-and-penalties, persistence-adapter, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, badge, card, checkbox, dialog, input, label, progress, select, textarea
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Knowledge Quick Search Command Palette

Command palette with Cmd+K to jump to documents.

- id: `knowledge-quick-search-command-palette`
- Page: https://agentic-ui-kit.com/components/knowledge-quick-search-command-palette
- Live preview: https://agentic-ui-kit.com/live/fixture/knowledge-quick-search-command-palette?piece=knowledge-quick-search-command-palette

## Install

```bash
agentic-ui add knowledge-quick-search-command-palette
npx shadcn@4.17.0 add @agentic-ui/knowledge-quick-search-command-palette
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** fuzzy-search, recent-pages, keyboard-shortcut, grouped-results
- **Intents:** navigate, explore-detail
- **Suits domains:** knowledge, notes, devtools, saas, project-management
- **Interaction:** keyboard-shortcut, search, select-result
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Command palette with Cmd+K to jump to documents, Global quick search for the application
- **Avoid when:** Applications with fewer than twenty navigable destinations
- **Preserve when adapting:** keyboard-first-flow, result-grouping
- **Replace when adapting:** search-index, result-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** command, dialog
- **npm dependencies:** date-fns
- **Used in:** Pagewell Team Workspace (template), Knowledge Workspace (blueprint), SaaS Backoffice (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, zustand@5.0.8
- **Registry dependencies:** ui-command


### Motion Checkbox Draw Tristate

Release readiness checklist with a select-all parent that shows Partial while some checks are pending.

- id: `motion-checkbox-draw-tristate`
- Page: https://agentic-ui-kit.com/components/motion-checkbox-draw-tristate
- Live preview: https://agentic-ui-kit.com/live/component/motion-checkbox-draw-tristate

## Install

```bash
agentic-ui add motion-checkbox-draw-tristate
npx shadcn@4.17.0 add @agentic-ui/motion-checkbox-draw-tristate
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** stroke-draw, tri-state, select-all-parent, checked-state, reduced-motion-fallback, binary-variant
- **Intents:** configure, manage-collection, execute-flow
- **Suits domains:** settings, saas, operations, devtools, project-management, personal-productivity
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Release readiness checklist with a select-all parent that shows Partial while some checks are pending., Notification channel picker where All channels draws a check when every child is selected., Bulk-select header for a table whose rows are partially selected.
- **Avoid when:** Mutually exclusive options; use a radio group., Instant-apply on/off settings; use a switch such as motion-toggle-spring.
- **Preserve when adapting:** tri-state-checkbox-semantics, parent-derived-from-children, static-informational-state, glyph-dash-geometry
- **Replace when adapting:** field-labels, fixture-items, box-radius
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 8/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Motion Copy Success Masked

Production API token copy widget with secret masking and instant checkmark feedback in a developer console.

- id: `motion-copy-success-masked`
- Page: https://agentic-ui-kit.com/components/motion-copy-success-masked
- Live preview: https://agentic-ui-kit.com/live/component/motion-copy-success-masked

## Install

```bash
agentic-ui add motion-copy-success-masked
npx shadcn@4.17.0 add @agentic-ui/motion-copy-success-masked
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** clipboard-write, success-tick, sensitive-masking, reveal-toggle, floating-feedback-badge, auto-remask, reduced-motion-fallback
- **Intents:** import-export, communicate, configure, audit-trail
- **Suits domains:** devtools, saas, operations, settings, ai-workspace, billing
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Production API token copy widget with secret masking and instant checkmark feedback in a developer console., Webhook signing secret row in an operations integration dashboard., Recovery seed phrase or private key backup card with auto-remasking in account settings.
- **Avoid when:** Plain static non-sensitive text; use simple copy button instead., Long multiline code blocks with syntax highlighting; use util-copy-block instead.
- **Preserve when adapting:** clipboard-write, sensitive-masking, persistent-copied-status, tick-draw, a11y-live-region
- **Replace when adapting:** field-labels, copied-payload, feedback-duration, auto-remask-delay
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 8/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-motion


### Motion Progress Animated Segmented

ETL or warehouse sync split into extract, transform, validate and load with unequal weights.

- id: `motion-progress-animated-segmented`
- Page: https://agentic-ui-kit.com/components/motion-progress-animated-segmented
- Live preview: https://agentic-ui-kit.com/live/component/motion-progress-animated-segmented

## Install

```bash
agentic-ui add motion-progress-animated-segmented
npx shadcn@4.17.0 add @agentic-ui/motion-progress-animated-segmented
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** determinate-progress, weighted-stages, buffer-track, stage-checkpoints, error-state, live-feed, reduced-motion-fallback
- **Intents:** track-status, monitor-live, execute-flow
- **Suits domains:** operations, devtools, analytics, saas, file-storage
- **Interaction:** value-update, live-refresh, click, keyboard-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** ETL or warehouse sync split into extract, transform, validate and load with unequal weights., Staged release rollout (build, canary, regional, global) that stops red at a failed guardrail., Backup or large upload job showing buffered bytes ahead of verified bytes.
- **Avoid when:** Single-step jobs with no meaningful stages; use motion-progress-animated., Indeterminate waits with no measurable progress; use a spinner or skeleton., Navigational multi-step forms where users jump between steps; use a stepper.
- **Preserve when adapting:** progressbar-semantics, stage-weights, buffer-never-behind-fill, reduced-motion-fallback, informative-state
- **Replace when adapting:** stages, data-source, label-copy, tone-colors
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 8/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Motion Toggle Spring Draggable

A notification settings list where each switch saves optimistically and a server rejection springs the switch back and shows the reason.

- id: `motion-toggle-spring-draggable`
- Page: https://agentic-ui-kit.com/components/motion-toggle-spring-draggable
- Live preview: https://agentic-ui-kit.com/live/component/motion-toggle-spring-draggable

## Install

```bash
agentic-ui add motion-toggle-spring-draggable
npx shadcn@4.17.0 add @agentic-ui/motion-toggle-spring-draggable
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** spring-knob-travel, drag-to-toggle, flick-velocity, personality-spring-physics, optimistic-save-with-revert, switch-state, reduced-motion-fallback, click-variant
- **Intents:** configure
- **Suits domains:** settings, saas, operations, personal-productivity, billing
- **Interaction:** click, drag, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A notification settings list where each switch saves optimistically and a server rejection springs the switch back and shows the reason., Mobile preferences screen where users drag or flick the knob with a thumb and the switch settles with the product personality's spring., Admin feature flags under an enterprise personality with no bounce, an instant fallback under reduced motion and a persistent saved/not-saved status.
- **Avoid when:** Choices that only apply after a Save or Submit button; use a checkbox (motion-checkbox-draw) instead of an immediate-effect switch., More than two states or a mixed state; use a segmented control or motion-checkbox-draw-tristate., Dense toolbars without room for the status line; the plain motion-toggle-spring is enough there.
- **Preserve when adapting:** personality-spring-overshoot-policy, optimistic-save-with-visible-revert, static-on-off-and-status-text, keyboard-and-drag-parity
- **Replace when adapting:** setting-copy, save-adapter, accent-colour
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 8/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Payments Dashboard Overview Stripe

Stripe-style gross volume panel.

- id: `payments-dashboard-overview-stripe`
- Page: https://agentic-ui-kit.com/components/payments-dashboard-overview-stripe
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/dashboard-2?piece=payments-dashboard-overview-stripe

## Install

```bash
agentic-ui add payments-dashboard-overview-stripe
npx shadcn@4.17.0 add @agentic-ui/payments-dashboard-overview-stripe
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, timeseries-chart, dotted-map, balance-summary
- **Intents:** monitor-live, compare-over-time
- **Suits domains:** payments, billing, finance, saas, operations
- **Interaction:** tooltip, tabs, range-selector
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Stripe-style gross volume panel, available vs pending balance
- **Avoid when:** data editing flows, fewer than 3 relevant metrics
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-first-layout
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, button, chart
- **npm dependencies:** dotted-map, recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** dotted-map@3.1.0, lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-chart


### Payments Enterprise Client 360

Enterprise account with child entities and contracts.

- id: `payments-enterprise-client-360`
- Page: https://agentic-ui-kit.com/components/payments-enterprise-client-360
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/enterprise-client-detail?piece=payments-enterprise-client-360

## Install

```bash
agentic-ui add payments-enterprise-client-360
npx shadcn@4.17.0 add @agentic-ui/payments-enterprise-client-360
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** account-hierarchy, recharts-panels, contract-summary, contact-tree
- **Intents:** explore-detail, monitor-live
- **Suits domains:** payments, crm, billing, saas
- **Interaction:** tabs, expand-collapse
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** enterprise account with child entities and contracts
- **Avoid when:** individual customers without structure
- **Preserve when adapting:** account-360-layout, hierarchy-visualization
- **Replace when adapting:** domain-copy, metrics, hierarchy-levels, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, chart, dropdown-menu, switch
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template), CRM (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-chart, ui-admin-kit-dropdown-menu, ui-admin-kit-switch


### Payments Invoice Create Guided

Multi-step invoice creation with review.

- id: `payments-invoice-create-guided`
- Page: https://agentic-ui-kit.com/components/payments-invoice-create-guided
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/create-invoice-2?piece=payments-invoice-create-guided

## Install

```bash
agentic-ui add payments-invoice-create-guided
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-create-guided
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** stepped-form, live-preview, progress-indicator
- **Intents:** create-edit, execute-flow
- **Suits domains:** payments, billing, finance, saas
- **Interaction:** form-fields, live-preview, validation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** multi-step invoice creation with review
- **Avoid when:** single-field editing, flows without a preview
- **Preserve when adapting:** form-preview-sync, step-hierarchy, validation-model
- **Replace when adapting:** domain-copy, fields, tax-rules, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, calendar, dropdown-menu, field, input, input-group, popover, select, separator, textarea
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, @dnd-kit/sortable@10.0.0, @dnd-kit/utilities@3.2.2, lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-popover, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-textarea, ui-calendar, ui-field, ui-input-group


### Payments Invoice Detail

Invoice with lines and payment history.

- id: `payments-invoice-detail`
- Page: https://agentic-ui-kit.com/components/payments-invoice-detail
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/invoice-detail?piece=payments-invoice-detail

## Install

```bash
agentic-ui add payments-invoice-detail
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** line-items-table, payment-history, status-header, action-bar
- **Intents:** explore-detail, execute-flow
- **Suits domains:** payments, billing, finance, ecommerce
- **Interaction:** row-actions, copy-to-clipboard
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** invoice with lines and payment history
- **Avoid when:** bulk listings, data with no associated actions
- **Preserve when adapting:** detail-hierarchy, line-items-table, action-bar
- **Replace when adapting:** domain-copy, line-item-fields, semantic-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, button, dropdown-menu
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-dropdown-menu


### Payments Invoice Detail Split

Invoice with an always-visible actions panel.

- id: `payments-invoice-detail-split`
- Page: https://agentic-ui-kit.com/components/payments-invoice-detail-split
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/invoice-detail-2?piece=payments-invoice-detail-split

## Install

```bash
agentic-ui add payments-invoice-detail-split
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-detail-split
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** two-column-layout, line-items-table, sticky-actions, timeline
- **Intents:** explore-detail, execute-flow
- **Suits domains:** payments, billing, finance, ecommerce
- **Interaction:** row-actions, copy-to-clipboard
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** invoice with an always-visible actions panel
- **Avoid when:** bulk listings, data with no associated actions
- **Preserve when adapting:** detail-hierarchy, line-items-table, action-bar
- **Replace when adapting:** domain-copy, line-item-fields, semantic-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-button


### Payments Invoice List Split

Billing with an invoice preview.

- id: `payments-invoice-list-split`
- Page: https://agentic-ui-kit.com/components/payments-invoice-list-split
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/invoice-list-2?piece=payments-invoice-list-split

## Install

```bash
agentic-ui add payments-invoice-list-split
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-list-split
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sortable-table, date-range-filter, detail-panel, pagination
- **Intents:** manage-collection, track-status
- **Suits domains:** payments, billing, finance, ecommerce, saas
- **Interaction:** sorting, filtering, pagination, row-actions
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** billing with an invoice preview, payments with a period filter
- **Avoid when:** collections of fewer than 10 items, detail of a single record
- **Preserve when adapting:** table-grammar, status-badge-system, toolbar-layout
- **Replace when adapting:** domain-copy, columns, status-values, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, calendar, checkbox, dropdown-menu, input, popover, table
- **npm dependencies:** react-day-picker
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-popover, ui-calendar, ui-table


### Payments Regions Map

Collection volume by country.

- id: `payments-regions-map`
- Page: https://agentic-ui-kit.com/components/payments-regions-map
- Live preview: https://agentic-ui-kit.com/live/piece/payments-regions-map?piece=payments-regions-map

## Install

```bash
agentic-ui add payments-regions-map
npx shadcn@4.17.0 add @agentic-ui/payments-regions-map
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** choropleth-map, country-flags, zoom-pan, region-tooltips
- **Intents:** show-composition, monitor-live
- **Suits domains:** payments, operations, analytics, travel, logistics
- **Interaction:** tooltip, zoom-pan
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** collection volume by country, delivery coverage by region
- **Avoid when:** data without a geographic dimension
- **Preserve when adapting:** map-grammar, theme-aware-palette
- **Replace when adapting:** domain-copy, geo-data, semantic-tokens
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 9/10
- **npm dependencies:** d3-scale, geojson, leaflet
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** d3-scale@^4.0.2, leaflet@^1.9.4
- **Registry dependencies:** lib-admin-kit-utils


### Payments Subscription Detail

Subscription with cycle history and upcoming charges.

- id: `payments-subscription-detail`
- Page: https://agentic-ui-kit.com/components/payments-subscription-detail
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/subscription-detail?piece=payments-subscription-detail

## Install

```bash
agentic-ui add payments-subscription-detail
npx shadcn@4.17.0 add @agentic-ui/payments-subscription-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** lifecycle-timeline, plan-summary, invoice-history, pause-resume-actions
- **Intents:** explore-detail, track-status
- **Suits domains:** payments, billing, saas
- **Interaction:** tabs, confirm-dialogs
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** subscription with cycle history and upcoming charges
- **Avoid when:** products without recurrence
- **Preserve when adapting:** lifecycle-timeline, action-confirmation-model
- **Replace when adapting:** domain-copy, plan-fields, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, card, dropdown-menu, separator, table
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-5-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-separator, ui-table


### Payments Subscription List Metrics

Retention and churn panel with a subscriptions list.

- id: `payments-subscription-list-metrics`
- Page: https://agentic-ui-kit.com/components/payments-subscription-list-metrics
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/subscriptions-2?piece=payments-subscription-list-metrics

## Install

```bash
agentic-ui add payments-subscription-list-metrics
npx shadcn@4.17.0 add @agentic-ui/payments-subscription-list-metrics
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-header, recharts-panels, plan-badges, status-filters
- **Intents:** manage-collection, track-status
- **Suits domains:** payments, billing, saas, finance
- **Interaction:** filtering, row-actions, sorting
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** retention and churn panel with a subscriptions list
- **Avoid when:** one-off charges without recurrence
- **Preserve when adapting:** subscription-lifecycle-badges, plan-column-grammar
- **Replace when adapting:** domain-copy, plan-names, status-values, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.55/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, dropdown-menu, input, pagination, progress
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-progress, ui-pagination


### Orchestra OPS Dispatch List

Message list with urgency badges and sorting.

- id: `orchestra-ops-dispatch-list`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-dispatch-list
- Live preview: https://agentic-ui-kit.com/live/piece/orchestra-ops-dispatch-list?piece=orchestra-ops-dispatch-list

## Install

```bash
agentic-ui add orchestra-ops-dispatch-list
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-dispatch-list
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** folder-filtering, priority-ring, star-toggle, unread-dot, sort-menu, attachment-badge
- **Intents:** manage-collection, explore-detail
- **Suits domains:** music, operations, crm, support, social
- **Interaction:** message-click, star-click, sort-select
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Message list with urgency badges and sorting, Correspondence column with sender, subject and excerpt, Master panel with thread selection and starred items
- **Avoid when:** Complex tables with dozens of selectable columns, Large-format grid views
- **Preserve when adapting:** dispatch-item-layout, priority-indicator, relative-time
- **Replace when adapting:** category-palette, sorting-algorithms, dispatch-schema
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.53/10
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 8/10, code 8.5/10
- **Uses primitives:** avatar, badge, button, dropdown-menu
- **npm dependencies:** lucide-react, zustand
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-orchestra-ops-utils, ui-avatar, ui-badge, ui-button, ui-dropdown-menu


### Knowledge Meeting Notes Manager

Meeting notes manager with recordings.

- id: `knowledge-meeting-notes-manager`
- Page: https://agentic-ui-kit.com/components/knowledge-meeting-notes-manager
- Live preview: https://agentic-ui-kit.com/live/template/team-workspace/meetings?piece=knowledge-meeting-notes-manager

## Install

```bash
agentic-ui add knowledge-meeting-notes-manager
npx shadcn@4.17.0 add @agentic-ui/knowledge-meeting-notes-manager
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** upcoming-meetings, past-recordings, ai-summary, attendee-avatars
- **Intents:** manage-collection, communicate
- **Suits domains:** knowledge, project-management, saas, hr, ai-workspace
- **Interaction:** browse-meetings, open-notes, filter-range
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Meeting notes manager with recordings, Team agenda with automatic summaries
- **Avoid when:** Teams without a calendar or recurring meetings
- **Preserve when adapting:** meeting-card, attendee-stack
- **Replace when adapting:** meeting-copy, recording-sources
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.5/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** avatar, badge, button, select
- **npm dependencies:** date-fns, lucide-react
- **Used in:** Pagewell Team Workspace (template), Knowledge Workspace (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-team-workspace-utils, ui-avatar, ui-badge, ui-button, ui-select


### Knowledge Workspace Dashboard Overview

New-hire desk with onboarding progress and the week ahead.

- id: `knowledge-workspace-dashboard-overview`
- Page: https://agentic-ui-kit.com/components/knowledge-workspace-dashboard-overview
- Live preview: https://agentic-ui-kit.com/live/template/team-workspace?piece=knowledge-workspace-dashboard-overview

## Install

```bash
agentic-ui add knowledge-workspace-dashboard-overview
npx shadcn@4.17.0 add @agentic-ui/knowledge-workspace-dashboard-overview
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-tiles, meeting-load-chart, due-date-task-digest, upcoming-meetings, teamspace-distribution-chart, recent-edits-table
- **Intents:** navigate, track-status
- **Suits domains:** knowledge, notes, personal-productivity, saas, project-management
- **Interaction:** open-page, toggle-task, open-meeting
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** New-hire desk with onboarding progress and the week ahead, Team intranet home with activity figures and recent edits
- **Avoid when:** Applications with no concept of document or workspace
- **Preserve when adapting:** kpi-tile-row, two-plus-one-panel-grid
- **Replace when adapting:** kpi-definitions, chart-series
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.5/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** avatar, checkbox, badge
- **npm dependencies:** date-fns, lucide-react
- **Used in:** Pagewell Team Workspace (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-team-workspace-utils, ui-avatar, ui-badge, ui-checkbox


### Operations Incident Queue

Incident queue with declaration and triage.

- id: `operations-incident-queue`
- Page: https://agentic-ui-kit.com/components/operations-incident-queue
- Live preview: https://agentic-ui-kit.com/internal-operations-public/incidents?piece=operations-incident-queue

## Install

```bash
agentic-ui add operations-incident-queue
npx shadcn@4.17.0 add @agentic-ui/operations-incident-queue
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** status-view-tabs, severity-sorting, search, kpi-summary, declare-incident-dialog, form-validation, loading-skeleton, responsive-cards
- **Intents:** manage-collection, track-status, execute-flow
- **Suits domains:** devops-status, operations, support, devtools, saas
- **Interaction:** tabs, search, modal-form, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** incident queue with declaration and triage, alert inbox by SLA status, support ticket list by severity
- **Avoid when:** fewer than 5 items with no states, lists with no state lifecycle
- **Preserve when adapting:** severity-first-ordering, status-view-tabs, declare-flow
- **Replace when adapting:** domain-copy, fixtures, severity-scale
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.5/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, input, table, checkbox, textarea, label
- **npm dependencies:** lucide-react, @agentic-ui/feedback-status-page, @agentic-ui/motion
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Internal Operations — public status variant (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** feedback-status-page, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Payments Subscription Create

Create a subscription plan with a trial and tiered pricing.

- id: `payments-subscription-create`
- Page: https://agentic-ui-kit.com/components/payments-subscription-create
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/create-subscription?piece=payments-subscription-create

## Install

```bash
agentic-ui add payments-subscription-create
npx shadcn@4.17.0 add @agentic-ui/payments-subscription-create
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** plan-builder, pricing-preview, trial-config, radix-forms
- **Intents:** create-edit, configure
- **Suits domains:** payments, billing, saas
- **Interaction:** form-fields, live-preview
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** create a subscription plan with a trial and tiered pricing
- **Avoid when:** single-payment checkout
- **Preserve when adapting:** plan-builder-model, pricing-preview-sync
- **Replace when adapting:** domain-copy, pricing-rules, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.5/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 9/10
- **Uses primitives:** button, checkbox, field, input, radio-group, select, separator, textarea
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, radix-ui@^1.6.7
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-textarea, ui-field, ui-radio-group


### Project Management Sidebar Nav

Side navigation of a multi-team collaboration tool.

- id: `project-management-sidebar-nav`
- Page: https://agentic-ui-kit.com/components/project-management-sidebar-nav
- Live preview: https://agentic-ui-kit.com/live/template/project-hub/project-hub/inbox?piece=project-management-sidebar-nav

## Install

```bash
agentic-ui add project-management-sidebar-nav
npx shadcn@4.17.0 add @agentic-ui/project-management-sidebar-nav
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Orbitra Project Hub
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** org-switcher, workspace-nav, badge-counter, collapsible-sections, user-profile
- **Intents:** navigate
- **Suits domains:** project-management, saas, devtools, operations, personal-productivity
- **Interaction:** collapsible, navigate
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** side navigation of a multi-team collaboration tool, main sidebar of a SaaS console with an organization selector, navigation panel for a task and project manager
- **Avoid when:** mobile applications oriented exclusively to bottom-nav
- **Preserve when adapting:** section-grouping, active-item-highlight, collapse-behavior
- **Replace when adapting:** workspace-menu, team-list, profile-links
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.5/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** sidebar, avatar, button, dropdown-menu, collapsible
- **npm dependencies:** lucide-react
- **Used in:** Orbitra Project Hub (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-project-hub-utils, project-management-issue-create-dialog, ui-button, ui-collapsible, ui-dropdown-menu, ui-input, ui-sidebar


### Finance Transaction Ledger

Transaction ledger with filters.

- id: `finance-transaction-ledger`
- Page: https://agentic-ui-kit.com/components/finance-transaction-ledger
- Live preview: https://agentic-ui-kit.com/live/piece/finance-transaction-ledger?piece=finance-transaction-ledger

## Install

```bash
agentic-ui add finance-transaction-ledger
npx shadcn@4.17.0 add @agentic-ui/finance-transaction-ledger
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sorting, filtering, search, pagination, row-selection, bulk-actions, page-size, empty-state
- **Intents:** manage-collection, audit-trail
- **Suits domains:** finance, billing, ecommerce, crm, operations
- **Interaction:** sorting, filtering, search, pagination, row-selection
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** transaction ledger with filters, e-commerce orders with bulk-actions, payment history per account
- **Avoid when:** fewer than 10 rows without filters, nested hierarchical data
- **Preserve when adapting:** table-grammar, filter-model, pagination-model, bulk-action-bar
- **Replace when adapting:** domain-copy, columns, mock-data, avatar-source
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.45/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** avatar, badge, button, checkbox, dropdown-menu, input, select, table
- **npm dependencies:** @tanstack/react-table, lucide-react, zustand
- **Used in:** Fundwell Finance Tracker (template), Clinic Operations (blueprint), Fintech Trading (analytics live) (blueprint), Internal Operations (blueprint), Marketing Analytics (blueprint)
- **npm dependencies (registry):** @tanstack/react-table@^8.21.3, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-finance-tracker-utils, ui-finance-tracker-avatar, ui-finance-tracker-badge, ui-finance-tracker-button, ui-finance-tracker-checkbox, ui-finance-tracker-dropdown-menu, ui-finance-tracker-input, ui-finance-tracker-select, ui-finance-tracker-table


### Knowledge Workspace Settings Dialog

Workspace settings with members and plan.

- id: `knowledge-workspace-settings-dialog`
- Page: https://agentic-ui-kit.com/components/knowledge-workspace-settings-dialog
- Live preview: https://agentic-ui-kit.com/live/fixture/knowledge-workspace-settings-dialog?piece=knowledge-workspace-settings-dialog

## Install

```bash
agentic-ui add knowledge-workspace-settings-dialog
npx shadcn@4.17.0 add @agentic-ui/knowledge-workspace-settings-dialog
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** member-management, workspace-preferences, plan-summary, tabbed-sections
- **Intents:** configure, manage-collection
- **Suits domains:** knowledge, saas, settings, hr, project-management
- **Interaction:** switch-section, toggle-preference, invite-member
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Workspace settings with members and plan, Team preferences panel in a modal
- **Avoid when:** Single-user applications without shared configuration
- **Preserve when adapting:** section-navigation, member-list
- **Replace when adapting:** plan-copy, member-directory
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.45/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** dialog, avatar, badge, button, input, switch, separator
- **npm dependencies:** lucide-react
- **Used in:** Pagewell Team Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-team-workspace-utils, ui-avatar, ui-badge, ui-button, ui-dialog, ui-input, ui-select, ui-separator, ui-switch


### Travel Booking Card

Stay booking with a price breakdown.

- id: `travel-booking-card`
- Page: https://agentic-ui-kit.com/components/travel-booking-card
- Live preview: https://agentic-ui-kit.com/live/fixture/travel-booking-card?piece=travel-booking-card

## Install

```bash
agentic-ui add travel-booking-card
npx shadcn@4.17.0 add @agentic-ui/travel-booking-card
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sticky-positioning, range-calendar-popover, guests-stepper-popover, price-breakdown, reserve-cta
- **Intents:** execute-flow, create-edit
- **Suits domains:** travel, ecommerce, billing, culinary
- **Interaction:** popover, calendar, stepper
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** stay booking with a price breakdown, side checkout for tickets with fees, service booking with date and attendee selectors
- **Avoid when:** real payment flows (requires integration), products without a temporal dimension
- **Preserve when adapting:** sticky-card-layout, price-breakdown-pattern, date-guest-selection
- **Replace when adapting:** pricing-model, fee-lines, cta-action
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.45/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, calendar, popover, separator
- **npm dependencies:** react-day-picker, date-fns, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template), Fitness Studio Operations (blueprint), Marketplace (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, react-day-picker@10.0.1
- **Registry dependencies:** lib-travel-marketplace-utils, ui-button, ui-popover, ui-separator, ui-travel-marketplace-calendar


### Travel Filters Dialog

Stay filters with price range and amenities.

- id: `travel-filters-dialog`
- Page: https://agentic-ui-kit.com/components/travel-filters-dialog
- Live preview: https://agentic-ui-kit.com/live/template/travel-marketplace/explore?piece=travel-filters-dialog

## Install

```bash
agentic-ui add travel-filters-dialog
npx shadcn@4.17.0 add @agentic-ui/travel-filters-dialog
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** local-draft-state, live-result-count-preview, multi-facet-controls, clear-draft, apply-to-url
- **Intents:** manage-collection, configure
- **Suits domains:** travel, ecommerce, operations, analytics
- **Interaction:** dialog, slider, checkbox, stepper
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** stay filters with price range and amenities, multi-faceted product catalog filters, refining search results with a preview
- **Avoid when:** sets with 1-2 filters (use inline controls), filters that must apply live
- **Preserve when adapting:** draft-then-apply, live-count-preview, footer-action-bar
- **Replace when adapting:** facet-definitions, price-scale, result-count-source
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.45/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, checkbox, dialog, separator, slider, toggle-group
- **npm dependencies:** nuqs, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** date-fns-tz@3.2.0, lucide-react@0.577.0, nuqs@^2.8.9, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-button, ui-dialog, ui-separator, ui-slider


### Orchestra OPS App Header

Header with a contextual title and dynamic search box.

- id: `orchestra-ops-app-header`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-app-header
- Live preview: https://agentic-ui-kit.com/live/piece/orchestra-ops-app-header?piece=orchestra-ops-app-header

## Install

```bash
agentic-ui add orchestra-ops-app-header
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-app-header
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** breadcrumb, route-metadata, live-search, theme-toggle
- **Intents:** navigate, configure, manage-collection
- **Suits domains:** music, operations, media, saas, devtools
- **Interaction:** search-input, theme-toggle-click
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Header with a contextual title and dynamic search box, Top bar with a contextual search and a light/dark toggle, Contextual navigation for stage management
- **Avoid when:** Minimal toolbars without route metadata, Static headers without interaction
- **Preserve when adapting:** route-metadata-mapping, search-slot, utility-action-cluster
- **Replace when adapting:** external-link, search-placeholder, route-icons
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.43/10
- **Quality breakdown:** visual 8.5/10, responsive 8/10, accessibility 8/10, code 8.5/10
- **Uses primitives:** button, input, sidebar
- **npm dependencies:** lucide-react, zustand, next-themes
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-orchestra-ops-utils, orchestra-ops-theme-toggle, ui-input, ui-sidebar


### File Storage Activity Timeseries

Ingested gigabytes versus finished exports per day.

- id: `file-storage-activity-timeseries`
- Page: https://agentic-ui-kit.com/components/file-storage-activity-timeseries
- Live preview: https://agentic-ui-kit.com/live/piece/file-storage-activity-timeseries?piece=file-storage-activity-timeseries

## Install

```bash
agentic-ui add file-storage-activity-timeseries
npx shadcn@4.17.0 add @agentic-ui/file-storage-activity-timeseries
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** timeseries, dual-axis, comparison, tooltip, legend
- **Intents:** compare-over-time
- **Suits domains:** file-storage, analytics, saas, devtools, operations
- **Interaction:** tooltip, legend
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Ingested gigabytes versus finished exports per day, Record additions and removals, Daily ingestion events
- **Avoid when:** Categories are compared without a time axis, Fewer than three observations
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** recharts
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** recharts-v2@npm:recharts@^2.15.4
- **Registry dependencies:** ui-file-storage-chart


### File Storage Storage Composition

Space by media type, largest first.

- id: `file-storage-storage-composition`
- Page: https://agentic-ui-kit.com/components/file-storage-storage-composition
- Live preview: https://agentic-ui-kit.com/live/piece/file-storage-storage-composition?piece=file-storage-storage-composition

## Install

```bash
agentic-ui add file-storage-storage-composition
npx shadcn@4.17.0 add @agentic-ui/file-storage-storage-composition
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** composition-breakdown, sorted-horizontal-bars, fill-badge, tooltip
- **Intents:** show-composition
- **Suits domains:** file-storage, analytics, saas, billing, operations
- **Interaction:** tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Space by media type, largest first, Cost composition by category, Quota distribution by plan
- **Avoid when:** The data are a time series, There are more than eight categories
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** recharts
- **Used in:** Stashbox File Storage (template), Fitness Studio Operations (blueprint)
- **npm dependencies (registry):** recharts-v2@npm:recharts@^2.15.4
- **Registry dependencies:** ui-file-storage-chart


### Flightops Traffic Volume Chart

Hourly departures vs arrivals across the hub banks.

- id: `flightops-traffic-volume-chart`
- Page: https://agentic-ui-kit.com/components/flightops-traffic-volume-chart
- Live preview: https://agentic-ui-kit.com/live/piece/flightops-traffic-volume-chart?piece=flightops-traffic-volume-chart

## Install

```bash
agentic-ui add flightops-traffic-volume-chart
npx shadcn@4.17.0 add @agentic-ui/flightops-traffic-volume-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** timeseries, chart-style-switch, series-mode-switch, peak-reference, tooltip
- **Intents:** compare-over-time
- **Suits domains:** aviation, operations, analytics, logistics, saas
- **Interaction:** tooltip, switch-chart-style, switch-series-mode
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Hourly departures vs arrivals across the hub banks.
- **Avoid when:** Fewer than three time observations or purely categorical data.
- **Preserve when adapting:** chart-grammar, interaction-model
- **Replace when adapting:** domain-copy, mock-data, metric-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart, dropdown-menu, button
- **npm dependencies:** recharts
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-button, ui-chart, ui-dropdown-menu, ui-flight-airports


### Inventory OPS App Header

Top header for a control panel with entity search.

- id: `inventory-ops-app-header`
- Page: https://agentic-ui-kit.com/components/inventory-ops-app-header
- Live preview: https://agentic-ui-kit.com/live/piece/inventory-ops-app-header?piece=inventory-ops-app-header

## Install

```bash
agentic-ui add inventory-ops-app-header
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-context-display, search-input-toggle, dark-mode-toggle
- **Intents:** navigate, configure
- **Suits domains:** operations, ecommerce, saas, devtools, crm
- **Interaction:** search-input, theme-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Top header for a control panel with entity search, Application toolbar with a light/dark mode toggle, Contextual header for product and order modules
- **Avoid when:** Marketing headers or static portals with public dropdown menus, Minimal embedded views with no top bar
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, route-meta, semantic-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** button, input, sidebar
- **npm dependencies:** lucide-react, next-themes, zustand
- **Used in:** Stockline Inventory & Orders (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, zustand@5.0.8
- **Registry dependencies:** ui-button, ui-input, ui-sidebar


### Inventory OPS App Sidebar

Sidebar with a site or warehouse selector.

- id: `inventory-ops-app-sidebar`
- Page: https://agentic-ui-kit.com/components/inventory-ops-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/inventory-ops?piece=inventory-ops-app-sidebar

## Install

```bash
agentic-ui add inventory-ops-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-app-sidebar
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** warehouse-switcher-dropdown, active-route-highlighting, user-profile-menu
- **Intents:** navigate
- **Suits domains:** operations, ecommerce, logistics, saas, project-management
- **Interaction:** warehouse-select, nav-link-click, user-menu-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Sidebar with a site or warehouse selector, Main navigation of an e-commerce back office, SaaS application menu with an organization switcher
- **Avoid when:** Top horizontal navigation as the site's only pattern, Mobile applications without side menu support
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** sidebar, dropdown-menu, avatar, button
- **npm dependencies:** lucide-react
- **Used in:** Stockline Inventory & Orders (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-file-storage-utils, ui-avatar, ui-dropdown-menu, ui-progress, ui-sidebar


### Inventory OPS Category Distribution

Revenue composition by catalog category.

- id: `inventory-ops-category-distribution`
- Page: https://agentic-ui-kit.com/components/inventory-ops-category-distribution
- Live preview: https://agentic-ui-kit.com/live/piece/inventory-ops-category-distribution?piece=inventory-ops-category-distribution

## Install

```bash
agentic-ui add inventory-ops-category-distribution
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-category-distribution
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** horizontal-bar-chart, ranked-categories, tooltip-inspection, color-coding
- **Intents:** show-composition
- **Suits domains:** analytics, operations, ecommerce, finance, saas
- **Interaction:** chart-tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Revenue composition by catalog category, Stock distribution by department or item family, Market share breakdown or sales distribution
- **Avoid when:** More than 12 categories (bars become too thin), Temporal data or continuous time series
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** recharts
- **Used in:** Stockline Inventory & Orders (template)
- **npm dependencies (registry):** recharts@3.8.1
- **Registry dependencies:** ui-chart


### Inventory OPS Dashboard Shell

Base structure for admin consoles.

- id: `inventory-ops-dashboard-shell`
- Page: https://agentic-ui-kit.com/components/inventory-ops-dashboard-shell
- Live preview: https://agentic-ui-kit.com/live/template/inventory-ops?piece=inventory-ops-dashboard-shell

## Install

```bash
agentic-ui add inventory-ops-dashboard-shell
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-dashboard-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** collapsible-sidebar, sticky-header, route-breadcrumbs, dark-mode-toggle
- **Intents:** navigate
- **Suits domains:** operations, saas, ecommerce, devtools, crm
- **Interaction:** sidebar-toggle, route-change
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Base structure for admin consoles, Navigation shell for multi-warehouse or multi-worker SaaS, Operations panel with a top bar and a persistent side menu
- **Avoid when:** Landing pages or public websites without authentication, Single-flow or full-screen wizard views
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, semantic-tokens, theme-palette
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** sidebar, sheet, button
- **npm dependencies:** lucide-react
- **Used in:** Stockline Inventory & Orders (template), Internal Operations (blueprint), Support Desk (blueprint)
- **Registry dependencies:** inventory-ops-app-header, inventory-ops-app-sidebar, ui-sidebar


### Inventory OPS KPI Stats Cards

Main stock and warehouse metric cards.

- id: `inventory-ops-kpi-stats-cards`
- Page: https://agentic-ui-kit.com/components/inventory-ops-kpi-stats-cards
- Live preview: https://agentic-ui-kit.com/live/piece/inventory-ops-kpi-stats-cards?piece=inventory-ops-kpi-stats-cards

## Install

```bash
agentic-ui add inventory-ops-kpi-stats-cards
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-kpi-stats-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** metric-summary, trend-indicator, percentage-change, status-iconography
- **Intents:** track-status
- **Suits domains:** operations, ecommerce, logistics, saas, analytics
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Main stock and warehouse metric cards, KPI summary in an e-commerce sales dashboard, Performance indicators for inventory and pending orders
- **Avoid when:** Metrics with no percentage comparison or trend, Systems that only require a single number with no context
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **npm dependencies:** lucide-react
- **Used in:** Stockline Inventory & Orders (template), Internal Operations — public status variant (blueprint), Internal Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-file-storage-utils


### Inventory OPS Low Stock Alert Table

Critical alerts card for product restocking.

- id: `inventory-ops-low-stock-alert-table`
- Page: https://agentic-ui-kit.com/components/inventory-ops-low-stock-alert-table
- Live preview: https://agentic-ui-kit.com/live/piece/inventory-ops-low-stock-alert-table?piece=inventory-ops-low-stock-alert-table

## Install

```bash
agentic-ui add inventory-ops-low-stock-alert-table
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-low-stock-alert-table
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** stock-threshold-badge, avatar-preview, item-sku-detail, quick-navigation-link
- **Intents:** track-status, manage-collection
- **Suits domains:** operations, ecommerce, logistics, saas
- **Interaction:** view-all-link-click
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Critical alerts card for product restocking, Widget of out-of-stock items at a supply desk, Quick list of assets in a critical maintenance state
- **Avoid when:** Systems with no stock thresholds or inventory alerts, Inline bulk editing requirements
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button, avatar
- **npm dependencies:** lucide-react
- **Used in:** Stockline Inventory & Orders (template), Fintech Trading (analytics live) (blueprint)
- **Registry dependencies:** lib-file-storage-utils, ui-avatar, ui-badge


### Inventory OPS Orders Table

Order control table with shipping status and customer.

- id: `inventory-ops-orders-table`
- Page: https://agentic-ui-kit.com/components/inventory-ops-orders-table
- Live preview: https://agentic-ui-kit.com/live/piece/inventory-ops-orders-table?piece=inventory-ops-orders-table

## Install

```bash
agentic-ui add inventory-ops-orders-table
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-orders-table
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** global-search, status-filter, column-visibility-menu, sortable-columns, pagination-controls, customer-metadata
- **Intents:** manage-collection, track-status
- **Suits domains:** ecommerce, logistics, operations, billing
- **Interaction:** search-query, pagination, sorting, filtering, column-toggle
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Order control table with shipping status and customer, List of purchase orders with monetary amounts and dates, Billing and fulfillment transaction log
- **Avoid when:** Individual order views for end customers on mobile, Systems that only handle purchases without a fulfillment process
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button, input, select, table, dropdown-menu, avatar
- **npm dependencies:** @tanstack/react-table, lucide-react
- **Used in:** Stockline Inventory & Orders (template), Fintech Trading (analytics live) (blueprint), Internal Operations (blueprint)
- **npm dependencies (registry):** @tanstack/react-table@^8.21.3, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-file-storage-utils, ui-avatar, ui-badge, ui-button, ui-dropdown-menu, ui-input, ui-inventory-ops-table, ui-select


### Inventory OPS Products Table

Inventory management table with category and status filters.

- id: `inventory-ops-products-table`
- Page: https://agentic-ui-kit.com/components/inventory-ops-products-table
- Live preview: https://agentic-ui-kit.com/live/piece/inventory-ops-products-table?piece=inventory-ops-products-table

## Install

```bash
agentic-ui add inventory-ops-products-table
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-products-table
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** global-search, category-filter, status-filter, column-visibility-menu, sortable-columns, pagination-controls
- **Intents:** manage-collection
- **Suits domains:** ecommerce, operations, logistics, saas
- **Interaction:** search-query, pagination, sorting, filtering, column-toggle
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Inventory management table with category and status filters, Administrative product listing with prices, stock and warehouse, Interactive table of physical assets for logistics operations
- **Avoid when:** B2C catalog views in card format for shoppers, Collections with fewer than 5 rows where a simple list is enough
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button, input, select, table, dropdown-menu, avatar
- **npm dependencies:** @tanstack/react-table, lucide-react
- **Used in:** Stockline Inventory & Orders (template), Marketplace (blueprint)
- **npm dependencies (registry):** @tanstack/react-table@^8.21.3, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-file-storage-utils, ui-avatar, ui-badge, ui-button, ui-dropdown-menu, ui-input, ui-inventory-ops-table, ui-progress, ui-select


### Inventory OPS Recent Activity Feed

Inventory event history (orders, restocks, shipments, alerts).

- id: `inventory-ops-recent-activity-feed`
- Page: https://agentic-ui-kit.com/components/inventory-ops-recent-activity-feed
- Live preview: https://agentic-ui-kit.com/live/piece/inventory-ops-recent-activity-feed?piece=inventory-ops-recent-activity-feed

## Install

```bash
agentic-ui add inventory-ops-recent-activity-feed
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-recent-activity-feed
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** event-icon-mapping, user-attribution, relative-timestamps, detail-formatting
- **Intents:** audit-trail
- **Suits domains:** operations, logistics, ecommerce, devtools, saas
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Inventory event history (orders, restocks, shipments, alerts), Warehouse operations audit log, Recent activity timeline in a SaaS panel
- **Avoid when:** Systems that only require a table with bulk CSV export, Events that require a diff of individual fields
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge
- **npm dependencies:** lucide-react
- **Used in:** Stockline Inventory & Orders (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-file-storage-utils


### Inventory OPS Stock Timeseries

Monthly comparison of revenue against operating costs.

- id: `inventory-ops-stock-timeseries`
- Page: https://agentic-ui-kit.com/components/inventory-ops-stock-timeseries
- Live preview: https://agentic-ui-kit.com/live/piece/inventory-ops-stock-timeseries?piece=inventory-ops-stock-timeseries

## Install

```bash
agentic-ui add inventory-ops-stock-timeseries
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-stock-timeseries
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** area-chart, inbound-vs-outbound, weekly-timeseries, tooltip-inspection, period-totals
- **Intents:** compare-over-time
- **Suits domains:** analytics, operations, ecommerce, finance, billing
- **Interaction:** chart-tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Monthly comparison of revenue against operating costs, Time series of stock inflows and outflows, Evolution of sales and gross margins per period
- **Avoid when:** Data with no continuous chronological axis, Fewer than 3 observable periods
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** recharts
- **Used in:** Stockline Inventory & Orders (template)
- **npm dependencies (registry):** recharts@3.8.1
- **Registry dependencies:** ui-chart


### Knowledge Block Editor Canvas

Canvas of editable document blocks.

- id: `knowledge-block-editor-canvas`
- Page: https://agentic-ui-kit.com/components/knowledge-block-editor-canvas
- Live preview: https://agentic-ui-kit.com/live/fixture/knowledge-block-editor-canvas?piece=knowledge-block-editor-canvas

## Install

```bash
agentic-ui add knowledge-block-editor-canvas
npx shadcn@4.17.0 add @agentic-ui/knowledge-block-editor-canvas
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** block-types, todo-blocks, callout, toggle-list, code-block
- **Intents:** create-edit, show-composition
- **Suits domains:** knowledge, notes, personal-productivity, education, devtools
- **Interaction:** inline-edit, toggle-block, check-todo
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Canvas of editable document blocks, Structured content renderer by type
- **Avoid when:** Editors that require real-time collaboration with CRDT
- **Preserve when adapting:** block-type-switch, indentation
- **Replace when adapting:** block-text, callout-icons
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** checkbox, separator
- **npm dependencies:** lucide-react
- **Used in:** Pagewell Team Workspace (template), Knowledge Workspace (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-team-workspace-utils, ui-checkbox, ui-collapsible, ui-separator


### Knowledge Workspace App Header

Document header with share and comments.

- id: `knowledge-workspace-app-header`
- Page: https://agentic-ui-kit.com/components/knowledge-workspace-app-header
- Live preview: https://agentic-ui-kit.com/live/piece/knowledge-workspace-app-header?piece=knowledge-workspace-app-header

## Install

```bash
agentic-ui add knowledge-workspace-app-header
npx shadcn@4.17.0 add @agentic-ui/knowledge-workspace-app-header
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** breadcrumb-trail, share-actions, favorite-toggle, light-dark-toggle
- **Intents:** navigate, communicate
- **Suits domains:** knowledge, notes, saas, project-management, file-storage
- **Interaction:** toggle-favorite, share, toggle-light-dark
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Document header with share and comments, Top bar of a knowledge application
- **Avoid when:** Full-screen views without contextual navigation
- **Preserve when adapting:** breadcrumb-structure, action-cluster, light-dark-toggle
- **Replace when adapting:** brand-mark, action-set
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, input, avatar, sidebar
- **npm dependencies:** date-fns, lucide-react
- **Used in:** Pagewell Team Workspace (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, next-themes@0.4.6, zustand@5.0.8
- **Registry dependencies:** lib-team-workspace-utils, ui-avatar, ui-breadcrumb, ui-button, ui-dropdown-menu, ui-input, ui-popover, ui-sidebar


### Motion Button Press

Deploy-release button with press scale feedback in a publishing toolbar.

- id: `motion-button-press`
- Page: https://agentic-ui-kit.com/components/motion-button-press
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-button-press?piece=motion-button-press

## Install

```bash
agentic-ui add motion-button-press
npx shadcn@4.17.0 add @agentic-ui/motion-button-press
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** press-scale-feedback, keyboard-activation, reduced-motion-fallback
- **Intents:** execute-flow, create-edit, configure
- **Suits domains:** saas, operations, devtools, settings, ai-workspace
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Deploy-release button with press scale feedback in a publishing toolbar.
- **Avoid when:** Do not use for destructive irreversible actions that require an explicit confirmation step instead of a single press.
- **Preserve when adapting:** press-scale-feedback, static-pressed-state, focus-ring
- **Replace when adapting:** action-label, surface-color
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-motion, lib-motion-checkbox-draw-tristate, lib-motion-toggle-spring-draggable


### Motion Checkbox Draw

Include-migration-notes checkbox with stroke-draw checkmark in release settings.

- id: `motion-checkbox-draw`
- Page: https://agentic-ui-kit.com/components/motion-checkbox-draw
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-checkbox-draw?piece=motion-checkbox-draw

## Install

```bash
agentic-ui add motion-checkbox-draw
npx shadcn@4.17.0 add @agentic-ui/motion-checkbox-draw
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** stroke-draw, checked-state, reduced-motion-fallback
- **Intents:** create-edit, configure, execute-flow
- **Suits domains:** settings, saas, operations, personal-productivity, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Include-migration-notes checkbox with stroke-draw checkmark in release settings.
- **Avoid when:** Avoid for indeterminate tri-state trees; this component models binary checked/unchecked only.
- **Preserve when adapting:** binary-checkbox-semantics, static-checked-state, dash-geometry
- **Replace when adapting:** field-label, box-radius
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **npm dependencies:** @agentic-ui/motion-checkbox-draw-tristate, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-motion, lib-motion-checkbox-draw-tristate, lib-motion-toggle-spring-draggable


### Motion Copy Success

Copy status-URL button with drawn success tick in a publishing toolbar.

- id: `motion-copy-success`
- Page: https://agentic-ui-kit.com/components/motion-copy-success
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-copy-success?piece=motion-copy-success

## Install

```bash
agentic-ui add motion-copy-success
npx shadcn@4.17.0 add @agentic-ui/motion-copy-success
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** clipboard-write, success-tick, reduced-motion-fallback
- **Intents:** import-export, communicate, configure
- **Suits domains:** devtools, saas, operations, settings, ai-workspace
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Copy status-URL button with drawn success tick in a publishing toolbar.
- **Avoid when:** Avoid when the copied payload is secret and must not surface a persistent success state; clear or mask instead.
- **Preserve when adapting:** clipboard-write, persistent-copied-status, tick-draw
- **Replace when adapting:** copied-text, reset-delay
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **npm dependencies:** @agentic-ui/motion-copy-success-masked, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-motion, lib-motion-checkbox-draw-tristate, lib-motion-copy-success-masked, lib-motion-toggle-spring-draggable


### Motion Like Burst

Like button with particle burst and persistent count on a release toolbar.

- id: `motion-like-burst`
- Page: https://agentic-ui-kit.com/components/motion-like-burst
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-like-burst?piece=motion-like-burst

## Install

```bash
agentic-ui add motion-like-burst
npx shadcn@4.17.0 add @agentic-ui/motion-like-burst
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** burst-particles, count-feedback, reduced-motion-fallback
- **Intents:** communicate, track-status, evaluate-ai
- **Suits domains:** social, media, ai-workspace, saas, marketing
- **Interaction:** click, keyboard-navigation
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Like button with particle burst and persistent count on a release toolbar.
- **Avoid when:** Avoid in protected contexts (billing, healthcare, legal) where celebratory particles are denied by the motion policy.
- **Preserve when adapting:** count-state, particle-budget, static-count-fallback
- **Replace when adapting:** icon, count-format
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **npm dependencies:** @agentic-ui/motion-like-burst-double-tap, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-motion, lib-motion-checkbox-draw-tristate, lib-motion-like-burst-double-tap, lib-motion-toggle-spring-draggable


### Motion Like Burst Double Tap

Moodboard or media feed where double-tapping an image likes it and the heart pops under the finger.

- id: `motion-like-burst-double-tap`
- Page: https://agentic-ui-kit.com/components/motion-like-burst-double-tap
- Live preview: https://agentic-ui-kit.com/live/component/motion-like-burst-double-tap

## Install

```bash
agentic-ui add motion-like-burst-double-tap
npx shadcn@4.17.0 add @agentic-ui/motion-like-burst-double-tap
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** burst-particles, double-tap-like, pointer-anchored-burst, personality-particle-policy, count-feedback, reduced-motion-fallback
- **Intents:** communicate, explore-detail
- **Suits domains:** social, media, file-storage, knowledge, marketing
- **Interaction:** click, double-tap, keyboard-navigation
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Moodboard or media feed where double-tapping an image likes it and the heart pops under the finger., Photo review grid where a Like button toggles and the count updates in a compact 1.2k format., Community gallery that must obey an enterprise personality (pop without particles) and reduced motion.
- **Avoid when:** Destructive or reversible-by-accident actions; double-tap never unlikes, so it is not a generic toggle., Protected contexts (billing, healthcare, legal) where celebratory feedback is inappropriate; use motion-button-press., Text-only lists without a media surface; use the plain motion-like-burst button.
- **Preserve when adapting:** double-tap-only-likes, personality-particle-policy, static-liked-badge-and-count, keyboard-button-equivalent
- **Replace when adapting:** media-content, accent-colour, count-format
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Motion Parallax Header

Long report or case-study page whose hero collapses into a bar with the title, review status and current section.

- id: `motion-parallax-header`
- Page: https://agentic-ui-kit.com/components/motion-parallax-header
- Live preview: https://agentic-ui-kit.com/live/component/motion-parallax-header

## Install

```bash
agentic-ui add motion-parallax-header
npx shadcn@4.17.0 add @agentic-ui/motion-parallax-header
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** scroll-linked-parallax, scroll-driven-timeline, layered-depth, condensing-sticky-bar, scroll-spy-sections, personality-depth-policy, reduced-motion-fallback
- **Intents:** navigate, explore-detail
- **Suits domains:** knowledge, saas, marketing, travel, operations
- **Interaction:** scroll, click, keyboard-navigation
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Long report or case-study page whose hero collapses into a bar with the title, review status and current section., Documentation or knowledge-base article with a decorative header and section links that follow the scroll., Destination or product detail page where a layered illustration adds depth without moving the content.
- **Avoid when:** Dense operational dashboards or data tables where the header must stay fixed and compact from the first pixel., Pages shorter than one viewport, where there is nothing to collapse or track., Vestibular-sensitive contexts that must stay motion-free even without reduced motion set; use profile none, which keeps the condensed bar.
- **Preserve when adapting:** depth-cap-per-personality, static-fallback-keeps-condensed-bar, inert-hidden-bar, scroll-spy-aria-current
- **Replace when adapting:** layer-artwork, hero-copy-and-facts, section-list
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Motion Personality Selector

Select one motion personality and validate a complete viewport plan.

- id: `motion-personality-selector`
- Page: https://agentic-ui-kit.com/components/motion-personality-selector
- Live preview: https://agentic-ui-kit.com/live/component/motion-personality-selector

## Install

```bash
agentic-ui add motion-personality-selector
npx shadcn@4.17.0 add @agentic-ui/motion-personality-selector
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** personality-selection, context-allowlist, expressive-viewport-budget, navigation-fallback, reduced-motion-fallback, generated-motion-registry, runtime-policy-preview
- **Intents:** configure, navigate, track-status
- **Suits domains:** settings, devtools, saas, operations, ai-workspace
- **Interaction:** click, select, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Select one motion personality and validate a complete viewport plan.
- **Avoid when:** Caller cannot submit the complete candidate list per viewport; split calls cannot enforce a shared budget.
- **Preserve when adapting:** single-project-personality, viewport-budget, protected-contexts, static-status
- **Replace when adapting:** domain-labels, component-registry
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Motion Toggle Spring

Notify-subscribers switch with spring knob travel in a channel settings panel.

- id: `motion-toggle-spring`
- Page: https://agentic-ui-kit.com/components/motion-toggle-spring
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-toggle-spring?piece=motion-toggle-spring

## Install

```bash
agentic-ui add motion-toggle-spring
npx shadcn@4.17.0 add @agentic-ui/motion-toggle-spring
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** spring-knob-travel, switch-state, reduced-motion-fallback
- **Intents:** configure, create-edit
- **Suits domains:** settings, saas, ai-workspace, operations, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Notify-subscribers switch with spring knob travel in a channel settings panel.
- **Avoid when:** Avoid for choices that are not binary; use a segmented control or select instead.
- **Preserve when adapting:** binary-switch-semantics, static-on-off-state, spring-token
- **Replace when adapting:** setting-label, track-color
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **npm dependencies:** @agentic-ui/motion-toggle-spring-draggable, @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-motion, lib-motion-checkbox-draw-tristate, lib-motion-toggle-spring-draggable


### Payments Dashboard Overview Globe

Global payment routing.

- id: `payments-dashboard-overview-globe`
- Page: https://agentic-ui-kit.com/components/payments-dashboard-overview-globe
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/dashboard-5?piece=payments-dashboard-overview-globe

## Install

```bash
agentic-ui add payments-dashboard-overview-globe
npx shadcn@4.17.0 add @agentic-ui/payments-dashboard-overview-globe
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, routing-globe, timeseries-chart, network-visualization
- **Intents:** monitor-live, compare-over-time
- **Suits domains:** payments, billing, finance, saas, operations
- **Interaction:** tooltip, tabs, range-selector
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** global payment routing, visualization of the acquirer network
- **Avoid when:** data editing flows, fewer than 3 relevant metrics
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-first-layout
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** avatar, chart
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, lib-admin-kit-utils, payments-routing-globe, ui-admin-kit-avatar, ui-admin-kit-chart


### Payments Invoice Create PDF

Invoice with a PDF preview before sending.

- id: `payments-invoice-create-pdf`
- Page: https://agentic-ui-kit.com/components/payments-invoice-create-pdf
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/create-invoice-3?piece=payments-invoice-create-pdf

## Install

```bash
agentic-ui add payments-invoice-create-pdf
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-create-pdf
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** pdf-preview, live-preview, multi-section-form
- **Intents:** create-edit, execute-flow
- **Suits domains:** payments, billing, finance, saas
- **Interaction:** form-fields, live-preview, validation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** invoice with a PDF preview before sending
- **Avoid when:** editing a single field, flows without a preview
- **Preserve when adapting:** form-preview-sync, step-hierarchy, validation-model
- **Replace when adapting:** domain-copy, fields, tax-rules, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** button, calendar, input, label, popover, select, textarea
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @react-pdf/renderer@4.3.0, lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-popover, ui-admin-kit-select, ui-admin-kit-textarea, ui-calendar


### Pm Issue Calendar Schedule

Weekly agenda of meetings and sprint sessions.

- id: `pm-issue-calendar-schedule`
- Page: https://agentic-ui-kit.com/components/pm-issue-calendar-schedule
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/issue-calendar-2?piece=pm-issue-calendar-schedule

## Install

```bash
agentic-ui add pm-issue-calendar-schedule
npx shadcn@4.17.0 add @agentic-ui/pm-issue-calendar-schedule
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** weekly-agenda, time-slots, overlapping-events, quick-reschedule
- **Intents:** track-status, manage-collection
- **Suits domains:** project-management, operations, saas, personal-productivity
- **Interaction:** time-slot-click, week-navigation
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Weekly agenda of meetings and sprint sessions, Daily schedule of operational activities
- **Avoid when:** Macro visualization at the quarterly or yearly level
- **Preserve when adapting:** time-grid-layout, event-pill-rendering
- **Replace when adapting:** working-hours-range, event-color-map
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, badge, card, scroll-area
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Kestrel Admin Kit (template), Clinic Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-black-2-png, lib-admin-kit-utils, pm-create-issue-sheet, pm-issue-details-sheet, ui-admin-kit-avatar


### Pm Project List Sidebar Views

Project listing with saved views and quick filters.

- id: `pm-project-list-sidebar-views`
- Page: https://agentic-ui-kit.com/components/pm-project-list-sidebar-views
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/project-list-2?piece=pm-project-list-sidebar-views

## Install

```bash
agentic-ui add pm-project-list-sidebar-views
npx shadcn@4.17.0 add @agentic-ui/pm-project-list-sidebar-views
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sidebar-presets, favorites-section, tag-filtering, quick-access-pins
- **Intents:** manage-collection, navigate
- **Suits domains:** project-management, saas, devtools, personal-productivity
- **Interaction:** sidebar-view-select, pin-favorite
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Project listing with saved views and quick filters, Portfolio navigation by favorites and states
- **Avoid when:** Applications with a single project or without saved views
- **Preserve when adapting:** saved-views-sidebar, quick-link-list
- **Replace when adapting:** preset-definitions, icon-sets
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, badge, card, scroll-area
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, asset-admin-kit-images-project-backgrounds-1-png, asset-admin-kit-images-project-backgrounds-10-png, asset-admin-kit-images-project-backgrounds-11-png, asset-admin-kit-images-project-backgrounds-12-png, asset-admin-kit-images-project-backgrounds-2-png, asset-admin-kit-images-project-backgrounds-3-png, asset-admin-kit-images-project-backgrounds-4-png, asset-admin-kit-images-project-backgrounds-5-png, asset-admin-kit-images-project-backgrounds-6-png, asset-admin-kit-images-project-backgrounds-7-png, asset-admin-kit-images-project-backgrounds-8-png, asset-admin-kit-images-project-backgrounds-9-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-separator


### Social Client Inline Composer

Quick 'What's on your mind?' bar.

- id: `social-client-inline-composer`
- Page: https://agentic-ui-kit.com/components/social-client-inline-composer
- Live preview: https://agentic-ui-kit.com/live/piece/social-client-inline-composer?piece=social-client-inline-composer

## Install

```bash
agentic-ui add social-client-inline-composer
npx shadcn@4.17.0 add @agentic-ui/social-client-inline-composer
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** quick-post-affordance, current-user-avatar, modal-launcher
- **Intents:** create-edit, communicate
- **Suits domains:** social, support, knowledge, project-management, saas
- **Interaction:** click-to-open
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Quick 'What's on your mind?' bar, Conversation starter input, Comment launcher
- **Avoid when:** Read-only environments
- **Preserve when adapting:** layout, trigger-pattern
- **Replace when adapting:** placeholder-text, button-text
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** avatar, button
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, ui-avatar, ui-button


### Social Client Stat Card

Followers or engagement card.

- id: `social-client-stat-card`
- Page: https://agentic-ui-kit.com/components/social-client-stat-card
- Live preview: https://agentic-ui-kit.com/live/fixture/social-client-stat-card?piece=social-client-stat-card

## Install

```bash
agentic-ui add social-client-stat-card
npx shadcn@4.17.0 add @agentic-ui/social-client-stat-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-metric-display, trend-indicator, compact-number-formatting, detail-render-prop
- **Intents:** track-status, compare-over-time
- **Suits domains:** social, analytics, finance, saas, marketing
- **Interaction:** click-action
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Followers or engagement card, Revenue or transactions indicator, Service health metric
- **Avoid when:** Data without a quantifiable numeric value
- **Preserve when adapting:** card-container, trend-styling, compact-number-display
- **Replace when adapting:** metric-label, trend-thresholds
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **npm dependencies:** lucide-react
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-social-client-utils


### Social Client Stats Chart

Visualization of daily impressions.

- id: `social-client-stats-chart`
- Page: https://agentic-ui-kit.com/components/social-client-stats-chart
- Live preview: https://agentic-ui-kit.com/live/fixture/social-client-stats-chart?piece=social-client-stats-chart

## Install

```bash
agentic-ui add social-client-stats-chart
npx shadcn@4.17.0 add @agentic-ui/social-client-stats-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** custom-bar-chart, grid-ticks, hover-tooltips, multi-metric-switch
- **Intents:** compare-over-time, track-status
- **Suits domains:** social, analytics, marketing, saas, operations
- **Interaction:** hover-tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Visualization of daily impressions, Chart of interactions per day, Temporal activity bars
- **Avoid when:** Complex multivariate charts with zoom and pan
- **Preserve when adapting:** ticks-calculation, bar-scaling-formula, layout
- **Replace when adapting:** metric-field, bar-color-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Used in:** Palaver Social Client (template), Analytics (blueprint), Social Media Manager (blueprint)
- **Registry dependencies:** lib-social-client-utils


### Travel Profile Overview

Host profile with reputation.

- id: `travel-profile-overview`
- Page: https://agentic-ui-kit.com/components/travel-profile-overview
- Live preview: https://agentic-ui-kit.com/live/piece/travel-profile-overview?piece=travel-profile-overview

## Install

```bash
agentic-ui add travel-profile-overview
npx shadcn@4.17.0 add @agentic-ui/travel-profile-overview
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** identity-card, stats-row, details-grid, visited-places, past-stays, received-reviews
- **Intents:** explore-detail, track-status
- **Suits domains:** travel, social, crm, personal-productivity
- **Interaction:** navigate
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** host profile with reputation, public user profile with activity, community member record card
- **Avoid when:** editing profiles (settings), entities with no social dimension
- **Preserve when adapting:** identity-plus-stats-composition, reviews-section
- **Replace when adapting:** profile-fields, stats-definitions, history-source
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** avatar, badge, button, separator
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-avatar, ui-button, ui-separator


### Ecommerce Product Detail Tabs Reviews

Product page with reviews.

- id: `ecommerce-product-detail-tabs-reviews`
- Page: https://agentic-ui-kit.com/components/ecommerce-product-detail-tabs-reviews
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/product-detail-1?piece=ecommerce-product-detail-tabs-reviews

## Install

```bash
agentic-ui add ecommerce-product-detail-tabs-reviews
npx shadcn@4.17.0 add @agentic-ui/ecommerce-product-detail-tabs-reviews
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** tabs, reviews, pricing-panel, media-gallery, stock-panel
- **Intents:** explore-detail
- **Suits domains:** ecommerce, books, wine, media, culinary
- **Interaction:** tab-switch, scroll
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** product page with reviews, catalog detail with tabs
- **Avoid when:** technical details without editorial content
- **Preserve when adapting:** tabs-detail-pattern, review-card, pricing-panel
- **Replace when adapting:** domain-copy, imagery, metrics
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.35/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 7/10
- **Uses primitives:** card, tabs, badge, avatar, separator
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-images-block-ecommerce-skin-care-product-kadarius-seegars-mxy5gokl8me-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, ecommerce-product-editor, ecommerce-product-wizard, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-switch, ui-admin-kit-tabs


### Ecommerce Sales Dashboard Bubble Orders

Proportional bubble-style comparison.

- id: `ecommerce-sales-dashboard-bubble-orders`
- Page: https://agentic-ui-kit.com/components/ecommerce-sales-dashboard-bubble-orders
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/dashboard-9?piece=ecommerce-sales-dashboard-bubble-orders

## Install

```bash
agentic-ui add ecommerce-sales-dashboard-bubble-orders
npx shadcn@4.17.0 add @agentic-ui/ecommerce-sales-dashboard-bubble-orders
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, bar-timeseries, bubble-chart-svg, recent-orders-card
- **Intents:** compare-over-time, show-composition
- **Suits domains:** ecommerce, analytics, saas, operations, marketing
- **Interaction:** tooltip, hover-highlight
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** proportional bubble-style comparison, revenue with recent orders alongside
- **Avoid when:** exact numeric precision in bubbles
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-card-grid
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.35/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** sidebar, card, chart, badge, avatar
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** dotted-map@3.1.0, framer-motion@12.38.0, lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-chart


### File Storage Team Directory

Member directory with quota.

- id: `file-storage-team-directory`
- Page: https://agentic-ui-kit.com/components/file-storage-team-directory
- Live preview: https://agentic-ui-kit.com/live/template/file-storage/team?piece=file-storage-team-directory

## Install

```bash
agentic-ui add file-storage-team-directory
npx shadcn@4.17.0 add @agentic-ui/file-storage-team-directory
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** member-cards, role-badges, quota-progress, contribution-summary
- **Intents:** track-status, communicate
- **Suits domains:** file-storage, crm, hr, saas, operations
- **Interaction:** member-actions, invite
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Member directory with quota, List of collaborators by role, Team panel of a workspace
- **Avoid when:** There is no multi-user model, Roles are not relevant
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.35/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** badge, button, progress, separator, dropdown-menu
- **npm dependencies:** lucide-react, next/image
- **Used in:** Stashbox File Storage (template), Legal Operations (blueprint), People Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** file-storage-team-activity-feed, lib-file-storage-utils, ui-badge, ui-button, ui-dropdown-menu, ui-progress, ui-separator


### Travel Explore Split View

Accommodation explorer with a map.

- id: `travel-explore-split-view`
- Page: https://agentic-ui-kit.com/components/travel-explore-split-view
- Live preview: https://agentic-ui-kit.com/live/piece/travel-explore-split-view?piece=travel-explore-split-view

## Install

```bash
agentic-ui add travel-explore-split-view
npx shadcn@4.17.0 add @agentic-ui/travel-explore-split-view
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** quick-type-pills, filters-entrypoint, listing-grid, hover-map-pin-highlight, list-map-toggle
- **Intents:** explore-detail, manage-collection
- **Suits domains:** travel, maps-ops, ecommerce, operations
- **Interaction:** toggle, hover-sync, filter
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** accommodation explorer with a map, real estate search with list+map, store directory with a map
- **Avoid when:** collections without a geographic dimension, simple search results
- **Preserve when adapting:** split-layout, hover-pin-sync, mobile-toggle
- **Replace when adapting:** marker-content, card-type, filter-facets
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.35/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, toggle-group
- **npm dependencies:** nuqs, zustand, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template), Marketplace (blueprint)
- **npm dependencies (registry):** date-fns-tz@3.2.0, lucide-react@0.577.0, nuqs@^2.8.9, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, travel-filters-dialog, travel-listing-card, travel-map-explorer, ui-button, ui-separator


### Orchestra OPS Dispatch Detail

Correspondence viewer with attachments and concert linking.

- id: `orchestra-ops-dispatch-detail`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-dispatch-detail
- Live preview: https://agentic-ui-kit.com/live/piece/orchestra-ops-dispatch-detail?piece=orchestra-ops-dispatch-detail

## Install

```bash
agentic-ui add orchestra-ops-dispatch-detail
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-dispatch-detail
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** message-body-reader, attachment-chips, reply-actions, star-and-archive, concert-link
- **Intents:** explore-detail, communicate
- **Suits domains:** music, operations, crm, support, social
- **Interaction:** reply-click, attachment-download, archive-message
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Correspondence viewer with attachments and concert linking, Reading panel for formal communications and replies, Reader for letters and production notes with an action bar
- **Avoid when:** Long forms for collecting unstructured data, WYSIWYG rich text editor
- **Preserve when adapting:** header-metadata-block, attachment-chips, response-actions
- **Replace when adapting:** action-handlers, attachment-viewer-link, thread-store
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.32/10
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 8/10, code 8.5/10
- **Uses primitives:** avatar, badge, button, separator, dropdown-menu
- **npm dependencies:** lucide-react, zustand
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-orchestra-ops-utils, ui-avatar, ui-badge, ui-button, ui-dropdown-menu, ui-separator


### Knowledge Document Page Editor

Block-based document editor with cover and icon.

- id: `knowledge-document-page-editor`
- Page: https://agentic-ui-kit.com/components/knowledge-document-page-editor
- Live preview: https://agentic-ui-kit.com/live/template/team-workspace/p/pg-welcome?piece=knowledge-document-page-editor

## Install

```bash
agentic-ui add knowledge-document-page-editor
npx shadcn@4.17.0 add @agentic-ui/knowledge-document-page-editor
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rich-document, cover-image, icon-emoji, inline-editing, backlinks
- **Intents:** create-edit, explore-detail
- **Suits domains:** knowledge, notes, personal-productivity, education, saas
- **Interaction:** inline-edit, change-cover, change-icon
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** block-based document editor with cover and icon, Inline-editable internal wiki page
- **Avoid when:** Read-only content generated by a rigid template
- **Preserve when adapting:** document-canvas, cover-and-icon
- **Replace when adapting:** block-content, cover-presets
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.3/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** avatar, badge, button
- **npm dependencies:** lucide-react
- **Used in:** Pagewell Team Workspace (template), Knowledge Workspace (blueprint), Project Delivery (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** knowledge-block-editor-canvas, knowledge-page-cover-picker, knowledge-page-icon-picker, lib-team-workspace-utils, ui-avatar, ui-badge, ui-button


### Marine Yacht Card

Vessel record card.

- id: `marine-yacht-card`
- Page: https://agentic-ui-kit.com/components/marine-yacht-card
- Live preview: https://agentic-ui-kit.com/live/template/regatta-ops/fleet?piece=marine-yacht-card

## Install

```bash
agentic-ui add marine-yacht-card
npx shadcn@4.17.0 add @agentic-ui/marine-yacht-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** gradient-hero, owner-row, metric-tiles, tracked-state
- **Intents:** explore-detail
- **Suits domains:** marine, aviation, ecommerce, crm, logistics
- **Interaction:** select-entity
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Vessel record card, Aircraft or fleet vehicle record card, Product record card with specifications
- **Avoid when:** Entities with no image or identifying color
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.3/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, avatar
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-regatta-ops-utils, ui-avatar, ui-badge


### Operations Incident Detail Timeline

Incident detail with timeline and public updates.

- id: `operations-incident-detail-timeline`
- Page: https://agentic-ui-kit.com/components/operations-incident-detail-timeline
- Live preview: https://agentic-ui-kit.com/internal-operations-public/incidents/demo?piece=operations-incident-detail-timeline

## Install

```bash
agentic-ui add operations-incident-detail-timeline
npx shadcn@4.17.0 add @agentic-ui/operations-incident-detail-timeline
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** timeline, public-internal-updates, acknowledge, severity-change, resolve-with-confirmation, postmortem-handoff, correlated-event-log, responders-panel
- **Intents:** explore-detail, track-status, communicate
- **Suits domains:** devops-status, operations, support, devtools, saas
- **Interaction:** tabs, inline-form, modal-confirm, toggle-switch
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** incident detail with timeline and public updates, escalated support case with internal notes, production change with a log
- **Avoid when:** records without actor or chronology, objects without a lifecycle
- **Preserve when adapting:** public-vs-internal-split, reverse-chronological-timeline, resolve-to-postmortem
- **Replace when adapting:** status-vocabulary, actors, fixtures
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.3/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, textarea, switch, separator, label
- **npm dependencies:** lucide-react, @agentic-ui/feedback-status-page, @agentic-ui/motion
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Internal Operations — public status variant (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** feedback-status-page, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Operations Services Health Grid

Microservice health with SLOs.

- id: `operations-services-health-grid`
- Page: https://agentic-ui-kit.com/components/operations-services-health-grid
- Live preview: https://agentic-ui-kit.com/internal-operations-public/services?piece=operations-services-health-grid

## Install

```bash
agentic-ui add operations-services-health-grid
npx shadcn@4.17.0 add @agentic-ui/operations-services-health-grid
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** uptime-bars-90-days, slo-attainment, latency-error-rate, status-control, issue-filter, linked-incidents, loading-skeleton
- **Intents:** monitor-live, track-status, configure
- **Suits domains:** devops-status, operations, devtools, saas, logistics
- **Interaction:** filter, select, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** microservice health with SLOs, status of logistics hubs, components of an internal status page
- **Avoid when:** high-frequency time series, a single boolean indicator
- **Preserve when adapting:** uptime-bar-grammar, slo-met-breached-semantics
- **Replace when adapting:** metrics, service-catalog, thresholds
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.3/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react, @agentic-ui/feedback-status-page, @agentic-ui/motion
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Internal Operations — public status variant (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** feedback-status-page, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Analytics Show Composition Languages

Thin stacked bar retains percentages and names in a readable text legend.

- id: `analytics-show-composition-languages`
- Page: https://agentic-ui-kit.com/components/analytics-show-composition-languages
- Live preview: https://agentic-ui-kit.com/live/fixture/analytics-show-composition-languages?piece=analytics-show-composition-languages

## Install

```bash
agentic-ui add analytics-show-composition-languages
npx shadcn@4.17.0 add @agentic-ui/analytics-show-composition-languages
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** segmented-bar, percentage-legend
- **Intents:** show-composition
- **Suits domains:** devtools, analytics, finance, operations
- **Interaction:** segmented-bar, percentage-legend
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Thin stacked bar retains percentages and names in a readable text legend.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, segmented-bar, percentage-legend
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Used in:** Forkyard Code Hosting (template)
- **Registry dependencies:** lib-code-hosting-utils


### Ecommerce Product List Responsive Table

Product catalog with stock.

- id: `ecommerce-product-list-responsive-table`
- Page: https://agentic-ui-kit.com/components/ecommerce-product-list-responsive-table
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/product-list-1?piece=ecommerce-product-list-responsive-table

## Install

```bash
agentic-ui add ecommerce-product-list-responsive-table
npx shadcn@4.17.0 add @agentic-ui/ecommerce-product-list-responsive-table
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sorting, pagination, mobile-card-view, stock-badges, row-actions
- **Intents:** manage-collection
- **Suits domains:** ecommerce, operations, logistics, saas, billing
- **Interaction:** sort, paginate, row-menu, search
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** product catalog with stock, any listing that must survive on mobile
- **Avoid when:** simple listings without actions
- **Preserve when adapting:** responsive-table-card-pattern, column-model, stock-badges
- **Replace when adapting:** domain-copy, columns, status-enum
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** table, badge, button, dropdown-menu, input
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-images-block-ecommerce-skin-care-product-kadarius-seegars-mxy5gokl8me-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, ecommerce-product-editor, ecommerce-product-wizard, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-tabs, ui-table


### Ecommerce Product List Sparkline Cards

Catalog with per-product sales trend.

- id: `ecommerce-product-list-sparkline-cards`
- Page: https://agentic-ui-kit.com/components/ecommerce-product-list-sparkline-cards
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/product-list-3?piece=ecommerce-product-list-sparkline-cards

## Install

```bash
agentic-ui add ecommerce-product-list-sparkline-cards
npx shadcn@4.17.0 add @agentic-ui/ecommerce-product-list-sparkline-cards
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** card-grid, sparkline-charts, category-filter, trend-indicators
- **Intents:** manage-collection, compare-over-time
- **Suits domains:** ecommerce, analytics, saas, finance
- **Interaction:** filter-select, tooltip
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** catalog with per-product sales trend, listings with an embedded KPI
- **Avoid when:** data without a per-item time series
- **Preserve when adapting:** card-grid-pattern, sparkline-in-card
- **Replace when adapting:** domain-copy, metrics, imagery
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** card, badge, chart, select
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-images-block-ecommerce-skin-care-product-kadarius-seegars-mxy5gokl8me-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, ecommerce-product-editor, ecommerce-product-wizard, lib-admin-kit-utils, ui-accordion, ui-admin-kit-button, ui-admin-kit-chart, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-tabs


### Marine Marina Card

Site or warehouse record.

- id: `marine-marina-card`
- Page: https://agentic-ui-kit.com/components/marine-marina-card
- Live preview: https://agentic-ui-kit.com/live/fixture/marine-marina-card?piece=marine-marina-card

## Install

```bash
agentic-ui add marine-marina-card
npx shadcn@4.17.0 add @agentic-ui/marine-marina-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** location-coordinates, tier-badge, metric-tiles
- **Intents:** explore-detail
- **Suits domains:** marine, travel, logistics, operations, maps-ops
- **Interaction:** select-entity
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Site or warehouse record, Airport or port record, Physical store record
- **Avoid when:** Locations without an associated metric
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** badge
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-regatta-ops-utils, ui-badge


### Marine Regatta Card

Event or competition card.

- id: `marine-regatta-card`
- Page: https://agentic-ui-kit.com/components/marine-regatta-card
- Live preview: https://agentic-ui-kit.com/live/fixture/marine-regatta-card?piece=marine-regatta-card

## Install

```bash
agentic-ui add marine-regatta-card
npx shadcn@4.17.0 add @agentic-ui/marine-regatta-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-badge, type-hue-header, key-metrics, pinned-state
- **Intents:** explore-detail
- **Suits domains:** marine, travel, operations, education, saas
- **Interaction:** select-entity
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Event or competition card, Trip card with status, Project card with phase
- **Avoid when:** Dense lists where a row works better
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** badge
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-regatta-ops-utils, ui-badge


### Music Studio Horizontal Rail

Recommendations rail.

- id: `music-studio-horizontal-rail`
- Page: https://agentic-ui-kit.com/components/music-studio-horizontal-rail
- Live preview: https://agentic-ui-kit.com/live/template/music-studio?piece=music-studio-horizontal-rail

## Install

```bash
agentic-ui add music-studio-horizontal-rail
npx shadcn@4.17.0 add @agentic-ui/music-studio-horizontal-rail
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** section-title, subtitle, view-all-link, horizontal-overflow
- **Intents:** navigate, explore-detail
- **Suits domains:** music, media, ecommerce, travel, books, education
- **Interaction:** horizontal-scroll, view-all
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Recommendations rail, Product carousel, Row of courses
- **Avoid when:** The content must be seen in full without scrolling
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 9/10
- **npm dependencies:** next/link
- **Used in:** Tonehall Music Studio (template)


### Music Studio Quick Access Grid

Quick access to recent items.

- id: `music-studio-quick-access-grid`
- Page: https://agentic-ui-kit.com/components/music-studio-quick-access-grid
- Live preview: https://agentic-ui-kit.com/live/piece/music-studio-quick-access-grid?piece=music-studio-quick-access-grid

## Install

```bash
agentic-ui add music-studio-quick-access-grid
npx shadcn@4.17.0 add @agentic-ui/music-studio-quick-access-grid
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** top-items, cover-thumbnail, play-toggle, now-playing-state
- **Intents:** navigate
- **Suits domains:** music, media, saas, knowledge, notes
- **Interaction:** click-to-play
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Quick access to recent items, Frequent documents, Shortcuts to projects
- **Avoid when:** More than eight shortcuts
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 7/10, code 8/10
- **npm dependencies:** zustand, lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, music-studio-ui-sound-feedback


### Orchestra OPS Correspondence View

Split inbox for artistic correspondence.

- id: `orchestra-ops-correspondence-view`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-correspondence-view
- Live preview: https://agentic-ui-kit.com/live/template/orchestra-ops/correspondence?piece=orchestra-ops-correspondence-view

## Install

```bash
agentic-ui add orchestra-ops-correspondence-view
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-correspondence-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** split-pane-layout, responsive-sheet-drawer, dispatch-selection, thread-preview
- **Intents:** communicate, manage-collection, explore-detail
- **Suits domains:** music, operations, crm, support, social
- **Interaction:** thread-select, responsive-drawer-toggle, folder-switch
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Split inbox for artistic correspondence, Management of contracts, technical riders and patron requests, Message client with preview and continuous reading
- **Avoid when:** Synchronous real-time chats with message bubbles, Support ticket systems with automated SLAs
- **Preserve when adapting:** split-view-breakpoints, selection-sync, sheet-fallback
- **Replace when adapting:** message-store, thread-models, action-callbacks
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 8/10, code 8/10
- **Uses primitives:** sheet
- **npm dependencies:** lucide-react, zustand, usehooks-ts
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** usehooks-ts@^3.1.1, zustand@5.0.8
- **Registry dependencies:** lib-orchestra-ops-utils, orchestra-ops-dispatch-detail, orchestra-ops-dispatch-list, ui-sheet


### Orchestra OPS Ensemble View

Orchestra roster directory classified by desks.

- id: `orchestra-ops-ensemble-view`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-ensemble-view
- Live preview: https://agentic-ui-kit.com/live/template/orchestra-ops/ensemble?piece=orchestra-ops-ensemble-view

## Install

```bash
agentic-ui add orchestra-ops-ensemble-view
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-ensemble-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** section-filter-tabs, search-roster, section-distribution-stats, musician-card-grid
- **Intents:** manage-collection, explore-detail
- **Suits domains:** music, hr, operations, crm, education
- **Interaction:** section-tab-filter, search-musicians, profile-inspect
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Orchestra roster directory classified by desks, Management of principal, guest and substitute musicians, Directory of artistic staff with touring or leave status
- **Avoid when:** Accounting tables with no media elements or avatars, IAM security permissions and roles management
- **Preserve when adapting:** roster-grid, section-pill-tabs, stats-summary-strip
- **Replace when adapting:** musician-dataset, instrument-taxonomy, contact-actions
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 8/10, code 8/10
- **Uses primitives:** tabs, avatar, badge, button, separator
- **npm dependencies:** lucide-react, zustand
- **Used in:** Cadenza Orchestra Operations (template)
- **Registry dependencies:** orchestra-ops-musician-card


### Orchestra OPS Event Detail Sheet

Side event sheet with works, desk and venue.

- id: `orchestra-ops-event-detail-sheet`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-event-detail-sheet
- Live preview: https://agentic-ui-kit.com/live/piece/orchestra-ops-event-detail-sheet?activate=button&piece=orchestra-ops-event-detail-sheet

## Install

```bash
agentic-ui add orchestra-ops-event-detail-sheet
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-event-detail-sheet
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** programme-repertoire-breakdown, venue-specs, conductor-and-soloist-profiles, timing-display
- **Intents:** explore-detail
- **Suits domains:** music, operations, media, education, travel
- **Interaction:** sheet-close, scroll-content, external-action
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Side event sheet with works, desk and venue, Concert detail panel with soloists and conductor, Production technical sheet and set-up requirements
- **Avoid when:** Destructive inline editing of records, Single-line quick-add forms
- **Preserve when adapting:** sheet-structure, repertoire-timing-hierarchy, badge-tagging
- **Replace when adapting:** performance-models, artist-metadata, venue-schema
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 8/10, code 8/10
- **Uses primitives:** sheet, badge, separator, button
- **npm dependencies:** lucide-react, zustand, date-fns
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-orchestra-ops-utils, ui-badge, ui-button, ui-dropdown-menu, ui-separator, ui-sheet


### Orchestra OPS Shell

Workspace shell for theater or music productions.

- id: `orchestra-ops-shell`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-shell
- Live preview: https://agentic-ui-kit.com/live/template/orchestra-ops?piece=orchestra-ops-shell

## Install

```bash
agentic-ui add orchestra-ops-shell
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** responsive-layout, sidebar-navigation, header-bar, theme-toggle, breadcrumb-bar
- **Intents:** navigate, configure
- **Suits domains:** music, operations, media, saas, project-management
- **Interaction:** sidebar-toggle, theme-toggle, navigation-link
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Workspace shell for theater or music productions, Operations console for auditoriums and festivals, Admin panel for conservatories and academies
- **Avoid when:** Compact single-column mobile applications, Linear forms without persistent navigation
- **Preserve when adapting:** layout-proportions, collapsible-behavior, slot-composition
- **Replace when adapting:** brand-logo, route-structure, theme-tokens
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 7.5/10, code 8.5/10
- **Uses primitives:** sidebar, tooltip, button
- **npm dependencies:** lucide-react, next-themes, zustand
- **Used in:** Cadenza Orchestra Operations (template)
- **Registry dependencies:** orchestra-ops-app-header, orchestra-ops-app-sidebar, ui-sidebar, ui-tooltip


### Payments Customer Detail

Customer with saved cards and invoice history.

- id: `payments-customer-detail`
- Page: https://agentic-ui-kit.com/components/payments-customer-detail
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/customer-detail?piece=payments-customer-detail

## Install

```bash
agentic-ui add payments-customer-detail
npx shadcn@4.17.0 add @agentic-ui/payments-customer-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** profile-header, payment-methods, invoice-history, notes
- **Intents:** explore-detail, track-status
- **Suits domains:** payments, crm, billing, support
- **Interaction:** tabs, row-actions
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** customer with saved cards and invoice history
- **Avoid when:** entities without associated history
- **Preserve when adapting:** profile-header, history-tabs, related-records-layout
- **Replace when adapting:** domain-copy, fields, related-entities, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** accordion, avatar, badge, button, card, input, select, table
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, lib-admin-kit-utils, ui-accordion, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-input, ui-admin-kit-select, ui-table


### Payments Customer Detail Compact

Quick customer view for support.

- id: `payments-customer-detail-compact`
- Page: https://agentic-ui-kit.com/components/payments-customer-detail-compact
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/customer-detail-2?piece=payments-customer-detail-compact

## Install

```bash
agentic-ui add payments-customer-detail-compact
npx shadcn@4.17.0 add @agentic-ui/payments-customer-detail-compact
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** compact-header, metric-strip, activity-list
- **Intents:** explore-detail, track-status
- **Suits domains:** payments, crm, billing, support
- **Interaction:** tabs, row-actions
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** quick customer view for support
- **Avoid when:** entities without associated history
- **Preserve when adapting:** profile-header, history-tabs, related-records-layout
- **Replace when adapting:** domain-copy, fields, related-entities, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, dropdown-menu, separator, table
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-separator, ui-table


### Payments Customer Directory

Customer portfolio with LTV and last payment.

- id: `payments-customer-directory`
- Page: https://agentic-ui-kit.com/components/payments-customer-directory
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/customers?piece=payments-customer-directory

## Install

```bash
agentic-ui add payments-customer-directory
npx shadcn@4.17.0 add @agentic-ui/payments-customer-directory
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** search, segment-filters, customer-cards, date-filter
- **Intents:** manage-collection, explore-detail
- **Suits domains:** payments, crm, billing, saas, ecommerce
- **Interaction:** search, filtering, row-actions
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** customer portfolio with LTV and last payment
- **Avoid when:** directories without per-row actions, fewer than 10 records
- **Preserve when adapting:** directory-grammar, search-filter-model, card-or-table-layout
- **Replace when adapting:** domain-copy, fields, segments, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, button, calendar, checkbox, input, popover
- **npm dependencies:** react-day-picker
- **Used in:** Kestrel Admin Kit (template), Clinic Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-bw-1-png, asset-admin-kit-avatars-avatar-bw-2-png, asset-admin-kit-avatars-avatar-bw-3-png, asset-admin-kit-avatars-avatar-bw-4-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-input, ui-admin-kit-popover, ui-calendar


### Payments Dashboard Overview

Collected volume vs the previous period.

- id: `payments-dashboard-overview`
- Page: https://agentic-ui-kit.com/components/payments-dashboard-overview
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/dashboard-1?piece=payments-dashboard-overview

## Install

```bash
agentic-ui add payments-dashboard-overview
npx shadcn@4.17.0 add @agentic-ui/payments-dashboard-overview
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, timeseries-chart, tabbed-views, volume-summary
- **Intents:** monitor-live, compare-over-time
- **Suits domains:** payments, billing, finance, saas, operations
- **Interaction:** tooltip, tabs, range-selector
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** collected volume vs the previous period, MRR and failed charges
- **Avoid when:** data editing flows, fewer than 3 relevant metrics
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-first-layout
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, button, chart, tabs
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-chart, ui-admin-kit-tabs


### Payments Dashboard Overview OPS

Live payments monitor.

- id: `payments-dashboard-overview-ops`
- Page: https://agentic-ui-kit.com/components/payments-dashboard-overview-ops
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/dashboard-3?piece=payments-dashboard-overview-ops

## Install

```bash
agentic-ui add payments-dashboard-overview-ops
npx shadcn@4.17.0 add @agentic-ui/payments-dashboard-overview-ops
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, timeseries-chart, animated-lists, activity-feed
- **Intents:** monitor-live, compare-over-time
- **Suits domains:** payments, billing, finance, saas, operations
- **Interaction:** tooltip, tabs, range-selector
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** live payments monitor, recent payout activity
- **Avoid when:** data editing flows, fewer than 3 relevant metrics
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-first-layout
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, select, switch
- **npm dependencies:** motion, recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, motion@12.23.24, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-bw-1-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-select, ui-admin-kit-switch


### Payments Invoice Detail Compact

Invoice detail with animated amounts.

- id: `payments-invoice-detail-compact`
- Page: https://agentic-ui-kit.com/components/payments-invoice-detail-compact
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/invoice-detail-3?piece=payments-invoice-detail-compact

## Install

```bash
agentic-ui add payments-invoice-detail-compact
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-detail-compact
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** compact-header, line-items-table, slot-text-animations
- **Intents:** explore-detail, execute-flow
- **Suits domains:** payments, billing, finance, ecommerce
- **Interaction:** row-actions, copy-to-clipboard
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** invoice detail with animated amounts
- **Avoid when:** massive listings, data without associated actions
- **Preserve when adapting:** detail-hierarchy, line-items-table, action-bar
- **Replace when adapting:** domain-copy, line-item-fields, semantic-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button
- **npm dependencies:** slot-text
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, slot-text@^0.2.2
- **Registry dependencies:** asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-button


### Payments Invoice List

Issued invoices with payment status.

- id: `payments-invoice-list`
- Page: https://agentic-ui-kit.com/components/payments-invoice-list
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/invoice-list?piece=payments-invoice-list

## Install

```bash
agentic-ui add payments-invoice-list
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-list
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sortable-table, status-badges, summary-chart, pagination
- **Intents:** manage-collection, track-status
- **Suits domains:** payments, billing, finance, ecommerce, saas
- **Interaction:** sorting, filtering, pagination, row-actions
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** issued invoices with payment status, pending payments about to fall due
- **Avoid when:** collections of fewer than 10 items, detail of a single record
- **Preserve when adapting:** table-grammar, status-badge-system, toolbar-layout
- **Replace when adapting:** domain-copy, columns, status-values, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, chart
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template), Marketing Analytics (blueprint), SaaS Admin Starter (blueprint), SaaS Backoffice (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-chart


### Payments Invoice List Board

Payment pipeline by status.

- id: `payments-invoice-list-board`
- Page: https://agentic-ui-kit.com/components/payments-invoice-list-board
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/invoice-list-4?piece=payments-invoice-list-board

## Install

```bash
agentic-ui add payments-invoice-list-board
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-list-board
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** status-columns, card-grid, drag-free-board, summary-chips
- **Intents:** manage-collection, track-status
- **Suits domains:** payments, billing, finance, ecommerce, saas
- **Interaction:** sorting, filtering, pagination, row-actions
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** payment pipeline by status, invoices grouped by aging
- **Avoid when:** collections of fewer than 10 items, detail of a single record
- **Preserve when adapting:** table-grammar, status-badge-system, toolbar-layout
- **Replace when adapting:** domain-copy, columns, status-values, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** badge, button, input
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-input


### Payments Invoice List Metrics

Monthly collections with aging and totals.

- id: `payments-invoice-list-metrics`
- Page: https://agentic-ui-kit.com/components/payments-invoice-list-metrics
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/invoice-list-5?piece=payments-invoice-list-metrics

## Install

```bash
agentic-ui add payments-invoice-list-metrics
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-list-metrics
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-header, sortable-table, trend-chips, pagination
- **Intents:** manage-collection, track-status
- **Suits domains:** payments, billing, finance, ecommerce, saas
- **Interaction:** sorting, filtering, pagination, row-actions
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** monthly collections with aging and totals
- **Avoid when:** collections of fewer than 10 items, detail of a single record
- **Preserve when adapting:** table-grammar, status-badge-system, toolbar-layout
- **Replace when adapting:** domain-copy, columns, status-values, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** badge, button, checkbox, input, label, pagination, popover, table
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-input, ui-admin-kit-label, ui-admin-kit-popover, ui-pagination, ui-table


### Payments Routing Globe

Settlement routes between regions.

- id: `payments-routing-globe`
- Page: https://agentic-ui-kit.com/components/payments-routing-globe
- Live preview: https://agentic-ui-kit.com/live/piece/payments-routing-globe?piece=payments-routing-globe

## Install

```bash
agentic-ui add payments-routing-globe
npx shadcn@4.17.0 add @agentic-ui/payments-routing-globe
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** 3d-globe, arc-routes, pointer-rotation, theme-aware
- **Intents:** monitor-live, show-composition
- **Suits domains:** payments, operations, logistics, aviation
- **Interaction:** pointer-rotation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** settlement routes between regions, global partner network
- **Avoid when:** simple tabular data, audience with strict accessibility needs
- **Preserve when adapting:** globe-arc-model, theme-reactivity
- **Replace when adapting:** domain-copy, arc-data, semantic-tokens
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 5/10, code 8/10
- **npm dependencies:** cobe
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** cobe@^2.0.1, lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils


### Payments Subscription List

Active subscriptions with MRR and renewals.

- id: `payments-subscription-list`
- Page: https://agentic-ui-kit.com/components/payments-subscription-list
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/subscriptions?piece=payments-subscription-list

## Install

```bash
agentic-ui add payments-subscription-list
npx shadcn@4.17.0 add @agentic-ui/payments-subscription-list
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** plan-badges, status-filters, mrr-summary, pagination
- **Intents:** manage-collection, track-status
- **Suits domains:** payments, billing, saas, finance
- **Interaction:** filtering, row-actions, sorting
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** active subscriptions with MRR and renewals
- **Avoid when:** one-off charges without recurrence
- **Preserve when adapting:** subscription-lifecycle-badges, plan-column-grammar
- **Replace when adapting:** domain-copy, plan-names, status-values, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** badge, button, dropdown-menu, input
- **Used in:** Kestrel Admin Kit (template), SaaS Backoffice (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input


### Payments Transaction Detail

Transaction with fees, taxes and settlement events.

- id: `payments-transaction-detail`
- Page: https://agentic-ui-kit.com/components/payments-transaction-detail
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/transaction-detail?piece=payments-transaction-detail

## Install

```bash
agentic-ui add payments-transaction-detail
npx shadcn@4.17.0 add @agentic-ui/payments-transaction-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** event-timeline, amount-breakdown, related-entities, receipt-panel
- **Intents:** explore-detail, audit-trail
- **Suits domains:** payments, finance, billing, operations
- **Interaction:** copy-to-clipboard, tabs
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** transaction with fees, taxes and settlement events
- **Avoid when:** aggregates without an individual event
- **Preserve when adapting:** event-timeline, breakdown-table
- **Replace when adapting:** domain-copy, fee-fields, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, dropdown-menu
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-dropdown-menu


### Payments Transaction Detail Split

Payment detail with an always-visible summary.

- id: `payments-transaction-detail-split`
- Page: https://agentic-ui-kit.com/components/payments-transaction-detail-split
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/transaction-detail-2?piece=payments-transaction-detail-split

## Install

```bash
agentic-ui add payments-transaction-detail-split
npx shadcn@4.17.0 add @agentic-ui/payments-transaction-detail-split
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** split-layout, slot-text-amounts, event-timeline, sticky-summary
- **Intents:** explore-detail, audit-trail
- **Suits domains:** payments, finance, billing
- **Interaction:** copy-to-clipboard
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** payment detail with an always-visible summary
- **Avoid when:** aggregates without an individual event
- **Preserve when adapting:** event-timeline, sticky-summary-layout
- **Replace when adapting:** domain-copy, fee-fields, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, button
- **npm dependencies:** slot-text
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, slot-text@^0.2.2
- **Registry dependencies:** asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-logo-black-svg, asset-admin-kit-logo-white-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button


### Payments Transaction Ledger

Transactions with debit/credit and settlement status.

- id: `payments-transaction-ledger`
- Page: https://agentic-ui-kit.com/components/payments-transaction-ledger
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/transactions?piece=payments-transaction-ledger

## Install

```bash
agentic-ui add payments-transaction-ledger
npx shadcn@4.17.0 add @agentic-ui/payments-transaction-ledger
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** ledger-table, amount-badges, status-filters, export-actions
- **Intents:** manage-collection, audit-trail
- **Suits domains:** payments, finance, billing, operations, ecommerce
- **Interaction:** filtering, sorting, row-actions
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** transactions with debit/credit and settlement status
- **Avoid when:** time series without discrete events
- **Preserve when adapting:** ledger-grammar, amount-formatting, status-badges
- **Replace when adapting:** domain-copy, columns, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, input
- **Used in:** Kestrel Admin Kit (template), Fintech Trading (analytics live) (blueprint), Marketplace (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-input


### Saas Manage Collection Pinned Grid

Pinned cards maintain their content hierarchy within a draggable grid.

- id: `saas-manage-collection-pinned-grid`
- Page: https://agentic-ui-kit.com/components/saas-manage-collection-pinned-grid
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting?piece=saas-manage-collection-pinned-grid

## Install

```bash
agentic-ui add saas-manage-collection-pinned-grid
npx shadcn@4.17.0 add @agentic-ui/saas-manage-collection-pinned-grid
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** drag-reorder, keyboard-reorder, pinned-grid
- **Intents:** manage-collection
- **Suits domains:** saas, devtools, knowledge, file-storage
- **Interaction:** drag-reorder, keyboard-reorder, pinned-grid
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Pinned cards maintain their content hierarchy within a draggable grid.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, drag-reorder, keyboard-reorder
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **npm dependencies:** devtools-explore-detail-repository-card
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, @dnd-kit/sortable@10.0.0, @dnd-kit/utilities@3.2.2, lucide-react@0.577.0
- **Registry dependencies:** devtools-explore-detail-repository-card, lib-code-hosting-utils


### Social Client App Header

Top bar of a web application.

- id: `social-client-app-header`
- Page: https://agentic-ui-kit.com/components/social-client-app-header
- Live preview: https://agentic-ui-kit.com/live/template/social-client?piece=social-client-app-header

## Install

```bash
agentic-ui add social-client-app-header
npx shadcn@4.17.0 add @agentic-ui/social-client-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** dynamic-title, sidebar-trigger, light-dark-toggle, action-icons
- **Intents:** navigate, configure
- **Suits domains:** social, saas, personal-productivity, knowledge, operations
- **Interaction:** trigger-sidebar, toggle-theme, open-actions
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Top bar of a web application, Header with the active view title and actions, Dashboard top bar
- **Avoid when:** Immersive full-screen interfaces
- **Preserve when adapting:** sticky-layout, title-mapping, trigger-placement
- **Replace when adapting:** titles-dictionary, action-buttons
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, dropdown-menu, sidebar
- **npm dependencies:** lucide-react
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6
- **Registry dependencies:** ui-button, ui-dropdown-menu, ui-social-client-sidebar


### Social Client Ephemeral Strip

Top strip of team stories.

- id: `social-client-ephemeral-strip`
- Page: https://agentic-ui-kit.com/components/social-client-ephemeral-strip
- Live preview: https://agentic-ui-kit.com/live/piece/social-client-ephemeral-strip?piece=social-client-ephemeral-strip

## Install

```bash
agentic-ui add social-client-ephemeral-strip
npx shadcn@4.17.0 add @agentic-ui/social-client-ephemeral-strip
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** horizontal-avatar-list, ephemeral-badge, quick-story-preview
- **Intents:** communicate, track-status
- **Suits domains:** social, media, marketing, personal-productivity, ecommerce
- **Interaction:** click-post
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Top strip of team stories, Urgent channel notices, Brief community updates
- **Avoid when:** Formal technical documentation views
- **Preserve when adapting:** banner-styling, sub-item-integration
- **Replace when adapting:** badge-copy, limit-prop
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button
- **npm dependencies:** lucide-react
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, ui-avatar, ui-dropdown-menu


### Social Client Profile Header

Author bio header.

- id: `social-client-profile-header`
- Page: https://agentic-ui-kit.com/components/social-client-profile-header
- Live preview: https://agentic-ui-kit.com/live/template/social-client?piece=social-client-profile-header

## Install

```bash
agentic-ui add social-client-profile-header
npx shadcn@4.17.0 add @agentic-ui/social-client-profile-header
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** user-avatar, verified-badge, follower-counters, link-dropdown, action-buttons
- **Intents:** explore-detail, communicate
- **Suits domains:** social, crm, hr, personal-productivity, saas
- **Interaction:** follow, open-links, share
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Author bio header, Contact profile summary card, Member card header
- **Avoid when:** Anonymous profiles with no avatar
- **Preserve when adapting:** avatar-alignment, links-popover, counters-layout
- **Replace when adapting:** mock-user, follow-action-logic
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, button, dropdown-menu
- **npm dependencies:** lucide-react
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-social-client-utils, ui-avatar, ui-button, ui-dropdown-menu


### Travel Experiences Catalog

Experience catalog by category.

- id: `travel-experiences-catalog`
- Page: https://agentic-ui-kit.com/components/travel-experiences-catalog
- Live preview: https://agentic-ui-kit.com/live/piece/travel-experiences-catalog?piece=travel-experiences-catalog

## Install

```bash
agentic-ui add travel-experiences-catalog
npx shadcn@4.17.0 add @agentic-ui/travel-experiences-catalog
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** category-toggle-group, host-chip-cards, detail-linking
- **Intents:** manage-collection, explore-detail
- **Suits domains:** travel, culinary, media, ecommerce
- **Interaction:** toggle-group, navigate
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** experience catalog by category, catalog of courses or workshops, events grid with host
- **Avoid when:** collections that need complex sorting, hierarchical data
- **Preserve when adapting:** category-toggle-plus-grid, host-chip-pattern
- **Replace when adapting:** card-fields, category-set, detail-route
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, toggle-group
- **npm dependencies:** next/navigation, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** date-fns-tz@3.2.0, lucide-react@0.577.0, nuqs@^2.8.9, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-avatar, ui-toggle-group


### Travel Section Carousel

Carousel of destinations by area.

- id: `travel-section-carousel`
- Page: https://agentic-ui-kit.com/components/travel-section-carousel
- Live preview: https://agentic-ui-kit.com/live/template/travel-marketplace?piece=travel-section-carousel

## Install

```bash
agentic-ui add travel-section-carousel
npx shadcn@4.17.0 add @agentic-ui/travel-section-carousel
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** horizontal-snap-scroll, arrow-navigation, edge-state-detection, section-title-slot
- **Intents:** manage-collection, show-composition
- **Suits domains:** travel, ecommerce, media, social
- **Interaction:** scroll, arrow-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** carousel of destinations by area, rail of recommended products, carousel of episodes or playlists
- **Avoid when:** collections of fewer than 4 items, data that requires side-by-side comparison
- **Preserve when adapting:** snap-scroll-behavior, arrow-edge-logic
- **Replace when adapting:** card-content, section-copy, scroll-step
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-travel-marketplace-utils, ui-button


### Travel Services Catalog

Catalog of professional services.

- id: `travel-services-catalog`
- Page: https://agentic-ui-kit.com/components/travel-services-catalog
- Live preview: https://agentic-ui-kit.com/live/piece/travel-services-catalog?piece=travel-services-catalog

## Install

```bash
agentic-ui add travel-services-catalog
npx shadcn@4.17.0 add @agentic-ui/travel-services-catalog
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** category-toggle-group, bordered-service-cards, detail-linking
- **Intents:** manage-collection, explore-detail
- **Suits domains:** travel, operations, saas, ecommerce
- **Interaction:** toggle-group, navigate
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** catalog of professional services, directory of providers by category, catalog of add-ons or integrations
- **Avoid when:** services with complex inline configuration, tabular collections
- **Preserve when adapting:** category-toggle-plus-grid
- **Replace when adapting:** card-fields, category-set, detail-route
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.25/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** badge, toggle-group
- **npm dependencies:** next/navigation, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** date-fns-tz@3.2.0, lucide-react@0.577.0, nuqs@^2.8.9, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-toggle-group


### Orchestra OPS Programmes View

Catalog of symphonic programmes by rehearsal status.

- id: `orchestra-ops-programmes-view`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-programmes-view
- Live preview: https://agentic-ui-kit.com/live/template/orchestra-ops/programmes?piece=orchestra-ops-programmes-view

## Install

```bash
agentic-ui add orchestra-ops-programmes-view
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-programmes-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-tabs, search-filter, duration-calculation, repertoire-catalog, movement-list
- **Intents:** manage-collection, explore-detail
- **Suits domains:** music, media, education, operations, knowledge
- **Interaction:** status-tab-change, search-input, compose-dialog-trigger
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Catalog of symphonic programmes by rehearsal status, Music repertoire library with duration calculation, Management of scores and curated works for tours
- **Avoid when:** Inventories with hundreds of thousands of SKU references, Flat lists without grouping by work or movements
- **Preserve when adapting:** repertoire-card-grid, duration-aggregator, status-tab-bar
- **Replace when adapting:** programme-dataset, composer-taxonomy, work-movements
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.23/10
- **Quality breakdown:** visual 8.5/10, responsive 8/10, accessibility 8/10, code 8.5/10
- **Uses primitives:** tabs, badge, button, separator
- **npm dependencies:** lucide-react, zustand
- **Used in:** Cadenza Orchestra Operations (template)
- **Registry dependencies:** orchestra-ops-programme-card


### Culinary Cooking Activity Timeseries

Additions vs removals per day.

- id: `culinary-cooking-activity-timeseries`
- Page: https://agentic-ui-kit.com/components/culinary-cooking-activity-timeseries
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-cooking-activity-timeseries?piece=culinary-cooking-activity-timeseries

## Install

```bash
agentic-ui add culinary-cooking-activity-timeseries
npx shadcn@4.17.0 add @agentic-ui/culinary-cooking-activity-timeseries
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** timeseries, two-series-comparison, range-aware, totals-summary, tooltip
- **Intents:** compare-over-time
- **Suits domains:** culinary, saas, ecommerce, analytics, operations
- **Interaction:** tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Additions vs removals per day, Orders created vs delivered, Requests vs errors
- **Avoid when:** More than 3 series, Fewer than 5 time points
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.2/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** recharts
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** recharts-v2@npm:recharts@^2.15.4, zustand@5.0.8
- **Registry dependencies:** ui-file-storage-chart


### Ecommerce Product Editor

Product creation/editing with variants.

- id: `ecommerce-product-editor`
- Page: https://agentic-ui-kit.com/components/ecommerce-product-editor
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/add-product?piece=ecommerce-product-editor

## Install

```bash
agentic-ui add ecommerce-product-editor
npx shadcn@4.17.0 add @agentic-ui/ecommerce-product-editor
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** add-edit-modes, zod-validation, field-array, media-fields, pricing-fields
- **Intents:** create-edit
- **Suits domains:** ecommerce, operations, saas, culinary
- **Interaction:** type, add-row, submit, validation-feedback
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** product creation/editing with variants, forms with validated dynamic arrays
- **Avoid when:** trivial single-step forms
- **Preserve when adapting:** rhf-zod-pattern, field-array-pattern, add-edit-duality
- **Replace when adapting:** domain-copy, fields, validation-messages
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.2/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, input, select, button, form
- **npm dependencies:** react-hook-form, zod
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, lucide-react@0.577.0, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-checkbox, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-switch, ui-admin-kit-textarea, ui-field, ui-input-group


### Inventory OPS Analytics Page

Executive panel for catalog profitability and operating margins.

- id: `inventory-ops-analytics-page`
- Page: https://agentic-ui-kit.com/components/inventory-ops-analytics-page
- Live preview: https://agentic-ui-kit.com/live/template/inventory-ops/analytics?piece=inventory-ops-analytics-page

## Install

```bash
agentic-ui add inventory-ops-analytics-page
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-analytics-page
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** revenue-cost-areachart, orders-trend-linechart, top-products-ranking, category-revenue-barchart, warehouse-capacity-progress
- **Intents:** compare-over-time, show-composition
- **Suits domains:** analytics, operations, ecommerce, logistics, finance
- **Interaction:** chart-tooltip, timeseries-inspection
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Executive panel for catalog profitability and operating margins, Analytics for stock turnover and logistics storage capacity, Performance monitoring by category in a marketplace
- **Avoid when:** Operational data entry or editing views, Systems without aggregated historical data
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.2/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart, progress
- **npm dependencies:** recharts, lucide-react
- **Used in:** Stockline Inventory & Orders (template), Analytics (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** lib-file-storage-utils, ui-chart, ui-progress


### Inventory OPS Orders Page

Tracking orders and shipments in an e-commerce platform.

- id: `inventory-ops-orders-page`
- Page: https://agentic-ui-kit.com/components/inventory-ops-orders-page
- Live preview: https://agentic-ui-kit.com/live/template/inventory-ops/orders?piece=inventory-ops-orders-page

## Install

```bash
agentic-ui add inventory-ops-orders-page
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-orders-page
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** order-status-counters, customer-info, status-filtering, pagination, sorting
- **Intents:** manage-collection, track-status
- **Suits domains:** ecommerce, logistics, operations, billing
- **Interaction:** search-query, pagination, sorting, filtering
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Tracking orders and shipments in an e-commerce platform, Operations desk for preparing and dispatching shipments, History of purchase orders and billing in an ERP
- **Avoid when:** Checkout process or direct purchase by the customer, Systems that only handle simple recurring subscriptions
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.2/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button, input, select, table, dropdown-menu, avatar
- **npm dependencies:** @tanstack/react-table, lucide-react
- **Used in:** Stockline Inventory & Orders (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** inventory-ops-orders-table, lib-file-storage-utils


### Inventory OPS Products Page

Product catalog management in an online store.

- id: `inventory-ops-products-page`
- Page: https://agentic-ui-kit.com/components/inventory-ops-products-page
- Live preview: https://agentic-ui-kit.com/live/template/inventory-ops/products?piece=inventory-ops-products-page

## Install

```bash
agentic-ui add inventory-ops-products-page
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-products-page
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** inventory-status-kpi, search-filter, table-pagination, sorting, status-badges
- **Intents:** manage-collection, track-status
- **Suits domains:** ecommerce, operations, logistics, saas
- **Interaction:** search-query, pagination, sorting, filtering
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Product catalog management in an online store, Inventory of parts and spares in an industrial plant, Catalog of office assets and equipment
- **Avoid when:** Card views oriented to marketing or a B2C storefront, Operations that only require spreadsheet-style bulk editing
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.2/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button, input, select, table, dropdown-menu, avatar
- **npm dependencies:** @tanstack/react-table, lucide-react
- **Used in:** Stockline Inventory & Orders (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** inventory-ops-products-table


### Knowledge Document Page Menu

Document row actions menu.

- id: `knowledge-document-page-menu`
- Page: https://agentic-ui-kit.com/components/knowledge-document-page-menu
- Live preview: https://agentic-ui-kit.com/live/template/team-workspace?piece=knowledge-document-page-menu

## Install

```bash
agentic-ui add knowledge-document-page-menu
npx shadcn@4.17.0 add @agentic-ui/knowledge-document-page-menu
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rename-page, duplicate, move-to-trash, copy-link
- **Intents:** manage-collection, configure
- **Suits domains:** knowledge, notes, file-storage, project-management, saas
- **Interaction:** open-menu, rename, delete
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Document row actions menu, Contextual page options in the sidebar
- **Avoid when:** Read-only lists without per-item operations
- **Preserve when adapting:** action-grouping, destructive-separation
- **Replace when adapting:** action-labels, permission-rules
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.2/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, input, dropdown-menu
- **npm dependencies:** date-fns
- **Used in:** Pagewell Team Workspace (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** ui-button, ui-dialog, ui-dropdown-menu, ui-input


### Settings Notification Routing

Incident notification routing.

- id: `settings-notification-routing`
- Page: https://agentic-ui-kit.com/components/settings-notification-routing
- Live preview: https://agentic-ui-kit.com/internal-operations-public/settings?piece=settings-notification-routing

## Install

```bash
agentic-ui add settings-notification-routing
npx shadcn@4.17.0 add @agentic-ui/settings-notification-routing
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** channel-toggles, dirty-save-discard, motion-profile, motion-personality, forced-reduced-motion, demo-reset
- **Intents:** configure
- **Suits domains:** settings, devops-status, operations, saas
- **Interaction:** toggle-switch, select
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** incident notification routing, alert preferences, product animation preferences
- **Avoid when:** complex profile forms, configuration with dependencies between fields
- **Preserve when adapting:** section-card-with-switch-rows, save-discard-footer
- **Replace when adapting:** preference-set, copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.2/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, switch, button
- **npm dependencies:** @agentic-ui/motion
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Internal Operations — public status variant (blueprint)
- **Registry dependencies:** feedback-status-page, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Travel Trips List

My trips by status.

- id: `travel-trips-list`
- Page: https://agentic-ui-kit.com/components/travel-trips-list
- Live preview: https://agentic-ui-kit.com/live/piece/travel-trips-list?piece=travel-trips-list

## Install

```bash
agentic-ui add travel-trips-list
npx shadcn@4.17.0 add @agentic-ui/travel-trips-list
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-tabs, trip-cards, confirmation-code-display, totals-summary
- **Intents:** track-status, manage-collection
- **Suits domains:** travel, ecommerce, billing, operations
- **Interaction:** tabs, navigate
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** my trips by status, order history with tabs, list of subscriptions or contracts
- **Avoid when:** real-time data with live updates, collections with no states
- **Preserve when adapting:** status-tab-grouping, confirmation-code-pattern
- **Replace when adapting:** status-set, card-fields, totals-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.2/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** badge, button, separator, tabs
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Wayfarely Travel Marketplace (template), Marketplace (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-badge, ui-button, ui-tabs


### Wine Cellar Vintage Distribution

Distribution by vintage or cohort.

- id: `wine-cellar-vintage-distribution`
- Page: https://agentic-ui-kit.com/components/wine-cellar-vintage-distribution
- Live preview: https://agentic-ui-kit.com/live/piece/wine-cellar-vintage-distribution?piece=wine-cellar-vintage-distribution

## Install

```bash
agentic-ui add wine-cellar-vintage-distribution
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-vintage-distribution
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** line-chart, histogram, stacked-by-category, mode-switch, granularity-switch, metric-switch, tooltip, legend
- **Intents:** show-composition, compare-over-time
- **Suits domains:** wine, analytics, ecommerce, finance, operations, books
- **Interaction:** tooltip, chart-settings
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Distribution by vintage or cohort, Inventory by year of manufacture stacked by category, Customers by sign-up year and plan
- **Avoid when:** Continuous high-frequency time series, More than ~8 stacked categories
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.2/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart, button, popover
- **npm dependencies:** recharts, zustand
- **Used in:** Vintry Wine Cellar (template), Collection Manager (blueprint)
- **npm dependencies (registry):** recharts@3.8.1, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-chart


### Orchestra OPS App Sidebar

Sidebar for managing seasons and casts.

- id: `orchestra-ops-app-sidebar`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/orchestra-ops?piece=orchestra-ops-app-sidebar

## Install

```bash
agentic-ui add orchestra-ops-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-app-sidebar
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** collapsible-sections, unread-badges, season-indicator, user-menu, folder-navigation
- **Intents:** navigate, track-status
- **Suits domains:** music, operations, crm, project-management, media
- **Interaction:** collapse-toggle, navigation-click, dropdown-menu
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Sidebar for managing seasons and casts, Navigation through correspondence folders and venues, Collapsible menu with unread message counts
- **Avoid when:** Mobile bottom bar, Free-canvas applications without fixed navigation
- **Preserve when adapting:** menu-hierarchy, badge-counters, collapsible-state
- **Replace when adapting:** brand-avatar, season-copy, section-routes
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.18/10
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 7.5/10, code 8/10
- **Uses primitives:** sidebar, collapsible, dropdown-menu, avatar, badge, button
- **npm dependencies:** lucide-react, zustand
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-orchestra-ops-utils, ui-avatar, ui-badge, ui-collapsible, ui-dropdown-menu, ui-sidebar


### Ecommerce Product Wizard

Guided product creation.

- id: `ecommerce-product-wizard`
- Page: https://agentic-ui-kit.com/components/ecommerce-product-wizard
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/add-product-2?piece=ecommerce-product-wizard

## Install

```bash
agentic-ui add ecommerce-product-wizard
npx shadcn@4.17.0 add @agentic-ui/ecommerce-product-wizard
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** multi-step-wizard, zod-validation, step-progress, add-edit-modes, review-step
- **Intents:** create-edit, execute-flow
- **Suits domains:** ecommerce, operations, saas, auth
- **Interaction:** step-navigate, type, validation-feedback, submit
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** guided product creation, any step-by-step onboarding flow
- **Avoid when:** short single-screen forms
- **Preserve when adapting:** wizard-stepper-pattern, rhf-zod-pattern, review-step
- **Replace when adapting:** domain-copy, steps, validation-messages
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.15/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** card, input, select, button, form, progress
- **npm dependencies:** react-hook-form, zod
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, lucide-react@0.577.0, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** asset-admin-kit-images-block-ecommerce-skin-care-product-kadarius-seegars-mxy5gokl8me-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-progress, ui-admin-kit-scroll-area, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-switch, ui-admin-kit-textarea, ui-alert-dialog, ui-field, ui-input-group


### Operations Event Audit Log

Incident audit log.

- id: `operations-event-audit-log`
- Page: https://agentic-ui-kit.com/components/operations-event-audit-log
- Live preview: https://agentic-ui-kit.com/internal-operations-public/incidents/demo?piece=operations-event-audit-log

## Install

```bash
agentic-ui add operations-event-audit-log
npx shadcn@4.17.0 add @agentic-ui/operations-event-audit-log
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** facet-sidebar, level-filter, source-filter, search, live-stream, export-json, payload-expand, incident-scope
- **Intents:** audit-trail, monitor-live
- **Suits domains:** devops-status, operations, devtools, saas, support
- **Interaction:** filter, search, row-expand, live-toggle
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** incident audit log, deployment events, administrative action log
- **Avoid when:** aggregate log analysis, large-scale full-text search
- **Preserve when adapting:** facet-sidebar-plus-toolbar, level-badging
- **Replace when adapting:** event-schema, sources
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.15/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, card, input, checkbox
- **npm dependencies:** lucide-react, @agentic-ui/motion
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Internal Operations — public status variant (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** feedback-status-page, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Travel Experience Detail

Tour detail with itinerary and slots.

- id: `travel-experience-detail`
- Page: https://agentic-ui-kit.com/components/travel-experience-detail
- Live preview: https://agentic-ui-kit.com/live/template/travel-marketplace/experiences/exp-reine-cod-boat?piece=travel-experience-detail

## Install

```bash
agentic-ui add travel-experience-detail
npx shadcn@4.17.0 add @agentic-ui/travel-experience-detail
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** photo-grid-2x2, trust-rows, itinerary-timeline, reviews-section, meeting-point-map, sticky-price-card, date-slot-rail
- **Intents:** explore-detail
- **Suits domains:** travel, culinary, music, wine
- **Interaction:** carousel, map, slot-selection
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** tour detail with itinerary and slots, class or workshop detail with schedules, record card for a tasting or food event
- **Avoid when:** entities with no time-based agenda, purely editorial content
- **Preserve when adapting:** itinerary-timeline, trust-row-pattern, slot-rail
- **Replace when adapting:** entity-schema, map-point, pricing-model
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.15/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, map, separator
- **npm dependencies:** lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** date-fns-tz@3.2.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-avatar, ui-button, ui-separator, ui-travel-marketplace-map


### Travel Home Discovery

Marketplace home with the next booking and region stats.

- id: `travel-home-discovery`
- Page: https://agentic-ui-kit.com/components/travel-home-discovery
- Live preview: https://agentic-ui-kit.com/live/piece/travel-home-discovery?piece=travel-home-discovery

## Install

```bash
agentic-ui add travel-home-discovery
npx shadcn@4.17.0 add @agentic-ui/travel-home-discovery
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** search-panel, recent-search-chips, next-booking-card, stat-tiles, region-tile-grid, region-rate-bar-chart, favourites-carousel, activity-start-list, add-on-tiles
- **Intents:** explore-detail, navigate
- **Suits domains:** travel, ecommerce, media, social
- **Interaction:** carousel, navigate, search
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** marketplace home with the next booking and region stats, rental landing with a price-by-region chart, e-commerce home with category tiles and a recent-search strip
- **Avoid when:** operational apps with no discovery, dense data dashboards
- **Preserve when adapting:** desk-plus-stats-composition, next-booking-card, region-rate-chart
- **Replace when adapting:** domain-entities, hero-media, recommendation-source
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.15/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, separator
- **npm dependencies:** zustand, next/navigation, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template), Marketplace (blueprint)
- **npm dependencies (registry):** date-fns-tz@3.2.0, lucide-react@0.577.0, nuqs@^2.8.9, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, travel-listing-card, travel-section-carousel, travel-stay-search-bar


### Travel Listing Detail

Accommodation page with gallery and reviews.

- id: `travel-listing-detail`
- Page: https://agentic-ui-kit.com/components/travel-listing-detail
- Live preview: https://agentic-ui-kit.com/live/template/travel-marketplace/listings/coles-bay-glass-hut?piece=travel-listing-detail

## Install

```bash
agentic-ui add travel-listing-detail
npx shadcn@4.17.0 add @agentic-ui/travel-listing-detail
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** photo-grid-gallery, gallery-dialog, amenities-icon-grid, reviews-section, location-map, host-card, similar-carousel
- **Intents:** explore-detail
- **Suits domains:** travel, ecommerce, culinary, wine
- **Interaction:** dialog, carousel, map
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** accommodation page with gallery and reviews, product page with specifications and seller, restaurant detail with menu and location
- **Avoid when:** entities without rich content, editing or administration views
- **Preserve when adapting:** photo-grid-grammar, section-order, booking-sidebar-slot
- **Replace when adapting:** entity-schema, amenity-icons, review-source
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.15/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, dialog, map, separator
- **npm dependencies:** zustand, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template), Marketplace (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, travel-booking-card, travel-listing-card, travel-section-carousel, ui-avatar, ui-button, ui-dialog, ui-separator, ui-travel-marketplace-map


### Analytics Monitor Live Summary

One card split into four metric cells (review queue, merged in 30 days, checks passing with a progress bar, open issues).

- id: `analytics-monitor-live-summary`
- Page: https://agentic-ui-kit.com/components/analytics-monitor-live-summary
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting?piece=analytics-monitor-live-summary

## Install

```bash
agentic-ui add analytics-monitor-live-summary
npx shadcn@4.17.0 add @agentic-ui/analytics-monitor-live-summary
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** metric-summary, spark-bars
- **Intents:** monitor-live
- **Suits domains:** analytics, finance, devtools, operations
- **Interaction:** metric-summary, spark-bars
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** One card split into four metric cells (review queue, merged in 30 days, checks passing with a progress bar, open issues).
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, metric-summary, spark-bars
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.1/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils


### Culinary Recipe Multi View List

Catalog with a list/grid view.

- id: `culinary-recipe-multi-view-list`
- Page: https://agentic-ui-kit.com/components/culinary-recipe-multi-view-list
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager/collections/col1?piece=culinary-recipe-multi-view-list

## Install

```bash
agentic-ui add culinary-recipe-multi-view-list
npx shadcn@4.17.0 add @agentic-ui/culinary-recipe-multi-view-list
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** masonry-grid, list-view, gallery-view, empty-state, store-driven-view-mode
- **Intents:** manage-collection
- **Suits domains:** culinary, ecommerce, media, file-storage, books
- **Interaction:** view-mode
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Catalog with a list/grid view, Media explorer, Document listing
- **Avoid when:** A table with sortable columns is required, Hundreds of items without virtualization
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.1/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 6/10, code 8/10
- **npm dependencies:** react-masonry-css
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** react-masonry-css@^1.0.16, zustand@5.0.8
- **Registry dependencies:** culinary-recipe-card-set, lib-utils


### Culinary Top Contributors

Top sellers of the month.

- id: `culinary-top-contributors`
- Page: https://agentic-ui-kit.com/components/culinary-top-contributors
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-top-contributors?piece=culinary-top-contributors

## Install

```bash
agentic-ui add culinary-top-contributors
npx shadcn@4.17.0 add @agentic-ui/culinary-top-contributors
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** ranking, podium-badges, avatar, count-metric
- **Intents:** track-status
- **Suits domains:** culinary, saas, project-management, crm, education
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Top sellers of the month, Contributors to a repository, Student ranking
- **Avoid when:** More than 10 items, The ranking requires ties or history
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.1/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** avatar, badge
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **Registry dependencies:** ui-avatar, ui-badge


### Devtools Audit Trail Contributions

Monthly summaries aggregate contributions with nested repository context.

- id: `devtools-audit-trail-contributions`
- Page: https://agentic-ui-kit.com/components/devtools-audit-trail-contributions
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting?piece=devtools-audit-trail-contributions

## Install

```bash
agentic-ui add devtools-audit-trail-contributions
npx shadcn@4.17.0 add @agentic-ui/devtools-audit-trail-contributions
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** monthly-grouping, event-summary, expandable-groups
- **Intents:** audit-trail
- **Suits domains:** devtools, project-management, operations, support
- **Interaction:** monthly-grouping, event-summary, expandable-groups
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Monthly summaries aggregate contributions with nested repository context.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, monthly-grouping, event-summary
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.1/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils


### Ecommerce Customer Quick Sheet

Quick editing without leaving the listing.

- id: `ecommerce-customer-quick-sheet`
- Page: https://agentic-ui-kit.com/components/ecommerce-customer-quick-sheet
- Live preview: https://agentic-ui-kit.com/live/fixture/ecommerce-customer-quick-sheet?piece=ecommerce-customer-quick-sheet

## Install

```bash
agentic-ui add ecommerce-customer-quick-sheet
npx shadcn@4.17.0 add @agentic-ui/ecommerce-customer-quick-sheet
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** side-sheet, add-edit-modes, dynamic-contacts, saved-cards, notes
- **Intents:** create-edit
- **Suits domains:** ecommerce, crm, saas, operations
- **Interaction:** type, submit, escape-close
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** quick editing without leaving the listing, quick contact creation
- **Avoid when:** forms with more than ~15 fields
- **Preserve when adapting:** sheet-form-pattern, dynamic-list-fields
- **Replace when adapting:** domain-copy, fields
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.1/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** sheet, input, select, button, separator
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-input, ui-admin-kit-scroll-area, ui-admin-kit-select, ui-admin-kit-sheet, ui-admin-kit-switch, ui-admin-kit-textarea


### Ecommerce Product List Card Grid

Visual product catalog.

- id: `ecommerce-product-list-card-grid`
- Page: https://agentic-ui-kit.com/components/ecommerce-product-list-card-grid
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/product-list-2?piece=ecommerce-product-list-card-grid

## Install

```bash
agentic-ui add ecommerce-product-list-card-grid
npx shadcn@4.17.0 add @agentic-ui/ecommerce-product-list-card-grid
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** card-grid, inventory-status, category-filter, status-badges
- **Intents:** manage-collection
- **Suits domains:** ecommerce, media, culinary, books, wine
- **Interaction:** filter-select, hover
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** visual product catalog, any collection with a featured image
- **Avoid when:** dense collections of tabular data
- **Preserve when adapting:** card-grid-pattern, status-badges
- **Replace when adapting:** domain-copy, imagery, status-enum
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.1/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** card, badge, button, select
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-images-block-ecommerce-skin-care-product-kadarius-seegars-mxy5gokl8me-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, ecommerce-product-editor, ecommerce-product-wizard, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select


### Flightops Aircraft Card

Asset record card with specifications and utilization.

- id: `flightops-aircraft-card`
- Page: https://agentic-ui-kit.com/components/flightops-aircraft-card
- Live preview: https://agentic-ui-kit.com/live/template/flight-ops/fleet?piece=flightops-aircraft-card

## Install

```bash
agentic-ui add flightops-aircraft-card
npx shadcn@4.17.0 add @agentic-ui/flightops-aircraft-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** livery-header, spec-grid, utilization-bar, maintenance-flag
- **Intents:** explore-detail
- **Suits domains:** aviation, logistics, operations, media
- **Interaction:** hover
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Asset record card with specifications and utilization.
- **Avoid when:** The asset has no specifications or usage cycle.
- **Preserve when adapting:** spec-grid, utilization-semantics
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.1/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge
- **npm dependencies:** date-fns
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-badge, ui-flight-airports


### Flightops Airport Card

Network node record card with operational metrics and conditions.

- id: `flightops-airport-card`
- Page: https://agentic-ui-kit.com/components/flightops-airport-card
- Live preview: https://agentic-ui-kit.com/live/template/flight-ops/airports?piece=flightops-airport-card

## Install

```bash
agentic-ui add flightops-airport-card
npx shadcn@4.17.0 add @agentic-ui/flightops-airport-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** metric-grid, weather-summary, delay-level, hub-flag
- **Intents:** explore-detail
- **Suits domains:** aviation, maps-ops, travel, logistics
- **Interaction:** hover
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Network node record card with operational metrics and conditions.
- **Avoid when:** The node has no metrics or environmental conditions.
- **Preserve when adapting:** metric-grid, status-tone
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.1/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-badge, ui-flight-airports


### Music Studio Collaborator Card

Music collaborator.

- id: `music-studio-collaborator-card`
- Page: https://agentic-ui-kit.com/components/music-studio-collaborator-card
- Live preview: https://agentic-ui-kit.com/live/template/music-studio/collaborators?piece=music-studio-collaborator-card

## Install

```bash
agentic-ui add music-studio-collaborator-card
npx shadcn@4.17.0 add @agentic-ui/music-studio-collaborator-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** avatar, role, location, stats, follow-action
- **Intents:** explore-detail
- **Suits domains:** crm, hr, social, music, saas
- **Interaction:** follow, hover
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Music collaborator, Team member, CRM contact
- **Avoid when:** Many people need to be compared at once
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.1/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** avatar, badge, button
- **npm dependencies:** lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** music-studio-ui-sound-feedback, ui-avatar, ui-badge, ui-button


### Wine Cellar KPI Stats Cards

Ready-to-use share, paper gain, average age and spread.

- id: `wine-cellar-kpi-stats-cards`
- Page: https://agentic-ui-kit.com/components/wine-cellar-kpi-stats-cards
- Live preview: https://agentic-ui-kit.com/live/piece/wine-cellar-kpi-stats-cards?piece=wine-cellar-kpi-stats-cards

## Install

```bash
agentic-ui add wine-cellar-kpi-stats-cards
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-kpi-stats-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-strip, progress-meter, derived-metrics, secondary-context
- **Intents:** track-status
- **Suits domains:** wine, finance, ecommerce, saas, operations, analytics
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Ready-to-use share, paper gain, average age and spread, Inventory KPIs, Portfolio metrics
- **Avoid when:** A trend/sparkline per KPI is needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.1/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 6/10, code 8/10
- **npm dependencies:** zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** zustand@5.0.8


### Orchestra OPS Season Week View

Weekly season planner for artistic ensembles.

- id: `orchestra-ops-season-week-view`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-season-week-view
- Live preview: https://agentic-ui-kit.com/live/template/orchestra-ops/season?piece=orchestra-ops-season-week-view

## Install

```bash
agentic-ui add orchestra-ops-season-week-view
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-season-week-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** week-navigation, day-columns, event-type-filters, event-sheet-drawer, status-badges
- **Intents:** manage-collection, explore-detail, track-status
- **Suits domains:** music, operations, logistics, travel, education
- **Interaction:** week-pagination, filter-dropdown, event-sheet-open
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Weekly season planner for artistic ensembles, Production calendar with type and venue filters, Management of dress rehearsals, concerts and recordings
- **Avoid when:** Purely textual data tables, High-density yearly views without weekly detail
- **Preserve when adapting:** seven-day-grid, week-shift-controls, filter-toolbar
- **Replace when adapting:** event-types, mock-schedule, venue-resolver
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.07/10
- **Quality breakdown:** visual 8.5/10, responsive 8/10, accessibility 7.5/10, code 8/10
- **Uses primitives:** button, badge, separator, sheet, dropdown-menu
- **npm dependencies:** lucide-react, zustand, date-fns
- **Used in:** Cadenza Orchestra Operations (template)
- **Registry dependencies:** orchestra-ops-event-detail-sheet


### Orchestra OPS Today Schedule

Gantt row per rehearsal, stage check or workshop across the working day.

- id: `orchestra-ops-today-schedule`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-today-schedule
- Live preview: https://agentic-ui-kit.com/live/piece/orchestra-ops-today-schedule?piece=orchestra-ops-today-schedule

## Install

```bash
agentic-ui add orchestra-ops-today-schedule
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-today-schedule
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** gantt-day-timeline-type-colored-bars-venue-labels-closed-doors-indicator-calendar-link
- **Intents:** monitor-live, track-status
- **Suits domains:** music, operations, logistics, personal-productivity, education
- **Interaction:** event-click, hour-scroll
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Gantt row per rehearsal, stage check or workshop across the working day, Hourly occupancy schedule for halls and auditoriums, Time slot planner with a public/private distinction
- **Avoid when:** Bird's-eye monthly calendars, Task lists without exact time assignment
- **Preserve when adapting:** hour-axis, relative-positioning-math, type-hues
- **Replace when adapting:** hour-range, event-schema, venue-display
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8.07/10
- **Quality breakdown:** visual 8.5/10, responsive 8/10, accessibility 7.5/10, code 8/10
- **Uses primitives:** badge, button
- **npm dependencies:** lucide-react, zustand, date-fns
- **Used in:** Cadenza Orchestra Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-orchestra-ops-utils, ui-avatar, ui-badge, ui-button


### Ecommerce Order List

Orders with payment and fulfillment status.

- id: `ecommerce-order-list`
- Page: https://agentic-ui-kit.com/components/ecommerce-order-list
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/order-list-1?piece=ecommerce-order-list

## Install

```bash
agentic-ui add ecommerce-order-list
npx shadcn@4.17.0 add @agentic-ui/ecommerce-order-list
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sorting, pagination, url-synced-filters, date-range-filter, status-badges, row-actions
- **Intents:** manage-collection, track-status
- **Suits domains:** ecommerce, operations, logistics, payments, saas
- **Interaction:** sort, paginate, filter-url, row-menu
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** orders with payment and fulfillment status, any transactional collection with URL filters
- **Avoid when:** fewer than 10 rows, collections without states
- **Preserve when adapting:** column-model, status-badges, url-filter-state
- **Replace when adapting:** domain-copy, columns, status-enum, formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** table, badge, button, select, dropdown-menu, calendar
- **npm dependencies:** nuqs
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-tabs, ui-table


### Ecommerce Product List Inventory Rows

Inventory with editorial/active states.

- id: `ecommerce-product-list-inventory-rows`
- Page: https://agentic-ui-kit.com/components/ecommerce-product-list-inventory-rows
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/product-list-4?piece=ecommerce-product-list-inventory-rows

## Install

```bash
agentic-ui add ecommerce-product-list-inventory-rows
npx shadcn@4.17.0 add @agentic-ui/ecommerce-product-list-inventory-rows
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sortable-rows, status-tabs, row-actions, inventory-counts
- **Intents:** manage-collection, track-status
- **Suits domains:** ecommerce, operations, logistics, saas
- **Interaction:** sort, tab-switch, row-menu
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** inventory with editorial/active states, listings with status tabs
- **Avoid when:** collections without a lifecycle
- **Preserve when adapting:** status-tabs-pattern, column-model, row-actions
- **Replace when adapting:** domain-copy, status-enum, columns
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **Uses primitives:** table, badge, tabs, dropdown-menu, button
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-images-block-ecommerce-skin-care-product-kadarius-seegars-mxy5gokl8me-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, ecommerce-product-editor, ecommerce-product-wizard, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select


### File Storage Collections Grid

Grid of asset collections.

- id: `file-storage-collections-grid`
- Page: https://agentic-ui-kit.com/components/file-storage-collections-grid
- Live preview: https://agentic-ui-kit.com/live/template/file-storage/collections?piece=file-storage-collections-grid

## Install

```bash
agentic-ui add file-storage-collections-grid
npx shadcn@4.17.0 add @agentic-ui/file-storage-collections-grid
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** card-grid, create-affordance, per-item-actions
- **Intents:** manage-collection
- **Suits domains:** file-storage, media, knowledge, ecommerce, project-management
- **Interaction:** hover-actions, navigation
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Grid of asset collections, Albums in a photo library, Document groupings by project
- **Avoid when:** The groupings are deeply hierarchical, A table with comparable columns is required
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, badge, dropdown-menu
- **npm dependencies:** lucide-react, next/link
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-file-storage-utils, ui-badge, ui-button, ui-dropdown-menu


### Marine App Header

App header with route-contextual search.

- id: `marine-app-header`
- Page: https://agentic-ui-kit.com/components/marine-app-header
- Live preview: https://agentic-ui-kit.com/live/template/regatta-ops?piece=marine-app-header

## Install

```bash
agentic-ui add marine-app-header
npx shadcn@4.17.0 add @agentic-ui/marine-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-title, contextual-search, light-dark-toggle, sidebar-trigger
- **Intents:** navigate, configure
- **Suits domains:** marine, saas, operations, analytics, devtools
- **Interaction:** search, theme-toggle
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** App header with route-contextual search, Top bar with a light/dark toggle
- **Avoid when:** A deep breadcrumb or per-page primary actions are needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** input, button, sidebar
- **npm dependencies:** zustand, next-themes
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, zustand@5.0.8
- **Registry dependencies:** ui-button, ui-input, ui-sidebar


### Marine App Sidebar

Operations console sidebar with quick filters by category.

- id: `marine-app-sidebar`
- Page: https://agentic-ui-kit.com/components/marine-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/regatta-ops?piece=marine-app-sidebar

## Install

```bash
agentic-ui add marine-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/marine-app-sidebar
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** workspace-switcher, route-nav, multi-select-filter-group, collapsible-group, account-menu
- **Intents:** navigate
- **Suits domains:** marine, saas, operations, logistics, aviation
- **Interaction:** navigate, toggle-filter, collapse
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Operations console sidebar with quick filters by category, App navigation with a workspace selector
- **Avoid when:** Single-screen apps
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** sidebar, dropdown-menu, collapsible, avatar
- **npm dependencies:** zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-regatta-ops-utils, ui-avatar, ui-collapsible, ui-dropdown-menu, ui-sidebar


### Marine Regatta Filter Menu

Filter by status and event type.

- id: `marine-regatta-filter-menu`
- Page: https://agentic-ui-kit.com/components/marine-regatta-filter-menu
- Live preview: https://agentic-ui-kit.com/live/piece/marine-regatta-filter-menu?piece=marine-regatta-filter-menu

## Install

```bash
agentic-ui add marine-regatta-filter-menu
npx shadcn@4.17.0 add @agentic-ui/marine-regatta-filter-menu
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-facet-checkboxes, active-count-badge, clear-filters, radio-sort
- **Intents:** manage-collection
- **Suits domains:** marine, ecommerce, saas, crm, operations, travel
- **Interaction:** faceted-filter, sort, clear
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Filter by status and event type, Filter by product category, Filter tickets by priority
- **Avoid when:** More than ~15 options per facet (use a combobox)
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 7/10
- **Uses primitives:** dropdown-menu, button, badge
- **npm dependencies:** zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** marine-course-map, marine-regatta-card, ui-badge, ui-button, ui-dropdown-menu


### Music Studio Collaborator Avatar Tile

Artists in your circle.

- id: `music-studio-collaborator-avatar-tile`
- Page: https://agentic-ui-kit.com/components/music-studio-collaborator-avatar-tile
- Live preview: https://agentic-ui-kit.com/live/template/music-studio?piece=music-studio-collaborator-avatar-tile

## Install

```bash
agentic-ui add music-studio-collaborator-avatar-tile
npx shadcn@4.17.0 add @agentic-ui/music-studio-collaborator-avatar-tile
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** round-avatar, name, role
- **Intents:** navigate
- **Suits domains:** music, social, crm, hr
- **Interaction:** click, hover
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Artists in your circle, Featured team, Frequent contacts
- **Avoid when:** Information beyond the name is needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar
- **Used in:** Tonehall Music Studio (template)
- **Registry dependencies:** music-studio-ui-sound-feedback, ui-avatar


### Music Studio Track List

Track list.

- id: `music-studio-track-list`
- Page: https://agentic-ui-kit.com/components/music-studio-track-list
- Live preview: https://agentic-ui-kit.com/live/piece/music-studio-track-list?piece=music-studio-track-list

## Install

```bash
agentic-ui add music-studio-track-list
npx shadcn@4.17.0 add @agentic-ui/music-studio-track-list
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** numbered-rows, hover-play, now-playing-indicator, column-header, relative-date
- **Intents:** manage-collection
- **Suits domains:** music, media, file-storage, books, education
- **Interaction:** click-to-play, hover
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Track list, Audiobook chapter list, List of recordings
- **Avoid when:** Column sorting or multi-selection is required
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, badge
- **npm dependencies:** zustand, lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, music-studio-ui-sound-feedback, ui-badge, ui-button, ui-dropdown-menu


### Payments Customer Directory Dense

Bulk management of billing customers.

- id: `payments-customer-directory-dense`
- Page: https://agentic-ui-kit.com/components/payments-customer-directory-dense
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/customers-list-2?piece=payments-customer-directory-dense

## Install

```bash
agentic-ui add payments-customer-directory-dense
npx shadcn@4.17.0 add @agentic-ui/payments-customer-directory-dense
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** dense-table, search, segment-filters, bulk-actions
- **Intents:** manage-collection, explore-detail
- **Suits domains:** payments, crm, billing, saas, ecommerce
- **Interaction:** search, filtering, row-actions
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** bulk management of billing customers
- **Avoid when:** directories with no per-row actions, fewer than 10 records
- **Preserve when adapting:** directory-grammar, search-filter-model, card-or-table-layout
- **Replace when adapting:** domain-copy, fields, segments, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, calendar, checkbox, input, popover, table, tabs
- **npm dependencies:** react-day-picker
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-input, ui-admin-kit-popover, ui-admin-kit-tabs, ui-calendar, ui-table


### Payments Dashboard Overview Dense

Dense payments operations view.

- id: `payments-dashboard-overview-dense`
- Page: https://agentic-ui-kit.com/components/payments-dashboard-overview-dense
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/dashboard-6?piece=payments-dashboard-overview-dense

## Install

```bash
agentic-ui add payments-dashboard-overview-dense
npx shadcn@4.17.0 add @agentic-ui/payments-dashboard-overview-dense
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, flow-diagram, compact-tables, multi-panel
- **Intents:** monitor-live, compare-over-time
- **Suits domains:** payments, billing, finance, saas, operations
- **Interaction:** tooltip, tabs, range-selector
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** dense payments operations view, control panel with fund flows
- **Avoid when:** data editing flows, fewer than 3 relevant metrics
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-first-layout
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, select, table, tooltip
- **npm dependencies:** @xyflow/react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @xyflow/react@^12.10.2, lucide-react@0.577.0, next-themes@0.4.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-select, ui-admin-kit-tooltip, ui-table


### Payments Delivery Simulator

Testing webhook retries and latency without a backend.

- id: `payments-delivery-simulator`
- Page: https://agentic-ui-kit.com/components/payments-delivery-simulator
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/delivery-simulator?piece=payments-delivery-simulator

## Install

```bash
agentic-ui add payments-delivery-simulator
npx shadcn@4.17.0 add @agentic-ui/payments-delivery-simulator
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** scenario-builder, live-log, latency-controls, outcome-modes
- **Intents:** monitor-live, execute-flow
- **Suits domains:** payments, devtools, operations
- **Interaction:** controls, live-log
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** testing webhook retries and latency without a backend
- **Avoid when:** real production monitoring
- **Preserve when adapting:** scenario-log-model
- **Replace when adapting:** domain-copy, scenarios, mock-data
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, collapsible, input-group, select, tooltip
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-collapsible, ui-admin-kit-select, ui-admin-kit-tooltip, ui-input-group


### Payments Invoice List Dense

High-volume collections back office.

- id: `payments-invoice-list-dense`
- Page: https://agentic-ui-kit.com/components/payments-invoice-list-dense
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/invoice-list-3?piece=payments-invoice-list-dense

## Install

```bash
agentic-ui add payments-invoice-list-dense
npx shadcn@4.17.0 add @agentic-ui/payments-invoice-list-dense
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sortable-table, inline-filters, compact-rows, bulk-actions
- **Intents:** manage-collection, track-status
- **Suits domains:** payments, billing, finance, ecommerce, saas
- **Interaction:** sorting, filtering, pagination, row-actions
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** high-volume collections back office
- **Avoid when:** collections of fewer than 10 items, detail of a single record
- **Preserve when adapting:** table-grammar, status-badge-system, toolbar-layout
- **Replace when adapting:** domain-copy, columns, status-values, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **Uses primitives:** badge, button, dropdown-menu, input
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input


### Payments Subscription List Dense

Bulk operation of enterprise subscriptions.

- id: `payments-subscription-list-dense`
- Page: https://agentic-ui-kit.com/components/payments-subscription-list-dense
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/subscriptions-4?piece=payments-subscription-list-dense

## Install

```bash
agentic-ui add payments-subscription-list-dense
npx shadcn@4.17.0 add @agentic-ui/payments-subscription-list-dense
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** dense-table, multi-filters, bulk-actions
- **Intents:** manage-collection, track-status
- **Suits domains:** payments, billing, saas, finance
- **Interaction:** filtering, row-actions, sorting
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** bulk operation of enterprise subscriptions
- **Avoid when:** one-off charges without recurrence
- **Preserve when adapting:** subscription-lifecycle-badges, plan-column-grammar
- **Replace when adapting:** domain-copy, plan-names, status-values, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **Uses primitives:** badge, input
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-input


### Payments Transaction Ledger Dense

High-volume reconciliation by period.

- id: `payments-transaction-ledger-dense`
- Page: https://agentic-ui-kit.com/components/payments-transaction-ledger-dense
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/transactions-list-2?piece=payments-transaction-ledger-dense

## Install

```bash
agentic-ui add payments-transaction-ledger-dense
npx shadcn@4.17.0 add @agentic-ui/payments-transaction-ledger-dense
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** dense-ledger, date-range-filter, bulk-export
- **Intents:** manage-collection, audit-trail
- **Suits domains:** payments, finance, billing, operations, ecommerce
- **Interaction:** filtering, sorting, row-actions
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** high-volume reconciliation by period
- **Avoid when:** time series without discrete events
- **Preserve when adapting:** ledger-grammar, amount-formatting, status-badges
- **Replace when adapting:** domain-copy, columns, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, calendar, checkbox, input, popover
- **npm dependencies:** react-day-picker
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-checkbox, ui-admin-kit-input, ui-admin-kit-popover, ui-calendar


### Social Client Thread Card

Message card in a feed.

- id: `social-client-thread-card`
- Page: https://agentic-ui-kit.com/components/social-client-thread-card
- Live preview: https://agentic-ui-kit.com/live/template/social-client?piece=social-client-thread-card

## Install

```bash
agentic-ui add social-client-thread-card
npx shadcn@4.17.0 add @agentic-ui/social-client-thread-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** action-bar, avatar-connector, pinned-status, media-grid, quote-preview
- **Intents:** communicate, explore-detail
- **Suits domains:** social, support, knowledge, project-management, saas
- **Interaction:** like, repost, share, click-to-detail
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Message card in a feed, Comment in a forum or support, Item in an announcements channel
- **Avoid when:** Spreadsheet rows or dense data listings
- **Preserve when adapting:** avatar-gutter, action-row, media-layout
- **Replace when adapting:** actions-list, mock-author, metrics
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, dropdown-menu
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, ui-avatar, ui-badge, ui-button, ui-dropdown-menu


### Travel Wishlists Grid

List of favorite accommodations.

- id: `travel-wishlists-grid`
- Page: https://agentic-ui-kit.com/components/travel-wishlists-grid
- Live preview: https://agentic-ui-kit.com/live/piece/travel-wishlists-grid?piece=travel-wishlists-grid

## Install

```bash
agentic-ui add travel-wishlists-grid
npx shadcn@4.17.0 add @agentic-ui/travel-wishlists-grid
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** saved-items-grid, empty-state, wishlist-toggle-sync
- **Intents:** manage-collection
- **Suits domains:** travel, ecommerce, media, books
- **Interaction:** toggle, navigate
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** list of favorite accommodations, cart of saved products, collection of bookmarked content
- **Avoid when:** shared collections with permissions, lists with manual ordering
- **Preserve when adapting:** empty-state-pattern, saved-grid-composition
- **Replace when adapting:** item-card, persistence-source
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 8.05/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button
- **npm dependencies:** zustand, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** travel-listing-card, ui-button


### Ecommerce Customer 360 Detail

Customer record with history and activity.

- id: `ecommerce-customer-360-detail`
- Page: https://agentic-ui-kit.com/components/ecommerce-customer-360-detail
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/customer-detail-1?piece=ecommerce-customer-360-detail

## Install

```bash
agentic-ui add ecommerce-customer-360-detail
npx shadcn@4.17.0 add @agentic-ui/ecommerce-customer-360-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** tabs, purchase-history, reviews, activity-feed, address-map
- **Intents:** explore-detail, audit-trail
- **Suits domains:** ecommerce, crm, support, saas
- **Interaction:** tab-switch, map-pan
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** customer record with history and activity, 360 account view
- **Avoid when:** contacts without transaction history
- **Preserve when adapting:** tabs-detail-pattern, activity-feed, map-card
- **Replace when adapting:** domain-copy, map-provider, metrics
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** card, tabs, badge, avatar, map
- **npm dependencies:** leaflet
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-tabs, ui-map


### Ecommerce Order Detail Journey Map

Order detail with journey and map.

- id: `ecommerce-order-detail-journey-map`
- Page: https://agentic-ui-kit.com/components/ecommerce-order-detail-journey-map
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/order-detail-1?piece=ecommerce-order-detail-journey-map

## Install

```bash
agentic-ui add ecommerce-order-detail-journey-map
npx shadcn@4.17.0 add @agentic-ui/ecommerce-order-detail-journey-map
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** order-summary, journey-timeline, shipping-map, line-items, totals
- **Intents:** explore-detail, track-status
- **Suits domains:** ecommerce, logistics, operations, travel
- **Interaction:** map-pan, timeline-hover
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** order detail with journey and map, shipment tracking with milestones
- **Avoid when:** orders without physical fulfillment
- **Preserve when adapting:** detail-header-pattern, journey-timeline, map-card
- **Replace when adapting:** domain-copy, map-provider, status-enum
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** card, badge, table, separator, map
- **npm dependencies:** leaflet
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-progress, ui-admin-kit-separator, ui-map


### Ecommerce Sales Dashboard

Sales vs previous period with channel mix.

- id: `ecommerce-sales-dashboard`
- Page: https://agentic-ui-kit.com/components/ecommerce-sales-dashboard
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/dashboard-1?piece=ecommerce-sales-dashboard

## Install

```bash
agentic-ui add ecommerce-sales-dashboard
npx shadcn@4.17.0 add @agentic-ui/ecommerce-sales-dashboard
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, timeseries, composition-charts, channel-mix, period-comparison, own-sidebar
- **Intents:** compare-over-time, show-composition
- **Suits domains:** ecommerce, saas, analytics, operations, billing
- **Interaction:** tooltip, range-selector, hover-highlight
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** sales vs previous period with channel mix, revenue and AOV per month
- **Avoid when:** fewer than 3 time series, single-metric executive dashboards
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-card-grid
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** sidebar, card, chart, select, badge, avatar, dropdown-menu
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template), Analytics (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-chart, ui-admin-kit-progress


### Ecommerce Sales Dashboard KPI Animated

Commercial dashboard with animated KPIs.

- id: `ecommerce-sales-dashboard-kpi-animated`
- Page: https://agentic-ui-kit.com/components/ecommerce-sales-dashboard-kpi-animated
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/dashboard-8?piece=ecommerce-sales-dashboard-kpi-animated

## Install

```bash
agentic-ui add ecommerce-sales-dashboard-kpi-animated
npx shadcn@4.17.0 add @agentic-ui/ecommerce-sales-dashboard-kpi-animated
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards-animated, bar-timeseries, area-charts, hover-highlight
- **Intents:** compare-over-time
- **Suits domains:** ecommerce, saas, analytics, marketing
- **Interaction:** tooltip, hover-highlight
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** commercial dashboard with animated KPIs, visits and customers alongside revenue
- **Avoid when:** environments with mandatory reduced motion without adaptation
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-card-grid, animated-kpi-values
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** sidebar, card, chart, badge
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** framer-motion@12.38.0, lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-logo-black-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-chart, ui-admin-kit-collapsible, ui-admin-kit-dropdown-menu, ui-admin-kit-scroll-area, ui-admin-kit-sidebar, ui-block-tooltip


### Ecommerce Sales Dashboard Profit Costs

Revenue vs costs per period.

- id: `ecommerce-sales-dashboard-profit-costs`
- Page: https://agentic-ui-kit.com/components/ecommerce-sales-dashboard-profit-costs
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/dashboard-4?piece=ecommerce-sales-dashboard-profit-costs

## Install

```bash
agentic-ui add ecommerce-sales-dashboard-profit-costs
npx shadcn@4.17.0 add @agentic-ui/ecommerce-sales-dashboard-profit-costs
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, revenue-vs-costs, area-charts, period-switch, custom-tooltip
- **Intents:** compare-over-time
- **Suits domains:** ecommerce, finance, billing, saas, operations
- **Interaction:** tooltip, period-switch
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** revenue vs costs per period, monthly gross margin
- **Avoid when:** a single series without comparison
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-card-grid
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** sidebar, card, chart, table, select
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-images-block-avatar-1-webp, asset-admin-kit-logo-black-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-chart, ui-admin-kit-collapsible, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-sidebar, ui-table


### Ecommerce Shipment Tracker Map

Shipment tracking with a route on a map.

- id: `ecommerce-shipment-tracker-map`
- Page: https://agentic-ui-kit.com/components/ecommerce-shipment-tracker-map
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/shipment-detail-1?piece=ecommerce-shipment-tracker-map

## Install

```bash
agentic-ui add ecommerce-shipment-tracker-map
npx shadcn@4.17.0 add @agentic-ui/ecommerce-shipment-tracker-map
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** tracking-timeline, route-map, shipment-summary, checkpoints
- **Intents:** track-status, explore-detail, monitor-live
- **Suits domains:** ecommerce, logistics, travel, aviation, operations
- **Interaction:** map-pan, timeline-hover
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** shipment tracking with a route on a map, tracking any entity in transit
- **Avoid when:** entities with no geographic route
- **Preserve when adapting:** tracking-timeline-pattern, map-route-card
- **Replace when adapting:** domain-copy, map-provider, status-enum
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** card, badge, map, separator
- **npm dependencies:** leaflet
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-scroll-area, ui-map


### Inventory OPS Overview Dashboard

Operational control panel for a warehouse and inventory.

- id: `inventory-ops-overview-dashboard`
- Page: https://agentic-ui-kit.com/components/inventory-ops-overview-dashboard
- Live preview: https://agentic-ui-kit.com/live/template/inventory-ops?piece=inventory-ops-overview-dashboard

## Install

```bash
agentic-ui add inventory-ops-overview-dashboard
npx shadcn@4.17.0 add @agentic-ui/inventory-ops-overview-dashboard
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stockline Inventory & Orders
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-summary, masonry-widgets, low-stock-alerts, recent-orders-list, recent-activity-feed, category-distribution
- **Intents:** compare-over-time, track-status
- **Suits domains:** operations, ecommerce, logistics, saas, analytics
- **Interaction:** masonry-reflow, route-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Operational control panel for a warehouse and inventory, E-commerce fulfillment and stock control dashboard, Logistics summary of orders and assets in circulation
- **Avoid when:** Catalog views exclusively for end buyers, Systems that only require a dense transactional table
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button, avatar, progress, separator
- **npm dependencies:** lucide-react
- **Used in:** Stockline Inventory & Orders (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** inventory-ops-category-distribution, inventory-ops-kpi-stats-cards, inventory-ops-low-stock-alert-table, inventory-ops-recent-activity-feed, inventory-ops-stock-timeseries, lib-file-storage-utils, ui-button


### Music Studio Podcast Show Tile

Subscribed show.

- id: `music-studio-podcast-show-tile`
- Page: https://agentic-ui-kit.com/components/music-studio-podcast-show-tile
- Live preview: https://agentic-ui-kit.com/live/template/music-studio/podcasts?piece=music-studio-podcast-show-tile

## Install

```bash
agentic-ui add music-studio-podcast-show-tile
npx shadcn@4.17.0 add @agentic-ui/music-studio-podcast-show-tile
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** cover-gradient, show-name, new-episode-dot
- **Intents:** navigate
- **Suits domains:** media, education, knowledge, music
- **Interaction:** click
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Subscribed show, Followed channel, Enrolled course
- **Avoid when:** There is no concept of subscription
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **npm dependencies:** lucide-react
- **Used in:** Tonehall Music Studio (template)
- **Registry dependencies:** lib-utils, music-studio-ui-sound-feedback


### Operations Oncall Schedule

SRE on-call rotation.

- id: `operations-oncall-schedule`
- Page: https://agentic-ui-kit.com/components/operations-oncall-schedule
- Live preview: https://agentic-ui-kit.com/internal-operations-public/on-call?piece=operations-oncall-schedule

## Install

```bash
agentic-ui add operations-oncall-schedule
npx shadcn@4.17.0 add @agentic-ui/operations-oncall-schedule
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** weekly-rota, primary-secondary-tiers, on-call-now, escalation-policy, override-dialog, team-tabs, test-page
- **Intents:** manage-collection, configure, track-status
- **Suits domains:** devops-status, operations, support, healthcare, hr
- **Interaction:** tabs, modal-form, grid-cell-edit
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** SRE on-call rotation, support shifts by tier, medical on-call duty by department
- **Avoid when:** appointment calendars with free-form duration, resource planning beyond one month
- **Preserve when adapting:** tiered-rota-grid, today-highlight, override-marking
- **Replace when adapting:** teams, people, escalation-steps
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, label
- **npm dependencies:** lucide-react, @agentic-ui/motion
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Internal Operations — public status variant (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** feedback-status-page, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Operations Postmortem Editor

Blameless postmortem.

- id: `operations-postmortem-editor`
- Page: https://agentic-ui-kit.com/components/operations-postmortem-editor
- Live preview: https://agentic-ui-kit.com/internal-operations-public/postmortems/PM-2104?piece=operations-postmortem-editor

## Install

```bash
agentic-ui add operations-postmortem-editor
npx shadcn@4.17.0 add @agentic-ui/operations-postmortem-editor
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** structured-sections, dirty-state, save-draft, publish-validation, action-items, preview, incident-timeline-import, read-only-published
- **Intents:** create-edit, audit-trail, execute-flow
- **Suits domains:** devops-status, operations, support, devtools, knowledge
- **Interaction:** tabs, inline-form, modal-confirm, checkbox
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** blameless postmortem, change review report, retrospective with actions
- **Avoid when:** free-form documents without structure, real-time collaborative editing
- **Preserve when adapting:** section-structure, publish-gate, action-item-ownership
- **Replace when adapting:** section-set, owners, copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, textarea, input, checkbox, label
- **npm dependencies:** lucide-react, @agentic-ui/feedback-status-page, @agentic-ui/motion
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Internal Operations — public status variant (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** feedback-status-page, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Saas Navigate Code Hosting Shell

Sidebar, header and independently scrollable content compose the application frame.

- id: `saas-navigate-code-hosting-shell`
- Page: https://agentic-ui-kit.com/components/saas-navigate-code-hosting-shell
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting?piece=saas-navigate-code-hosting-shell

## Install

```bash
agentic-ui add saas-navigate-code-hosting-shell
npx shadcn@4.17.0 add @agentic-ui/saas-navigate-code-hosting-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** responsive-sidebar, fixed-header, scrollable-content
- **Intents:** navigate
- **Suits domains:** saas, devtools, knowledge, file-storage
- **Interaction:** responsive-sidebar, fixed-header, scrollable-content
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Sidebar, header and independently scrollable content compose the application frame.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, responsive-sidebar, fixed-header
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 8/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** sidebar, tooltip
- **npm dependencies:** saas-navigate-code-hosting-header, saas-navigate-code-hosting-sidebar
- **Used in:** Forkyard Code Hosting (template), SaaS Admin Starter (blueprint), SaaS Backoffice (blueprint)
- **Registry dependencies:** saas-navigate-code-hosting-header, saas-navigate-code-hosting-sidebar, ui-code-hosting-sidebar, ui-tooltip


### Culinary Cuisine Distribution

Visits by country.

- id: `culinary-cuisine-distribution`
- Page: https://agentic-ui-kit.com/components/culinary-cuisine-distribution
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-cuisine-distribution?piece=culinary-cuisine-distribution

## Install

```bash
agentic-ui add culinary-cuisine-distribution
npx shadcn@4.17.0 add @agentic-ui/culinary-cuisine-distribution
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** ranked-bars, relative-to-max, emoji-labels, top-n-limit
- **Intents:** show-composition
- **Suits domains:** culinary, travel, ecommerce, analytics, crm
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Visits by country, Customers by region, Sales by channel
- **Avoid when:** Comparable absolute values across periods are needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.95/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 6/10, code 7/10
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** lib-utils


### Culinary Quick Collections

Quick access to folders.

- id: `culinary-quick-collections`
- Page: https://agentic-ui-kit.com/components/culinary-quick-collections
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-quick-collections?piece=culinary-quick-collections

## Install

```bash
agentic-ui add culinary-quick-collections
npx shadcn@4.17.0 add @agentic-ui/culinary-quick-collections
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** tile-links, emoji-icon, count-caption, view-all-link
- **Intents:** navigate
- **Suits domains:** culinary, file-storage, media, ecommerce, knowledge
- **Interaction:** card-link
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Quick access to folders, Shortcuts to store categories, Favorite spaces
- **Avoid when:** More than 8 shortcuts, The destinations have no representative icon
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 7.95/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **npm dependencies:** next/link
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-utils


### Rare Books Collector Card

Contact or partner card.

- id: `rare-books-collector-card`
- Page: https://agentic-ui-kit.com/components/rare-books-collector-card
- Live preview: https://agentic-ui-kit.com/live/template/rare-books/network?piece=rare-books-collector-card

## Install

```bash
agentic-ui add rare-books-collector-card
npx shadcn@4.17.0 add @agentic-ui/rare-books-collector-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** avatar, role-badge, specialty-quote, location, contact-actions
- **Intents:** explore-detail, communicate
- **Suits domains:** books, crm, social, saas, travel
- **Interaction:** contact
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Contact or partner card, Supplier profile, Community member
- **Avoid when:** Profile with history or timeline
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 7.95/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** avatar, badge, button
- **npm dependencies:** lucide-react
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-rare-books-utils, ui-avatar, ui-badge, ui-button


### Rare Books KPI Stats Cards

Volumes, insured value, on exhibition, under restoration.

- id: `rare-books-kpi-stats-cards`
- Page: https://agentic-ui-kit.com/components/rare-books-kpi-stats-cards
- Live preview: https://agentic-ui-kit.com/live/piece/rare-books-kpi-stats-cards?piece=rare-books-kpi-stats-cards

## Install

```bash
agentic-ui add rare-books-kpi-stats-cards
npx shadcn@4.17.0 add @agentic-ui/rare-books-kpi-stats-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-tiles, derived-metrics, secondary-context, decorative-bars
- **Intents:** track-status
- **Suits domains:** books, finance, ecommerce, saas, operations, wine
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Volumes, insured value, on exhibition, under restoration, Inventory KPIs, Portfolio KPIs
- **Avoid when:** A real trend per KPI is needed (the bars are decorative)
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.95/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 5/10, code 8/10
- **npm dependencies:** lucide-react, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils


### Culinary Category Composition

Sales by category.

- id: `culinary-category-composition`
- Page: https://agentic-ui-kit.com/components/culinary-category-composition
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-category-composition?piece=culinary-category-composition

## Install

```bash
agentic-ui add culinary-category-composition
npx shadcn@4.17.0 add @agentic-ui/culinary-category-composition
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** composition-breakdown, donut-chart, legend-with-counts, top-n-limit, tooltip
- **Intents:** show-composition
- **Suits domains:** culinary, ecommerce, finance, analytics, file-storage
- **Interaction:** tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Sales by category, Spending by line item, Storage by type
- **Avoid when:** More than 5-6 relevant categories, Time-based data
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** recharts
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** recharts-v2@npm:recharts@^2.15.4, zustand@5.0.8
- **Registry dependencies:** ui-file-storage-chart


### Ecommerce Customer Editor Form

Customer creation and editing.

- id: `ecommerce-customer-editor-form`
- Page: https://agentic-ui-kit.com/components/ecommerce-customer-editor-form
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/add-customer?piece=ecommerce-customer-editor-form

## Install

```bash
agentic-ui add ecommerce-customer-editor-form
npx shadcn@4.17.0 add @agentic-ui/ecommerce-customer-editor-form
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** add-edit-modes, sectioned-form, reset-form, address-sections
- **Intents:** create-edit
- **Suits domains:** ecommerce, crm, saas, operations
- **Interaction:** type, tab-navigate, submit
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** customer creation and editing, sectioned master forms
- **Avoid when:** inline editing of a single field
- **Preserve when adapting:** sectioned-form-pattern, add-edit-duality
- **Replace when adapting:** domain-copy, fields, validation-messages
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** card, input, select, button, separator
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-switch, ui-admin-kit-textarea, ui-scroll-spy


### Ecommerce Customer List Value Metrics

Customer directory with lifetime value.

- id: `ecommerce-customer-list-value-metrics`
- Page: https://agentic-ui-kit.com/components/ecommerce-customer-list-value-metrics
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/customer-list-1?piece=ecommerce-customer-list-value-metrics

## Install

```bash
agentic-ui add ecommerce-customer-list-value-metrics
npx shadcn@4.17.0 add @agentic-ui/ecommerce-customer-list-value-metrics
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sorting, pagination, lifetime-value-metrics, segment-badges, row-actions
- **Intents:** manage-collection, explore-detail
- **Suits domains:** ecommerce, crm, saas, billing, marketing
- **Interaction:** sort, paginate, row-menu
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** customer directory with lifetime value, CRM listings with metrics
- **Avoid when:** directories without monetary metrics
- **Preserve when adapting:** column-model, value-metrics-columns, avatar-cell
- **Replace when adapting:** domain-copy, columns, formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** table, badge, avatar, button, dropdown-menu
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-avatars-avatar-3-png, asset-admin-kit-avatars-avatar-4-png, asset-admin-kit-avatars-avatar-5-png, asset-admin-kit-avatars-avatar-6-png, asset-admin-kit-avatars-avatar-black-1-png, asset-admin-kit-avatars-avatar-black-2-png, asset-admin-kit-avatars-avatar-black-3-png, asset-admin-kit-avatars-avatar-black-4-png, asset-admin-kit-avatars-avatar-black-5-png, asset-admin-kit-avatars-avatar-black-6-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-tabs, ui-table


### File Storage Team Activity Feed

Feed of recent team actions.

- id: `file-storage-team-activity-feed`
- Page: https://agentic-ui-kit.com/components/file-storage-team-activity-feed
- Live preview: https://agentic-ui-kit.com/live/piece/file-storage-team-activity-feed?piece=file-storage-team-activity-feed

## Install

```bash
agentic-ui add file-storage-team-activity-feed
npx shadcn@4.17.0 add @agentic-ui/file-storage-team-activity-feed
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** activity-log, actor-attribution, action-iconography, relative-time
- **Intents:** audit-trail, communicate
- **Suits domains:** file-storage, crm, devtools, project-management, operations
- **Interaction:** scroll
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Feed of recent team actions, Change history of a document, Lightweight audit log
- **Avoid when:** Detailed forensic traceability is required, There are no identifiable actors
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **npm dependencies:** lucide-react, next/image
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-file-storage-utils


### Finance Budget Cards

Envelope pacing list; linear bars clamp at 100 while copy states the amount to go or over plan; zero budget is guarded.

- id: `finance-budget-cards`
- Page: https://agentic-ui-kit.com/components/finance-budget-cards
- Live preview: https://agentic-ui-kit.com/live/piece/finance-budget-cards?piece=finance-budget-cards

## Install

```bash
agentic-ui add finance-budget-cards
npx shadcn@4.17.0 add @agentic-ui/finance-budget-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** budget-progress, over-budget-status
- **Intents:** track-status
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** budget-progress, over-budget-status
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Envelope pacing list; linear bars clamp at 100 while copy states the amount to go or over plan; zero budget is guarded.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Used in:** Fundwell Finance Tracker (template)
- **Registry dependencies:** lib-finance-tracker-utils


### Finance KPI Stats Cards

Four accent-bar metric cards (currency, percent or custom format) with a trend pill and comparison caption; responsive one/two/four-column grid.

- id: `finance-kpi-stats-cards`
- Page: https://agentic-ui-kit.com/components/finance-kpi-stats-cards
- Live preview: https://agentic-ui-kit.com/live/piece/finance-kpi-stats-cards?piece=finance-kpi-stats-cards

## Install

```bash
agentic-ui add finance-kpi-stats-cards
npx shadcn@4.17.0 add @agentic-ui/finance-kpi-stats-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** metric-summary, trend-indicators
- **Intents:** track-status
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** metric-summary, trend-indicators
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Four accent-bar metric cards (currency, percent or custom format) with a trend pill and comparison caption; responsive one/two/four-column grid.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **npm dependencies:** lucide-react
- **Used in:** Fundwell Finance Tracker (template), Analytics (blueprint), Clinic Operations (blueprint), Fintech Trading (analytics live) (blueprint), Marketing Analytics (blueprint), Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-finance-tracker-utils


### Finance Spending Composition

Stacked share strip plus a legend grid with amounts and percentages; the strip carries an aria-label and the legend is the textual alternative.

- id: `finance-spending-composition`
- Page: https://agentic-ui-kit.com/components/finance-spending-composition
- Live preview: https://agentic-ui-kit.com/live/piece/finance-spending-composition?piece=finance-spending-composition

## Install

```bash
agentic-ui add finance-spending-composition
npx shadcn@4.17.0 add @agentic-ui/finance-spending-composition
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** composition, tooltip
- **Intents:** show-composition
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** composition, tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Stacked share strip plus a legend grid with amounts and percentages; the strip carries an aria-label and the legend is the textual alternative.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** recharts
- **Used in:** Fundwell Finance Tracker (template), Analytics (blueprint), Fintech Trading (analytics live) (blueprint), Marketing Analytics (blueprint)
- **Registry dependencies:** lib-finance-tracker-utils


### Finance Theme Toggle

Compact next-themes light/dark control; capture represents its resting state.

- id: `finance-theme-toggle`
- Page: https://agentic-ui-kit.com/components/finance-theme-toggle
- Live preview: https://agentic-ui-kit.com/live/piece/finance-theme-toggle?piece=finance-theme-toggle

## Install

```bash
agentic-ui add finance-theme-toggle
npx shadcn@4.17.0 add @agentic-ui/finance-theme-toggle
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** theme-toggle
- **Intents:** configure
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** theme-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Compact next-themes light/dark control; capture represents its resting state.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react, next-themes
- **Used in:** Fundwell Finance Tracker (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6
- **Registry dependencies:** ui-finance-tracker-button


### Flightops Operations KPI Cards

Seats flown today, disrupted flights, departure punctuality and fleet availability.

- id: `flightops-operations-kpi-cards`
- Page: https://agentic-ui-kit.com/components/flightops-operations-kpi-cards
- Live preview: https://agentic-ui-kit.com/live/piece/flightops-operations-kpi-cards?piece=flightops-operations-kpi-cards

## Install

```bash
agentic-ui add flightops-operations-kpi-cards
npx shadcn@4.17.0 add @agentic-ui/flightops-operations-kpi-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** metric-summary, delta-indicator, sparkline
- **Intents:** monitor-live
- **Suits domains:** aviation, operations, logistics, analytics, saas
- **Interaction:** hover
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Seats flown today, disrupted flights, departure punctuality and fleet availability.
- **Avoid when:** The metrics have no historical series or change to communicate.
- **Preserve when adapting:** metric-hierarchy, sparkline-grammar
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-flight-airports


### Flightops Region Traffic Distribution

Breakdown of today's station movements by market.

- id: `flightops-region-traffic-distribution`
- Page: https://agentic-ui-kit.com/components/flightops-region-traffic-distribution
- Live preview: https://agentic-ui-kit.com/live/piece/flightops-region-traffic-distribution?piece=flightops-region-traffic-distribution

## Install

```bash
agentic-ui add flightops-region-traffic-distribution
npx shadcn@4.17.0 add @agentic-ui/flightops-region-traffic-distribution
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** donut-share, legend, percentage-breakdown
- **Intents:** show-composition
- **Suits domains:** aviation, logistics, operations, analytics, ecommerce
- **Interaction:** hover
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Breakdown of today's station movements by market.
- **Avoid when:** There is a single category or the relevant comparison is temporal.
- **Preserve when adapting:** composition-grammar, legend-pairing
- **Replace when adapting:** domain-copy, mock-data, category-labels
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** recharts
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** recharts@3.8.1, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-chart, ui-flight-airports


### Knowledge Page Cover Picker

Cover picker for a document page.

- id: `knowledge-page-cover-picker`
- Page: https://agentic-ui-kit.com/components/knowledge-page-cover-picker
- Live preview: https://agentic-ui-kit.com/live/fixture/knowledge-page-cover-picker?activate=button&piece=knowledge-page-cover-picker

## Install

```bash
agentic-ui add knowledge-page-cover-picker
npx shadcn@4.17.0 add @agentic-ui/knowledge-page-cover-picker
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** gradient-preset-gallery, image-upload-data-url, drag-and-drop-upload, remove-cover
- **Intents:** create-edit, configure
- **Suits domains:** knowledge, notes, project-management, personal-productivity, saas
- **Interaction:** select-preset, upload-image, remove
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Cover picker for a document page, Customizable header for a space or project
- **Avoid when:** Products that require cover images with cropping or a managed CDN
- **Preserve when adapting:** preset-gallery, upload-tab, remove-action
- **Replace when adapting:** cover-presets
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** button, popover
- **npm dependencies:** lucide-react
- **Used in:** Pagewell Team Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-team-workspace-utils, ui-button, ui-popover


### Marine Championship Standings

Championship standings.

- id: `marine-championship-standings`
- Page: https://agentic-ui-kit.com/components/marine-championship-standings
- Live preview: https://agentic-ui-kit.com/live/template/regatta-ops/standings?piece=marine-championship-standings

## Install

```bash
agentic-ui add marine-championship-standings
npx shadcn@4.17.0 add @agentic-ui/marine-championship-standings
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** podium-showcase, ranked-table, points-bar, scoring-legend
- **Intents:** track-status, compare-over-time
- **Suits domains:** marine, analytics, saas, crm, education, hr
- **Interaction:** navigate-to-detail
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Championship standings, Salesperson ranking with a podium, Leaderboard of a gamification program
- **Avoid when:** Fewer than 4 participants, Column sorting is required
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** avatar, badge, button
- **npm dependencies:** zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-regatta-ops-utils, marine-standings-table, ui-avatar


### Marine Fleet Directory

Directory of a vehicle or aircraft fleet.

- id: `marine-fleet-directory`
- Page: https://agentic-ui-kit.com/components/marine-fleet-directory
- Live preview: https://agentic-ui-kit.com/live/template/regatta-ops/fleet?piece=marine-fleet-directory

## Install

```bash
agentic-ui add marine-fleet-directory
npx shadcn@4.17.0 add @agentic-ui/marine-fleet-directory
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** grid-list-toggle, class-filter, sort, search, entity-cards, empty-state
- **Intents:** manage-collection, explore-detail
- **Suits domains:** marine, aviation, logistics, ecommerce, crm, operations
- **Interaction:** view-toggle, faceted-filter, sort, search, select-entity
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Directory of a vehicle or aircraft fleet, Asset catalog with a grid/list view, Customer directory with a profile card
- **Avoid when:** Bulk editing is needed, More than ~200 items without virtualization
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** dropdown-menu, button, badge, avatar
- **npm dependencies:** zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-regatta-ops-utils, marine-yacht-card, ui-avatar, ui-badge, ui-button, ui-dropdown-menu


### Marine Upcoming Starts

Next warning signals of a sailing circuit.

- id: `marine-upcoming-starts`
- Page: https://agentic-ui-kit.com/components/marine-upcoming-starts
- Live preview: https://agentic-ui-kit.com/live/piece/marine-upcoming-starts?piece=marine-upcoming-starts

## Install

```bash
agentic-ui add marine-upcoming-starts
npx shadcn@4.17.0 add @agentic-ui/marine-upcoming-starts
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** date-chip, countdown-badge, select-to-pin, empty-state
- **Intents:** track-status, navigate
- **Suits domains:** marine, travel, operations, saas, education
- **Interaction:** select-entity, navigate-to-detail
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Next warning signals of a sailing circuit, Upcoming flights or trips, Upcoming webinars with a countdown
- **Avoid when:** More than 10 items, Events with no date
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** badge, button
- **npm dependencies:** zustand, date-fns
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-regatta-ops-utils, ui-badge, ui-button


### Music Studio App Sidebar

Media app navigation.

- id: `music-studio-app-sidebar`
- Page: https://agentic-ui-kit.com/components/music-studio-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/music-studio?piece=music-studio-app-sidebar

## Install

```bash
agentic-ui add music-studio-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/music-studio-app-sidebar
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** workspace-switcher, primary-nav, genre-shortcuts, featured-collaborators
- **Intents:** navigate
- **Suits domains:** music, media, saas, project-management, knowledge
- **Interaction:** navigation, collapse
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Media app navigation, Sidebar with shortcuts by category, Menu with a featured team
- **Avoid when:** Fewer than four destinations
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** sidebar, dropdown-menu, avatar, collapsible
- **npm dependencies:** next/image, next/link, lucide-react, zustand
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, music-studio-ui-sound-feedback, ui-avatar, ui-dropdown-menu, ui-sidebar


### Music Studio Now Playing Bar

Persistent player.

- id: `music-studio-now-playing-bar`
- Page: https://agentic-ui-kit.com/components/music-studio-now-playing-bar
- Live preview: https://agentic-ui-kit.com/live/piece/music-studio-now-playing-bar?piece=music-studio-now-playing-bar

## Install

```bash
agentic-ui add music-studio-now-playing-bar
npx shadcn@4.17.0 add @agentic-ui/music-studio-now-playing-bar
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** play-pause, prev-next, shuffle, repeat-modes, seek-slider, volume, like, panel-toggle
- **Intents:** monitor-live, configure
- **Suits domains:** music, media, education, ai-voice, social
- **Interaction:** play-pause, seek, volume, toggle
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Persistent player, Call recording controls, Audio lesson player
- **Avoid when:** There is no time-based media to play
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** slider, button, tooltip
- **npm dependencies:** zustand, lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, music-studio-now-playing-panel, music-studio-ui-sound-feedback, ui-button, ui-slider


### Music Studio Release Card

Scheduled release.

- id: `music-studio-release-card`
- Page: https://agentic-ui-kit.com/components/music-studio-release-card
- Live preview: https://agentic-ui-kit.com/live/template/music-studio?piece=music-studio-release-card

## Install

```bash
agentic-ui add music-studio-release-card
npx shadcn@4.17.0 add @agentic-ui/music-studio-release-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** cover, status-badge, type-badge, release-date, stream-count, presave-count, context-menu
- **Intents:** track-status
- **Suits domains:** music, marketing, ecommerce, media, books
- **Interaction:** click-to-play, menu
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Scheduled release, Campaign with a launch date, Book edition with pre-sale
- **Avoid when:** There is no publication date or status
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button, dropdown-menu
- **npm dependencies:** zustand, lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, music-studio-ui-sound-feedback, ui-badge, ui-button, ui-dropdown-menu


### Rare Books App Sidebar

Sidebar with a ranged taxonomy.

- id: `rare-books-app-sidebar`
- Page: https://agentic-ui-kit.com/components/rare-books-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/rare-books?piece=rare-books-app-sidebar

## Install

```bash
agentic-ui add rare-books-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/rare-books-app-sidebar
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** primary-nav, brand-block, era-taxonomy, era-filter-links, promo-card, offcanvas
- **Intents:** navigate
- **Suits domains:** books, knowledge, saas, operations
- **Interaction:** navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Sidebar with a ranged taxonomy, Archive or museum navigation
- **Avoid when:** More than one level of nesting
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** sidebar, button
- **npm dependencies:** lucide-react, next/link, next/navigation, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, ui-sidebar


### Rare Books Recent Acquisitions

Latest transactions.

- id: `rare-books-recent-acquisitions`
- Page: https://agentic-ui-kit.com/components/rare-books-recent-acquisitions
- Live preview: https://agentic-ui-kit.com/live/piece/rare-books-recent-acquisitions?piece=rare-books-recent-acquisitions

## Install

```bash
agentic-ui add rare-books-recent-acquisitions
npx shadcn@4.17.0 add @agentic-ui/rare-books-recent-acquisitions
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** recent-items, see-all-link, amount, counterparty
- **Intents:** audit-trail
- **Suits domains:** books, finance, ecommerce, crm, operations
- **Interaction:** navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Latest transactions, Recent orders, Recent account activity
- **Avoid when:** Real-time feed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **npm dependencies:** lucide-react, next/link, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils


### Rare Books Upcoming Exhibitions

Upcoming events.

- id: `rare-books-upcoming-exhibitions`
- Page: https://agentic-ui-kit.com/components/rare-books-upcoming-exhibitions
- Live preview: https://agentic-ui-kit.com/live/piece/rare-books-upcoming-exhibitions?piece=rare-books-upcoming-exhibitions

## Install

```bash
agentic-ui add rare-books-upcoming-exhibitions
npx shadcn@4.17.0 add @agentic-ui/rare-books-upcoming-exhibitions
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** date-badge, status, see-all-link
- **Intents:** track-status
- **Suits domains:** books, operations, travel, saas, personal-productivity
- **Interaction:** navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Upcoming events, Scheduled deliveries, Upcoming renewals
- **Avoid when:** Agenda with times and overlaps
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **npm dependencies:** lucide-react, next/link, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils


### Social Client Activity View

Social activity inbox.

- id: `social-client-activity-view`
- Page: https://agentic-ui-kit.com/components/social-client-activity-view
- Live preview: https://agentic-ui-kit.com/live/template/social-client/activity?piece=social-client-activity-view

## Install

```bash
agentic-ui add social-client-activity-view
npx shadcn@4.17.0 add @agentic-ui/social-client-activity-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** notification-filtering, event-aggregation, actor-grouping, unread-tracking
- **Intents:** audit-trail, track-status, communicate
- **Suits domains:** social, project-management, devtools, saas, knowledge
- **Interaction:** tab-filter, actor-link-click, mark-as-read
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Social activity inbox, History of mentions and reactions, User interaction log
- **Avoid when:** Strict security auditing with no human UI, Views with no human actors
- **Preserve when adapting:** tabs-structure, event-badge-styling, item-grouping
- **Replace when adapting:** event-kinds, mock-actors, action-labels
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, button, scroll-area, tabs
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, ui-avatar, ui-button, ui-tabs


### Social Client Composer

New post modal.

- id: `social-client-composer`
- Page: https://agentic-ui-kit.com/components/social-client-composer
- Live preview: https://agentic-ui-kit.com/live/fixture/social-client-composer?piece=social-client-composer

## Install

```bash
agentic-ui add social-client-composer
npx shadcn@4.17.0 add @agentic-ui/social-client-composer
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** modal-dialog, media-attachment-trigger, audience-selector, quote-mode, character-limit
- **Intents:** create-edit, communicate
- **Suits domains:** social, support, knowledge, project-management, saas
- **Interaction:** type-text, attach-media, change-audience, submit
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** New post modal, Reply or feedback composer, Quick update form
- **Avoid when:** Complex multi-page forms or wizards
- **Preserve when adapting:** dialog-wrapper, avatar-and-input-flow, bottom-toolbar
- **Replace when adapting:** audience-options, publish-handler, attachment-types
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, button, dialog, dropdown-menu, textarea
- **npm dependencies:** lucide-react
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, ui-avatar, ui-button, ui-dialog, ui-dropdown-menu, ui-textarea


### Social Client Ephemeral View

Ephemeral team stories or statuses.

- id: `social-client-ephemeral-view`
- Page: https://agentic-ui-kit.com/components/social-client-ephemeral-view
- Live preview: https://agentic-ui-kit.com/live/template/social-client/ephemeral?piece=social-client-ephemeral-view

## Install

```bash
agentic-ui add social-client-ephemeral-view
npx shadcn@4.17.0 add @agentic-ui/social-client-ephemeral-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** expiring-content-feed, countdown-indicators, quick-reactions, story-composer-link
- **Intents:** communicate, track-status
- **Suits domains:** social, media, marketing, personal-productivity, operations
- **Interaction:** scroll, reply, react
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Ephemeral team stories or statuses, Temporary operations notices, Flash product updates
- **Avoid when:** Permanent document archives or accounting records
- **Preserve when adapting:** countdown-visuals, ephemeral-card-flow, quick-response
- **Replace when adapting:** mock-ephemeral-posts, expiration-durations
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, button, scroll-area
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, ui-avatar, ui-dropdown-menu


### Social Client Feed View

For You or Following thread timeline.

- id: `social-client-feed-view`
- Page: https://agentic-ui-kit.com/components/social-client-feed-view
- Live preview: https://agentic-ui-kit.com/live/template/social-client/following?piece=social-client-feed-view

## Install

```bash
agentic-ui add social-client-feed-view
npx shadcn@4.17.0 add @agentic-ui/social-client-feed-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** timeline-feed, real-time-poll, filter-tabs, infinite-scroll-ready
- **Intents:** track-status, explore-detail
- **Suits domains:** social, media, personal-productivity, knowledge, saas
- **Interaction:** scroll, like-toggle, repost-action, share-menu
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** For You or Following thread timeline, Team announcements wall, Product news feed
- **Avoid when:** Management of massive tabular data, Environments without streaming content
- **Preserve when adapting:** thread-card-hierarchy, inline-actions, timeline-styling
- **Replace when adapting:** mock-threads, semantic-colors, author-avatars
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, button, scroll-area
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, social-client-ephemeral-strip, social-client-inline-composer, social-client-thread-card


### Social Client Profile View

User profile in a social network or intranet.

- id: `social-client-profile-view`
- Page: https://agentic-ui-kit.com/components/social-client-profile-view
- Live preview: https://agentic-ui-kit.com/live/template/social-client/profile?piece=social-client-profile-view

## Install

```bash
agentic-ui add social-client-profile-view
npx shadcn@4.17.0 add @agentic-ui/social-client-profile-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** profile-hero, tabbed-content, metrics-counter, external-links
- **Intents:** explore-detail, manage-collection
- **Suits domains:** social, crm, hr, personal-productivity, saas
- **Interaction:** tab-switch, follow-toggle, share-profile
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** User profile in a social network or intranet, Author or creator page, Public team member record
- **Avoid when:** Company profiles with multiple branches that require maps
- **Preserve when adapting:** header-layout, tabs-navigation, feed-integration
- **Replace when adapting:** user-data, profile-tabs-labels, metadata-fields
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, button, dropdown-menu, scroll-area, tabs
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, social-client-inline-composer, social-client-profile-header, social-client-thread-card, ui-tabs


### Social Client Saved View

List of posts saved to read later.

- id: `social-client-saved-view`
- Page: https://agentic-ui-kit.com/components/social-client-saved-view
- Live preview: https://agentic-ui-kit.com/live/template/social-client/saved?piece=social-client-saved-view

## Install

```bash
agentic-ui add social-client-saved-view
npx shadcn@4.17.0 add @agentic-ui/social-client-saved-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** bookmark-listing, collection-empty-state, quick-unsave, thread-jump
- **Intents:** manage-collection, explore-detail
- **Suits domains:** social, knowledge, media, personal-productivity, saas
- **Interaction:** unsave, open-thread, filter
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** List of posts saved to read later, Content favorites, Pinned articles
- **Avoid when:** Systems with a deep folder hierarchy and no tags
- **Preserve when adapting:** empty-state-handling, thread-card-integration, list-layout
- **Replace when adapting:** copy, mock-saved-items, icons
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, button, scroll-area
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, social-client-thread-card


### Social Client Search View

Explore page for trends and users.

- id: `social-client-search-view`
- Page: https://agentic-ui-kit.com/components/social-client-search-view
- Live preview: https://agentic-ui-kit.com/live/template/social-client/search?piece=social-client-search-view

## Install

```bash
agentic-ui add social-client-search-view
npx shadcn@4.17.0 add @agentic-ui/social-client-search-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** instant-search, trending-topics, user-suggestions, category-filter
- **Intents:** explore-detail, navigate
- **Suits domains:** social, media, knowledge, crm, saas
- **Interaction:** type-query, click-tag, follow-user
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Explore page for trends and users, Community profile finder, Directory with trends
- **Avoid when:** Complex relational SQL searches with no text search
- **Preserve when adapting:** search-input-affordance, tags-chip-cloud, user-recommendations
- **Replace when adapting:** trending-keywords, mock-users, categories
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, button, input, scroll-area, tabs
- **npm dependencies:** lucide-react
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, ui-avatar, ui-button, ui-input, ui-tabs


### Social Client Stats View

Creator statistics panel.

- id: `social-client-stats-view`
- Page: https://agentic-ui-kit.com/components/social-client-stats-view
- Live preview: https://agentic-ui-kit.com/live/template/social-client/stats?piece=social-client-stats-view

## Install

```bash
agentic-ui add social-client-stats-view
npx shadcn@4.17.0 add @agentic-ui/social-client-stats-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-grid, interactive-chart, range-picker, top-performing-content
- **Intents:** compare-over-time, track-status
- **Suits domains:** social, analytics, marketing, saas, devops-status
- **Interaction:** range-selection, tab-switch, content-click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Creator statistics panel, Engagement metrics dashboard, Weekly reach summary
- **Avoid when:** Financial reports that need heavy CSV export
- **Preserve when adapting:** kpi-cards-grid, chart-integration, ranking-list
- **Replace when adapting:** metrics-keys, mock-series, date-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** button, tabs
- **npm dependencies:** lucide-react
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, social-client-stat-card, social-client-stats-chart, ui-tabs


### Social Client Thread Detail View

Full Twitter/Threads-style thread conversation.

- id: `social-client-thread-detail-view`
- Page: https://agentic-ui-kit.com/components/social-client-thread-detail-view
- Live preview: https://agentic-ui-kit.com/live/template/social-client/thread/t-9?piece=social-client-thread-detail-view

## Install

```bash
agentic-ui add social-client-thread-detail-view
npx shadcn@4.17.0 add @agentic-ui/social-client-thread-detail-view
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** conversation-tree, parent-context, nested-replies, inline-reply-box
- **Intents:** communicate, explore-detail
- **Suits domains:** social, support, knowledge, crm, saas
- **Interaction:** reply, quote, share, navigate-parent
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Full Twitter/Threads-style thread conversation, Ticket or issue discussion, Document comment chain
- **Avoid when:** Bidirectional WebSocket-style real-time chat without threads
- **Preserve when adapting:** thread-line-connector, reply-hierarchy, detail-card-layout
- **Replace when adapting:** mock-thread-tree, author-meta, action-handlers
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.9/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, button, dropdown-menu, scroll-area
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, social-client-inline-composer, social-client-thread-card, ui-button, ui-dropdown-menu


### Devtools Manage Collection Notifications

Inbox rows distinguish read state and source while supporting filtering.

- id: `devtools-manage-collection-notifications`
- Page: https://agentic-ui-kit.com/components/devtools-manage-collection-notifications
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/notifications?piece=devtools-manage-collection-notifications

## Install

```bash
agentic-ui add devtools-manage-collection-notifications
npx shadcn@4.17.0 add @agentic-ui/devtools-manage-collection-notifications
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** notification-filter, read-state, grouping
- **Intents:** manage-collection
- **Suits domains:** devtools, support, social, operations
- **Interaction:** notification-filter, read-state, grouping
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Inbox rows distinguish read state and source while supporting filtering.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, notification-filter, read-state
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.85/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** input, scroll-area
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, ui-input, ui-scroll-area


### Ecommerce Sales Dashboard Radar Mix

Multi-dimensional sales profile (radar).

- id: `ecommerce-sales-dashboard-radar-mix`
- Page: https://agentic-ui-kit.com/components/ecommerce-sales-dashboard-radar-mix
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/dashboard-7?piece=ecommerce-sales-dashboard-radar-mix

## Install

```bash
agentic-ui add ecommerce-sales-dashboard-radar-mix
npx shadcn@4.17.0 add @agentic-ui/ecommerce-sales-dashboard-radar-mix
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, radar-chart, pie-chart, area-chart, data-table
- **Intents:** compare-over-time, show-composition
- **Suits domains:** ecommerce, analytics, marketing, saas
- **Interaction:** tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** multi-dimensional sales profile (radar), channel mix with a pie chart
- **Avoid when:** audiences with strict accessibility requirements
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-card-grid
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** sidebar, card, chart, table
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-images-block-avatar-1-webp, asset-admin-kit-logo-black-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-chart, ui-admin-kit-collapsible, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-sidebar, ui-block-tooltip, ui-table


### Music Studio Session Mini Card

Session in progress on the home.

- id: `music-studio-session-mini-card`
- Page: https://agentic-ui-kit.com/components/music-studio-session-mini-card
- Live preview: https://agentic-ui-kit.com/live/template/music-studio?piece=music-studio-session-mini-card

## Install

```bash
agentic-ui add music-studio-session-mini-card
npx shadcn@4.17.0 add @agentic-ui/music-studio-session-mini-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** cover-gradient, status-label, progress, collaborator-avatars
- **Intents:** track-status
- **Suits domains:** music, project-management, media, saas
- **Interaction:** click
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Session in progress on the home, Recent project, Pending draft
- **Avoid when:** Edit actions on the card are needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.85/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, progress
- **npm dependencies:** zustand, lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** music-studio-ui-sound-feedback, ui-avatar, ui-badge, ui-progress


### Music Studio Studio Shell

Streaming app shell.

- id: `music-studio-studio-shell`
- Page: https://agentic-ui-kit.com/components/music-studio-studio-shell
- Live preview: https://agentic-ui-kit.com/live/template/music-studio?piece=music-studio-studio-shell

## Install

```bash
agentic-ui add music-studio-studio-shell
npx shadcn@4.17.0 add @agentic-ui/music-studio-studio-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sidebar, sticky-header, right-dock, bottom-player, mobile-sheet
- **Intents:** navigate
- **Suits domains:** music, media, saas, social, education
- **Interaction:** sidebar-toggle, dock-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Streaming app shell, Console with a persistent player, Workspace with a side detail panel
- **Avoid when:** The app has no playable content or persistent panel
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** sidebar, tooltip, sheet
- **npm dependencies:** zustand
- **Used in:** Tonehall Music Studio (template)
- **Registry dependencies:** music-studio-app-header, music-studio-app-sidebar, music-studio-now-playing-bar, music-studio-now-playing-panel, music-studio-ui-sound-feedback, ui-sidebar, ui-tooltip


### Saas Audit Trail Activity Feed

Connected avatar rows and event icons show chronological activity.

- id: `saas-audit-trail-activity-feed`
- Page: https://agentic-ui-kit.com/components/saas-audit-trail-activity-feed
- Live preview: https://agentic-ui-kit.com/live/fixture/saas-audit-trail-activity-feed?piece=saas-audit-trail-activity-feed

## Install

```bash
agentic-ui add saas-audit-trail-activity-feed
npx shadcn@4.17.0 add @agentic-ui/saas-audit-trail-activity-feed
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** event-timeline, actor-avatar, event-icons
- **Intents:** audit-trail
- **Suits domains:** saas, devtools, support, project-management
- **Interaction:** event-timeline, actor-avatar, event-icons
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Connected avatar rows and event icons show chronological activity.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, event-timeline, actor-avatar
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.85/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, ui-avatar


### Settings Configure Profile

Settings sections organize profile identity and account preferences.

- id: `settings-configure-profile`
- Page: https://agentic-ui-kit.com/components/settings-configure-profile
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/settings?piece=settings-configure-profile

## Install

```bash
agentic-ui add settings-configure-profile
npx shadcn@4.17.0 add @agentic-ui/settings-configure-profile
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** profile-form, preference-controls, settings-navigation
- **Intents:** configure
- **Suits domains:** settings, saas, social, auth
- **Interaction:** profile-form, preference-controls, settings-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Settings sections organize profile identity and account preferences.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, profile-form, preference-controls
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.85/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, button, input, select, textarea
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, ui-avatar, ui-button, ui-input, ui-select, ui-textarea


### Social Communicate Comment Composer

Avatar, toolbar and action footer establish a recognizable discussion composer.

- id: `social-communicate-comment-composer`
- Page: https://agentic-ui-kit.com/components/social-communicate-comment-composer
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/issues/ines-carvalho/tidegauge/402?piece=social-communicate-comment-composer

## Install

```bash
agentic-ui add social-communicate-comment-composer
npx shadcn@4.17.0 add @agentic-ui/social-communicate-comment-composer
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** text-entry, formatting-toolbar, action-buttons
- **Intents:** communicate
- **Suits domains:** social, support, devtools, project-management
- **Interaction:** text-entry, formatting-toolbar, action-buttons
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Avatar, toolbar and action footer establish a recognizable discussion composer.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, text-entry, formatting-toolbar
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.85/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, textarea
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, ui-avatar, ui-textarea


### Travel Messages Inbox

Guest-host messaging with booking context.

- id: `travel-messages-inbox`
- Page: https://agentic-ui-kit.com/components/travel-messages-inbox
- Live preview: https://agentic-ui-kit.com/live/piece/travel-messages-inbox?piece=travel-messages-inbox

## Install

```bash
agentic-ui add travel-messages-inbox
npx shadcn@4.17.0 add @agentic-ui/travel-messages-inbox
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** inbox-list, thread-bubbles, system-pills, reservation-context-panel, message-composer
- **Intents:** communicate
- **Suits domains:** travel, social, crm, saas
- **Interaction:** thread, composer, list-detail
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** guest-host messaging with booking context, support inbox with an order panel, CRM chat with a side contact record
- **Avoid when:** real-time communication with presence, forum-style public channels
- **Preserve when adapting:** three-pane-layout, context-panel-pattern, system-pill-messages
- **Replace when adapting:** message-model, context-entity, send-action
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.85/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, input, scroll-area, separator
- **npm dependencies:** zustand, date-fns, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template), Marketplace (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-avatar, ui-button, ui-input, ui-separator


### Travel Service Detail

Service detail with packages.

- id: `travel-service-detail`
- Page: https://agentic-ui-kit.com/components/travel-service-detail
- Live preview: https://agentic-ui-kit.com/live/template/travel-marketplace/services/svc-home-cook?piece=travel-service-detail

## Install

```bash
agentic-ui add travel-service-detail
npx shadcn@4.17.0 add @agentic-ui/travel-service-detail
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sticky-hero, provider-avatar-overlap, package-tier-selection, reviews-section, qualifications-panel, contact-cta
- **Intents:** explore-detail, execute-flow
- **Suits domains:** travel, saas, operations, billing
- **Interaction:** tier-selection, navigate
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** service detail with packages, plan page with price tiers, provider record with credentials
- **Avoid when:** products without tiers, content without a transactional CTA
- **Preserve when adapting:** hero-plus-price-card, tier-selection-pattern
- **Replace when adapting:** tier-definitions, provider-fields, cta-action
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.85/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, separator
- **npm dependencies:** lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-avatar, ui-button, ui-separator


### Culinary Difficulty Breakdown

Issues by severity.

- id: `culinary-difficulty-breakdown`
- Page: https://agentic-ui-kit.com/components/culinary-difficulty-breakdown
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-difficulty-breakdown?piece=culinary-difficulty-breakdown

## Install

```bash
agentic-ui add culinary-difficulty-breakdown
npx shadcn@4.17.0 add @agentic-ui/culinary-difficulty-breakdown
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** stacked-proportion-bar, percent-legend, ordinal-scale
- **Intents:** show-composition
- **Suits domains:** culinary, project-management, devtools, operations, education
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Issues by severity, Tasks by priority, Students by level
- **Avoid when:** More than 4 levels, The categories are not ordinal
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.8/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 6/10, code 8/10
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** lib-utils


### Culinary Popular Tags

Most used tags.

- id: `culinary-popular-tags`
- Page: https://agentic-ui-kit.com/components/culinary-popular-tags
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-popular-tags?piece=culinary-popular-tags

## Install

```bash
agentic-ui add culinary-popular-tags
npx shadcn@4.17.0 add @agentic-ui/culinary-popular-tags
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** tag-counts, top-n-limit, range-aware, fallback-dataset
- **Intents:** show-composition
- **Suits domains:** culinary, knowledge, notes, ecommerce, social
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Most used tags, Trending hashtags, Popular product categories
- **Avoid when:** Tags must filter when clicked (it does not)
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.8/10
- **Quality breakdown:** visual 7/10, responsive 9/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** ui-badge


### Flightops Live Traffic Map Card

Compact air traffic view embedded in a dashboard.

- id: `flightops-live-traffic-map-card`
- Page: https://agentic-ui-kit.com/components/flightops-live-traffic-map-card
- Live preview: https://agentic-ui-kit.com/live/piece/flightops-live-traffic-map-card?piece=flightops-live-traffic-map-card

## Install

```bash
agentic-ui add flightops-live-traffic-map-card
npx shadcn@4.17.0 add @agentic-ui/flightops-live-traffic-map-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-overlay, region-filter, hubs-filter, deeplink
- **Intents:** monitor-live
- **Suits domains:** aviation, maps-ops, logistics, travel
- **Interaction:** filter-region, toggle-hubs, pan-zoom
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Compact air traffic view embedded in a dashboard.
- **Avoid when:** There are no routes or coordinates to represent.
- **Preserve when adapting:** map-interaction-model, route-rendering
- **Replace when adapting:** domain-copy, mock-data, map-style
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.8/10
- **Quality breakdown:** visual 9/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** dropdown-menu, button, badge
- **npm dependencies:** maplibre-gl, @turf/great-circle
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, ui-badge, ui-button, ui-dropdown-menu, ui-flight, ui-flight-airports, ui-flight-ops-map


### Marine KPI Stats Cards

Sports season KPIs.

- id: `marine-kpi-stats-cards`
- Page: https://agentic-ui-kit.com/components/marine-kpi-stats-cards
- Live preview: https://agentic-ui-kit.com/live/piece/marine-kpi-stats-cards?piece=marine-kpi-stats-cards

## Install

```bash
agentic-ui add marine-kpi-stats-cards
npx shadcn@4.17.0 add @agentic-ui/marine-kpi-stats-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-strip, meter-bar, target-label, trend-hint
- **Intents:** track-status, compare-over-time
- **Suits domains:** marine, saas, finance, operations, analytics, ecommerce
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Sports season KPIs, MRR, customers and churn with a mini trend, Active and delivered orders
- **Avoid when:** More than 6 KPIs, A detailed time axis is needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.8/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 5/10, code 7/10
- **npm dependencies:** zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8


### Music Studio Now Playing Panel

Detail of the playing track.

- id: `music-studio-now-playing-panel`
- Page: https://agentic-ui-kit.com/components/music-studio-now-playing-panel
- Live preview: https://agentic-ui-kit.com/live/fixture/music-studio-now-playing-panel?piece=music-studio-now-playing-panel

## Install

```bash
agentic-ui add music-studio-now-playing-panel
npx shadcn@4.17.0 add @agentic-ui/music-studio-now-playing-panel
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** cover-art, track-meta, stats, artist-card, release-context, dock-and-sheet
- **Intents:** explore-detail
- **Suits domains:** music, media, ecommerce, social, books
- **Interaction:** close, expand, like, share
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Detail of the playing track, Side product record, Author profile panel
- **Avoid when:** The detail needs extensive editing
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.8/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** sheet, button, avatar, badge
- **npm dependencies:** zustand, lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** lucide-react@0.577.0, usehooks-ts@^3.1.1, zustand@5.0.8
- **Registry dependencies:** music-studio-ui-sound-feedback, ui-avatar, ui-badge, ui-button, ui-dropdown-menu, ui-sheet


### Payments Customer Detail Minimal

Customer side panel within a larger flow.

- id: `payments-customer-detail-minimal`
- Page: https://agentic-ui-kit.com/components/payments-customer-detail-minimal
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/customer-detail-3?piece=payments-customer-detail-minimal

## Install

```bash
agentic-ui add payments-customer-detail-minimal
npx shadcn@4.17.0 add @agentic-ui/payments-customer-detail-minimal
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** minimal-profile, key-facts, action-menu
- **Intents:** explore-detail, track-status
- **Suits domains:** payments, crm, billing, support
- **Interaction:** tabs, row-actions
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** customer side panel within a larger flow
- **Avoid when:** entities with no associated history
- **Preserve when adapting:** profile-header, history-tabs, related-records-layout
- **Replace when adapting:** domain-copy, fields, related-entities, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 7.8/10
- **Quality breakdown:** visual 7/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, button, card, separator
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-separator


### Payments Subscription List Compact

Quick review of the day's renewals.

- id: `payments-subscription-list-compact`
- Page: https://agentic-ui-kit.com/components/payments-subscription-list-compact
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/subscriptions-3?piece=payments-subscription-list-compact

## Install

```bash
agentic-ui add payments-subscription-list-compact
npx shadcn@4.17.0 add @agentic-ui/payments-subscription-list-compact
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** compact-rows, inline-status, quick-actions
- **Intents:** manage-collection, track-status
- **Suits domains:** payments, billing, saas, finance
- **Interaction:** filtering, row-actions, sorting
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** quick review of the day's renewals
- **Avoid when:** one-off charges without recurrence
- **Preserve when adapting:** subscription-lifecycle-badges, plan-column-grammar
- **Replace when adapting:** domain-copy, plan-names, status-values, mock-data
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 7.8/10
- **Quality breakdown:** visual 7/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** input, select
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-input, ui-admin-kit-select


### Payments Workflow Builder

Defining payment routing and retry rules.

- id: `payments-workflow-builder`
- Page: https://agentic-ui-kit.com/components/payments-workflow-builder
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/payment-processor/payment-workflow?piece=payments-workflow-builder

## Install

```bash
agentic-ui add payments-workflow-builder
npx shadcn@4.17.0 add @agentic-ui/payments-workflow-builder
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** node-graph, drag-nodes, edge-editing, node-palette
- **Intents:** configure, execute-flow
- **Suits domains:** payments, operations, devtools
- **Interaction:** drag-drop, canvas-pan-zoom
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** defining payment routing and retry rules
- **Avoid when:** simple one-step configuration, keyboard users as the primary audience
- **Preserve when adapting:** node-edge-model, palette-canvas-sync
- **Replace when adapting:** domain-copy, node-types, mock-data
- **Adaptation effort:** high
- **Coupling:** low
- **Quality score:** 7.8/10
- **Quality breakdown:** visual 9/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button, checkbox
- **npm dependencies:** @xyflow/react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @xyflow/react@^12.10.2, lucide-react@0.577.0, next-themes@0.4.6
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-checkbox


### Culinary Activity Feed

Team activity in a project.

- id: `culinary-activity-feed`
- Page: https://agentic-ui-kit.com/components/culinary-activity-feed
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-activity-feed?piece=culinary-activity-feed

## Install

```bash
agentic-ui add culinary-activity-feed
npx shadcn@4.17.0 add @agentic-ui/culinary-activity-feed
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** actor-avatar, action-verb-icons, relative-time, range-filtered, empty-state, event-count
- **Intents:** audit-trail, communicate
- **Suits domains:** culinary, project-management, crm, file-storage, saas
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Team activity in a project, Change history of a CRM, User action log
- **Avoid when:** Filters by actor or type are needed, High event volume without pagination
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** avatar
- **npm dependencies:** lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-avatar


### Culinary Recent Recipes Widget

Recent files.

- id: `culinary-recent-recipes-widget`
- Page: https://agentic-ui-kit.com/components/culinary-recent-recipes-widget
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-recent-recipes-widget?piece=culinary-recent-recipes-widget

## Install

```bash
agentic-ui add culinary-recent-recipes-widget
npx shadcn@4.17.0 add @agentic-ui/culinary-recent-recipes-widget
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** recent-items, meta-badges, view-all-link
- **Intents:** navigate, track-status
- **Suits domains:** culinary, file-storage, notes, ecommerce, crm
- **Interaction:** deep-link
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Recent files, Recent orders, Viewed contacts
- **Avoid when:** A per-row action is needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** badge
- **npm dependencies:** next/link, lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8


### File Storage Drive Browser

File explorer with filters by type.

- id: `file-storage-drive-browser`
- Page: https://agentic-ui-kit.com/components/file-storage-drive-browser
- Live preview: https://agentic-ui-kit.com/live/piece/file-storage-drive-browser?piece=file-storage-drive-browser

## Install

```bash
agentic-ui add file-storage-drive-browser
npx shadcn@4.17.0 add @agentic-ui/file-storage-drive-browser
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** type-filtering, sorting, quick-filters, folder-navigation, storage-summary
- **Intents:** manage-collection, explore-detail
- **Suits domains:** file-storage, media, ecommerce, operations, knowledge
- **Interaction:** type-filtering, sorting, quick-filters
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** File explorer with filters by type, Marketing asset manager, Filterable media library
- **Avoid when:** The dataset does not support facets, Fewer than ten items with no need for filters
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, badge, dropdown-menu, separator, progress
- **npm dependencies:** lucide-react
- **Used in:** Stashbox File Storage (template), Knowledge Workspace (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** file-storage-file-list, lib-file-storage-utils, ui-badge, ui-button, ui-dropdown-menu, ui-progress, ui-separator


### Knowledge Page Icon Picker

Emoji icon picker for a page.

- id: `knowledge-page-icon-picker`
- Page: https://agentic-ui-kit.com/components/knowledge-page-icon-picker
- Live preview: https://agentic-ui-kit.com/live/fixture/knowledge-page-icon-picker?activate=button&piece=knowledge-page-icon-picker

## Install

```bash
agentic-ui add knowledge-page-icon-picker
npx shadcn@4.17.0 add @agentic-ui/knowledge-page-icon-picker
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** emoji-category-grid, category-filter, random-pick, remove-icon
- **Intents:** create-edit, configure
- **Suits domains:** knowledge, notes, project-management, personal-productivity, saas
- **Interaction:** filter, select-emoji, random-pick
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Emoji icon picker for a page, Icon for a space, project or collection
- **Avoid when:** Products that need emoji search by name or their own icon set
- **Preserve when adapting:** category-grid, random-action
- **Replace when adapting:** emoji-seed, tab-labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 7/10
- **Uses primitives:** button, input, popover
- **npm dependencies:** lucide-react
- **Used in:** Pagewell Team Workspace (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** ui-button, ui-input, ui-popover


### Knowledge Workspace Sidebar Nav

Navigation sidebar for nested documents.

- id: `knowledge-workspace-sidebar-nav`
- Page: https://agentic-ui-kit.com/components/knowledge-workspace-sidebar-nav
- Live preview: https://agentic-ui-kit.com/live/template/team-workspace?piece=knowledge-workspace-sidebar-nav

## Install

```bash
agentic-ui add knowledge-workspace-sidebar-nav
npx shadcn@4.17.0 add @agentic-ui/knowledge-workspace-sidebar-nav
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Pagewell Team Workspace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** tree-navigation, favorites, teamspaces, drag-reorder, trash-access
- **Intents:** navigate, manage-collection
- **Suits domains:** knowledge, notes, file-storage, project-management, saas
- **Interaction:** expand-collapse, reorder, context-menu
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Navigation sidebar for nested documents, Team space explorer with favorites
- **Avoid when:** Single-view apps with no content hierarchy
- **Preserve when adapting:** tree-hierarchy, teamspace-grouping
- **Replace when adapting:** page-titles, workspace-branding
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** tooltip, avatar, button, sidebar, dropdown-menu
- **npm dependencies:** @dnd-kit/utilities, lucide-react
- **Used in:** Pagewell Team Workspace (template)
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, @dnd-kit/sortable@10.0.0, @dnd-kit/utilities@3.2.2, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** knowledge-document-page-menu, knowledge-quick-search-command-palette, knowledge-workspace-settings-dialog, lib-team-workspace-utils, ui-avatar, ui-button, ui-collapsible, ui-dropdown-menu, ui-sidebar, ui-tooltip


### Marine Class Distribution

Entry mix by boat class.

- id: `marine-class-distribution`
- Page: https://agentic-ui-kit.com/components/marine-class-distribution
- Live preview: https://agentic-ui-kit.com/live/piece/marine-class-distribution?piece=marine-class-distribution

## Install

```bash
agentic-ui add marine-class-distribution
npx shadcn@4.17.0 add @agentic-ui/marine-class-distribution
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** donut-chart, center-total, legend-list, sorted-categories
- **Intents:** show-composition
- **Suits domains:** marine, analytics, ecommerce, saas, operations, file-storage
- **Interaction:** tooltip
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Entry mix by boat class, Storage usage by type, Orders by channel
- **Avoid when:** More than 8 categories, Time series
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **npm dependencies:** zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** zustand@5.0.8


### Music Studio Session Card

Production session with progress.

- id: `music-studio-session-card`
- Page: https://agentic-ui-kit.com/components/music-studio-session-card
- Live preview: https://agentic-ui-kit.com/live/template/music-studio/sessions?piece=music-studio-session-card

## Install

```bash
agentic-ui add music-studio-session-card
npx shadcn@4.17.0 add @agentic-ui/music-studio-session-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-badge, genre-badge, pin, progress-bump, collaborator-avatars, context-menu
- **Intents:** track-status
- **Suits domains:** music, project-management, operations, saas, marketing
- **Interaction:** pin, menu
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Production session with progress, Task with phase and owners, Agency order in progress
- **Avoid when:** There is no measurable progress
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** badge, button, progress, dropdown-menu, avatar
- **npm dependencies:** zustand, lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, music-studio-ui-sound-feedback, ui-avatar, ui-badge, ui-button, ui-dropdown-menu, ui-progress


### Music Studio UI Sound Feedback

Sound feedback for clicks and navigation.

- id: `music-studio-ui-sound-feedback`
- Page: https://agentic-ui-kit.com/components/music-studio-ui-sound-feedback
- Live preview: https://agentic-ui-kit.com/live/fixture/music-studio-ui-sound-feedback?piece=music-studio-ui-sound-feedback

## Install

```bash
agentic-ui add music-studio-ui-sound-feedback
npx shadcn@4.17.0 add @agentic-ui/music-studio-ui-sound-feedback
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** semantic-sound-events, global-mute, master-volume, throttled-tick, audio-unlock
- **Intents:** configure
- **Suits domains:** music, media, saas, education, ecommerce
- **Interaction:** toggle
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Sound feedback for clicks and navigation, Game sounds in onboarding, Audible confirmation at a POS
- **Avoid when:** Office environments where sound is a nuisance by default
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 7/10, responsive 8/10, accessibility 6/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** zustand
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** zustand@5.0.8


### Rare Books Acquisition Row

Purchase/sale transaction with a counterparty.

- id: `rare-books-acquisition-row`
- Page: https://agentic-ui-kit.com/components/rare-books-acquisition-row
- Live preview: https://agentic-ui-kit.com/live/template/rare-books/acquisitions?piece=rare-books-acquisition-row

## Install

```bash
agentic-ui add rare-books-acquisition-row
npx shadcn@4.17.0 add @agentic-ui/rare-books-acquisition-row
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** counterparty-avatar, transaction-type, amount, date, notes
- **Intents:** audit-trail
- **Suits domains:** books, finance, ecommerce, crm
- **Interaction:** hover
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Purchase/sale transaction with a counterparty, Account movement, Order history entry
- **Avoid when:** Tables with many comparable columns
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** badge
- **npm dependencies:** lucide-react, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, ui-badge


### Rare Books Condition Chart

Conservation status of the collection.

- id: `rare-books-condition-chart`
- Page: https://agentic-ui-kit.com/components/rare-books-condition-chart
- Live preview: https://agentic-ui-kit.com/live/piece/rare-books-condition-chart?piece=rare-books-condition-chart

## Install

```bash
agentic-ui add rare-books-condition-chart
npx shadcn@4.17.0 add @agentic-ui/rare-books-condition-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** radial-score, grade-breakdown, value-by-grade
- **Intents:** track-status, show-composition
- **Suits domains:** books, operations, ecommerce, saas, analytics
- **Interaction:** tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Conservation status of the collection, Fleet or asset health, Data quality by level
- **Avoid when:** More than one score being compared
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** recharts, lucide-react, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, ui-chart


### Rare Books Era Distribution

Distribution by period/category.

- id: `rare-books-era-distribution`
- Page: https://agentic-ui-kit.com/components/rare-books-era-distribution
- Live preview: https://agentic-ui-kit.com/live/piece/rare-books-era-distribution?piece=rare-books-era-distribution

## Install

```bash
agentic-ui add rare-books-era-distribution
npx shadcn@4.17.0 add @agentic-ui/rare-books-era-distribution
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** donut, center-label, dominant-callout, ranked-list, tooltip
- **Intents:** show-composition
- **Suits domains:** books, analytics, ecommerce, finance, wine
- **Interaction:** tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Distribution by period/category, Sales mix by family, Portfolio by asset class
- **Avoid when:** More than ~8 categories, Comparing compositions across periods
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** recharts, lucide-react, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, ui-chart


### Rare Books Exhibition Card

Exhibition or event card.

- id: `rare-books-exhibition-card`
- Page: https://agentic-ui-kit.com/components/rare-books-exhibition-card
- Live preview: https://agentic-ui-kit.com/live/template/rare-books/exhibitions?piece=rare-books-exhibition-card

## Install

```bash
agentic-ui add rare-books-exhibition-card
npx shadcn@4.17.0 add @agentic-ui/rare-books-exhibition-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-badge, date-range, venue, linked-items, participant-avatars
- **Intents:** track-status, explore-detail
- **Suits domains:** books, travel, operations, saas, marketing
- **Interaction:** hover
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Exhibition or event card, Campaign with dates and owners, Trip with an itinerary
- **Avoid when:** Recurring events
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** avatar, badge
- **npm dependencies:** lucide-react, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, ui-avatar, ui-badge


### Rare Books Featured Volumes

Featured or pinned items.

- id: `rare-books-featured-volumes`
- Page: https://agentic-ui-kit.com/components/rare-books-featured-volumes
- Live preview: https://agentic-ui-kit.com/live/piece/rare-books-featured-volumes?piece=rare-books-featured-volumes

## Install

```bash
agentic-ui add rare-books-featured-volumes
npx shadcn@4.17.0 add @agentic-ui/rare-books-featured-volumes
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** pinned-items, cover-art, era-label, horizontal-shelf
- **Intents:** explore-detail
- **Suits domains:** books, media, ecommerce, wine, culinary
- **Interaction:** hover
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Featured or pinned items, Star products, Featured albums or collections
- **Avoid when:** More than 6 featured items
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 5/10, code 8/10
- **npm dependencies:** lucide-react, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils


### Rare Books Value Timeline

Acquisition spend per year.

- id: `rare-books-value-timeline`
- Page: https://agentic-ui-kit.com/components/rare-books-value-timeline
- Live preview: https://agentic-ui-kit.com/live/piece/rare-books-value-timeline?piece=rare-books-value-timeline

## Install

```bash
agentic-ui add rare-books-value-timeline
npx shadcn@4.17.0 add @agentic-ui/rare-books-value-timeline
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** area-bar-line-switch, metric-switch, cumulative-mode, peak-marker, summary-footer, tooltip
- **Intents:** compare-over-time
- **Suits domains:** books, finance, analytics, saas, ecommerce, billing
- **Interaction:** tooltip, chart-settings
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Acquisition spend per year, Accumulated annual revenue, Order volume per period
- **Avoid when:** High-frequency series (>100 points), Comparison of many series
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** chart, button, toggle-group, dropdown-menu
- **npm dependencies:** recharts, lucide-react, zustand
- **Used in:** Folioteca Rare Books (template), Collection Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, ui-button, ui-chart, ui-dropdown-menu, ui-toggle-group


### Wine Cellar Bottle Card

Product card with adjustable stock.

- id: `wine-cellar-bottle-card`
- Page: https://agentic-ui-kit.com/components/wine-cellar-bottle-card
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar?piece=wine-cellar-bottle-card

## Install

```bash
agentic-ui add wine-cellar-bottle-card
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-bottle-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-badge, hero-gradient, tags, quantity-stepper, overflow-menu, rating-badge
- **Intents:** manage-collection, explore-detail
- **Suits domains:** wine, ecommerce, books, culinary, operations
- **Interaction:** increment-decrement, overflow-menu
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Product card with adjustable stock, Book card with a shelf location, Pantry item with an expiry date
- **Avoid when:** Dense lists of more than 50 visible items
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** button, badge, dropdown-menu
- **npm dependencies:** lucide-react, zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-badge, ui-button, ui-dialog, ui-dropdown-menu, ui-input, ui-textarea


### Wine Cellar Drink Soon List

Items about to expire.

- id: `wine-cellar-drink-soon-list`
- Page: https://agentic-ui-kit.com/components/wine-cellar-drink-soon-list
- Live preview: https://agentic-ui-kit.com/live/piece/wine-cellar-drink-soon-list?piece=wine-cellar-drink-soon-list

## Install

```bash
agentic-ui add wine-cellar-drink-soon-list
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-drink-soon-list
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** urgency-list, ranked-order, countdown, empty-state, color-swatch
- **Intents:** track-status
- **Suits domains:** wine, operations, ecommerce, culinary, saas
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Items about to expire, Overdue tasks, Subscriptions due for renewal
- **Avoid when:** More than 5-6 items (needs pagination)
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 7/10
- **npm dependencies:** zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** wine-cellar-bottle-card, wine-cellar-kpi-stats-cards, wine-cellar-tasting-card, wine-cellar-vintage-distribution


### Wine Cellar Tasting Card

Tasting note with aromas and pairing.

- id: `wine-cellar-tasting-card`
- Page: https://agentic-ui-kit.com/components/wine-cellar-tasting-card
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar?piece=wine-cellar-tasting-card

## Install

```bash
agentic-ui add wine-cellar-tasting-card
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-tasting-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rating, tag-groups, meta-row, overflow-menu
- **Intents:** audit-trail, explore-detail
- **Suits domains:** wine, culinary, notes, crm, travel
- **Interaction:** overflow-menu
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Tasting note with aromas and pairing, Restaurant review, Meeting note with attendees
- **Avoid when:** Very long text content
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** button, badge, dropdown-menu
- **npm dependencies:** lucide-react, date-fns, zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** ui-badge, ui-button, ui-dropdown-menu


### Wine Cellar Wishlist

Wishlist with priority and budget.

- id: `wine-cellar-wishlist`
- Page: https://agentic-ui-kit.com/components/wine-cellar-wishlist
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar/wishlist?piece=wine-cellar-wishlist

## Install

```bash
agentic-ui add wine-cellar-wishlist
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-wishlist
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** priority-filter, priority-sorting, running-total, remove-item, empty-state, search
- **Intents:** manage-collection
- **Suits domains:** wine, ecommerce, books, travel, personal-productivity
- **Interaction:** filter, toggle-priority, remove
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Wishlist with priority and budget, Purchase backlog, Pending reads
- **Avoid when:** A checkout or cart is needed, Priorities with more than three levels
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** select
- **npm dependencies:** zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** ui-select, wine-cellar-wishlist-card


### Wine Cellar Wishlist Card

Wishlist row.

- id: `wine-cellar-wishlist-card`
- Page: https://agentic-ui-kit.com/components/wine-cellar-wishlist-card
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar/wishlist?piece=wine-cellar-wishlist-card

## Install

```bash
agentic-ui add wine-cellar-wishlist-card
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-wishlist-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** priority-toggle, price, overflow-menu, remove
- **Intents:** manage-collection
- **Suits domains:** wine, ecommerce, books, travel
- **Interaction:** toggle-priority, remove, overflow-menu
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Wishlist row, Backlog item with priority, Product saved for later
- **Avoid when:** Table with comparable columns (prefer a data table)
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.75/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** button, badge, dropdown-menu
- **npm dependencies:** lucide-react, zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-badge, ui-button, ui-dropdown-menu


### Culinary Recipe Card Set

Product card with favorites.

- id: `culinary-recipe-card-set`
- Page: https://agentic-ui-kit.com/components/culinary-recipe-card-set
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager/collections/col1?piece=culinary-recipe-card-set

## Install

```bash
agentic-ui add culinary-recipe-card-set
npx shadcn@4.17.0 add @agentic-ui/culinary-recipe-card-set
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** grid-card, list-row, gallery-card, star-toggle, overflow-menu, meta-badges, tag-chips
- **Intents:** manage-collection, explore-detail
- **Suits domains:** culinary, ecommerce, books, media, travel
- **Interaction:** star-toggle, overflow-menu, hover-reveal
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Product card with favorites, Book record, Accommodation card
- **Avoid when:** Bulk actions are needed, The items lack a representative image or icon
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 5/10, code 7/10
- **Uses primitives:** button, badge, dropdown-menu
- **npm dependencies:** lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-badge, ui-button, ui-dropdown-menu


### Culinary Weekly Goals Progress

Weekly habit goals.

- id: `culinary-weekly-goals-progress`
- Page: https://agentic-ui-kit.com/components/culinary-weekly-goals-progress
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-weekly-goals-progress?piece=culinary-weekly-goals-progress

## Install

```bash
agentic-ui add culinary-weekly-goals-progress
npx shadcn@4.17.0 add @agentic-ui/culinary-weekly-goals-progress
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** radial-progress, target-vs-current, percent-label
- **Intents:** track-status
- **Suits domains:** culinary, personal-productivity, saas, education, hr
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Weekly habit goals, Team sales quotas, Course progress
- **Avoid when:** More than 4 goals, The goals have no numeric target
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 7/10
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **Registry dependencies:** lib-utils


### Ecommerce Order Detail Sidebar Summary

Detail with a sticky side summary.

- id: `ecommerce-order-detail-sidebar-summary`
- Page: https://agentic-ui-kit.com/components/ecommerce-order-detail-sidebar-summary
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/order-detail-2?piece=ecommerce-order-detail-sidebar-summary

## Install

```bash
agentic-ui add ecommerce-order-detail-sidebar-summary
npx shadcn@4.17.0 add @agentic-ui/ecommerce-order-detail-sidebar-summary
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** order-summary, right-sidebar, line-items, product-lookup, totals
- **Intents:** explore-detail
- **Suits domains:** ecommerce, payments, operations, billing
- **Interaction:** scroll, row-hover
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** detail with a sticky side summary, invoices with totals in the margin
- **Avoid when:** single-column details
- **Preserve when adapting:** sidebar-summary-pattern, line-items-table
- **Replace when adapting:** domain-copy, columns, formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 7/10
- **Uses primitives:** card, badge, table, separator, avatar
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-avatars-avatar-1-png, asset-admin-kit-avatars-avatar-2-png, asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-sheet, ui-admin-kit-textarea, ui-input-group


### Ecommerce Order List Faceted Menu

Faceted filters in a dropdown when the toolbar is narrow.

- id: `ecommerce-order-list-faceted-menu`
- Page: https://agentic-ui-kit.com/components/ecommerce-order-list-faceted-menu
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/order-list-2?piece=ecommerce-order-list-faceted-menu

## Install

```bash
agentic-ui add ecommerce-order-list-faceted-menu
npx shadcn@4.17.0 add @agentic-ui/ecommerce-order-list-faceted-menu
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sorting, pagination, faceted-filter-menu, active-filter-count, status-badges
- **Intents:** manage-collection, track-status
- **Suits domains:** ecommerce, operations, saas, payments
- **Interaction:** sort, paginate, filter-menu, row-menu
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** faceted filters in a dropdown when the toolbar is narrow
- **Avoid when:** always-visible bar-style filters
- **Preserve when adapting:** faceted-menu-pattern, column-model, status-badges
- **Replace when adapting:** domain-copy, columns, status-enum
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 7/10
- **Uses primitives:** table, badge, dropdown-menu, button
- **Used in:** Kestrel Admin Kit (template), Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, react-dnd@^16.0.1, react-dnd-html5-backend@^16.0.1
- **Registry dependencies:** asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input


### Ecommerce Order List Status Badges

Orders filtered by channel/origin and location.

- id: `ecommerce-order-list-status-badges`
- Page: https://agentic-ui-kit.com/components/ecommerce-order-list-status-badges
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/order-list-3?piece=ecommerce-order-list-status-badges

## Install

```bash
agentic-ui add ecommerce-order-list-status-badges
npx shadcn@4.17.0 add @agentic-ui/ecommerce-order-list-status-badges
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sorting, pagination, multi-dimension-filters, payment-state-badges, source-location-filters
- **Intents:** manage-collection, track-status
- **Suits domains:** ecommerce, operations, logistics, saas
- **Interaction:** sort, paginate, filter-select
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** orders filtered by channel/origin and location
- **Avoid when:** collections with a single filter dimension
- **Preserve when adapting:** column-model, status-badges, multi-filter-bar
- **Replace when adapting:** domain-copy, columns, status-enum
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 7/10
- **Uses primitives:** table, badge, select, button, calendar
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-switch


### Ecommerce Product Detail Compact Cards

Specification-oriented product detail.

- id: `ecommerce-product-detail-compact-cards`
- Page: https://agentic-ui-kit.com/components/ecommerce-product-detail-compact-cards
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/product-detail-2?piece=ecommerce-product-detail-compact-cards

## Install

```bash
agentic-ui add ecommerce-product-detail-compact-cards
npx shadcn@4.17.0 add @agentic-ui/ecommerce-product-detail-compact-cards
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** tabs, compact-cards, specs-panel, pricing-panel
- **Intents:** explore-detail
- **Suits domains:** ecommerce, operations, saas
- **Interaction:** tab-switch, scroll
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** specification-oriented product detail
- **Avoid when:** pages with a lot of editorial content
- **Preserve when adapting:** tabs-detail-pattern, spec-cards
- **Replace when adapting:** domain-copy, metrics
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** card, tabs, badge, separator
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-images-block-ecommerce-skin-care-product-kadarius-seegars-mxy5gokl8me-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, ecommerce-product-editor, ecommerce-product-wizard, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-sheet, ui-admin-kit-switch, ui-admin-kit-tabs, ui-admin-kit-textarea, ui-input-group


### Ecommerce Sales Dashboard Order Status

Distribution of orders by status.

- id: `ecommerce-sales-dashboard-order-status`
- Page: https://agentic-ui-kit.com/components/ecommerce-sales-dashboard-order-status
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/dashboard-3?piece=ecommerce-sales-dashboard-order-status

## Install

```bash
agentic-ui add ecommerce-sales-dashboard-order-status
npx shadcn@4.17.0 add @agentic-ui/ecommerce-sales-dashboard-order-status
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, timeseries, order-status-pie, category-area, recent-orders-table
- **Intents:** compare-over-time, track-status, show-composition
- **Suits domains:** ecommerce, operations, logistics, saas
- **Interaction:** tooltip, period-switch
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** distribution of orders by status, sales by category in an area chart
- **Avoid when:** real-time tracking, more than 6 states
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-card-grid
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** sidebar, card, chart, table, badge
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-images-block-avatar-1-webp, asset-admin-kit-logo-black-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-chart, ui-admin-kit-collapsible, ui-admin-kit-dropdown-menu, ui-admin-kit-scroll-area, ui-admin-kit-sidebar, ui-block-tooltip, ui-table


### Ecommerce Sales Dashboard Segmentation

Revenue by customer segment.

- id: `ecommerce-sales-dashboard-segmentation`
- Page: https://agentic-ui-kit.com/components/ecommerce-sales-dashboard-segmentation
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/dashboard-2?piece=ecommerce-sales-dashboard-segmentation

## Install

```bash
agentic-ui add ecommerce-sales-dashboard-segmentation
npx shadcn@4.17.0 add @agentic-ui/ecommerce-sales-dashboard-segmentation
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, timeseries, segmentation-panel, period-switch, welcome-header
- **Intents:** compare-over-time, show-composition
- **Suits domains:** ecommerce, saas, analytics, marketing
- **Interaction:** tooltip, period-switch, hover-highlight
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** revenue by customer segment, sales evolution by selectable period
- **Avoid when:** high-frequency live data, segments > 8
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-card-grid
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** sidebar, card, chart, table, select, badge
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-images-block-avatar-1-webp, asset-admin-kit-logo-black-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-chart, ui-admin-kit-collapsible, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-sidebar, ui-block-tooltip, ui-table


### Flightops Active Flights Panel

Side panel of in-progress entities with completion percentage.

- id: `flightops-active-flights-panel`
- Page: https://agentic-ui-kit.com/components/flightops-active-flights-panel
- Live preview: https://agentic-ui-kit.com/live/piece/flightops-active-flights-panel?piece=flightops-active-flights-panel

## Install

```bash
agentic-ui add flightops-active-flights-panel
npx shadcn@4.17.0 add @agentic-ui/flightops-active-flights-panel
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** progress-indicator, pin-item, status-dot, scroll-list, empty-state
- **Intents:** monitor-live
- **Suits domains:** aviation, logistics, operations, support
- **Interaction:** pin-flight, scroll, hover
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Side panel of in-progress entities with completion percentage.
- **Avoid when:** The items have neither progress nor temporal state.
- **Preserve when adapting:** progress-semantics, list-density
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** button
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-button, ui-flight-airports


### Flightops App Sidebar

Side navigation that also filters the domain by region.

- id: `flightops-app-sidebar`
- Page: https://agentic-ui-kit.com/components/flightops-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/flight-ops?piece=flightops-app-sidebar

## Install

```bash
agentic-ui add flightops-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/flightops-app-sidebar
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** primary-navigation, workspace-switcher, region-filter-group, user-menu
- **Intents:** navigate
- **Suits domains:** aviation, operations, saas, logistics
- **Interaction:** navigate, collapse-group, filter-region
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Side navigation that also filters the domain by region.
- **Avoid when:** The navigation is flat and needs no grouping or filters.
- **Preserve when adapting:** navigation-model, group-composition
- **Replace when adapting:** domain-copy, branding, nav-labels
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** sidebar, dropdown-menu, collapsible, avatar, button
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-avatar, ui-collapsible, ui-dropdown-menu, ui-flight-airports, ui-sidebar


### Flightops Flight Card

Route card with progress and operational metadata.

- id: `flightops-flight-card`
- Page: https://agentic-ui-kit.com/components/flightops-flight-card
- Live preview: https://agentic-ui-kit.com/live/fixture/flightops-flight-card?piece=flightops-flight-card

## Install

```bash
agentic-ui add flightops-flight-card
npx shadcn@4.17.0 add @agentic-ui/flightops-flight-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-summary, progress-indicator, status-badge, delay-badge, pin-item
- **Intents:** explore-detail
- **Suits domains:** aviation, logistics, travel, operations
- **Interaction:** pin-flight, hover
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Route card with progress and operational metadata.
- **Avoid when:** The element has no associated route or progress.
- **Preserve when adapting:** route-visualization, card-hierarchy
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-badge, ui-button, ui-flight-airports


### Flightops Flight Row

Dense tabular listing with progress embedded per row.

- id: `flightops-flight-row`
- Page: https://agentic-ui-kit.com/components/flightops-flight-row
- Live preview: https://agentic-ui-kit.com/live/piece/flightops-flight-row?piece=flightops-flight-row

## Install

```bash
agentic-ui add flightops-flight-row
npx shadcn@4.17.0 add @agentic-ui/flightops-flight-row
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** dense-row, route-progress, status-dot, pin-item, column-header
- **Intents:** manage-collection
- **Suits domains:** aviation, logistics, operations, finance
- **Interaction:** pin-flight, hover
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Dense tabular listing with progress embedded per row.
- **Avoid when:** Fewer than three columns are needed or a card is more readable.
- **Preserve when adapting:** row-density, column-alignment
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** button
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-button, ui-flight-airports


### Flightops Maintenance Schedule Panel

Queue of interventions sorted by date with an overdue alert.

- id: `flightops-maintenance-schedule-panel`
- Page: https://agentic-ui-kit.com/components/flightops-maintenance-schedule-panel
- Live preview: https://agentic-ui-kit.com/live/piece/flightops-maintenance-schedule-panel?piece=flightops-maintenance-schedule-panel

## Install

```bash
agentic-ui add flightops-maintenance-schedule-panel
npx shadcn@4.17.0 add @agentic-ui/flightops-maintenance-schedule-panel
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** due-date-urgency, overdue-flag, sorted-list
- **Intents:** track-status
- **Suits domains:** aviation, logistics, operations, healthcare
- **Interaction:** hover
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Queue of interventions sorted by date with an overdue alert.
- **Avoid when:** The entities have no due date or notion of being overdue.
- **Preserve when adapting:** urgency-semantics, date-formatting
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **npm dependencies:** date-fns
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-flight-airports


### Flightops Network Overview

Duty manager console that summarizes seats flown, disruption, hub banks and upcoming checks on one screen.

- id: `flightops-network-overview`
- Page: https://agentic-ui-kit.com/components/flightops-network-overview
- Live preview: https://agentic-ui-kit.com/live/template/flight-ops?piece=flightops-network-overview

## Install

```bash
agentic-ui add flightops-network-overview
npx shadcn@4.17.0 add @agentic-ui/flightops-network-overview
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-summary, live-map-preview, traffic-timeseries, maintenance-window, region-breakdown
- **Intents:** track-status
- **Suits domains:** aviation, logistics, operations, maps-ops
- **Interaction:** hover, filter-region, pin-flight
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Duty manager console that summarizes seats flown, disruption, hub banks and upcoming checks on one screen.
- **Avoid when:** The operator needs a single metric or a specific detail rather than an overview.
- **Preserve when adapting:** information-hierarchy, grid-composition
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Used in:** Aerodesk Flight Operations (template)
- **Registry dependencies:** flightops-active-flights-panel, flightops-live-traffic-map-card, flightops-maintenance-schedule-panel, flightops-operations-kpi-cards, flightops-region-traffic-distribution, flightops-traffic-volume-chart


### Flightops OPS Console Shell

Operations console frame with persistent side navigation.

- id: `flightops-ops-console-shell`
- Page: https://agentic-ui-kit.com/components/flightops-ops-console-shell
- Live preview: https://agentic-ui-kit.com/live/template/flight-ops?piece=flightops-ops-console-shell

## Install

```bash
agentic-ui add flightops-ops-console-shell
npx shadcn@4.17.0 add @agentic-ui/flightops-ops-console-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sidebar-navigation, sticky-header, content-scroll
- **Intents:** navigate
- **Suits domains:** aviation, operations, saas, logistics
- **Interaction:** collapse-sidebar
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Operations console frame with persistent side navigation.
- **Avoid when:** The application is a single screen and needs no persistent navigation.
- **Preserve when adapting:** shell-composition, navigation-model
- **Replace when adapting:** domain-copy, branding
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** sidebar, tooltip
- **Used in:** Aerodesk Flight Operations (template)
- **Registry dependencies:** flightops-app-header, flightops-app-sidebar, ui-sidebar, ui-tooltip


### Social Client App Sidebar

Main application navigation menu.

- id: `social-client-app-sidebar`
- Page: https://agentic-ui-kit.com/components/social-client-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/social-client?piece=social-client-app-sidebar

## Install

```bash
agentic-ui add social-client-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/social-client-app-sidebar
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-navigation, user-profile-summary, theme-toggle-integration, responsive-collapsible
- **Intents:** navigate, configure
- **Suits domains:** social, saas, project-management, knowledge, devtools
- **Interaction:** nav-click, toggle-collapse, theme-toggle
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Main application navigation menu, Social network navigation bar, Sidebar of a collaborative console
- **Avoid when:** Public landing pages with minimalist horizontal navigation
- **Preserve when adapting:** sidebar-shell, nav-item-states, mobile-sheet-trigger
- **Replace when adapting:** nav-items, branding-logo, user-menu
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, button, collapsible, dropdown-menu, separator, sheet, sidebar, tooltip
- **npm dependencies:** lucide-react
- **Used in:** Palaver Social Client (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, ui-avatar, ui-badge, ui-button, ui-collapsible, ui-dropdown-menu, ui-social-client-sidebar


### Travel Map Explorer

Map of accommodations with prices.

- id: `travel-map-explorer`
- Page: https://agentic-ui-kit.com/components/travel-map-explorer
- Live preview: https://agentic-ui-kit.com/live/template/travel-marketplace/explore?piece=travel-map-explorer

## Install

```bash
agentic-ui add travel-map-explorer
npx shadcn@4.17.0 add @agentic-ui/travel-map-explorer
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Wayfarely Travel Marketplace
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** price-pill-markers, controlled-popup-card, map-style-switcher, fit-to-destination, background-dismiss
- **Intents:** explore-detail, monitor-live
- **Suits domains:** travel, maps-ops, aviation, operations
- **Interaction:** map, popup, style-switch
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** map of accommodations with prices, fleet map with per-unit status, map of stores or service points
- **Avoid when:** data without geolocation, purely tabular dashboards
- **Preserve when adapting:** marker-pill-pattern, popup-card-composition, fit-bounds-logic
- **Replace when adapting:** tile-style, marker-data, popup-content
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.7/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** map, button
- **npm dependencies:** maplibre-gl, zustand, lucide-react
- **Used in:** Wayfarely Travel Marketplace (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-travel-marketplace-utils, ui-button, ui-dropdown-menu, ui-travel-marketplace-map


### Culinary KPI Stats Cards

MRR, users and churn KPIs with change.

- id: `culinary-kpi-stats-cards`
- Page: https://agentic-ui-kit.com/components/culinary-kpi-stats-cards
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-kpi-stats-cards?piece=culinary-kpi-stats-cards

## Install

```bash
agentic-ui add culinary-kpi-stats-cards
npx shadcn@4.17.0 add @agentic-ui/culinary-kpi-stats-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-summary, period-delta, trend-badge, date-range-aware
- **Intents:** compare-over-time, track-status
- **Suits domains:** culinary, saas, ecommerce, finance, analytics
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** MRR, users and churn KPIs with change, Orders, revenue and average ticket
- **Avoid when:** More than 6 metrics, The metrics have no comparable period
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.65/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 6/10, code 7/10
- **npm dependencies:** lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils


### Devtools Create Edit Repository

Grouped repository setup separates identity, access and initialization options.

- id: `devtools-create-edit-repository`
- Page: https://agentic-ui-kit.com/components/devtools-create-edit-repository
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/new?piece=devtools-create-edit-repository

## Install

```bash
agentic-ui add devtools-create-edit-repository
npx shadcn@4.17.0 add @agentic-ui/devtools-create-edit-repository
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** owner-selection, visibility-selector, initialization-options
- **Intents:** create-edit
- **Suits domains:** devtools, file-storage, knowledge
- **Interaction:** owner-selection, visibility-selector, initialization-options
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Grouped repository setup separates identity, access and initialization options.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, owner-selection, visibility-selector
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.65/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, button, input, select, switch, textarea
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, ui-avatar, ui-button, ui-input, ui-select, ui-switch, ui-textarea


### Devtools Explore Detail Repository Card

Card groups repository identity, description, metadata and composition.

- id: `devtools-explore-detail-repository-card`
- Page: https://agentic-ui-kit.com/components/devtools-explore-detail-repository-card
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting?piece=devtools-explore-detail-repository-card

## Install

```bash
agentic-ui add devtools-explore-detail-repository-card
npx shadcn@4.17.0 add @agentic-ui/devtools-explore-detail-repository-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** metadata-card, language-summary, activity-summary
- **Intents:** explore-detail
- **Suits domains:** devtools, file-storage, knowledge
- **Interaction:** metadata-card, language-summary, activity-summary
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Card groups repository identity, description, metadata and composition.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, metadata-card, language-summary
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.65/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** badge
- **npm dependencies:** analytics-show-composition-languages
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** analytics-show-composition-languages, lib-code-hosting-utils, ui-badge


### Devtools Track Status Issue

Issue title, labels and assignment fit one scannable row.

- id: `devtools-track-status-issue`
- Page: https://agentic-ui-kit.com/components/devtools-track-status-issue
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/issues?piece=devtools-track-status-issue

## Install

```bash
agentic-ui add devtools-track-status-issue
npx shadcn@4.17.0 add @agentic-ui/devtools-track-status-issue
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-indicator, assignee-summary, label-list
- **Intents:** track-status
- **Suits domains:** devtools, support, project-management
- **Interaction:** status-indicator, assignee-summary, label-list
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Issue title, labels and assignment fit one scannable row.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, status-indicator, assignee-summary
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.65/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, tooltip
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, ui-avatar, ui-tooltip


### Devtools Track Status Pull Request

Dense review row combines status, reviewer avatars and CI signals.

- id: `devtools-track-status-pull-request`
- Page: https://agentic-ui-kit.com/components/devtools-track-status-pull-request
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/pull-requests?piece=devtools-track-status-pull-request

## Install

```bash
agentic-ui add devtools-track-status-pull-request
npx shadcn@4.17.0 add @agentic-ui/devtools-track-status-pull-request
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** review-state, ci-state, branch-context
- **Intents:** track-status
- **Suits domains:** devtools, project-management, operations
- **Interaction:** review-state, ci-state, branch-context
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Dense review row combines status, reviewer avatars and CI signals.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, review-state, ci-state
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.65/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, tooltip
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, ui-avatar, ui-tooltip


### Ecommerce Order Editor

Manual order creation with totals.

- id: `ecommerce-order-editor`
- Page: https://agentic-ui-kit.com/components/ecommerce-order-editor
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/add-order?piece=ecommerce-order-editor

## Install

```bash
agentic-ui add ecommerce-order-editor
npx shadcn@4.17.0 add @agentic-ui/ecommerce-order-editor
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** add-edit-modes, line-item-builder, live-totals, currency-formatting, customer-select
- **Intents:** create-edit, execute-flow
- **Suits domains:** ecommerce, payments, billing, operations
- **Interaction:** type, add-row, submit
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** manual order creation with totals, invoices with lines and live totals
- **Avoid when:** customer-facing checkout
- **Preserve when adapting:** line-item-builder, live-totals-pattern, add-edit-duality
- **Replace when adapting:** domain-copy, tax-rules, currency
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.65/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **Uses primitives:** card, input, select, button, table, separator
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-input, ui-admin-kit-scroll-area, ui-admin-kit-select, ui-admin-kit-switch, ui-admin-kit-textarea


### Ecommerce Shipping Label Editor

Shipping label creation.

- id: `ecommerce-shipping-label-editor`
- Page: https://agentic-ui-kit.com/components/ecommerce-shipping-label-editor
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/add-shipping?piece=ecommerce-shipping-label-editor

## Install

```bash
agentic-ui add ecommerce-shipping-label-editor
npx shadcn@4.17.0 add @agentic-ui/ecommerce-shipping-label-editor
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** add-edit-modes, zod-validation, rate-selection, address-fields, label-preview
- **Intents:** create-edit, execute-flow
- **Suits domains:** ecommerce, logistics, operations
- **Interaction:** type, radio-select, submit, validation-feedback
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** shipping label creation, forms with rate/service selection
- **Avoid when:** flows with no service options
- **Preserve when adapting:** rhf-zod-pattern, rate-selection-cards, add-edit-duality
- **Replace when adapting:** domain-copy, carriers, validation-messages
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.65/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** card, input, select, button, form, radio-group
- **npm dependencies:** react-hook-form, zod
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** @hookform/resolvers@^5.2.2, date-fns@4.1.0, lucide-react@0.577.0, react-hook-form@7.72.0, sonner@^2.0.7, zod@4.3.6
- **Registry dependencies:** asset-admin-kit-images-block-ecommerce-skin-care-product-kadarius-seegars-mxy5gokl8me-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-nora-hutton-aju6z5k-ubi-unsplash-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-amelie-chen-243775000-12352170-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-carlos-diaz-216017-18350286-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-karolina-grabowska-4938448-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-rdne-8903695-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-shkrabaanthony-6187540-3-jpg, asset-admin-kit-images-block-ecommerce-skin-care-product-pexels-volkerthimm-19049367-3-jpg, ecommerce-product-editor, ecommerce-product-wizard, lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-card, ui-admin-kit-checkbox, ui-admin-kit-input, ui-admin-kit-popover, ui-admin-kit-select, ui-admin-kit-separator, ui-admin-kit-textarea, ui-calendar, ui-field, ui-input-group


### File Storage App Header

Header with search and a view switcher.

- id: `file-storage-app-header`
- Page: https://agentic-ui-kit.com/components/file-storage-app-header
- Live preview: https://agentic-ui-kit.com/live/template/file-storage?piece=file-storage-app-header

## Install

```bash
agentic-ui add file-storage-app-header
npx shadcn@4.17.0 add @agentic-ui/file-storage-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** breadcrumb, global-search, view-switcher, upload-menu, responsive-overflow
- **Intents:** navigate, configure
- **Suits domains:** file-storage, media, saas, ecommerce, knowledge
- **Interaction:** search, view-switching, responsive-overflow
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Header with search and a view switcher, Top bar with breadcrumbs, Application header with a primary action
- **Avoid when:** There is no view state to switch, The header does not need search
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.65/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** sidebar, separator, button, input, badge, dropdown-menu, tooltip
- **npm dependencies:** lucide-react, usehooks-ts, next/link
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, usehooks-ts@^3.1.1, zustand@5.0.8
- **Registry dependencies:** ui-badge, ui-button, ui-dropdown-menu, ui-input, ui-separator, ui-sidebar, ui-tooltip


### File Storage Trash Restore

Trash with restore and permanent delete.

- id: `file-storage-trash-restore`
- Page: https://agentic-ui-kit.com/components/file-storage-trash-restore
- Live preview: https://agentic-ui-kit.com/live/template/file-storage/trash?piece=file-storage-trash-restore

## Install

```bash
agentic-ui add file-storage-trash-restore
npx shadcn@4.17.0 add @agentic-ui/file-storage-trash-restore
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** soft-delete, restore-action, permanent-delete, retention-notice, empty-state
- **Intents:** manage-collection, execute-flow
- **Suits domains:** file-storage, media, crm, knowledge, operations
- **Interaction:** restore, permanent-delete, bulk-empty
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Trash with restore and permanent delete, Recoverable archived items, Inbox of deleted items
- **Avoid when:** Deletion is irreversible by design, There is no temporary retention
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** high
- **Quality score:** 7.65/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, badge
- **npm dependencies:** lucide-react
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-file-storage-utils, ui-badge, ui-button


### Flightops Create Flight Dialog

Operation creation with origin/destination, crew and schedule validation.

- id: `flightops-create-flight-dialog`
- Page: https://agentic-ui-kit.com/components/flightops-create-flight-dialog
- Live preview: https://agentic-ui-kit.com/live/piece/flightops-create-flight-dialog?activate=button&piece=flightops-create-flight-dialog

## Install

```bash
agentic-ui add flightops-create-flight-dialog
npx shadcn@4.17.0 add @agentic-ui/flightops-create-flight-dialog
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** form-validation, derived-distance, conditional-fields, error-summary
- **Intents:** create-edit
- **Suits domains:** aviation, logistics, operations, travel
- **Interaction:** submit, validate, select, cancel
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Operation creation with origin/destination, crew and schedule validation.
- **Avoid when:** Creation requires no cross-validation or type-dependent fields.
- **Preserve when adapting:** validation-model, conditional-fields
- **Replace when adapting:** domain-copy, mock-data, field-labels
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.65/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **Uses primitives:** dialog, input, label, select, textarea, button
- **npm dependencies:** @turf/great-circle, @turf/bearing
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, ui-button, ui-dialog, ui-flight-airports, ui-input, ui-label, ui-select, ui-textarea


### Devtools Manage Collection Issues

Issue rows pair status, labels and assignees with compact collection filters.

- id: `devtools-manage-collection-issues`
- Page: https://agentic-ui-kit.com/components/devtools-manage-collection-issues
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/issues?piece=devtools-manage-collection-issues

## Install

```bash
agentic-ui add devtools-manage-collection-issues
npx shadcn@4.17.0 add @agentic-ui/devtools-manage-collection-issues
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** search, status-filter, priority-filter
- **Intents:** manage-collection
- **Suits domains:** devtools, support, project-management, operations
- **Interaction:** search, status-filter, priority-filter
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Issue rows pair status, labels and assignees with compact collection filters.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, search, status-filter
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.6/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** select
- **npm dependencies:** devtools-track-status-issue
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** devtools-track-status-issue, lib-code-hosting-utils, ui-select


### Devtools Manage Collection Repositories

Repository cards expose language, visibility, stars and ownership with grid/list switching.

- id: `devtools-manage-collection-repositories`
- Page: https://agentic-ui-kit.com/components/devtools-manage-collection-repositories
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/repositories?piece=devtools-manage-collection-repositories

## Install

```bash
agentic-ui add devtools-manage-collection-repositories
npx shadcn@4.17.0 add @agentic-ui/devtools-manage-collection-repositories
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** search, filter, grid-list-switch
- **Intents:** manage-collection
- **Suits domains:** devtools, file-storage, knowledge, project-management
- **Interaction:** search, filter, grid-list-switch
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Repository cards expose language, visibility, stars and ownership with grid/list switching.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, search, filter
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.6/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, select, toggle-group
- **npm dependencies:** devtools-explore-detail-repository-card
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** devtools-explore-detail-repository-card, lib-code-hosting-utils, ui-button, ui-select, ui-toggle-group


### File Storage File List

Document listing with per-row actions.

- id: `file-storage-file-list`
- Page: https://agentic-ui-kit.com/components/file-storage-file-list
- Live preview: https://agentic-ui-kit.com/live/template/file-storage/collections/c1?piece=file-storage-file-list

## Install

```bash
agentic-ui add file-storage-file-list
npx shadcn@4.17.0 add @agentic-ui/file-storage-file-list
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** list-grid-gallery-views, row-actions, starring, context-menu, selection
- **Intents:** manage-collection, explore-detail
- **Suits domains:** file-storage, media, ecommerce, crm, knowledge
- **Interaction:** view-switching, row-actions, starring, selection
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Document listing with per-row actions, Switchable image gallery, CRM attachments table
- **Avoid when:** Server-side pagination is needed, The items are not files or assets
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.6/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** button, badge, dropdown-menu
- **npm dependencies:** lucide-react, next/image
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** file-storage-file-detail-panel, lib-file-storage-utils, ui-badge, ui-button, ui-dropdown-menu


### Marine Live Conditions

Weather conditions on a track or regatta course.

- id: `marine-live-conditions`
- Page: https://agentic-ui-kit.com/components/marine-live-conditions
- Live preview: https://agentic-ui-kit.com/live/piece/marine-live-conditions?piece=marine-live-conditions

## Install

```bash
agentic-ui add marine-live-conditions
npx shadcn@4.17.0 add @agentic-ui/marine-live-conditions
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** live-indicator, definition-list, unit-formatting
- **Intents:** monitor-live
- **Suits domains:** marine, operations, aviation, logistics, devops-status
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Weather conditions on a track or regatta course, Live metrics of a service, Sensors of a warehouse
- **Avoid when:** More than 4-6 metrics, Data without a live character
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.6/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 6/10
- **npm dependencies:** zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-regatta-ops-utils


### Rare Books Book Card

Book or collection piece record.

- id: `rare-books-book-card`
- Page: https://agentic-ui-kit.com/components/rare-books-book-card
- Live preview: https://agentic-ui-kit.com/live/template/rare-books/library?piece=rare-books-book-card

## Install

```bash
agentic-ui add rare-books-book-card
npx shadcn@4.17.0 add @agentic-ui/rare-books-book-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** generated-cover, status-badge, condition, value, pin-toggle, overflow-menu
- **Intents:** explore-detail, manage-collection
- **Suits domains:** books, ecommerce, media, wine
- **Interaction:** pin, overflow-menu
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Book or collection piece record, Premium product card, Album in a music library
- **Avoid when:** Dense lists (use rare-books-book-row)
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.6/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 4/10, code 8/10
- **Uses primitives:** button, badge, dropdown-menu
- **npm dependencies:** lucide-react, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, ui-badge, ui-button, ui-dropdown-menu


### Rare Books Book Row

Inventory row with status and value.

- id: `rare-books-book-row`
- Page: https://agentic-ui-kit.com/components/rare-books-book-row
- Live preview: https://agentic-ui-kit.com/live/piece/rare-books-book-row?piece=rare-books-book-row

## Install

```bash
agentic-ui add rare-books-book-row
npx shadcn@4.17.0 add @agentic-ui/rare-books-book-row
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** dense-row, column-header, status-badge, value, overflow-menu
- **Intents:** manage-collection
- **Suits domains:** books, ecommerce, wine, operations
- **Interaction:** overflow-menu
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Inventory row with status and value, Dense catalog row
- **Avoid when:** Column sorting or selection is needed (it is not a data table)
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.6/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 4/10, code 8/10
- **Uses primitives:** button, badge, dropdown-menu
- **npm dependencies:** lucide-react, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, ui-badge, ui-button, ui-dropdown-menu


### Saas Configure Pinned Items

Searchable selection dialog communicates the six-item pinning limit.

- id: `saas-configure-pinned-items`
- Page: https://agentic-ui-kit.com/components/saas-configure-pinned-items
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting?piece=saas-configure-pinned-items

## Install

```bash
agentic-ui add saas-configure-pinned-items
npx shadcn@4.17.0 add @agentic-ui/saas-configure-pinned-items
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** search, multi-select, pin-limit
- **Intents:** configure
- **Suits domains:** devtools, file-storage, knowledge, personal-productivity
- **Interaction:** search, multi-select, pin-limit
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Searchable selection dialog communicates the six-item pinning limit.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, search, multi-select
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.6/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, dialog, input, scroll-area
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-code-hosting-utils, ui-button, ui-dialog, ui-input, ui-scroll-area


### Saas Navigate Code Hosting Sidebar

Grouped navigation and pinned repositories provide persistent orientation.

- id: `saas-navigate-code-hosting-sidebar`
- Page: https://agentic-ui-kit.com/components/saas-navigate-code-hosting-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting?piece=saas-navigate-code-hosting-sidebar

## Install

```bash
agentic-ui add saas-navigate-code-hosting-sidebar
npx shadcn@4.17.0 add @agentic-ui/saas-navigate-code-hosting-sidebar
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** primary-navigation, pinned-shortcuts, account-menu
- **Intents:** navigate
- **Suits domains:** saas, devtools, knowledge, file-storage
- **Interaction:** primary-navigation, pinned-shortcuts, account-menu
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Grouped navigation and pinned repositories provide persistent orientation.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, primary-navigation, pinned-shortcuts
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.6/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** avatar, button, dropdown-menu, sidebar
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-code-hosting-utils, ui-avatar, ui-button, ui-code-hosting-sidebar, ui-dropdown-menu


### Analytics Compare Over Time Contributions

Calendar density, month labels and legend make yearly contribution patterns visible.

- id: `analytics-compare-over-time-contributions`
- Page: https://agentic-ui-kit.com/components/analytics-compare-over-time-contributions
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting?piece=analytics-compare-over-time-contributions

## Install

```bash
agentic-ui add analytics-compare-over-time-contributions
npx shadcn@4.17.0 add @agentic-ui/analytics-compare-over-time-contributions
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** calendar-heatmap, year-selector, date-tooltips
- **Intents:** compare-over-time
- **Suits domains:** devtools, analytics, personal-productivity, education
- **Interaction:** calendar-heatmap, year-selector, date-tooltips
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Calendar density, month labels and legend make yearly contribution patterns visible.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, calendar-heatmap, year-selector
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.55/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** scroll-area, tooltip
- **Used in:** Forkyard Code Hosting (template)
- **Registry dependencies:** lib-code-hosting-utils, ui-scroll-area, ui-tooltip


### Marine Course Map

A regatta course with marks.

- id: `marine-course-map`
- Page: https://agentic-ui-kit.com/components/marine-course-map
- Live preview: https://agentic-ui-kit.com/live/piece/marine-course-map?piece=marine-course-map

## Install

```bash
agentic-ui add marine-course-map
npx shadcn@4.17.0 add @agentic-ui/marine-course-map
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-polyline, waypoint-markers, auto-fit-bounds, entity-select, status-badge, map-controls
- **Intents:** monitor-live, explore-detail
- **Suits domains:** marine, logistics, travel, aviation, maps-ops
- **Interaction:** select-entity, map-zoom, navigate-to-detail
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A regatta course with marks, Delivery route with stops, Travel itinerary by legs
- **Avoid when:** There are no coordinates, High-frequency real-time tracking is required
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.55/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** map, select, badge, button
- **npm dependencies:** maplibre-gl, zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-regatta-ops-utils, ui-badge, ui-button, ui-regatta-ops-map, ui-select


### Marine Standings Table

Series leaderboard.

- id: `marine-standings-table`
- Page: https://agentic-ui-kit.com/components/marine-standings-table
- Live preview: https://agentic-ui-kit.com/live/piece/marine-standings-table?piece=marine-standings-table

## Install

```bash
agentic-ui add marine-standings-table
npx shadcn@4.17.0 add @agentic-ui/marine-standings-table
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rank-badges, points-meter, record-column, compact-mode, row-limit, link-to-full
- **Intents:** track-status
- **Suits domains:** marine, analytics, saas, crm, hr, education
- **Interaction:** navigate-to-detail
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Series leaderboard, Ranking of sales teams, Top customers by loyalty points
- **Avoid when:** Need to sort/filter columns, More than 50 rows
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.55/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 5/10, code 8/10
- **Uses primitives:** avatar, badge, button
- **npm dependencies:** zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-regatta-ops-utils, ui-button, ui-progress


### Music Studio Track Card

Recent track.

- id: `music-studio-track-card`
- Page: https://agentic-ui-kit.com/components/music-studio-track-card
- Live preview: https://agentic-ui-kit.com/live/template/music-studio?piece=music-studio-track-card

## Install

```bash
agentic-ui add music-studio-track-card
npx shadcn@4.17.0 add @agentic-ui/music-studio-track-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** cover-gradient, hover-play, now-playing-indicator
- **Intents:** explore-detail
- **Suits domains:** music, media, books, ecommerce
- **Interaction:** click-to-play, hover
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Recent track, Featured book, Product with a cover
- **Avoid when:** There is no representative image or cover
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.55/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 8/10
- **npm dependencies:** zustand, lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, music-studio-ui-sound-feedback


### Culinary App Header

Header with search and a view switcher.

- id: `culinary-app-header`
- Page: https://agentic-ui-kit.com/components/culinary-app-header
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager?piece=culinary-app-header

## Install

```bash
agentic-ui add culinary-app-header
npx shadcn@4.17.0 add @agentic-ui/culinary-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** breadcrumb, global-search, view-switcher, primary-action, responsive-overflow, theme-controls
- **Intents:** navigate, configure
- **Suits domains:** culinary, file-storage, media, ecommerce, books
- **Interaction:** search, view-switching, responsive-overflow
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Header with search and a view switcher, Top bar with breadcrumbs and a primary action
- **Avoid when:** There are no view modes to switch, The header needs no search
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 6/10, code 8/10
- **Uses primitives:** sidebar, separator, breadcrumb, input, button, dropdown-menu
- **npm dependencies:** usehooks-ts, next/link, lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, usehooks-ts@^3.1.1, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-breadcrumb, ui-button, ui-dropdown-menu, ui-input, ui-separator, ui-sidebar


### Culinary Favorite Recipes

Wishlist.

- id: `culinary-favorite-recipes`
- Page: https://agentic-ui-kit.com/components/culinary-favorite-recipes
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager/favorites?piece=culinary-favorite-recipes

## Install

```bash
agentic-ui add culinary-favorite-recipes
npx shadcn@4.17.0 add @agentic-ui/culinary-favorite-recipes
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** starred-subset, count-badge, multi-view-results
- **Intents:** manage-collection
- **Suits domains:** culinary, ecommerce, media, books, knowledge
- **Interaction:** view-mode
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Wishlist, Items marked as favorites, Pinned documents
- **Avoid when:** Favorites need to be sorted manually
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** high
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** culinary-recipe-multi-view-list, ui-badge


### Culinary Meal Plan Preview

Summary of today's and this week's shifts.

- id: `culinary-meal-plan-preview`
- Page: https://agentic-ui-kit.com/components/culinary-meal-plan-preview
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-meal-plan-preview?piece=culinary-meal-plan-preview

## Install

```bash
agentic-ui add culinary-meal-plan-preview
npx shadcn@4.17.0 add @agentic-ui/culinary-meal-plan-preview
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** today-slots, week-fill-dots, slot-legend, deep-link
- **Intents:** track-status
- **Suits domains:** culinary, personal-productivity, operations, hr, education
- **Interaction:** deep-link
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Summary of today's and this week's shifts, Class schedule for the day
- **Avoid when:** The slots are not fixed, Editing from the widget is needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 7/10
- **npm dependencies:** next/link, lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-utils


### Culinary Recent Recipes

Recent files.

- id: `culinary-recent-recipes`
- Page: https://agentic-ui-kit.com/components/culinary-recent-recipes
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager/recent?piece=culinary-recent-recipes

## Install

```bash
agentic-ui add culinary-recent-recipes
npx shadcn@4.17.0 add @agentic-ui/culinary-recent-recipes
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** recency-subset, count-badge, multi-view-results
- **Intents:** manage-collection
- **Suits domains:** culinary, file-storage, notes, ecommerce, knowledge
- **Interaction:** view-mode
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Recent files, Recently opened notes, Viewed products
- **Avoid when:** Recency requires grouping by date
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** high
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** culinary-recipe-multi-view-list, ui-badge


### Devtools Explore Detail Issue

Issue discussion and metadata remain distinct within a readable split detail view.

- id: `devtools-explore-detail-issue`
- Page: https://agentic-ui-kit.com/components/devtools-explore-detail-issue
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/issues/ines-carvalho/tidegauge/402?piece=devtools-explore-detail-issue

## Install

```bash
agentic-ui add devtools-explore-detail-issue
npx shadcn@4.17.0 add @agentic-ui/devtools-explore-detail-issue
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** discussion-timeline, metadata-panel, comment-composer
- **Intents:** explore-detail
- **Suits domains:** devtools, support, project-management
- **Interaction:** discussion-timeline, metadata-panel, comment-composer
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Issue discussion and metadata remain distinct within a readable split detail view.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, discussion-timeline, metadata-panel
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, tooltip
- **npm dependencies:** social-communicate-comment-composer
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, social-communicate-comment-composer, ui-avatar, ui-badge, ui-tooltip


### Devtools Explore Detail Pull Request

Conversation, commit and file-diff views provide a complete review workspace.

- id: `devtools-explore-detail-pull-request`
- Page: https://agentic-ui-kit.com/components/devtools-explore-detail-pull-request
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/pull-requests/ines-carvalho/tidegauge/87?piece=devtools-explore-detail-pull-request

## Install

```bash
agentic-ui add devtools-explore-detail-pull-request
npx shadcn@4.17.0 add @agentic-ui/devtools-explore-detail-pull-request
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** diff-view, review-status, discussion-timeline
- **Intents:** explore-detail
- **Suits domains:** devtools, project-management, knowledge
- **Interaction:** diff-view, review-status, discussion-timeline
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Conversation, commit and file-diff views provide a complete review workspace.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, diff-view, review-status
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, input, scroll-area, tooltip
- **npm dependencies:** social-communicate-comment-composer
- **Used in:** Forkyard Code Hosting (template), Project Delivery (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, social-communicate-comment-composer, ui-avatar, ui-badge, ui-input, ui-scroll-area, ui-tooltip


### Ecommerce Sales Dashboard Category Performance

Performance by product category.

- id: `ecommerce-sales-dashboard-category-performance`
- Page: https://agentic-ui-kit.com/components/ecommerce-sales-dashboard-category-performance
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/dashboard-5?piece=ecommerce-sales-dashboard-category-performance

## Install

```bash
agentic-ui add ecommerce-sales-dashboard-category-performance
npx shadcn@4.17.0 add @agentic-ui/ecommerce-sales-dashboard-category-performance
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, bar-timeseries, category-line-performance, legend-interactive
- **Intents:** compare-over-time, show-composition
- **Suits domains:** ecommerce, analytics, saas, operations
- **Interaction:** tooltip, legend-hover
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** performance by product category, comparison of product lines
- **Avoid when:** more than 6 categories, data with no time dimension
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-card-grid
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 7/10
- **Uses primitives:** sidebar, card, chart, badge
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-images-block-avatar-1-webp, asset-admin-kit-logo-black-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-chart, ui-admin-kit-collapsible, ui-admin-kit-dropdown-menu, ui-admin-kit-scroll-area, ui-admin-kit-sidebar


### Ecommerce Sales Dashboard Category Table

Categories with tabular detail below the chart.

- id: `ecommerce-sales-dashboard-category-table`
- Page: https://agentic-ui-kit.com/components/ecommerce-sales-dashboard-category-table
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/dashboard-6?piece=ecommerce-sales-dashboard-category-table

## Install

```bash
agentic-ui add ecommerce-sales-dashboard-category-table
npx shadcn@4.17.0 add @agentic-ui/ecommerce-sales-dashboard-category-table
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, category-line-performance, data-table, hover-highlight
- **Intents:** compare-over-time, manage-collection
- **Suits domains:** ecommerce, analytics, operations, saas
- **Interaction:** tooltip, hover-highlight
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** categories with tabular detail below the chart
- **Avoid when:** transactional lists with actions
- **Preserve when adapting:** information-hierarchy, chart-grammar, kpi-card-grid
- **Replace when adapting:** domain-copy, metrics, semantic-tokens, mock-data
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 7/10
- **Uses primitives:** sidebar, card, chart, table, badge
- **npm dependencies:** recharts
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts@3.8.1
- **Registry dependencies:** asset-admin-kit-images-block-avatar-1-webp, asset-admin-kit-logo-black-svg, lib-admin-kit-utils, ui-admin-kit-avatar, ui-admin-kit-button, ui-admin-kit-chart, ui-admin-kit-collapsible, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-scroll-area, ui-admin-kit-select, ui-admin-kit-sidebar, ui-table


### Ecommerce Shipment List

Listing of shipments with tracking status.

- id: `ecommerce-shipment-list`
- Page: https://agentic-ui-kit.com/components/ecommerce-shipment-list
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/ecommerce/shipment-list-1?piece=ecommerce-shipment-list

## Install

```bash
agentic-ui add ecommerce-shipment-list
npx shadcn@4.17.0 add @agentic-ui/ecommerce-shipment-list
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sorting, pagination, tracking-status-badges, carrier-filters, row-actions
- **Intents:** manage-collection, track-status
- **Suits domains:** ecommerce, logistics, operations
- **Interaction:** sort, paginate, filter-select, row-menu
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** listing of shipments with tracking status, operational collections with a carrier
- **Avoid when:** listings without a logistics dimension
- **Preserve when adapting:** column-model, status-badges, filter-bar-pattern
- **Replace when adapting:** domain-copy, status-enum, carriers
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 7/10, code 7/10
- **Uses primitives:** table, badge, button, select, dropdown-menu
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-badge, ui-admin-kit-button, ui-admin-kit-dropdown-menu, ui-admin-kit-input, ui-admin-kit-select, ui-admin-kit-tabs, ui-table


### Finance Accounts Summary

Account cards and recent transactions derive account totals from local fixtures.

- id: `finance-accounts-summary`
- Page: https://agentic-ui-kit.com/components/finance-accounts-summary
- Live preview: https://agentic-ui-kit.com/live/template/finance-tracker/accounts?piece=finance-accounts-summary

## Install

```bash
agentic-ui add finance-accounts-summary
npx shadcn@4.17.0 add @agentic-ui/finance-accounts-summary
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** account-balances, recent-activity
- **Intents:** explore-detail
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** account-balances, recent-activity
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Account cards and recent transactions derive account totals from local fixtures.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** avatar, badge
- **npm dependencies:** lucide-react
- **Used in:** Fundwell Finance Tracker (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-finance-tracker-utils, ui-finance-tracker-avatar, ui-finance-tracker-badge


### Finance Analytics Dashboard

Period state selects locally derived monthly analytics; no server query or remote data integration.

- id: `finance-analytics-dashboard`
- Page: https://agentic-ui-kit.com/components/finance-analytics-dashboard
- Live preview: https://agentic-ui-kit.com/live/template/finance-tracker/analytics?piece=finance-analytics-dashboard

## Install

```bash
agentic-ui add finance-analytics-dashboard
npx shadcn@4.17.0 add @agentic-ui/finance-analytics-dashboard
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** range-selection, comparison
- **Intents:** compare-over-time
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** range-selection, comparison
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Period state selects locally derived monthly analytics; no server query or remote data integration.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** button, chart
- **npm dependencies:** lucide-react, recharts
- **Used in:** Fundwell Finance Tracker (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts-v2@npm:recharts@^2.15.4
- **Registry dependencies:** lib-finance-tracker-utils, ui-finance-tracker-button, ui-finance-tracker-chart


### Finance App Header

Header resolves current route and offers layout settings, section switches, density reset and a light/dark toggle.

- id: `finance-app-header`
- Page: https://agentic-ui-kit.com/components/finance-app-header
- Live preview: https://agentic-ui-kit.com/live/piece/finance-app-header?piece=finance-app-header

## Install

```bash
agentic-ui add finance-app-header
npx shadcn@4.17.0 add @agentic-ui/finance-app-header
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** section-visibility, density-selection, theme-toggle
- **Intents:** configure
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** section-visibility, density-selection, theme-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Header resolves current route and offers layout settings, section switches, density reset and a light/dark toggle.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** button, dropdown-menu, separator, sheet, sidebar
- **npm dependencies:** lucide-react
- **Used in:** Fundwell Finance Tracker (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** finance-theme-toggle, lib-finance-tracker-utils, ui-finance-tracker-button, ui-finance-tracker-dropdown-menu, ui-finance-tracker-separator, ui-finance-tracker-sheet, ui-finance-tracker-sidebar


### Finance App Sidebar

Shared navigation highlights current route and includes account summaries; replace branding and account fixtures.

- id: `finance-app-sidebar`
- Page: https://agentic-ui-kit.com/components/finance-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/finance-tracker?piece=finance-app-sidebar

## Install

```bash
agentic-ui add finance-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/finance-app-sidebar
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-navigation, account-summary
- **Intents:** navigate
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** route-navigation, account-summary
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Shared navigation highlights current route and includes account summaries; replace branding and account fixtures.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** avatar, button, dropdown-menu, sidebar
- **npm dependencies:** lucide-react
- **Used in:** Fundwell Finance Tracker (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-finance-tracker-utils, ui-finance-tracker-avatar, ui-finance-tracker-button, ui-finance-tracker-dropdown-menu, ui-finance-tracker-sidebar


### Finance Budget Management

Category budgets combine spent/remaining summaries with a comparison chart; data is local mock data.

- id: `finance-budget-management`
- Page: https://agentic-ui-kit.com/components/finance-budget-management
- Live preview: https://agentic-ui-kit.com/live/template/finance-tracker/budgets?piece=finance-budget-management

## Install

```bash
agentic-ui add finance-budget-management
npx shadcn@4.17.0 add @agentic-ui/finance-budget-management
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** budget-progress, comparison
- **Intents:** track-status
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** budget-progress, comparison
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Category budgets combine spent/remaining summaries with a comparison chart; data is local mock data.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** chart
- **npm dependencies:** lucide-react, recharts
- **Used in:** Fundwell Finance Tracker (template)
- **npm dependencies (registry):** lucide-react@0.577.0, recharts-v2@npm:recharts@^2.15.4
- **Registry dependencies:** lib-finance-tracker-utils, ui-finance-tracker-chart


### Finance Dashboard Shell

SidebarProvider wraps shared navigation and header with a full-height independently scrolling main area.

- id: `finance-dashboard-shell`
- Page: https://agentic-ui-kit.com/components/finance-dashboard-shell
- Live preview: https://agentic-ui-kit.com/live/template/finance-tracker?piece=finance-dashboard-shell

## Install

```bash
agentic-ui add finance-dashboard-shell
npx shadcn@4.17.0 add @agentic-ui/finance-dashboard-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sidebar-navigation, scroll-container
- **Intents:** navigate
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** sidebar-navigation, scroll-container
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** SidebarProvider wraps shared navigation and header with a full-height independently scrolling main area.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** sidebar
- **Used in:** Fundwell Finance Tracker (template)
- **Registry dependencies:** finance-app-header, finance-app-sidebar, ui-finance-tracker-sidebar


### Finance Investment Portfolio

TanStack sorting supports holdings inspection alongside portfolio history from fixtures.

- id: `finance-investment-portfolio`
- Page: https://agentic-ui-kit.com/components/finance-investment-portfolio
- Live preview: https://agentic-ui-kit.com/live/template/finance-tracker/investments?piece=finance-investment-portfolio

## Install

```bash
agentic-ui add finance-investment-portfolio
npx shadcn@4.17.0 add @agentic-ui/finance-investment-portfolio
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sorting, portfolio-history
- **Intents:** manage-collection
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** sorting, portfolio-history
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** TanStack sorting supports holdings inspection alongside portfolio history from fixtures.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button, chart, table
- **npm dependencies:** @tanstack/react-table, lucide-react, recharts
- **Used in:** Fundwell Finance Tracker (template), Fintech Trading (analytics live) (blueprint)
- **npm dependencies (registry):** @tanstack/react-table@^8.21.3, lucide-react@0.577.0, recharts-v2@npm:recharts@^2.15.4
- **Registry dependencies:** lib-finance-tracker-utils, ui-finance-tracker-badge, ui-finance-tracker-button, ui-finance-tracker-chart, ui-finance-tracker-table


### Finance Overview Dashboard

Configurable grid composes KPIs, charts, budgets and ledger; Zustand sections and density control rendering.

- id: `finance-overview-dashboard`
- Page: https://agentic-ui-kit.com/components/finance-overview-dashboard
- Live preview: https://agentic-ui-kit.com/live/template/finance-tracker?piece=finance-overview-dashboard

## Install

```bash
agentic-ui add finance-overview-dashboard
npx shadcn@4.17.0 add @agentic-ui/finance-overview-dashboard
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Fundwell Finance Tracker
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** section-visibility, density-selection
- **Intents:** track-status
- **Suits domains:** finance, billing, saas, operations
- **Interaction:** section-visibility, density-selection
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Configurable grid composes KPIs, charts, budgets and ledger; Zustand sections and density control rendering.
- **Avoid when:** Production workflows require persisted financial data or transactional writes.
- **Preserve when adapting:** information-hierarchy, semantic-controls
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Used in:** Fundwell Finance Tracker (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** finance-budget-cards, finance-income-expense-timeseries, finance-kpi-stats-cards, finance-spending-composition, finance-transaction-ledger, lib-finance-tracker-utils


### Music Studio App Header

Header with contextual search per section.

- id: `music-studio-app-header`
- Page: https://agentic-ui-kit.com/components/music-studio-app-header
- Live preview: https://agentic-ui-kit.com/live/piece/music-studio-app-header?piece=music-studio-app-header

## Install

```bash
agentic-ui add music-studio-app-header
npx shadcn@4.17.0 add @agentic-ui/music-studio-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-title, contextual-search, sound-toggle, light-dark-toggle
- **Intents:** navigate, configure
- **Suits domains:** music, media, saas, knowledge, ecommerce
- **Interaction:** search, toggle
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Header with contextual search per section, Top bar with preference toggles
- **Avoid when:** There is no per-section search
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** high
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** sidebar, button, input
- **npm dependencies:** next/link, lucide-react, zustand
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, zustand@5.0.8
- **Registry dependencies:** music-studio-ui-sound-feedback, ui-button, ui-input, ui-sidebar


### Music Studio Collaborator Directory

Collaborator directory.

- id: `music-studio-collaborator-directory`
- Page: https://agentic-ui-kit.com/components/music-studio-collaborator-directory
- Live preview: https://agentic-ui-kit.com/live/template/music-studio/collaborators?piece=music-studio-collaborator-directory

## Install

```bash
agentic-ui add music-studio-collaborator-directory
npx shadcn@4.17.0 add @agentic-ui/music-studio-collaborator-directory
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** search-filter, people-cards, role-badges, stats, empty-state
- **Intents:** manage-collection
- **Suits domains:** crm, hr, music, social, saas
- **Interaction:** search, follow
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Collaborator directory, Project team, Network of vendors or freelancers
- **Avoid when:** Comparable columns are needed (use a table), There are more than 200 people
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** high
- **Quality score:** 7.5/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** avatar, badge, button
- **npm dependencies:** zustand
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** music-studio-collaborator-card, ui-select


### Culinary Collections Grid

Product collections.

- id: `culinary-collections-grid`
- Page: https://agentic-ui-kit.com/components/culinary-collections-grid
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager/collections?piece=culinary-collections-grid

## Install

```bash
agentic-ui add culinary-collections-grid
npx shadcn@4.17.0 add @agentic-ui/culinary-collections-grid
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** masonry-grid, color-accent-cards, item-count, create-action
- **Intents:** manage-collection, navigate
- **Suits domains:** culinary, file-storage, media, books, ecommerce
- **Interaction:** card-link, create-action
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Product collections, Media folders or albums, Reading lists
- **Avoid when:** The collections require tabular metadata, There are hundreds of collections (without pagination)
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** badge, button
- **npm dependencies:** react-masonry-css, next/link
- **Used in:** Pantrie Recipe & Meal Planner (template), Collection Manager (blueprint)
- **npm dependencies (registry):** react-masonry-css@^1.0.16
- **Registry dependencies:** lib-utils, ui-badge


### Culinary Kitchen Overview Dashboard

Home of a recipe book or meal planner.

- id: `culinary-kitchen-overview-dashboard`
- Page: https://agentic-ui-kit.com/components/culinary-kitchen-overview-dashboard
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager?piece=culinary-kitchen-overview-dashboard

## Install

```bash
agentic-ui add culinary-kitchen-overview-dashboard
npx shadcn@4.17.0 add @agentic-ui/culinary-kitchen-overview-dashboard
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-summary, masonry-widgets, date-range-selection, greeting-header
- **Intents:** compare-over-time, track-status
- **Suits domains:** culinary, personal-productivity, saas, operations, analytics
- **Interaction:** date-range-selection, masonry-reflow
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Home of a recipe book or meal planner, Personal activity overview with widgets, Operations panel with KPIs and heterogeneous cards
- **Avoid when:** There is a single main metric, A dense table is required instead of widgets
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** select
- **npm dependencies:** react-masonry-css, lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** culinary-activity-feed, culinary-category-composition, culinary-cooking-activity-timeseries, culinary-cuisine-distribution, culinary-difficulty-breakdown, culinary-kpi-stats-cards, culinary-meal-plan-preview, culinary-nutrition-summary, culinary-popular-tags, culinary-quick-collections, culinary-recent-recipes-widget, culinary-top-contributors, culinary-weekly-goals-progress, lib-utils


### Culinary Recipe Browser

Product catalog with category filters.

- id: `culinary-recipe-browser`
- Page: https://agentic-ui-kit.com/components/culinary-recipe-browser
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager/recipes?piece=culinary-recipe-browser

## Install

```bash
agentic-ui add culinary-recipe-browser
npx shadcn@4.17.0 add @agentic-ui/culinary-recipe-browser
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** faceted-filters, sort-field-and-direction, result-count, clear-filters, multi-view-results
- **Intents:** manage-collection, navigate
- **Suits domains:** culinary, ecommerce, books, media, knowledge
- **Interaction:** filter-select, sort-toggle, clear-filters, search
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Product catalog with category filters, Book library by genre and difficulty, Filterable template gallery
- **Avoid when:** Fewer than 10 items, Numeric range filters or facets with counts are needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** select, button, badge
- **npm dependencies:** lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template), Collection Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** culinary-recipe-multi-view-list, lib-utils, ui-badge, ui-button, ui-select


### Devtools Explore Detail Discovery

Discovery sections combine trending repositories, people and topics.

- id: `devtools-explore-detail-discovery`
- Page: https://agentic-ui-kit.com/components/devtools-explore-detail-discovery
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/explore?piece=devtools-explore-detail-discovery

## Install

```bash
agentic-ui add devtools-explore-detail-discovery
npx shadcn@4.17.0 add @agentic-ui/devtools-explore-detail-discovery
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** trending-collection, topic-discovery, contributor-discovery
- **Intents:** explore-detail
- **Suits domains:** devtools, knowledge, social, education
- **Interaction:** trending-collection, topic-discovery, contributor-discovery
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Discovery sections combine trending repositories, people and topics.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, trending-collection, topic-discovery
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, button
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-code-hosting-utils, ui-avatar, ui-button


### Devtools Monitor Live Overview

Greeting, one-card KPI strip, review queue beside weekly opened/merged bars, pinned repositories, contribution calendar and monthly timeline form a clear operational hierarchy.

- id: `devtools-monitor-live-overview`
- Page: https://agentic-ui-kit.com/components/devtools-monitor-live-overview
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting?piece=devtools-monitor-live-overview

## Install

```bash
agentic-ui add devtools-monitor-live-overview
npx shadcn@4.17.0 add @agentic-ui/devtools-monitor-live-overview
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** summary-metrics, review-queue, weekly-change-flow, contribution-history, pinned-repositories
- **Intents:** monitor-live
- **Suits domains:** devtools, project-management, analytics, operations
- **Interaction:** summary-metrics, review-queue, weekly-change-flow, contribution-history, pinned-repositories
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Greeting, one-card KPI strip, review queue beside weekly opened/merged bars, pinned repositories, contribution calendar and monthly timeline form a clear operational hierarchy.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, summary-metrics, contribution-history
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button
- **npm dependencies:** analytics-compare-over-time-contributions, analytics-monitor-live-summary, devtools-audit-trail-contributions, saas-configure-pinned-items, saas-manage-collection-pinned-grid
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** analytics-compare-over-time-contributions, analytics-monitor-live-summary, devtools-audit-trail-contributions, lib-code-hosting-utils, saas-configure-pinned-items, saas-manage-collection-pinned-grid, ui-avatar, ui-button


### File Storage App Sidebar

Side navigation with collapsible folders.

- id: `file-storage-app-sidebar`
- Page: https://agentic-ui-kit.com/components/file-storage-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/file-storage?piece=file-storage-app-sidebar

## Install

```bash
agentic-ui add file-storage-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/file-storage-app-sidebar
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** primary-navigation, collapsible-groups, quota-widget, user-menu, create-menu
- **Intents:** navigate
- **Suits domains:** file-storage, media, saas, project-management, knowledge
- **Interaction:** collapse, navigation, user-menu
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Side navigation with collapsible folders, Application shell with quota, Main menu of a workspace
- **Avoid when:** The navigation is single-level, There is no persistent shell
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** sidebar, dropdown-menu, avatar, button, progress, badge, collapsible
- **npm dependencies:** lucide-react, next/link
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-file-storage-utils, ui-avatar, ui-badge, ui-button, ui-collapsible, ui-dropdown-menu, ui-progress, ui-sidebar


### File Storage Collection Detail

Detail of a collection with its files.

- id: `file-storage-collection-detail`
- Page: https://agentic-ui-kit.com/components/file-storage-collection-detail
- Live preview: https://agentic-ui-kit.com/live/template/file-storage/collections/c1?piece=file-storage-collection-detail

## Install

```bash
agentic-ui add file-storage-collection-detail
npx shadcn@4.17.0 add @agentic-ui/file-storage-collection-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** header-summary, back-navigation, contextual-actions, embedded-file-list
- **Intents:** explore-detail, manage-collection
- **Suits domains:** file-storage, media, knowledge, project-management, ecommerce
- **Interaction:** back-navigation, contextual-actions
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Detail of a collection with its files, Album view, Project folder with documents
- **Avoid when:** The collection has no listable content, There is no container entity
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, badge
- **npm dependencies:** lucide-react, next/link
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** file-storage-file-list, lib-file-storage-utils, ui-badge, ui-button


### File Storage KPI Stats Cards

Ingest, review and quota tiles.

- id: `file-storage-kpi-stats-cards`
- Page: https://agentic-ui-kit.com/components/file-storage-kpi-stats-cards
- Live preview: https://agentic-ui-kit.com/live/piece/file-storage-kpi-stats-cards?piece=file-storage-kpi-stats-cards

## Install

```bash
agentic-ui add file-storage-kpi-stats-cards
npx shadcn@4.17.0 add @agentic-ui/file-storage-kpi-stats-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-summary, usage-meter, derived-metrics
- **Intents:** track-status
- **Suits domains:** file-storage, saas, analytics, billing, operations
- **Interaction:** hover
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Ingest, review and quota tiles, Account usage KPIs, Summary of shared assets
- **Avoid when:** The metrics require time series, There is only one indicator
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 7/10
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** lib-file-storage-utils


### File Storage Overview Dashboard

Post-production home of a film studio's shared drive.

- id: `file-storage-overview-dashboard`
- Page: https://agentic-ui-kit.com/components/file-storage-overview-dashboard
- Live preview: https://agentic-ui-kit.com/live/template/file-storage?piece=file-storage-overview-dashboard

## Install

```bash
agentic-ui add file-storage-overview-dashboard
npx shadcn@4.17.0 add @agentic-ui/file-storage-overview-dashboard
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-summary, two-plus-one-chart-row, sectioned-widget-grid, chart-window-toggle, activity-overview
- **Intents:** compare-over-time, track-status
- **Suits domains:** file-storage, media, saas, operations, knowledge
- **Interaction:** chart-window-toggle, responsive-grid
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Post-production home of a film studio's shared drive, Team storage usage summary, Asset library overview
- **Avoid when:** There are no aggregate metrics to show, A single dense table is required instead of widgets
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** file-storage-activity-timeseries, file-storage-kpi-stats-cards, file-storage-storage-composition, file-storage-team-activity-feed, lib-file-storage-utils, ui-badge, ui-button


### Saas Navigate Code Hosting Header

Compact contextual header combines the route title, search and a light/dark toggle.

- id: `saas-navigate-code-hosting-header`
- Page: https://agentic-ui-kit.com/components/saas-navigate-code-hosting-header
- Live preview: https://agentic-ui-kit.com/live/piece/saas-navigate-code-hosting-header?piece=saas-navigate-code-hosting-header

## Install

```bash
agentic-ui add saas-navigate-code-hosting-header
npx shadcn@4.17.0 add @agentic-ui/saas-navigate-code-hosting-header
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** search, route-title, light-dark-toggle
- **Intents:** navigate
- **Suits domains:** saas, devtools, knowledge, operations
- **Interaction:** search, route-title, light-dark-toggle
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Compact contextual header combines the route title, search and a light/dark toggle.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, search, route-title
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, input, separator, sidebar, tooltip
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, zustand@5.0.8
- **Registry dependencies:** ui-button, ui-code-hosting-sidebar, ui-input, ui-separator, ui-tooltip


### Wine Cellar Region Browser

Region/origin browser.

- id: `wine-cellar-region-browser`
- Page: https://agentic-ui-kit.com/components/wine-cellar-region-browser
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar/regions?piece=wine-cellar-region-browser

## Install

```bash
agentic-ui add wine-cellar-region-browser
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-region-browser
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** card-grid, count-sorting, taxonomy-browse
- **Intents:** explore-detail, navigate
- **Suits domains:** wine, travel, culinary, ecommerce, knowledge
- **Interaction:** hover
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Region/origin browser, Catalog categories with counts, Destinations with key attributes
- **Avoid when:** The taxonomy has a deep hierarchy, A map is needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** badge
- **npm dependencies:** zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** wine-cellar-region-card


### Wine Cellar Region Card

Region or destination card.

- id: `wine-cellar-region-card`
- Page: https://agentic-ui-kit.com/components/wine-cellar-region-card
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar/regions?piece=wine-cellar-region-card

## Install

```bash
agentic-ui add wine-cellar-region-card
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-region-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** color-band, grape-tags, count-summary
- **Intents:** explore-detail
- **Suits domains:** wine, travel, culinary, knowledge
- **Interaction:** hover
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Region or destination card, Category with attributes and count
- **Avoid when:** A primary action on the card is needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.45/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** badge
- **npm dependencies:** lucide-react, zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** ui-badge


### Culinary Weekly Meal Planner

Weekly shift planner.

- id: `culinary-weekly-meal-planner`
- Page: https://agentic-ui-kit.com/components/culinary-weekly-meal-planner
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager/meal-plan?piece=culinary-weekly-meal-planner

## Install

```bash
agentic-ui add culinary-weekly-meal-planner
npx shadcn@4.17.0 add @agentic-ui/culinary-weekly-meal-planner
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** week-day-columns, typed-slots, slot-fill-count, empty-slot-affordance, date-per-day
- **Intents:** track-status, manage-collection
- **Suits domains:** culinary, personal-productivity, operations, education, hr
- **Interaction:** slot-placeholder
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Weekly shift planner, Training plan by day, Weekly class timetable
- **Avoid when:** Drag and drop between slots is needed, Planning is by hour rather than by fixed slots
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 5/10, code 7/10
- **Uses primitives:** badge
- **npm dependencies:** react-masonry-css, lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0, react-masonry-css@^1.0.16
- **Registry dependencies:** lib-utils, ui-badge


### Devtools Manage Collection Pull Requests

Review queue surfaces CI state, review status and branch context.

- id: `devtools-manage-collection-pull-requests`
- Page: https://agentic-ui-kit.com/components/devtools-manage-collection-pull-requests
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/pull-requests?piece=devtools-manage-collection-pull-requests

## Install

```bash
agentic-ui add devtools-manage-collection-pull-requests
npx shadcn@4.17.0 add @agentic-ui/devtools-manage-collection-pull-requests
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** review-queue, status-filter, search
- **Intents:** manage-collection
- **Suits domains:** devtools, project-management, operations
- **Interaction:** review-queue, status-filter, search
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Review queue surfaces CI state, review status and branch context.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, review-queue, status-filter
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.4/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** select
- **npm dependencies:** devtools-track-status-pull-request
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** devtools-track-status-pull-request, lib-code-hosting-utils, ui-select


### Flightops App Header

Console header with search that depends on the active route.

- id: `flightops-app-header`
- Page: https://agentic-ui-kit.com/components/flightops-app-header
- Live preview: https://agentic-ui-kit.com/live/piece/flightops-app-header?piece=flightops-app-header

## Install

```bash
agentic-ui add flightops-app-header
npx shadcn@4.17.0 add @agentic-ui/flightops-app-header
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-title, contextual-search, light-dark-toggle, primary-action
- **Intents:** navigate
- **Suits domains:** aviation, operations, saas, logistics
- **Interaction:** search, toggle-theme
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Console header with search that depends on the active route.
- **Avoid when:** The application has no multiple routes or contextual search.
- **Preserve when adapting:** route-awareness, header-composition
- **Replace when adapting:** domain-copy, branding, placeholder-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.4/10
- **Quality breakdown:** visual 7/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** input, button, sidebar
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, flightops-create-flight-dialog, ui-button, ui-flight-airports, ui-input, ui-sidebar


### Marine Fleet List View

Dense fleet list.

- id: `marine-fleet-list-view`
- Page: https://agentic-ui-kit.com/components/marine-fleet-list-view
- Live preview: https://agentic-ui-kit.com/live/piece/marine-fleet-list-view?piece=marine-fleet-list-view

## Install

```bash
agentic-ui add marine-fleet-list-view
npx shadcn@4.17.0 add @agentic-ui/marine-fleet-list-view
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** columnar-rows, class-chip, owner-avatar, responsive-column-hiding
- **Intents:** manage-collection
- **Suits domains:** marine, aviation, logistics, crm, ecommerce
- **Interaction:** select-entity
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Dense fleet list, Asset inventory in rows, Compact contact directory
- **Avoid when:** Need to sort by column or multi-select
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.4/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 5/10, code 7/10
- **Uses primitives:** avatar
- **npm dependencies:** zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-regatta-ops-utils, marine-yacht-card, ui-avatar, ui-badge, ui-button, ui-dropdown-menu


### Marine Podium Showcase

Championship podium.

- id: `marine-podium-showcase`
- Page: https://agentic-ui-kit.com/components/marine-podium-showcase
- Live preview: https://agentic-ui-kit.com/live/piece/marine-podium-showcase?piece=marine-podium-showcase

## Install

```bash
agentic-ui add marine-podium-showcase
npx shadcn@4.17.0 add @agentic-ui/marine-podium-showcase
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** top-3-podium, gradient-header, stat-triplet, profile-row
- **Intents:** track-status
- **Suits domains:** marine, analytics, hr, education, saas
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Championship podium, Top 3 sellers of the month, Top students in a course
- **Avoid when:** Standings with no tie of interest in the top 3, Formal/financial contexts
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 5/10, code 7/10
- **Uses primitives:** avatar
- **npm dependencies:** zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-regatta-ops-utils, marine-standings-table, ui-avatar


### Music Studio Genre Mix Card

Style shelf that plays the first song of each genre.

- id: `music-studio-genre-mix-card`
- Page: https://agentic-ui-kit.com/components/music-studio-genre-mix-card
- Live preview: https://agentic-ui-kit.com/live/template/music-studio?piece=music-studio-genre-mix-card

## Install

```bash
agentic-ui add music-studio-genre-mix-card
npx shadcn@4.17.0 add @agentic-ui/music-studio-genre-mix-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** generated-cover, mix-label, play-collection
- **Intents:** navigate, explore-detail
- **Suits domains:** music, media, culinary, travel, ecommerce
- **Interaction:** click-to-play, hover
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Style shelf that plays the first song of each genre, Recipe collection, Destination collection
- **Avoid when:** The brand does not allow saturated gradients
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality score:** 7.4/10
- **Quality breakdown:** visual 9/10, responsive 7/10, accessibility 7/10, code 7/10
- **npm dependencies:** zustand, lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** music-studio-ui-sound-feedback


### Music Studio Podcast Episode Card

Recommended episode.

- id: `music-studio-podcast-episode-card`
- Page: https://agentic-ui-kit.com/components/music-studio-podcast-episode-card
- Live preview: https://agentic-ui-kit.com/live/template/music-studio/podcasts?piece=music-studio-podcast-episode-card

## Install

```bash
agentic-ui add music-studio-podcast-episode-card
npx shadcn@4.17.0 add @agentic-ui/music-studio-podcast-episode-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** gradient-background, episode-art, description, preview, play, queue
- **Intents:** explore-detail
- **Suits domains:** media, education, music, knowledge
- **Interaction:** click-to-play, preview, queue
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Recommended episode, Featured lesson, Recorded talk
- **Avoid when:** Strict corporate palette, Dense lists
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.4/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** lib-utils, music-studio-ui-sound-feedback, ui-button, ui-dropdown-menu


### Orchestra OPS Today Overview

Daily command panel for an orchestra conductor or production.

- id: `orchestra-ops-today-overview`
- Page: https://agentic-ui-kit.com/components/orchestra-ops-today-overview
- Live preview: https://agentic-ui-kit.com/live/template/orchestra-ops?piece=orchestra-ops-today-overview

## Install

```bash
agentic-ui add orchestra-ops-today-overview
npx shadcn@4.17.0 add @agentic-ui/orchestra-ops-today-overview
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Cadenza Orchestra Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-metrics, gantt-day-timeline, section-column-chart, fortnight-load-chart, replies-owed-table
- **Intents:** monitor-live, track-status, explore-detail
- **Suits domains:** music, operations, logistics, media, personal-productivity
- **Interaction:** event-select, route-link, filter-click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Daily command panel for an orchestra conductor or production, Event control center with an hourly agenda and alerts, Live operations board for cultural venues
- **Avoid when:** Purely analytical views with long time series, Simple CRUD tables without an hourly time dimension
- **Preserve when adapting:** kpi-card-row, gantt-timeline-math, three-column-chart-grid
- **Replace when adapting:** schedule-fixtures, dispatch-models, kpi-definitions
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.38/10
- **Quality breakdown:** visual 8.5/10, responsive 8/10, accessibility 7.5/10, code 8/10
- **Uses primitives:** button, badge
- **npm dependencies:** lucide-react, zustand, date-fns
- **Used in:** Cadenza Orchestra Operations (template)
- **Registry dependencies:** orchestra-ops-ensemble-pulse


### Devtools Configure Issue Metadata

Metadata groups isolate assignees, labels and milestones from discussion content.

- id: `devtools-configure-issue-metadata`
- Page: https://agentic-ui-kit.com/components/devtools-configure-issue-metadata
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/issues/ines-carvalho/tidegauge/402?piece=devtools-configure-issue-metadata

## Install

```bash
agentic-ui add devtools-configure-issue-metadata
npx shadcn@4.17.0 add @agentic-ui/devtools-configure-issue-metadata
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** assignee-list, labels, milestones
- **Intents:** configure
- **Suits domains:** devtools, support, project-management
- **Interaction:** assignee-list, labels, milestones
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Metadata groups isolate assignees, labels and milestones from discussion content.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, assignee-list, labels
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.35/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** avatar, badge, tooltip
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, social-communicate-comment-composer, ui-avatar, ui-badge, ui-tooltip


### Devtools Track Status Reviewers

Overlapping reviewer avatars provide compact participation context.

- id: `devtools-track-status-reviewers`
- Page: https://agentic-ui-kit.com/components/devtools-track-status-reviewers
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/pull-requests/ines-carvalho/tidegauge/87?piece=devtools-track-status-reviewers

## Install

```bash
agentic-ui add devtools-track-status-reviewers
npx shadcn@4.17.0 add @agentic-ui/devtools-track-status-reviewers
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** reviewer-avatars, review-summary
- **Intents:** track-status
- **Suits domains:** devtools, project-management, knowledge
- **Interaction:** reviewer-avatars, review-summary
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Overlapping reviewer avatars provide compact participation context.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, reviewer-avatars, review-summary
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.35/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** avatar, badge, input, scroll-area, tooltip
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-code-hosting-utils, social-communicate-comment-composer, ui-avatar, ui-badge, ui-input, ui-scroll-area, ui-tooltip


### File Storage Starred Files

Favorites in a file manager.

- id: `file-storage-starred-files`
- Page: https://agentic-ui-kit.com/components/file-storage-starred-files
- Live preview: https://agentic-ui-kit.com/live/template/file-storage/starred?piece=file-storage-starred-files

## Install

```bash
agentic-ui add file-storage-starred-files
npx shadcn@4.17.0 add @agentic-ui/file-storage-starred-files
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** saved-items, empty-state, embedded-file-list
- **Intents:** manage-collection
- **Suits domains:** file-storage, media, knowledge, notes, ecommerce
- **Interaction:** starring
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Favorites in a file manager, Saved items, Bookmarks in a library
- **Avoid when:** There is no concept of a favorite, The saved collection requires a hierarchy
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** high
- **Quality score:** 7.35/10
- **Quality breakdown:** visual 7/10, responsive 8/10, accessibility 7/10, code 8/10
- **npm dependencies:** lucide-react
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** file-storage-file-list


### Culinary App Sidebar

Side navigation with collapsible sections.

- id: `culinary-app-sidebar`
- Page: https://agentic-ui-kit.com/components/culinary-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager?piece=culinary-app-sidebar

## Install

```bash
agentic-ui add culinary-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/culinary-app-sidebar
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** grouped-nav, active-route, collapsible-sections, pinned-collections, cuisine-filter-shortcuts, streak-widget, user-menu, collapse-to-icons
- **Intents:** navigate
- **Suits domains:** culinary, file-storage, notes, media, knowledge
- **Interaction:** collapse, collapsible-groups, user-menu
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Side navigation with collapsible sections, Sidebar with pinned shortcuts and user
- **Avoid when:** There are only 2-3 destinations, The main navigation is at the top
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** sidebar, collapsible, dropdown-menu, progress, avatar, button
- **npm dependencies:** next/link, lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-avatar, ui-button, ui-collapsible, ui-progress, ui-sidebar


### Culinary Collection Detail

Playlist detail.

- id: `culinary-collection-detail`
- Page: https://agentic-ui-kit.com/components/culinary-collection-detail
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager/collections/col1?piece=culinary-collection-detail

## Install

```bash
agentic-ui add culinary-collection-detail
npx shadcn@4.17.0 add @agentic-ui/culinary-collection-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** hero-header, aggregate-badges, not-found-state, empty-state, back-navigation
- **Intents:** explore-detail, manage-collection
- **Suits domains:** culinary, books, media, ecommerce, knowledge
- **Interaction:** back-navigation, view-mode
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Playlist detail, Product category detail, Article collection
- **Avoid when:** The detail needs inline editing, The aggregate depends on heterogeneous units
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** button, badge
- **npm dependencies:** next/link, lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** culinary-recipe-multi-view-list, lib-utils, ui-badge, ui-button


### Culinary Nutrition Summary

Average consumption with a breakdown by resource.

- id: `culinary-nutrition-summary`
- Page: https://agentic-ui-kit.com/components/culinary-nutrition-summary
- Live preview: https://agentic-ui-kit.com/live/piece/culinary-nutrition-summary?piece=culinary-nutrition-summary

## Install

```bash
agentic-ui add culinary-nutrition-summary
npx shadcn@4.17.0 add @agentic-ui/culinary-nutrition-summary
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** headline-metric, min-max-range, breakdown-progress-bars
- **Intents:** track-status, show-composition
- **Suits domains:** culinary, healthcare, personal-productivity, finance
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Average consumption with a breakdown by resource, Average spend with a breakdown by line item
- **Avoid when:** The breakdown does not add up to 100%, There are more than 4 components
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 6/10, code 6/10
- **npm dependencies:** lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** lib-utils


### File Storage Recent Files

Recent files grouped by age.

- id: `file-storage-recent-files`
- Page: https://agentic-ui-kit.com/components/file-storage-recent-files
- Live preview: https://agentic-ui-kit.com/live/template/file-storage/recent?piece=file-storage-recent-files

## Install

```bash
agentic-ui add file-storage-recent-files
npx shadcn@4.17.0 add @agentic-ui/file-storage-recent-files
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** time-grouping, recency-buckets, embedded-file-list
- **Intents:** explore-detail, audit-trail
- **Suits domains:** file-storage, media, notes, knowledge, devtools
- **Interaction:** grouping
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Recent files grouped by age, Access history, Recently opened documents
- **Avoid when:** There are no reliable timestamps, Chronological order is irrelevant
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **npm dependencies:** lucide-react
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** file-storage-file-list


### Flightops Airport Network Directory

Network of nodes with geographic coverage and per-node metrics.

- id: `flightops-airport-network-directory`
- Page: https://agentic-ui-kit.com/components/flightops-airport-network-directory
- Live preview: https://agentic-ui-kit.com/live/template/flight-ops/airports?piece=flightops-airport-network-directory

## Install

```bash
agentic-ui add flightops-airport-network-directory
npx shadcn@4.17.0 add @agentic-ui/flightops-airport-network-directory
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** coverage-map, region-filter, sort, card-grid
- **Intents:** manage-collection
- **Suits domains:** aviation, maps-ops, travel, logistics
- **Interaction:** filter-region, sort, pan-zoom
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Network of nodes with geographic coverage and per-node metrics.
- **Avoid when:** The network has no relevant geographic dimension.
- **Preserve when adapting:** map-plus-grid, filter-model
- **Replace when adapting:** domain-copy, mock-data, map-style
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **npm dependencies:** maplibre-gl
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, flightops-airport-card, ui-badge, ui-button, ui-dropdown-menu, ui-flight, ui-flight-airports, ui-flight-ops-map


### Flightops Fleet Status

Asset inventory with operational status and a maintenance window.

- id: `flightops-fleet-status`
- Page: https://agentic-ui-kit.com/components/flightops-fleet-status
- Live preview: https://agentic-ui-kit.com/live/template/flight-ops/fleet?piece=flightops-fleet-status

## Install

```bash
agentic-ui add flightops-fleet-status
npx shadcn@4.17.0 add @agentic-ui/flightops-fleet-status
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-filter, sort, card-grid, empty-state
- **Intents:** manage-collection
- **Suits domains:** aviation, logistics, operations, media
- **Interaction:** filter, sort
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Asset inventory with operational status and a maintenance window.
- **Avoid when:** The assets have no status or maintenance cycle to show.
- **Preserve when adapting:** filter-model, card-grid
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, flightops-aircraft-card, ui-badge, ui-button, ui-dropdown-menu, ui-flight-airports


### Flightops Flight Schedule Board

Operational listing filterable by status with two display densities.

- id: `flightops-flight-schedule-board`
- Page: https://agentic-ui-kit.com/components/flightops-flight-schedule-board
- Live preview: https://agentic-ui-kit.com/live/template/flight-ops/flights?piece=flightops-flight-schedule-board

## Install

```bash
agentic-ui add flightops-flight-schedule-board
npx shadcn@4.17.0 add @agentic-ui/flightops-flight-schedule-board
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-filter, kind-filter, sort, grid-list-toggle, empty-state
- **Intents:** manage-collection
- **Suits domains:** aviation, logistics, operations, ecommerce
- **Interaction:** filter, sort, toggle-view, pin-flight
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Operational listing filterable by status with two display densities.
- **Avoid when:** The collection is small and does not justify filters or a view switcher.
- **Preserve when adapting:** filter-model, dual-view-pattern
- **Replace when adapting:** domain-copy, mock-data, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, flightops-flight-card, flightops-flight-row, lib-flight-ops-utils, ui-badge, ui-button, ui-dropdown-menu, ui-flight-airports


### Music Studio Track Library

Track library.

- id: `music-studio-track-library`
- Page: https://agentic-ui-kit.com/components/music-studio-track-library
- Live preview: https://agentic-ui-kit.com/live/template/music-studio/tracks?piece=music-studio-track-library

## Install

```bash
agentic-ui add music-studio-track-library
npx shadcn@4.17.0 add @agentic-ui/music-studio-track-library
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** genre-filter, stage-filter, header-search, click-to-play, empty-state
- **Intents:** manage-collection
- **Suits domains:** music, media, file-storage, knowledge, education
- **Interaction:** filter, search, click-to-play
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Track library, Listing of episodes or videos, Recordings repository
- **Avoid when:** Column sorting or server pagination is needed, The items have no playable media
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** select, button, badge
- **npm dependencies:** zustand
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** music-studio-track-list, ui-select


### Rare Books Library Catalog

Catalog with filters by era, status, language and condition.

- id: `rare-books-library-catalog`
- Page: https://agentic-ui-kit.com/components/rare-books-library-catalog
- Live preview: https://agentic-ui-kit.com/live/template/rare-books/library?piece=rare-books-library-catalog

## Install

```bash
agentic-ui add rare-books-library-catalog
npx shadcn@4.17.0 add @agentic-ui/rare-books-library-catalog
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** faceted-filters, sorting, grid-list-toggle, search, result-count, empty-state
- **Intents:** manage-collection
- **Suits domains:** books, ecommerce, media, wine, knowledge
- **Interaction:** filter, sort, view-switching, search
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Catalog with filters by era, status, language and condition, Inventory of museum pieces, Product catalog with a card/table view
- **Avoid when:** Server pagination or >500 items, Multiple selection and bulk actions
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** select, button
- **npm dependencies:** lucide-react, zustand
- **Used in:** Folioteca Rare Books (template), Collection Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, rare-books-book-card, rare-books-book-row, ui-button, ui-select


### Wine Cellar Overview Dashboard

Stocktake home for a private collection with drinking windows on a timeline.

- id: `wine-cellar-overview-dashboard`
- Page: https://agentic-ui-kit.com/components/wine-cellar-overview-dashboard
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar?piece=wine-cellar-overview-dashboard

## Install

```bash
agentic-ui add wine-cellar-overview-dashboard
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-overview-dashboard
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-summary, timeline-chart, line-chart, attention-list, recent-items, deep-links
- **Intents:** track-status, compare-over-time
- **Suits domains:** wine, ecommerce, operations, books, personal-productivity
- **Interaction:** navigation, chart-settings
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Stocktake home for a private collection with drinking windows on a timeline, Inventory home with a KPI strip, closing-soon list and latest arrivals, Personal library panel with loans about to fall due
- **Avoid when:** Deep analytics with global filters is needed, There are no entities with temporal state
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** button, card, chart
- **npm dependencies:** lucide-react, next/link, zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** wine-cellar-bottle-card, wine-cellar-kpi-stats-cards, wine-cellar-tasting-card, wine-cellar-vintage-distribution


### Wine Cellar Tasting Log

Journal of tastings.

- id: `wine-cellar-tasting-log`
- Page: https://agentic-ui-kit.com/components/wine-cellar-tasting-log
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar/tastings?piece=wine-cellar-tasting-log

## Install

```bash
agentic-ui add wine-cellar-tasting-log
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-tasting-log
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** chronological-log, text-search, tagged-notes, rating, empty-state
- **Intents:** audit-trail, explore-detail
- **Suits domains:** wine, culinary, notes, crm, personal-productivity
- **Interaction:** search
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Journal of tastings, Log of customer visits with notes and a score, Log of cooked recipes
- **Avoid when:** Inline editing of the entries is required, Entries without text content
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.3/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** card, badge
- **npm dependencies:** zustand
- **Used in:** Vintry Wine Cellar (template), Collection Manager (blueprint)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** wine-cellar-tasting-card


### Music Studio Podcast Browser

Podcast discovery.

- id: `music-studio-podcast-browser`
- Page: https://agentic-ui-kit.com/components/music-studio-podcast-browser
- Live preview: https://agentic-ui-kit.com/live/template/music-studio/podcasts?piece=music-studio-podcast-browser

## Install

```bash
agentic-ui add music-studio-podcast-browser
npx shadcn@4.17.0 add @agentic-ui/music-studio-podcast-browser
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** subscribed-shows, category-columns, episode-cards, preview-play
- **Intents:** explore-detail, navigate
- **Suits domains:** media, education, knowledge, music
- **Interaction:** click-to-play, subscribe
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Podcast discovery, Library of talks or webinars, Course episode feed
- **Avoid when:** The brand requires an understated palette, Hundreds of episodes need to be listed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality score:** 7.25/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **Used in:** Tonehall Music Studio (template)
- **Registry dependencies:** music-studio-podcast-episode-card, music-studio-podcast-show-tile


### Flightops Live Map Console

Tracking an in-flight fleet on a map with a detail panel.

- id: `flightops-live-map-console`
- Page: https://agentic-ui-kit.com/components/flightops-live-map-console
- Live preview: https://agentic-ui-kit.com/live/template/flight-ops/live-map?piece=flightops-live-map-console

## Install

```bash
agentic-ui add flightops-live-map-console
npx shadcn@4.17.0 add @agentic-ui/flightops-live-map-console
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Aerodesk Flight Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** great-circle-routes, flight-selection, layer-toggle, animation-toggle, tracked-list
- **Intents:** monitor-live
- **Suits domains:** aviation, maps-ops, logistics, marine
- **Interaction:** select-flight, toggle-layers, toggle-animation, pan-zoom
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Tracking an in-flight fleet on a map with a detail panel.
- **Avoid when:** There is no real geodata or the user only needs a status table.
- **Preserve when adapting:** map-interaction-model, route-rendering
- **Replace when adapting:** domain-copy, mock-data, map-style
- **Adaptation effort:** high
- **Coupling:** high
- **Quality score:** 7.2/10
- **Quality breakdown:** visual 9/10, responsive 7/10, accessibility 6/10, code 8/10
- **npm dependencies:** maplibre-gl, @turf/great-circle
- **Used in:** Aerodesk Flight Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** asset-flight-ops-avatars-ines-svg, lib-flight-ops-utils, ui-badge, ui-button, ui-flight, ui-flight-airports, ui-flight-ops-map


### Marine Regatta Calendar Browser

Sports event calendar with a course map.

- id: `marine-regatta-calendar-browser`
- Page: https://agentic-ui-kit.com/components/marine-regatta-calendar-browser
- Live preview: https://agentic-ui-kit.com/live/template/regatta-ops/regattas?piece=marine-regatta-calendar-browser

## Install

```bash
agentic-ui add marine-regatta-calendar-browser
npx shadcn@4.17.0 add @agentic-ui/marine-regatta-calendar-browser
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** course-map, faceted-filter, sort, search, card-grid, empty-state, pin-selection
- **Intents:** manage-collection, explore-detail
- **Suits domains:** marine, travel, operations, logistics, saas
- **Interaction:** faceted-filter, sort, search, pin-on-map
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Sports event calendar with a course map, Catalog of routes or shipments with status filters, List of trips with a geographic view
- **Avoid when:** More than ~100 items without pagination, A collection with no geographic dimension
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.15/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 8/10
- **Uses primitives:** dropdown-menu, button, badge, map, select
- **npm dependencies:** maplibre-gl, zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** marine-course-map, marine-regatta-card, ui-badge, ui-button, ui-dropdown-menu


### Music Studio Overview Home

Producer control room with release countdown and stage breakdown.

- id: `music-studio-overview-home`
- Page: https://agentic-ui-kit.com/components/music-studio-overview-home
- Live preview: https://agentic-ui-kit.com/live/template/music-studio?piece=music-studio-overview-home

## Install

```bash
agentic-ui add music-studio-overview-home
npx shadcn@4.17.0 add @agentic-ui/music-studio-overview-home
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** stat-tiles, bar-chart, stage-distribution, horizontal-rails, quick-access, view-all-links, play-from-card
- **Intents:** navigate, explore-detail
- **Suits domains:** music, media, social, ecommerce, knowledge
- **Interaction:** click-to-play, horizontal-scroll, view-all
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Producer control room with release countdown and stage breakdown, Course catalog front page, Store home with featured collections
- **Avoid when:** The screen needs interactive, zoomable charts, There are fewer than three collections to show
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.15/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 6/10, code 7/10
- **Uses primitives:** button, avatar, badge
- **npm dependencies:** zustand
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** music-studio-collaborator-avatar-tile, music-studio-genre-mix-card, music-studio-horizontal-rail, music-studio-quick-access-grid, music-studio-release-card, music-studio-session-mini-card, music-studio-track-card


### Music Studio Sessions Board

Production sessions by phase.

- id: `music-studio-sessions-board`
- Page: https://agentic-ui-kit.com/components/music-studio-sessions-board
- Live preview: https://agentic-ui-kit.com/live/template/music-studio/sessions?piece=music-studio-sessions-board

## Install

```bash
agentic-ui add music-studio-sessions-board
npx shadcn@4.17.0 add @agentic-ui/music-studio-sessions-board
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-filter, genre-filter, grid-list-toggle, pinning, empty-state
- **Intents:** track-status, manage-collection
- **Suits domains:** music, project-management, operations, media, saas
- **Interaction:** filter, view-switching, pin
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Production sessions by phase, Creative projects by stage, Agency commissions with progress
- **Avoid when:** The flow requires dragging between columns (kanban), There are hundreds of items
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.15/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** select, button, badge, progress, dropdown-menu, avatar
- **npm dependencies:** zustand, lucide-react
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, music-studio-session-card, ui-button, ui-select


### Rare Books Acquisition Ledger

Acquisitions/provenance ledger.

- id: `rare-books-acquisition-ledger`
- Page: https://agentic-ui-kit.com/components/rare-books-acquisition-ledger
- Live preview: https://agentic-ui-kit.com/live/template/rare-books/acquisitions?piece=rare-books-acquisition-ledger

## Install

```bash
agentic-ui add rare-books-acquisition-ledger
npx shadcn@4.17.0 add @agentic-ui/rare-books-acquisition-ledger
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** chronological-ledger, year-filter, type-summary, totals, empty-state
- **Intents:** audit-trail
- **Suits domains:** books, finance, ecommerce, crm, operations
- **Interaction:** filter
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Acquisitions/provenance ledger, Supplier purchase history, Portfolio transaction log
- **Avoid when:** Table with column sorting and export
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.15/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** select, badge
- **npm dependencies:** lucide-react, zustand
- **Used in:** Folioteca Rare Books (template), Collection Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, rare-books-acquisition-row, ui-select


### Rare Books App Header

Header with a CTA that changes per route.

- id: `rare-books-app-header`
- Page: https://agentic-ui-kit.com/components/rare-books-app-header
- Live preview: https://agentic-ui-kit.com/live/template/rare-books?piece=rare-books-app-header

## Install

```bash
agentic-ui add rare-books-app-header
npx shadcn@4.17.0 add @agentic-ui/rare-books-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-title, contextual-search, contextual-cta, theme-toggle, sidebar-trigger
- **Intents:** navigate, configure
- **Suits domains:** books, saas, ecommerce, crm
- **Interaction:** search, theme-toggle
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Header with a CTA that changes per route, Top bar with contextual search
- **Avoid when:** Multi-level breadcrumbs are needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.15/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** sidebar, button, input, dialog
- **npm dependencies:** lucide-react, next/navigation, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, zustand@5.0.8
- **Registry dependencies:** lib-rare-books-utils, ui-button, ui-dialog, ui-input, ui-sidebar


### Rare Books Collection Overview

Summary of a high-value collection (art, books, wine).

- id: `rare-books-collection-overview`
- Page: https://agentic-ui-kit.com/components/rare-books-collection-overview
- Live preview: https://agentic-ui-kit.com/live/template/rare-books?piece=rare-books-collection-overview

## Install

```bash
agentic-ui add rare-books-collection-overview
npx shadcn@4.17.0 add @agentic-ui/rare-books-collection-overview
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-summary, configurable-timeseries, donut-breakdown, radial-score, highlights, recent-items, upcoming-events
- **Intents:** track-status, compare-over-time, show-composition
- **Suits domains:** books, wine, finance, operations, analytics, ecommerce
- **Interaction:** tooltip, chart-settings, navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Summary of a high-value collection (art, books, wine), Asset portfolio panel, Museum or archive home
- **Avoid when:** Real-time data, A single dominant metric
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.15/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** chart, button, toggle-group, dropdown-menu
- **npm dependencies:** recharts, lucide-react, next/link, zustand
- **Used in:** Folioteca Rare Books (template)
- **Registry dependencies:** rare-books-condition-chart, rare-books-era-distribution, rare-books-featured-volumes, rare-books-kpi-stats-cards, rare-books-recent-acquisitions, rare-books-upcoming-exhibitions, rare-books-value-timeline


### Rare Books Collector Network

Contact directory by role.

- id: `rare-books-collector-network`
- Page: https://agentic-ui-kit.com/components/rare-books-collector-network
- Live preview: https://agentic-ui-kit.com/live/template/rare-books/network?piece=rare-books-collector-network

## Install

```bash
agentic-ui add rare-books-collector-network
npx shadcn@4.17.0 add @agentic-ui/rare-books-collector-network
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** role-counters, role-filter, search, card-grid, empty-state
- **Intents:** manage-collection, explore-detail
- **Suits domains:** books, crm, social, travel, saas
- **Interaction:** filter, search
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Contact directory by role, Network of suppliers and partners, Listing of institutions
- **Avoid when:** CRM with a pipeline or interaction history
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.15/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** select
- **npm dependencies:** lucide-react, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** rare-books-collector-card, ui-select


### Wine Cellar Bottle Inventory

Product inventory with filters by type, region and status.

- id: `wine-cellar-bottle-inventory`
- Page: https://agentic-ui-kit.com/components/wine-cellar-bottle-inventory
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar/bottles?piece=wine-cellar-bottle-inventory

## Install

```bash
agentic-ui add wine-cellar-bottle-inventory
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-bottle-inventory
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** faceted-filters, sorting, grid-list-toggle, quantity-adjust, empty-state, search
- **Intents:** manage-collection
- **Suits domains:** wine, ecommerce, operations, books, culinary, media
- **Interaction:** filter, sort, view-switching, increment-decrement
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Product inventory with filters by type, region and status, Book catalog sorted by value or age, Pantry with stock and location
- **Avoid when:** More than ~200 rows or server pagination (prefer a table), Bulk operations / multi-select
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.15/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** button, select
- **npm dependencies:** lucide-react, zustand
- **Used in:** Vintry Wine Cellar (template), Collection Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-button, ui-select, wine-cellar-bottle-card


### Devtools Explore Detail Repository

Files, README, releases and contributors share a coherent repository detail shell.

- id: `devtools-explore-detail-repository`
- Page: https://agentic-ui-kit.com/components/devtools-explore-detail-repository
- Live preview: https://agentic-ui-kit.com/live/template/code-hosting/repositories/ines-carvalho/tidegauge?piece=devtools-explore-detail-repository

## Install

```bash
agentic-ui add devtools-explore-detail-repository
npx shadcn@4.17.0 add @agentic-ui/devtools-explore-detail-repository
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Forkyard Code Hosting
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** file-browser, readme-preview, repository-tabs
- **Intents:** explore-detail
- **Suits domains:** devtools, file-storage, knowledge
- **Interaction:** file-browser, readme-preview, repository-tabs
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Files, README, releases and contributors share a coherent repository detail shell.
- **Avoid when:** A single primitive control is sufficient., Production behavior requires real service integration.
- **Preserve when adapting:** information-hierarchy, file-browser, readme-preview
- **Replace when adapting:** domain-labels, mock-data, store-adapter
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.1/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 7/10, code 7/10
- **Uses primitives:** avatar, badge, tooltip
- **npm dependencies:** analytics-show-composition-languages, devtools-track-status-issue, devtools-track-status-pull-request
- **Used in:** Forkyard Code Hosting (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** analytics-show-composition-languages, devtools-track-status-issue, devtools-track-status-pull-request, lib-code-hosting-utils, ui-avatar, ui-badge, ui-tooltip


### File Storage Tags Browser

Tag cloud with a counts table.

- id: `file-storage-tags-browser`
- Page: https://agentic-ui-kit.com/components/file-storage-tags-browser
- Live preview: https://agentic-ui-kit.com/live/template/file-storage/tags?piece=file-storage-tags-browser

## Install

```bash
agentic-ui add file-storage-tags-browser
npx shadcn@4.17.0 add @agentic-ui/file-storage-tags-browser
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** tag-cloud, weighted-typography, tag-table, filter-by-tag
- **Intents:** manage-collection, explore-detail
- **Suits domains:** file-storage, knowledge, notes, media, social
- **Interaction:** tag-selection, filtering
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Tag cloud with a counts table, Topic navigation for a knowledge base, Asset filtering by tag
- **Avoid when:** There is no tag taxonomy, The tags exceed a hundred
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.1/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 8/10
- **Uses primitives:** badge, button
- **npm dependencies:** lucide-react
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** file-storage-file-list, lib-file-storage-utils, ui-badge, ui-button


### Culinary Recipe Trash Restore

File trash.

- id: `culinary-recipe-trash-restore`
- Page: https://agentic-ui-kit.com/components/culinary-recipe-trash-restore
- Live preview: https://agentic-ui-kit.com/live/template/recipe-manager/trash?piece=culinary-recipe-trash-restore

## Install

```bash
agentic-ui add culinary-recipe-trash-restore
npx shadcn@4.17.0 add @agentic-ui/culinary-recipe-trash-restore
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Pantrie Recipe & Meal Planner
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** restore-action, permanent-delete, empty-state, count-badge
- **Intents:** manage-collection
- **Suits domains:** culinary, file-storage, notes, crm, ecommerce
- **Interaction:** restore, delete-permanently
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** File trash, Recoverable archived notes, Deleted contacts
- **Avoid when:** Deletion is immediate with no retention, Bulk restore is required
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** low
- **Coupling:** high
- **Quality score:** 7.05/10
- **Quality breakdown:** visual 7/10, responsive 8/10, accessibility 7/10, code 6/10
- **Uses primitives:** button, badge
- **npm dependencies:** lucide-react
- **Used in:** Pantrie Recipe & Meal Planner (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** ui-badge, ui-button


### File Storage File Detail Panel

File metadata side panel.

- id: `file-storage-file-detail-panel`
- Page: https://agentic-ui-kit.com/components/file-storage-file-detail-panel
- Live preview: https://agentic-ui-kit.com/live/fixture/file-storage-file-detail-panel?piece=file-storage-file-detail-panel

## Install

```bash
agentic-ui add file-storage-file-detail-panel
npx shadcn@4.17.0 add @agentic-ui/file-storage-file-detail-panel
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Stashbox File Storage
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** metadata-display, sharing-list, owner-info, tag-display, primary-actions
- **Intents:** explore-detail
- **Suits domains:** file-storage, media, crm, knowledge, operations
- **Interaction:** close, starring, scroll
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** File metadata side panel, Asset record card with permissions, Attachment detail with owner
- **Avoid when:** There is no secondary metadata, The detail requires a full page
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7.05/10
- **Quality breakdown:** visual 8/10, responsive 6/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, badge, separator, scroll-area, avatar
- **npm dependencies:** lucide-react
- **Used in:** Stashbox File Storage (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-file-storage-utils, ui-avatar, ui-badge, ui-button, ui-scroll-area, ui-separator


### Marine Regatta Overview Dashboard

Operations console for a regatta in progress.

- id: `marine-regatta-overview-dashboard`
- Page: https://agentic-ui-kit.com/components/marine-regatta-overview-dashboard
- Live preview: https://agentic-ui-kit.com/live/template/regatta-ops?piece=marine-regatta-overview-dashboard

## Install

```bash
agentic-ui add marine-regatta-overview-dashboard
npx shadcn@4.17.0 add @agentic-ui/marine-regatta-overview-dashboard
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-summary, course-map, live-conditions, standings-preview, upcoming-schedule, composition-donut
- **Intents:** monitor-live, track-status
- **Suits domains:** marine, operations, maps-ops, logistics, aviation, analytics
- **Interaction:** select-pinned-entity, map-zoom, navigate-to-detail
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Operations console for a regatta in progress, Logistics fleet panel with active route and conditions, Summary of a sporting event with standings and schedule
- **Avoid when:** There is no geographic or live component, A detailed historical report is needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** map, select, badge, button, avatar
- **npm dependencies:** maplibre-gl, zustand
- **Used in:** Tidemark Regatta Operations (template)
- **Registry dependencies:** marine-class-distribution, marine-course-map, marine-kpi-stats-cards, marine-live-conditions, marine-standings-table, marine-upcoming-starts


### Music Studio Release Manager

Music release calendar.

- id: `music-studio-release-manager`
- Page: https://agentic-ui-kit.com/components/music-studio-release-manager
- Live preview: https://agentic-ui-kit.com/live/template/music-studio/releases?piece=music-studio-release-manager

## Install

```bash
agentic-ui add music-studio-release-manager
npx shadcn@4.17.0 add @agentic-ui/music-studio-release-manager
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tonehall Music Studio
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** type-filter, status-filter, cover-cards, stream-metrics, empty-state
- **Intents:** track-status, manage-collection
- **Suits domains:** music, marketing, media, ecommerce, books
- **Interaction:** filter, click-to-play
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Music release calendar, Scheduled campaigns, Editorial catalog by status
- **Avoid when:** There is no cover image, The status has more than five phases
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** select, badge, button, dropdown-menu
- **npm dependencies:** zustand
- **Used in:** Tonehall Music Studio (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** music-studio-release-card, ui-select


### Vintry App Sidebar

Sidebar with navigation and facets with counts.

- id: `wine-cellar-app-sidebar`
- Page: https://agentic-ui-kit.com/components/wine-cellar-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar?piece=wine-cellar-app-sidebar

## Install

```bash
agentic-ui add wine-cellar-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-app-sidebar
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** primary-nav, category-counts, top-entities, workspace-switcher, promo-card, offcanvas
- **Intents:** navigate
- **Suits domains:** wine, ecommerce, crm, saas, books
- **Interaction:** navigation, collapse
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Sidebar with navigation and facets with counts, Side menu with top categories
- **Avoid when:** More than one level of nesting, Apps without countable categories
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** sidebar, avatar, dropdown-menu, button
- **npm dependencies:** lucide-react, next/link, zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-avatar, ui-button, ui-dropdown-menu, ui-sidebar


### Social Client Multi Column Home

TweetDeck/Threads-style social panel.

- id: `social-client-multi-column-home`
- Page: https://agentic-ui-kit.com/components/social-client-multi-column-home
- Live preview: https://agentic-ui-kit.com/live/template/social-client?piece=social-client-multi-column-home

## Install

```bash
agentic-ui add social-client-multi-column-home
npx shadcn@4.17.0 add @agentic-ui/social-client-multi-column-home
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Palaver Social Client
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-column-stream, column-customization, ephemeral-bar, live-feed-switch
- **Intents:** navigate, track-status, manage-collection
- **Suits domains:** social, media, knowledge, personal-productivity, saas
- **Interaction:** horizontal-scroll, column-add-remove, filter-toggle
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** TweetDeck/Threads-style social panel, Channel monitoring center, Collaborative activity wall
- **Avoid when:** Strictly form-centric applications, Interfaces without support for high density
- **Preserve when adapting:** multi-column-layout, column-management-logic, feed-card-flow
- **Replace when adapting:** mock-data, domain-copy, branding-icons
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 6.95/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 6/10, code 7/10
- **Uses primitives:** avatar, badge, button, scroll-area, separator, tooltip
- **npm dependencies:** lucide-react, date-fns
- **Used in:** Palaver Social Client (template), Social Media Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-social-client-utils, social-client-ephemeral-strip, social-client-inline-composer, social-client-profile-header, social-client-stat-card, social-client-stats-chart, social-client-thread-card, ui-avatar, ui-button, ui-dropdown-menu, ui-popover, ui-tabs


### Vintry App Header

Header with the route title and contextual search.

- id: `wine-cellar-app-header`
- Page: https://agentic-ui-kit.com/components/wine-cellar-app-header
- Live preview: https://agentic-ui-kit.com/live/template/wine-cellar?piece=wine-cellar-app-header

## Install

```bash
agentic-ui add wine-cellar-app-header
npx shadcn@4.17.0 add @agentic-ui/wine-cellar-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Vintry Wine Cellar
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-title, contextual-search, theme-toggle, sidebar-trigger
- **Intents:** navigate, configure
- **Suits domains:** wine, saas, ecommerce, notes, crm
- **Interaction:** search, theme-toggle
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Header with the route title and contextual search, Top bar with a theme toggle
- **Avoid when:** Multi-level breadcrumbs are needed
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 6.95/10
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 5/10, code 8/10
- **Uses primitives:** sidebar, button, input
- **npm dependencies:** lucide-react, next/link, next/navigation, zustand
- **Used in:** Vintry Wine Cellar (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6, zustand@5.0.8
- **Registry dependencies:** ui-button, ui-input, ui-sidebar


### Rare Books Exhibition Board

Exhibitions and loans by status.

- id: `rare-books-exhibition-board`
- Page: https://agentic-ui-kit.com/components/rare-books-exhibition-board
- Live preview: https://agentic-ui-kit.com/live/template/rare-books/exhibitions?piece=rare-books-exhibition-board

## Install

```bash
agentic-ui add rare-books-exhibition-board
npx shadcn@4.17.0 add @agentic-ui/rare-books-exhibition-board
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Folioteca Rare Books
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** status-counters, status-filter, card-grid, date-range, empty-state
- **Intents:** track-status
- **Suits domains:** books, operations, travel, saas, knowledge
- **Interaction:** filter
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Exhibitions and loans by status, Upcoming/active/concluded events or campaigns, Projects with a date window
- **Avoid when:** Calendar with overlaps (prefer a calendar view)
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 6.85/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 5/10, code 8/10
- **Uses primitives:** select
- **npm dependencies:** lucide-react, zustand
- **Used in:** Folioteca Rare Books (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** rare-books-exhibition-card, ui-select


### Marine Marina Network

Network of offices or warehouses on a world map.

- id: `marine-marina-network`
- Page: https://agentic-ui-kit.com/components/marine-marina-network
- Live preview: https://agentic-ui-kit.com/live/template/regatta-ops/marinas?piece=marine-marina-network

## Install

```bash
agentic-ui add marine-marina-network
npx shadcn@4.17.0 add @agentic-ui/marine-marina-network
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Tidemark Regatta Operations
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** world-map-markers, country-filter, search, card-grid, empty-state
- **Intents:** explore-detail, manage-collection
- **Suits domains:** marine, travel, maps-ops, logistics, operations
- **Interaction:** faceted-filter, search, map-zoom, select-entity
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Network of offices or warehouses on a world map, Directory of airports or ports, Store map with detail cards
- **Avoid when:** Locations without coordinates, Detailed cartography (streets, labels) is needed without configuring a tile provider
- **Preserve when adapting:** information-hierarchy, interaction-model
- **Replace when adapting:** domain-copy, mock-data, semantic-tokens, domain-formatting
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality score:** 6.7/10
- **Quality breakdown:** visual 7/10, responsive 8/10, accessibility 6/10, code 8/10
- **Uses primitives:** map, dropdown-menu, button, badge
- **npm dependencies:** maplibre-gl, zustand
- **Used in:** Tidemark Regatta Operations (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** marine-marina-card, ui-badge, ui-button, ui-dropdown-menu, ui-regatta-ops-map


### A11y Contrast Badge

Check in the browser whether the theme palette meets AA before opening the PR.

- id: `a11y-contrast-badge`
- Page: https://agentic-ui-kit.com/components/a11y-contrast-badge
- Live preview: https://agentic-ui-kit.com/live/component/a11y-contrast-badge

## Install

```bash
agentic-ui add a11y-contrast-badge
npx shadcn@4.17.0 add @agentic-ui/a11y-contrast-badge
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** wcag-contrast-ratio, oklch-color-parsing, lab-color-parsing, token-sheet-audit, live-computed-style-audit, theme-reactive-remeasure, build-time-gate, marginal-pass-detection, large-text-threshold, collapsible-panel, live-region-verdict
- **Intents:** configure, audit-trail, track-status
- **Suits domains:** saas, settings, devtools, operations, analytics
- **Interaction:** toggle-panel, keyboard-activate, escape-close, theme-switch-remeasure
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** check in the browser whether the theme palette meets AA before opening the PR, fail the CI build when someone darkens a token and breaks secondary text contrast, audit a brand theme against AAA without changing the application code, demonstrate to an enterprise buyer that the system measures accessibility instead of claiming it
- **Avoid when:** a full accessibility audit, which needs roles, focus and screen reading in addition to contrast, text contrast over an image or gradient, where there is no single background color to measure
- **Preserve when adapting:** wcag-formula, threshold-model, build-and-browser-parity, verdict-semantics
- **Replace when adapting:** token-pair-list, domain-copy, badge-placement
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button


### Billing Plan Comparison

Detailed comparison matrix of SaaS plans on a pricing or checkout page.

- id: `billing-plan-comparison`
- Page: https://agentic-ui-kit.com/components/billing-plan-comparison
- Live preview: https://agentic-ui-kit.com/live/component/billing-plan-comparison

## Install

```bash
agentic-ui add billing-plan-comparison
npx shadcn@4.17.0 add @agentic-ui/billing-plan-comparison
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** monthly-annual-toggle, feature-matrix, highlighted-plan, highlight-differences, category-grouping, feature-tooltips, search-filter, empty-state, keyboard-navigation, responsive-layout
- **Intents:** configure, explore-detail, execute-flow
- **Suits domains:** billing, saas, ecommerce, operations
- **Interaction:** switch-toggle, filter-search, category-accordion, keyboard-navigation, cta-selection
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** detailed comparison matrix of SaaS plans on a pricing or checkout page, upgrade modal with a feature-by-feature comparison for teams, technical specifications and SLA table for Enterprise plans
- **Avoid when:** quick plan selection with few features (use billing-pricing-table), real-time usage display against quotas (use billing-usage-meter)
- **Preserve when adapting:** comparison-matrix-layout, differences-filter-mechanism, category-accordion-hierarchy, accessible-announcement-model
- **Replace when adapting:** plan-definitions, category-and-feature-data, copy-and-currency
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, switch, table
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Billing Pricing Table

Pricing page of a SaaS with a monthly/annual toggle.

- id: `billing-pricing-table`
- Page: https://agentic-ui-kit.com/components/billing-pricing-table
- Live preview: https://agentic-ui-kit.com/live/component/billing-pricing-table

## Install

```bash
agentic-ui add billing-pricing-table
npx shadcn@4.17.0 add @agentic-ui/billing-pricing-table
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** monthly-annual-toggle, highlighted-plan, plan-feature-list, cta-per-plan, empty-state, keyboard-navigation
- **Intents:** configure, execute-flow
- **Suits domains:** billing, saas, ecommerce, operations
- **Interaction:** switch-toggle, keyboard-navigation, cta-selection
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** pricing page of a SaaS with a monthly/annual toggle, plan selection during onboarding or upgrade, paywall with a highlighted recommended plan
- **Avoid when:** detailed feature-by-feature comparison (use billing-plan-comparison), usage-based pricing (combine with billing-usage-meter)
- **Preserve when adapting:** toggle-interaction-model, highlighted-plan-affordance, accessible-price-announcement
- **Replace when adapting:** domain-copy, plan-data, currency-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, switch
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### CRM Contacts Activity Page

Global log of sales interactions.

- id: `crm-contacts-activity-page`
- Page: https://agentic-ui-kit.com/components/crm-contacts-activity-page
- Live preview: https://agentic-ui-kit.com/live/template/crm-contacts/activity?piece=crm-contacts-activity-page

## Install

```bash
agentic-ui add crm-contacts-activity-page
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-activity-page
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** activity-feed, timeline-filtering, interaction-history
- **Intents:** audit-trail, track-status
- **Suits domains:** crm, saas, project-management, operations
- **Interaction:** channel-filter, chronological-scroll
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Global log of sales interactions, Consolidated timeline of calls, meetings and emails
- **Avoid when:** There is no chronological event log
- **Preserve when adapting:** activity-stream-layout, badge-coloring
- **Replace when adapting:** activity-mock-data
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, scroll-area, separator, sidebar
- **npm dependencies:** zustand, date-fns, lucide-react
- **Used in:** Rolodeck CRM (template)
- **Registry dependencies:** crm-contacts-activity-timeline


### CRM Contacts Activity Timeline

Vertical activity timeline with filters by channel (Email, Call, Meeting, Note).

- id: `crm-contacts-activity-timeline`
- Page: https://agentic-ui-kit.com/components/crm-contacts-activity-timeline
- Live preview: https://agentic-ui-kit.com/live/piece/crm-contacts-activity-timeline?piece=crm-contacts-activity-timeline

## Install

```bash
agentic-ui add crm-contacts-activity-timeline
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-activity-timeline
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** activity-type-filters, chronological-timeline, channel-icon-badges, company-context
- **Intents:** audit-trail, track-status
- **Suits domains:** crm, saas, project-management, operations
- **Interaction:** type-filter-pill-click, contact-avatar-click
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Vertical activity timeline with filters by channel (Email, Call, Meeting, Note)
- **Avoid when:** There is no temporal traceability of interactions
- **Preserve when adapting:** timeline-connector-styling, filter-pills-layout
- **Replace when adapting:** activity-types, data-source
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge
- **npm dependencies:** zustand, date-fns, lucide-react
- **Used in:** Rolodeck CRM (template), Clinic Operations (blueprint), CRM (blueprint), Internal Operations — public status variant (blueprint), Internal Operations (blueprint), People Operations (blueprint), Support Desk (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-avatar, ui-badge


### Rolodeck App Header

Top bar with an integrated search box and a grid/list switcher.

- id: `crm-contacts-app-header`
- Page: https://agentic-ui-kit.com/components/crm-contacts-app-header
- Live preview: https://agentic-ui-kit.com/live/piece/crm-contacts-app-header?piece=crm-contacts-app-header

## Install

```bash
agentic-ui add crm-contacts-app-header
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-app-header
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-title, contact-search, status-filter-select, view-mode-toggle, theme-toggle
- **Intents:** navigate, configure
- **Suits domains:** crm, saas, project-management, operations, devtools
- **Interaction:** search-input, status-select, view-toggle, light-dark-toggle
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Top bar with an integrated search box and a grid/list switcher, Header with a stage filter and a light/dark toggle
- **Avoid when:** The application requires a full horizontal navigation bar
- **Preserve when adapting:** header-layout, search-filter-controls
- **Replace when adapting:** route-meta, status-options
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** button, input, select, sidebar
- **npm dependencies:** zustand, next/navigation, lucide-react
- **Used in:** Rolodeck CRM (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** crm-contacts-theme-toggle, lib-utils, ui-button, ui-input, ui-select, ui-sidebar


### Rolodeck App Shell

Unified shell for a customer management suite.

- id: `crm-contacts-app-shell`
- Page: https://agentic-ui-kit.com/components/crm-contacts-app-shell
- Live preview: https://agentic-ui-kit.com/live/template/crm-contacts?piece=crm-contacts-app-shell

## Install

```bash
agentic-ui add crm-contacts-app-shell
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-app-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sidebar-navigation, persistent-header, theme-switching, responsive-shell
- **Intents:** navigate, configure
- **Suits domains:** crm, saas, project-management, operations, devtools
- **Interaction:** navigation, sidebar-toggle, responsive-drawer
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Unified shell for a customer management suite, Responsive frame with collapsible side navigation
- **Avoid when:** Applications with no structured navigation or simple single-page apps
- **Preserve when adapting:** sidebar-provider-structure, header-slot
- **Replace when adapting:** nav-items, branding
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** sidebar, button, input, separator, dropdown-menu, sheet, tooltip
- **npm dependencies:** zustand, next-themes, lucide-react
- **Used in:** Rolodeck CRM (template)
- **Registry dependencies:** crm-contacts-app-header, crm-contacts-app-sidebar, ui-sidebar


### Rolodeck App Sidebar

Vertical navigation bar with a New Contact CTA button.

- id: `crm-contacts-app-sidebar`
- Page: https://agentic-ui-kit.com/components/crm-contacts-app-sidebar
- Live preview: https://agentic-ui-kit.com/live/template/crm-contacts?piece=crm-contacts-app-sidebar

## Install

```bash
agentic-ui add crm-contacts-app-sidebar
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-app-sidebar
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** collapsible-menu, company-facet-filter, new-contact-trigger, navigation-links
- **Intents:** navigate, manage-collection
- **Suits domains:** crm, saas, project-management, hr, operations
- **Interaction:** navigation, collapsible-toggle, dialog-trigger
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Vertical navigation bar with a New Contact CTA button, Collapsible facets for companies and tags
- **Avoid when:** Designs oriented exclusively to top navigation
- **Preserve when adapting:** collapsible-sections, active-route-highlighting
- **Replace when adapting:** navigation-links, app-branding
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** sidebar, button, badge, collapsible, avatar, dropdown-menu
- **npm dependencies:** zustand, next/navigation, next/link, lucide-react
- **Used in:** Rolodeck CRM (template)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** crm-contacts-new-contact-form, lib-utils, ui-avatar, ui-badge, ui-collapsible, ui-dropdown-menu, ui-sidebar


### CRM Contacts Companies Directory

Grid of companies with a card per corporate account.

- id: `crm-contacts-companies-directory`
- Page: https://agentic-ui-kit.com/components/crm-contacts-companies-directory
- Live preview: https://agentic-ui-kit.com/live/piece/crm-contacts-companies-directory?piece=crm-contacts-companies-directory

## Install

```bash
agentic-ui add crm-contacts-companies-directory
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-companies-directory
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** company-cards-grid, associated-contacts-detail, industry-badges, responsive-sheet
- **Intents:** manage-collection, explore-detail
- **Suits domains:** crm, saas, project-management, hr
- **Interaction:** select-company, mobile-sheet-open, contact-email-link
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Grid of companies with a card per corporate account, Side detail with the list of employees associated with the company
- **Avoid when:** There is no relationship between accounts and contacts
- **Preserve when adapting:** company-grid-layout, associated-contacts-lookup
- **Replace when adapting:** company-schema, mock-data
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, scroll-area, sheet
- **npm dependencies:** zustand, usehooks-ts, lucide-react
- **Used in:** Rolodeck CRM (template), CRM (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, usehooks-ts@^3.1.1, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-avatar, ui-badge, ui-button, ui-scroll-area, ui-sheet


### CRM Contacts Companies Page

Directory of corporate accounts.

- id: `crm-contacts-companies-page`
- Page: https://agentic-ui-kit.com/components/crm-contacts-companies-page
- Live preview: https://agentic-ui-kit.com/live/template/crm-contacts/companies?piece=crm-contacts-companies-page

## Install

```bash
agentic-ui add crm-contacts-companies-page
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-companies-page
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** companies-directory, company-contacts-drilldown, industry-filtering
- **Intents:** manage-collection, explore-detail
- **Suits domains:** crm, saas, project-management, hr, operations
- **Interaction:** selection, drill-down, drawer-preview
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Directory of corporate accounts, B2B organization with a company-contacts relationship
- **Avoid when:** The application is pure B2C without a company entity
- **Preserve when adapting:** company-cards-grid, contacts-lookup
- **Replace when adapting:** company-mock-data, industry-taxonomy
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, scroll-area, separator, sheet, sidebar
- **npm dependencies:** zustand, usehooks-ts, lucide-react
- **Used in:** Rolodeck CRM (template)
- **Registry dependencies:** crm-contacts-companies-directory


### CRM Contacts Contact Card

Contact card in a grid with tag badges and status.

- id: `crm-contacts-contact-card`
- Page: https://agentic-ui-kit.com/components/crm-contacts-contact-card
- Live preview: https://agentic-ui-kit.com/live/template/crm-contacts?piece=crm-contacts-contact-card

## Install

```bash
agentic-ui add crm-contacts-contact-card
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-contact-card
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** avatar-display, tag-chips, favorite-toggle, contextual-action-menu, status-badge
- **Intents:** explore-detail, manage-collection
- **Suits domains:** crm, saas, hr, personal-productivity, social
- **Interaction:** click-to-select, star-toggle, menu-action
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Contact card in a grid with tag badges and status, Contact row for dense listings with a three-dot menu
- **Avoid when:** Inline editing directly on the card is required
- **Preserve when adapting:** card-hierarchy, tag-color-palette
- **Replace when adapting:** avatar-resolver, data-fields
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, dropdown-menu
- **npm dependencies:** zustand, date-fns, lucide-react
- **Used in:** Rolodeck CRM (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-avatar, ui-badge, ui-button, ui-dropdown-menu


### CRM Contacts Contact Detail

Side panel with complete information about a contact.

- id: `crm-contacts-contact-detail`
- Page: https://agentic-ui-kit.com/components/crm-contacts-contact-detail
- Live preview: https://agentic-ui-kit.com/live/fixture/crm-contacts-contact-detail?piece=crm-contacts-contact-detail

## Install

```bash
agentic-ui add crm-contacts-contact-detail
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-contact-detail
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** contact-profile-card, quick-contact-actions, company-association, activity-log
- **Intents:** explore-detail, communicate
- **Suits domains:** crm, saas, hr, support
- **Interaction:** action-buttons, activity-scroll, favorite-toggle, close-panel
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Side panel with complete information about a contact, Detail with recent interaction history and quick contact buttons
- **Avoid when:** No side area or drawer is available to host the detail
- **Preserve when adapting:** profile-header-structure, activity-timeline-feed
- **Replace when adapting:** communication-action-handlers, contact-schema
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, separator, scroll-area
- **npm dependencies:** zustand, date-fns, lucide-react
- **Used in:** Rolodeck CRM (template), Legal Operations (blueprint), People Operations (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** lib-utils, ui-avatar, ui-badge, ui-button, ui-scroll-area, ui-separator


### CRM Contacts Directory List

Container of switchable contact cards.

- id: `crm-contacts-directory-list`
- Page: https://agentic-ui-kit.com/components/crm-contacts-directory-list
- Live preview: https://agentic-ui-kit.com/live/piece/crm-contacts-directory-list?piece=crm-contacts-directory-list

## Install

```bash
agentic-ui add crm-contacts-directory-list
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-directory-list
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** grid-view, list-view, empty-state, filtered-contacts-rendering
- **Intents:** manage-collection, explore-detail
- **Suits domains:** crm, saas, hr, personal-productivity
- **Interaction:** selection, scroll, view-mode-rendering
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Container of switchable contact cards, Dynamic listing that handles the empty state and filters
- **Avoid when:** The dataset exceeds thousands of records without virtualized pagination
- **Preserve when adapting:** dual-view-logic, empty-state-handling
- **Replace when adapting:** card-component, mock-data
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, dropdown-menu
- **npm dependencies:** zustand, lucide-react
- **Used in:** Rolodeck CRM (template), Marketing Analytics (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** crm-contacts-contact-card, lib-utils


### CRM Contacts Directory Page

Interactive contact directory.

- id: `crm-contacts-directory-page`
- Page: https://agentic-ui-kit.com/components/crm-contacts-directory-page
- Live preview: https://agentic-ui-kit.com/live/template/crm-contacts?piece=crm-contacts-directory-page

## Install

```bash
agentic-ui add crm-contacts-directory-page
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-directory-page
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** contact-directory, filter-by-status, filter-by-tag, search-contacts, view-mode-toggle
- **Intents:** manage-collection, explore-detail
- **Suits domains:** crm, saas, project-management, hr, operations
- **Interaction:** search, filtering, view-switching, selection
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Interactive contact directory, CRM main page with multi-faceted filtering
- **Avoid when:** No contact search or filtering is required
- **Preserve when adapting:** master-detail-layout, filter-logic
- **Replace when adapting:** mock-data, domain-labels
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, dialog, dropdown-menu, input, scroll-area, select, separator, sheet, sidebar, tooltip
- **npm dependencies:** zustand, usehooks-ts, next/link, lucide-react
- **Used in:** Rolodeck CRM (template)
- **Registry dependencies:** crm-contacts-master-detail


### CRM Contacts Favorites Page

List of contacts marked as favorites.

- id: `crm-contacts-favorites-page`
- Page: https://agentic-ui-kit.com/components/crm-contacts-favorites-page
- Live preview: https://agentic-ui-kit.com/live/template/crm-contacts/favorites?piece=crm-contacts-favorites-page

## Install

```bash
agentic-ui add crm-contacts-favorites-page
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-favorites-page
```

## Metadata

- **Level:** page
- **Category:** page
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** favorite-contacts, quick-access, contact-filtering
- **Intents:** manage-collection, explore-detail
- **Suits domains:** crm, saas, hr, personal-productivity
- **Interaction:** filtering, selection, toggle-favorite
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** List of contacts marked as favorites, Quick filtered view for priority contacts
- **Avoid when:** The contacts model does not support favorites
- **Preserve when adapting:** favorites-filter-hook, list-rendering
- **Replace when adapting:** mock-data
- **Adaptation effort:** medium
- **Coupling:** high
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** avatar, badge, button, dialog, dropdown-menu, input, scroll-area, select, separator, sheet, sidebar, tooltip
- **npm dependencies:** zustand, usehooks-ts, next/link, lucide-react
- **Used in:** Rolodeck CRM (template)
- **npm dependencies (registry):** zustand@5.0.8
- **Registry dependencies:** crm-contacts-master-detail


### CRM Contacts Master Detail

Split view with a list on the left and a detail panel on the right.

- id: `crm-contacts-master-detail`
- Page: https://agentic-ui-kit.com/components/crm-contacts-master-detail
- Live preview: https://agentic-ui-kit.com/live/piece/crm-contacts-master-detail?piece=crm-contacts-master-detail

## Install

```bash
agentic-ui add crm-contacts-master-detail
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-master-detail
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** master-detail-split, responsive-sheet-drawer, selection-synchronization
- **Intents:** manage-collection, explore-detail
- **Suits domains:** crm, saas, project-management, hr, devtools
- **Interaction:** selection, split-pane-resize, mobile-sheet-toggle
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Split view with a list on the left and a detail panel on the right, Responsive behavior that switches to a sheet on mobile
- **Avoid when:** The screen does not have enough space or the detail navigates to a separate route
- **Preserve when adapting:** responsive-split-logic, selection-store-binding
- **Replace when adapting:** detail-component, list-component
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** sheet, scroll-area
- **npm dependencies:** zustand, usehooks-ts
- **Used in:** Rolodeck CRM (template), CRM (blueprint)
- **npm dependencies (registry):** usehooks-ts@^3.1.1, zustand@5.0.8
- **Registry dependencies:** crm-contacts-contact-detail, crm-contacts-directory-list, ui-sheet


### CRM Contacts New Contact Form

Modal with a complete form to add a contact.

- id: `crm-contacts-new-contact-form`
- Page: https://agentic-ui-kit.com/components/crm-contacts-new-contact-form
- Live preview: https://agentic-ui-kit.com/live/piece/crm-contacts-new-contact-form?piece=crm-contacts-new-contact-form

## Install

```bash
agentic-ui add crm-contacts-new-contact-form
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-new-contact-form
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** dialog-form, tag-selection, status-select, company-picker, validation
- **Intents:** create-edit, execute-flow
- **Suits domains:** crm, saas, hr, project-management
- **Interaction:** form-input, tag-toggle, select-dropdown, submit
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Modal with a complete form to add a contact, Creation dialog with a multi-select for tags and company assignment
- **Avoid when:** Adding contacts requires a multi-page step-by-step wizard
- **Preserve when adapting:** form-layout, validation-logic
- **Replace when adapting:** store-mutation, form-fields
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 7/10, code 8/10
- **Uses primitives:** dialog, button, input, label, select, badge
- **npm dependencies:** zustand, lucide-react
- **Used in:** Rolodeck CRM (template), CRM (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, zustand@5.0.8
- **Registry dependencies:** ui-badge, ui-button, ui-dialog, ui-input, ui-label, ui-select


### CRM Contacts Theme Toggle

Button with a sun-to-moon animation to switch between light and dark mode.

- id: `crm-contacts-theme-toggle`
- Page: https://agentic-ui-kit.com/components/crm-contacts-theme-toggle
- Live preview: https://agentic-ui-kit.com/live/piece/crm-contacts-theme-toggle?piece=crm-contacts-theme-toggle

## Install

```bash
agentic-ui add crm-contacts-theme-toggle
npx shadcn@4.17.0 add @agentic-ui/crm-contacts-theme-toggle
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Rolodeck CRM
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** light-dark-toggle, animated-icons, accessible-label
- **Intents:** configure
- **Suits domains:** crm, saas, devtools, analytics, settings
- **Interaction:** click-toggle
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Button with a sun-to-moon animation to switch between light and dark mode
- **Avoid when:** The application only has a fixed theme
- **Preserve when adapting:** icon-transition-classes, accessible-sr-text
- **Replace when adapting:** icon-variants
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** next-themes, lucide-react
- **Used in:** Rolodeck CRM (template)
- **npm dependencies (registry):** lucide-react@0.577.0, next-themes@0.4.6
- **Registry dependencies:** ui-button


### Events QR Pass

Digital pass with a scannable QR code for access to conferences and events.

- id: `events-qr-pass`
- Page: https://agentic-ui-kit.com/components/events-qr-pass
- Live preview: https://agentic-ui-kit.com/live/component/events-qr-pass

## Install

```bash
agentic-ui add events-qr-pass
npx shadcn@4.17.0 add @agentic-ui/events-qr-pass
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** iso-18004-qr-encoding, pure-typescript-encoder, pass-status-lifecycle, scannable-only-when-valid, pass-wallet-collection, pass-enlarge-for-scanning, keyboard-escape-dismiss, high-contrast-preservation, responsive-layout, unscannable-reason-presentation, door-scan-simulation
- **Intents:** track-status, manage-collection, explore-detail, execute-flow
- **Suits domains:** ecommerce, operations, travel, social, saas, marketing
- **Interaction:** click, enlarge-for-scanning, escape-dismiss, filter-selection, status-transition
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** digital pass with a scannable QR code for access to conferences and events, ticket wallet with tap-to-enlarge support for turnstiles, ticket card that withholds the code in expired, used or refunded states, check-in system for festivals and accreditations with guaranteed contrast
- **Avoid when:** arbitrary QR code generator to share links or free text without ticket context, interactive seat selection map for a venue, which corresponds to events-seat-map
- **Preserve when adapting:** strict-lifecycle-scannable-gating, qr-high-contrast-background, enlarge-modal-or-expand-affordance, accessible-labels-and-aria-attributes
- **Replace when adapting:** ticket-fields-and-data-structure, branding-and-tone-colors, error-correction-level-defaults, time-formatting-and-locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, separator
- **npm dependencies:** clsx
- **Registry dependencies:** lib-primitives


### Fintech App Shell

Trading terminal with connection status.

- id: `fintech-app-shell`
- Page: https://agentic-ui-kit.com/components/fintech-app-shell
- Live preview: https://agentic-ui-kit.com/live/fixture/fintech-app-shell?piece=fintech-app-shell

## Install

```bash
agentic-ui add fintech-app-shell
npx shadcn@4.17.0 add @agentic-ui/fintech-app-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sidebar-navigation, live-stream-status, pause-resume-stream, stream-clock, event-feed-live-region, active-alerts-badge, theme-toggle, motion-settings, skip-link
- **Intents:** navigate, monitor-live
- **Suits domains:** fintech, finance, operations, analytics
- **Interaction:** navigation, stream-toggle, theme, motion-settings
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Trading terminal with connection status, Live operations console with an event feed, Realtime dashboard with stream pause
- **Avoid when:** Apps with no live data (use a standard app-shell)
- **Preserve when adapting:** live-status-in-header, event-feed-strip
- **Replace when adapting:** brand, navigation, stream-adapter
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** badge, switch, label
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-candlestick, chart-order-book, lib-motion, lib-motion-data, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Fintech Instrument Detail

Instrument sheet with candles, order book and ticket.

- id: `fintech-instrument-detail`
- Page: https://agentic-ui-kit.com/components/fintech-instrument-detail
- Live preview: https://agentic-ui-kit.com/live/fixture/fintech-instrument-detail?piece=fintech-instrument-detail

## Install

```bash
agentic-ui add fintech-instrument-detail
npx shadcn@4.17.0 add @agentic-ui/fintech-instrument-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** live-price-counter, candlestick-ohlc, timeframe-switch, sma-overlay, order-book-ladder, depth-chart, tick-size-grouping, time-and-sales, order-ticket, instrument-orders, price-alert-dialog
- **Intents:** explore-detail, monitor-live, execute-flow
- **Suits domains:** fintech, finance, analytics, operations
- **Interaction:** timeframe, crosshair, keyboard-scrub, tick-size, order-entry, modal-confirm, watch-toggle
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Instrument sheet with candles, order book and ticket, Crypto pair detail with depth and tape, Asset detail with OHLC history and buy/sell actions
- **Avoid when:** Assets without an order book (daily NAV funds), Read-only screens without execution
- **Preserve when adapting:** chart-plus-ticket-layout, book-and-tape-grouping, live-header
- **Replace when adapting:** domain-copy, market-data-adapter, execution-adapter, instrument-metadata
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, table, input, label, switch
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-candlestick, chart-order-book, lib-motion, lib-motion-data, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Fintech Order Ticket

Buy/sell ticket for stocks or crypto.

- id: `fintech-order-ticket`
- Page: https://agentic-ui-kit.com/components/fintech-order-ticket
- Live preview: https://agentic-ui-kit.com/live/fixture/fintech-instrument-detail?piece=fintech-order-ticket&within=fintech-instrument-detail&mark=%5Bdata-testid%3D%22order-ticket%22%5D

## Install

```bash
agentic-ui add fintech-order-ticket
npx shadcn@4.17.0 add @agentic-ui/fintech-order-ticket
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** buy-sell-tabs, market-limit-toggle, quantity-validation, buying-power-check, no-short-selling-rule, estimated-cost, review-confirm-dialog, simulated-fill
- **Intents:** execute-flow, create-edit
- **Suits domains:** fintech, finance, ecommerce, billing
- **Interaction:** tabs, segmented, validation, modal-confirm
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Buy/sell ticket for stocks or crypto, FX conversion form with review, Purchase order with confirmation and estimated cost
- **Avoid when:** Complex orders (OCO, bracket) without extending the model, Real execution without a server-side risk layer
- **Preserve when adapting:** review-before-submit, inline-validation, cost-summary
- **Replace when adapting:** domain-copy, risk-rules, execution-adapter
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, input, label
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-candlestick, chart-order-book, lib-motion, lib-motion-data, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Fintech Orders History

Order history of a brokerage account.

- id: `fintech-orders-history`
- Page: https://agentic-ui-kit.com/components/fintech-orders-history
- Live preview: https://agentic-ui-kit.com/fintech-trading/orders?piece=fintech-orders-history

## Install

```bash
agentic-ui add fintech-orders-history
npx shadcn@4.17.0 add @agentic-ui/fintech-orders-history
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** status-tabs, side-facet, search, time-sort, pagination, cancel-working-order, export-csv, summary-stats, live-limit-fills
- **Intents:** manage-collection, audit-trail, import-export
- **Suits domains:** fintech, finance, payments, operations
- **Interaction:** status-tabs, facet, search, sort, pagination, row-action, export
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Order history of a brokerage account, Transaction ledger with statuses and export, Queue of cancellable pending operations
- **Avoid when:** Fewer than 10 records, Multi-currency accounting reconciliation
- **Preserve when adapting:** enterprise-data-table-composition, status-lifecycle
- **Replace when adapting:** domain-copy, columns, order-adapter
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, table, input, label, switch
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-candlestick, chart-order-book, lib-motion, lib-motion-data, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Fintech Portfolio Pnl

Investment portfolio with real-time P&L.

- id: `fintech-portfolio-pnl`
- Page: https://agentic-ui-kit.com/components/fintech-portfolio-pnl
- Live preview: https://agentic-ui-kit.com/fintech-trading/portfolio?piece=fintech-portfolio-pnl

## Install

```bash
agentic-ui add fintech-portfolio-pnl
npx shadcn@4.17.0 add @agentic-ui/fintech-portfolio-pnl
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** live-equity-counter, pnl-kpis, equity-curve, range-tabs, allocation-donut, allocation-grouping, positions-table, unrealized-pnl, day-pnl, weights
- **Intents:** compare-over-time, show-composition, track-status
- **Suits domains:** fintech, finance, analytics, billing
- **Interaction:** range-tabs, grouping-tabs, sort-tabs, tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Investment portfolio with real-time P&L, Treasury summary with allocation by asset class, Trading account equity with an equity curve
- **Avoid when:** Double-entry bookkeeping, Portfolios with thousands of positions without pagination
- **Preserve when adapting:** kpi-to-trend-to-table-hierarchy, signed-pnl-encoding, allocation-grammar
- **Replace when adapting:** domain-copy, valuation-adapter, asset-classes, semantic-tokens
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, table, input, label, switch
- **npm dependencies:** recharts, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0, recharts-v2@npm:recharts@^2.15.4
- **Registry dependencies:** chart-candlestick, chart-order-book, lib-motion, lib-motion-data, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Fintech Price Alerts

Trading price alerts.

- id: `fintech-price-alerts`
- Page: https://agentic-ui-kit.com/components/fintech-price-alerts
- Live preview: https://agentic-ui-kit.com/fintech-trading/alerts?piece=fintech-price-alerts

## Install

```bash
agentic-ui add fintech-price-alerts
npx shadcn@4.17.0 add @agentic-ui/fintech-price-alerts
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** alert-list, armed-triggered-tabs, arm-pause-switch, delete-alert, create-alert-dialog, distance-to-target, live-evaluation, alert-feed
- **Intents:** configure, monitor-live, create-edit
- **Suits domains:** fintech, finance, operations, analytics
- **Interaction:** tabs, toggle, delete, modal-create
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Trading price alerts, Metric thresholds with a single trigger, Inventory or budget alert rules
- **Avoid when:** Complex rule engines with AND/OR, Real multi-channel notifications (email/SMS)
- **Preserve when adapting:** rule-sentence-grammar, armed-triggered-lifecycle
- **Replace when adapting:** domain-copy, rule-conditions, evaluation-adapter
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, table, input, label, switch
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-candlestick, chart-order-book, lib-motion, lib-motion-data, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Fintech Watchlist

Watchlist of stocks, crypto and FX with streaming prices.

- id: `fintech-watchlist`
- Page: https://agentic-ui-kit.com/components/fintech-watchlist
- Live preview: https://agentic-ui-kit.com/fintech-trading/watchlist?piece=fintech-watchlist

## Install

```bash
agentic-ui add fintech-watchlist
npx shadcn@4.17.0 add @agentic-ui/fintech-watchlist
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** streaming-quotes, market-movers, breadth-bar, asset-class-tabs, sortable-columns, text-filter, day-range-bar, add-remove-symbol-dialog, snapshot-refresh-skeleton, pause-resume-stream
- **Intents:** monitor-live, manage-collection, compare-over-time
- **Suits domains:** fintech, finance, analytics, operations
- **Interaction:** tabs, sort, filter, modal-create, row-remove, stream-toggle
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Watchlist of stocks, crypto and FX with streaming prices, List of watched assets with movers and market breadth, Monitor of live metrics per entity with change vs close
- **Avoid when:** Data that does not change in real time, More than ~200 rows without virtualization
- **Preserve when adapting:** live-table-grammar, movers-to-table-hierarchy, signed-change-encoding
- **Replace when adapting:** domain-copy, instrument-fixtures, stream-adapter, asset-classes
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, table, input, label, switch
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-candlestick, chart-order-book, lib-motion, lib-motion-data, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Fitness Check In Desk

Studio operations /check-in.

- id: `fitness-check-in-desk`
- Page: https://agentic-ui-kit.com/components/fitness-check-in-desk
- Live preview: https://agentic-ui-kit.com/live/piece/fitness-check-in-desk?piece=fitness-check-in-desk

## Install

```bash
agentic-ui add fitness-check-in-desk
npx shadcn@4.17.0 add @agentic-ui/fitness-check-in-desk
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** member-code-search, booking-check-in, walk-in, duplicate-refusal, window-validation, undo-check-in
- **Intents:** manage-collection
- **Suits domains:** personal-productivity, operations, education
- **Interaction:** member-code-search, booking-check-in, walk-in, duplicate-refusal, window-validation, undo-check-in
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Studio operations /check-in
- **Avoid when:** Live payment processing or medical records are required
- **Preserve when adapting:** capacity-and-attendance-invariants, keyboard-controls
- **Replace when adapting:** domain-copy, fixture-adapter, class-types
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Fitness Studio Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Fitness Class Schedule

Studio operations /classes.

- id: `fitness-class-schedule`
- Page: https://agentic-ui-kit.com/components/fitness-class-schedule
- Live preview: https://agentic-ui-kit.com/live/piece/fitness-class-schedule?piece=fitness-class-schedule

## Install

```bash
agentic-ui add fitness-class-schedule
npx shadcn@4.17.0 add @agentic-ui/fitness-class-schedule
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** capacity-booking, waitlist-promotion, weekly-series, conflict-validation
- **Intents:** create-edit, manage-collection
- **Suits domains:** personal-productivity, operations, education
- **Interaction:** capacity-booking, waitlist-promotion, weekly-series, conflict-validation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Studio operations /classes
- **Avoid when:** Live payment processing or medical records are required
- **Preserve when adapting:** capacity-and-attendance-invariants, keyboard-controls
- **Replace when adapting:** domain-copy, fixture-adapter, class-types
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Fitness Studio Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator, scheduling-recurrence-editor


### Fitness Member Directory

Studio operations /members.

- id: `fitness-member-directory`
- Page: https://agentic-ui-kit.com/components/fitness-member-directory
- Live preview: https://agentic-ui-kit.com/live/piece/fitness-member-directory?piece=fitness-member-directory

## Install

```bash
agentic-ui add fitness-member-directory
npx shadcn@4.17.0 add @agentic-ui/fitness-member-directory
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** search, status-filter, pagination, member-navigation
- **Intents:** manage-collection, explore-detail
- **Suits domains:** personal-productivity, operations, education
- **Interaction:** search, status-filter, pagination, member-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Studio operations /members
- **Avoid when:** Live payment processing or medical records are required
- **Preserve when adapting:** capacity-and-attendance-invariants, keyboard-controls
- **Replace when adapting:** domain-copy, fixture-adapter, class-types
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Fitness Studio Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Fitness Member Progress

Studio operations /members/demo.

- id: `fitness-member-progress`
- Page: https://agentic-ui-kit.com/components/fitness-member-progress
- Live preview: https://agentic-ui-kit.com/live/fixture/fitness-member-progress?piece=fitness-member-progress

## Install

```bash
agentic-ui add fitness-member-progress
npx shadcn@4.17.0 add @agentic-ui/fitness-member-progress
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** attendance-charts, benchmark-history, membership-freeze, class-booking, achievement-claim, points-ledger
- **Intents:** explore-detail, compare-over-time
- **Suits domains:** personal-productivity, operations, education
- **Interaction:** attendance-charts, benchmark-history, membership-freeze, class-booking, achievement-claim, points-ledger
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Studio operations /members/demo
- **Avoid when:** Live payment processing or medical records are required
- **Preserve when adapting:** capacity-and-attendance-invariants, keyboard-controls
- **Replace when adapting:** domain-copy, fixture-adapter, class-types
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Fitness Studio Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** gamify-achievements, gamify-level-progress, gamify-points-history, gamify-streak-tracker, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-scheduling-slot-picker, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Fitness Studio App Shell

Studio operations /classes.

- id: `fitness-studio-app-shell`
- Page: https://agentic-ui-kit.com/components/fitness-studio-app-shell
- Live preview: https://agentic-ui-kit.com/live/fixture/fitness-studio-app-shell?piece=fitness-studio-app-shell

## Install

```bash
agentic-ui add fitness-studio-app-shell
npx shadcn@4.17.0 add @agentic-ui/fitness-studio-app-shell
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** responsive-navigation, theme-switch, motion-settings, skip-link, fixture-reset
- **Intents:** navigate
- **Suits domains:** personal-productivity, operations, education
- **Interaction:** responsive-navigation, theme-switch, motion-settings, skip-link, fixture-reset
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Studio operations /classes
- **Avoid when:** Live payment processing or medical records are required
- **Preserve when adapting:** capacity-and-attendance-invariants, keyboard-controls
- **Replace when adapting:** domain-copy, fixture-adapter, class-types
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Fitness Studio Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-micro-interactions, lib-primitives, lib-tokens


### Fitness Studio Rooms

Studio operations /rooms.

- id: `fitness-studio-rooms`
- Page: https://agentic-ui-kit.com/components/fitness-studio-rooms
- Live preview: https://agentic-ui-kit.com/live/piece/fitness-studio-rooms?piece=fitness-studio-rooms

## Install

```bash
agentic-ui add fitness-studio-rooms
npx shadcn@4.17.0 add @agentic-ui/fitness-studio-rooms
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** room-booking, class-conflict-detection, time-range-reservation
- **Intents:** create-edit
- **Suits domains:** personal-productivity, operations, education
- **Interaction:** room-booking, class-conflict-detection, time-range-reservation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Studio operations /rooms
- **Avoid when:** Live payment processing or medical records are required
- **Preserve when adapting:** capacity-and-attendance-invariants, keyboard-controls
- **Replace when adapting:** domain-copy, fixture-adapter, class-types
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Fitness Studio Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-scheduling-resource-booking, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Form Date Range Picker

Filter conversion and traffic metrics in analytics panels.

- id: `form-date-range-picker`
- Page: https://agentic-ui-kit.com/components/form-date-range-picker
- Live preview: https://agentic-ui-kit.com/live/component/form-date-range-picker

## Install

```bash
agentic-ui add form-date-range-picker
npx shadcn@4.17.0 add @agentic-ui/form-date-range-picker
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** range-selection, quick-presets, month-year-quick-jump, responsive-dual-calendar, comparison-mode, form-integration, keyboard-navigation, clearable
- **Intents:** create-edit, manage-collection
- **Suits domains:** analytics, travel, finance, operations
- **Interaction:** range-selection, keyboard-navigation, quick-presets, popover-toggle
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** filter conversion and traffic metrics in analytics panels, select check-in and check-out dates in travel bookings, audit and closing of fiscal periods in finance, temporal analysis of logs and incidents in operations
- **Avoid when:** selecting a single specific date, predefined ranges not editable by the user
- **Preserve when adapting:** calendar-grammar, interaction-model, keyboard-shortcuts, preset-logic
- **Replace when adapting:** domain-copy, presets-list, date-formatting, locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, popover, select, badge, switch, label
- **npm dependencies:** react-day-picker, date-fns
- **Used in:** Marketing Analytics (blueprint)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0
- **Registry dependencies:** lib-primitives


### Form Field Array

Invoice lines with quantity, unit price and tax.

- id: `form-field-array`
- Page: https://agentic-ui-kit.com/components/form-field-array
- Live preview: https://agentic-ui-kit.com/live/component/form-field-array

## Install

```bash
agentic-ui add form-field-array
npx shadcn@4.17.0 add @agentic-ui/form-field-array
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** repeatable-rows, add-remove-rows, row-reordering, per-row-validation, row-count-limits, computed-row-total, computed-grand-total, error-summary, empty-state, keyboard-navigation
- **Intents:** create-edit
- **Suits domains:** billing, ecommerce, hr, saas, finance
- **Interaction:** add-row, remove-row, reorder, type, validation-feedback, keyboard-navigation, submit
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** invoice lines with quantity, unit price and tax, order items with SKU and price, hiring plan with role, department and FTE, expense report line items
- **Avoid when:** a single repeated value without column structure, where a tags input is enough, large collections that require pagination or incremental loading
- **Preserve when adapting:** field-array-identity, validation-model, row-count-limits, total-computation
- **Replace when adapting:** domain-copy, columns, validation-messages, currency
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, input, label
- **npm dependencies:** react-hook-form
- **npm dependencies (registry):** lucide-react@0.577.0, react-hook-form@7.72.0
- **Registry dependencies:** lib-primitives


### Form Masked Inputs

Checkout form with a card and expiry validation.

- id: `form-masked-inputs`
- Page: https://agentic-ui-kit.com/components/form-masked-inputs
- Live preview: https://agentic-ui-kit.com/live/component/form-masked-inputs

## Install

```bash
agentic-ui add form-masked-inputs
npx shadcn@4.17.0 add @agentic-ui/form-masked-inputs
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** currency-masking, country-aware-phone, iban-mod97-validation, card-brand-detection, luhn-validation, fixed-clock-expiry, time-masking, canonical-export, keyboard-navigation
- **Intents:** create-edit, execute-flow
- **Suits domains:** payments, finance, ecommerce, saas
- **Interaction:** text-entry, keyboard-navigation, dropdown-selection, clearable
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** checkout form with a card and expiry validation, international bank transfers with IBAN Mod-97 validation, international customer registration with phone and country code, onboarding bank accounts and recurring payments in SaaS platforms
- **Avoid when:** unstructured free-text fields, forms that need no real-time formatting or validation
- **Preserve when adapting:** input-grammar, validation-logic, canonical-output-model, keyboard-accessibility
- **Replace when adapting:** domain-copy, default-countries, currency-locale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, input, label, card, badge, popover, tabs, switch, separator
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Form Multi Step Wizard

Subscription sign-up with plan and billing method.

- id: `form-multi-step-wizard`
- Page: https://agentic-ui-kit.com/components/form-multi-step-wizard
- Live preview: https://agentic-ui-kit.com/live/component/form-multi-step-wizard?piece=form-multi-step-wizard

## Install

```bash
agentic-ui add form-multi-step-wizard
npx shadcn@4.17.0 add @agentic-ui/form-multi-step-wizard
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-step-navigation, per-step-validation, validation-guarded-advance, non-destructive-back, step-status-indicator, review-step, linear-progress, keyboard-navigation, responsive-orientation
- **Intents:** create-edit, execute-flow
- **Suits domains:** saas, billing, ecommerce, hr, healthcare
- **Interaction:** step-navigate, type, validation-feedback, keyboard-navigation, submit
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** subscription sign-up with plan and billing method, step-by-step checkout with shipping, payment and review, employee onboarding with personal data, contract and equipment, patient admission with demographic data, insurance and consent
- **Avoid when:** short forms that fit on a single screen, flows with no dependencies or validation between steps
- **Preserve when adapting:** wizard-stepper-pattern, rhf-zod-pattern, validation-guard, review-step
- **Replace when adapting:** domain-copy, steps, field-schemas, validation-messages
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, progress, input, textarea, label
- **npm dependencies:** react-hook-form, zod
- **npm dependencies (registry):** lucide-react@0.577.0, react-hook-form@7.72.0, zod-v3@npm:zod@^3.24.2
- **Registry dependencies:** lib-primitives


### Healthcare Appointment Scheduler

Appointment schedule per practitioner with check-in.

- id: `healthcare-appointment-scheduler`
- Page: https://agentic-ui-kit.com/components/healthcare-appointment-scheduler
- Live preview: https://agentic-ui-kit.com/clinic-operations/appointments?piece=healthcare-appointment-scheduler

## Install

```bash
agentic-ui add healthcare-appointment-scheduler
npx shadcn@4.17.0 add @agentic-ui/healthcare-appointment-scheduler
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** week-month-agenda-views, drag-reschedule, keyboard-reschedule, conflict-detection, practitioner-filter, status-workflow, today-queue, booking-modal
- **Intents:** manage-collection, create-edit, track-status
- **Suits domains:** healthcare, operations, crm, personal-productivity
- **Interaction:** drag-and-drop, keyboard-navigation, view-switching, modal-form, status-actions
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** appointment schedule per practitioner with check-in, room or bay bookings with overlap control, sales appointments with attendance states
- **Avoid when:** planning with dependencies between tasks, date range selection for filtering
- **Preserve when adapting:** calendar-grammar, conflict-rules, status-workflow
- **Replace when adapting:** domain-copy, visit-types, opening-hours
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** button, card, label, textarea, badge
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Clinic Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-calendar-month-week-agenda, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Healthcare Billing Ledger

Billing of visits with partial payments.

- id: `healthcare-billing-ledger`
- Page: https://agentic-ui-kit.com/components/healthcare-billing-ledger
- Live preview: https://agentic-ui-kit.com/clinic-operations/billing?piece=healthcare-billing-ledger

## Install

```bash
agentic-ui add healthcare-billing-ledger
npx shadcn@4.17.0 add @agentic-ui/healthcare-billing-ledger
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-summary, status-tabs, derived-invoice-status, record-payment, overpayment-guard, invoice-from-visit
- **Intents:** manage-collection, track-status, create-edit
- **Suits domains:** healthcare, billing, finance, saas
- **Interaction:** tab-filter, modal-form, row-actions
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** billing of visits with partial payments, accounts receivable of a consultancy, subscriptions with manual payments
- **Avoid when:** double-entry accounting, payments with a real gateway
- **Preserve when adapting:** status-derivation, payment-guard
- **Replace when adapting:** domain-copy, currency, payment-methods
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** button, card, table
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Clinic Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Healthcare Clinic App Shell

Clinical back-office shell.

- id: `healthcare-clinic-app-shell`
- Page: https://agentic-ui-kit.com/components/healthcare-clinic-app-shell
- Live preview: https://agentic-ui-kit.com/live/fixture/healthcare-clinic-app-shell?piece=healthcare-clinic-app-shell

## Install

```bash
agentic-ui add healthcare-clinic-app-shell
npx shadcn@4.17.0 add @agentic-ui/healthcare-clinic-app-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sidebar-nav, mobile-top-nav, skip-link, theme-toggle, motion-settings, variant-badge, live-announcer
- **Intents:** navigate, configure
- **Suits domains:** healthcare, operations, saas, hr
- **Interaction:** navigation, theme-switch, settings-disclosure
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** clinical back-office shell, internal admin with motion settings, operations console
- **Avoid when:** marketing sites, apps with deep navigation of more than 2 levels
- **Preserve when adapting:** navigation-model, global-controls
- **Replace when adapting:** brand, sections
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** badge, button
- **npm dependencies:** lucide-react, next-themes
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Clinic Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-micro-interactions, lib-primitives, lib-tokens


### Healthcare Clinic Stats

No-shows and consultation occupancy.

- id: `healthcare-clinic-stats`
- Page: https://agentic-ui-kit.com/components/healthcare-clinic-stats
- Live preview: https://agentic-ui-kit.com/clinic-operations/stats?piece=healthcare-clinic-stats

## Install

```bash
agentic-ui add healthcare-clinic-stats
npx shadcn@4.17.0 add @agentic-ui/healthcare-clinic-stats
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** kpi-cards, column-chart, bar-list, utilization, no-show-rate, collected-by-month
- **Intents:** compare-over-time, show-composition
- **Suits domains:** healthcare, operations, education, hr
- **Interaction:** tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** no-shows and consultation occupancy, revenue collected per month, mix of visit types
- **Avoid when:** long series with zoom, exploratory analysis with filters
- **Preserve when adapting:** kpi-hierarchy, chart-grammar
- **Replace when adapting:** metrics, domain-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** card
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Clinic Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Healthcare Patient Directory

Patient directory with balance and next appointment.

- id: `healthcare-patient-directory`
- Page: https://agentic-ui-kit.com/components/healthcare-patient-directory
- Live preview: https://agentic-ui-kit.com/clinic-operations/patients?piece=healthcare-patient-directory

## Install

```bash
agentic-ui add healthcare-patient-directory
npx shadcn@4.17.0 add @agentic-ui/healthcare-patient-directory
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** search, status-tabs, sortable-columns, row-link, balance-column, next-appointment, loading-skeleton, empty-state
- **Intents:** manage-collection, explore-detail
- **Suits domains:** healthcare, crm, hr, education
- **Interaction:** search, tab-filter, sort, row-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** patient directory with balance and next appointment, listing of students by status, employees with status filters
- **Avoid when:** fewer than 10 records with no search, bulk inline editing
- **Preserve when adapting:** information-hierarchy, filter-model
- **Replace when adapting:** domain-copy, columns, status-values
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** avatar, badge, card, table
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Clinic Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Healthcare Patient Intake Wizard

Patient registration with coverage and consent.

- id: `healthcare-patient-intake-wizard`
- Page: https://agentic-ui-kit.com/components/healthcare-patient-intake-wizard
- Live preview: https://agentic-ui-kit.com/clinic-operations/patients/new?piece=healthcare-patient-intake-wizard

## Install

```bash
agentic-ui add healthcare-patient-intake-wizard
npx shadcn@4.17.0 add @agentic-ui/healthcare-patient-intake-wizard
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-step, per-step-validation, conditional-rule, consent-step, human-review, redirect-on-submit
- **Intents:** execute-flow, create-edit
- **Suits domains:** healthcare, hr, education, saas
- **Interaction:** step-navigation, validation, review
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** patient registration with coverage and consent, employee onboarding, student enrollment
- **Avoid when:** forms with fewer than 5 fields, quick single-field editing
- **Preserve when adapting:** step-guard, review-before-submit
- **Replace when adapting:** domain-copy, fields, schemas
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** card
- **npm dependencies:** zod, react-hook-form
- **Used in:** Clinic Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0, react-hook-form@7.72.0, zod-v3@npm:zod@^3.24.2
- **Registry dependencies:** lib-form-multi-step-wizard, lib-motion, lib-motion-micro-interactions, lib-primitives, lib-tokens


### Healthcare Patient Record

Medical record with visits, treatments and invoices.

- id: `healthcare-patient-record`
- Page: https://agentic-ui-kit.com/components/healthcare-patient-record
- Live preview: https://agentic-ui-kit.com/live/fixture/healthcare-patient-record?piece=healthcare-patient-record

## Install

```bash
agentic-ui add healthcare-patient-record
npx shadcn@4.17.0 add @agentic-ui/healthcare-patient-record
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** identity-header, allergy-banner, tabbed-sections, clinical-timeline, vitals, treatment-progress, invoice-list, book-from-record, reminder-toggle
- **Intents:** explore-detail, audit-trail, create-edit
- **Suits domains:** healthcare, crm, hr, support
- **Interaction:** tabs, modal-form, toggle, status-actions
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** medical record with visits, treatments and invoices, 360 customer record, employee file
- **Avoid when:** comparative listings of many entities
- **Preserve when adapting:** information-hierarchy, section-tabs, safety-banner
- **Replace when adapting:** domain-copy, sections, metrics
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** avatar, badge, button, card, progress
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Clinic Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Healthcare Treatment Plans

Session-based treatments with progress.

- id: `healthcare-treatment-plans`
- Page: https://agentic-ui-kit.com/components/healthcare-treatment-plans
- Live preview: https://agentic-ui-kit.com/clinic-operations/treatments?piece=healthcare-treatment-plans

## Install

```bash
agentic-ui add healthcare-treatment-plans
npx shadcn@4.17.0 add @agentic-ui/healthcare-treatment-plans
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** service-catalog, category-tabs, plan-progress, log-session, pause-resume, status-filter
- **Intents:** manage-collection, track-status
- **Suits domains:** healthcare, education, saas, hr
- **Interaction:** tab-filter, progress-actions
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** session-based treatments with progress, training programs by modules, service plans with consumption
- **Avoid when:** product catalogs with variants and inventory
- **Preserve when adapting:** progress-semantics
- **Replace when adapting:** domain-copy, units, categories
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** badge, button, card, progress, table
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Clinic Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Hr Access Roles

HR roles over employee data.

- id: `hr-access-roles`
- Page: https://agentic-ui-kit.com/components/hr-access-roles
- Live preview: https://agentic-ui-kit.com/people-operations/access?piece=hr-access-roles

## Install

```bash
agentic-ui add hr-access-roles
npx shadcn@4.17.0 add @agentic-ui/hr-access-roles
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** roles-by-resources-matrix, locked-role, dirty-count, save-discard, members-by-role, access-log
- **Intents:** configure, audit-trail
- **Suits domains:** hr, saas, settings, auth
- **Interaction:** toggle, save, discard
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** HR roles over employee data, SaaS workspace roles, API permissions per team
- **Avoid when:** a single role, ACL per individual record
- **Preserve when adapting:** matrix-model, save-model
- **Replace when adapting:** domain-copy, roles, resources
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** checkbox, switch, badge, button, card
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** People Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator, org-permissions-matrix


### Hr Employee Directory

Employee directory by department.

- id: `hr-employee-directory`
- Page: https://agentic-ui-kit.com/components/hr-employee-directory
- Live preview: https://agentic-ui-kit.com/people-operations/directory?piece=hr-employee-directory

## Install

```bash
agentic-ui add hr-employee-directory
npx shadcn@4.17.0 add @agentic-ui/hr-employee-directory
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** search, department-tabs, status-filter, sortable-columns, row-link, kpi-strip, add-entity-modal, loading-skeleton, empty-state
- **Intents:** manage-collection, explore-detail
- **Suits domains:** hr, crm, healthcare, education, saas
- **Interaction:** search, tab-filter, sort, row-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** employee directory by department, workspace members with status, students per class
- **Avoid when:** fewer than 10 records with no search, bulk inline editing
- **Preserve when adapting:** information-hierarchy, filter-model
- **Replace when adapting:** domain-copy, columns, status-values
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** avatar, card, table, label, button
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** People Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Hr Employee Profile

Employee record with PTO and team.

- id: `hr-employee-profile`
- Page: https://agentic-ui-kit.com/components/hr-employee-profile
- Live preview: https://agentic-ui-kit.com/live/fixture/hr-employee-profile?piece=hr-employee-profile

## Install

```bash
agentic-ui add hr-employee-profile
npx shadcn@4.17.0 add @agentic-ui/hr-employee-profile
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** header-actions, kpi-strip, section-tabs, reporting-line, activity-timeline, pto-requests, direct-reports, role-permissions, request-modal
- **Intents:** explore-detail, track-status, configure
- **Suits domains:** hr, crm, healthcare, saas
- **Interaction:** tab-switch, modal, inline-action, select
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** employee record with PTO and team, customer record with activity, member profile with role
- **Avoid when:** listings with no main entity, public social network profiles
- **Preserve when adapting:** information-hierarchy, section-model
- **Replace when adapting:** domain-copy, kpis, sections
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** avatar, badge, button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** People Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Hr Org Chart

Org chart with team size.

- id: `hr-org-chart`
- Page: https://agentic-ui-kit.com/components/hr-org-chart
- Live preview: https://agentic-ui-kit.com/people-operations/org?piece=hr-org-chart

## Install

```bash
agentic-ui add hr-org-chart
npx shadcn@4.17.0 add @agentic-ui/hr-org-chart
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** tree-table, expand-collapse, cascading-selection, search-with-ancestors, org-size, csv-export, selection-panel, kpi-strip
- **Intents:** navigate, explore-detail, import-export
- **Suits domains:** hr, operations, saas, project-management
- **Interaction:** expand-collapse, select, search, export
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** org chart with team size, tree of accounts and subaccounts, project hierarchy
- **Avoid when:** flat lists with no hierarchy, non-tree graphs
- **Preserve when adapting:** hierarchy-model, selection-cascade
- **Replace when adapting:** domain-copy, columns
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** table, checkbox, button, badge, input, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** People Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator, table-tree-hierarchy


### Hr People App Shell

HR back office.

- id: `hr-people-app-shell`
- Page: https://agentic-ui-kit.com/components/hr-people-app-shell
- Live preview: https://agentic-ui-kit.com/live/fixture/hr-people-app-shell?piece=hr-people-app-shell

## Install

```bash
agentic-ui add hr-people-app-shell
npx shadcn@4.17.0 add @agentic-ui/hr-people-app-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sidebar-nav, mobile-nav, skip-link, theme-toggle, motion-settings, variant-badge, live-announcer
- **Intents:** navigate, configure
- **Suits domains:** hr, crm, healthcare, operations, saas
- **Interaction:** navigation, theme-toggle, settings-popover
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** HR back office, internal tool with a motion panel, lightweight admin console
- **Avoid when:** public marketing apps
- **Preserve when adapting:** navigation-model, a11y-landmarks
- **Replace when adapting:** brand, nav-items
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** badge
- **npm dependencies:** lucide-react, next-themes
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** People Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-motion-micro-interactions, lib-primitives, lib-tokens


### Hr Recruiting Pipeline

Candidate pipeline per opening.

- id: `hr-recruiting-pipeline`
- Page: https://agentic-ui-kit.com/components/hr-recruiting-pipeline
- Live preview: https://agentic-ui-kit.com/people-operations/recruiting?piece=hr-recruiting-pipeline

## Install

```bash
agentic-ui add hr-recruiting-pipeline
npx shadcn@4.17.0 add @agentic-ui/hr-recruiting-pipeline
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** stage-columns, requisition-swimlanes, wip-limits, drag-and-drop, keyboard-move, rule-guarded-moves, candidate-modal, hire-to-employee, reject-list, kpi-strip
- **Intents:** track-status, manage-collection, execute-flow
- **Suits domains:** hr, crm, project-management, support
- **Interaction:** drag-drop, keyboard-move, modal, filter
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** candidate pipeline per opening, deals by stage and region, tickets by status and team
- **Avoid when:** fewer than 3 stages, lists with no status flow
- **Preserve when adapting:** stage-model, swimlane-grouping, wip-signals
- **Replace when adapting:** domain-copy, stages, card-fields
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 7/10, accessibility 8/10, code 8/10
- **Uses primitives:** badge, button, card, avatar, dropdown-menu, input, scroll-area
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** People Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** kanban-swimlanes, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Hr Time Off Calendar

Team vacation calendar.

- id: `hr-time-off-calendar`
- Page: https://agentic-ui-kit.com/components/hr-time-off-calendar
- Live preview: https://agentic-ui-kit.com/people-operations/time-off?piece=hr-time-off-calendar

## Install

```bash
agentic-ui add hr-time-off-calendar
npx shadcn@4.17.0 add @agentic-ui/hr-time-off-calendar
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** month-week-agenda, locked-events, drag-reschedule, keyboard-reschedule, approval-queue, who-is-out, team-filter, request-modal, balance-check
- **Intents:** track-status, create-edit, execute-flow
- **Suits domains:** hr, operations, healthcare, education
- **Interaction:** drag-drop, keyboard-move, approve, modal
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** team vacation calendar, shifts with approval, room bookings
- **Avoid when:** hourly agendas with resources, events with no approval flow
- **Preserve when adapting:** calendar-grammar, approval-flow
- **Replace when adapting:** domain-copy, event-categories, rules
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** People Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-calendar-month-week-agenda, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Legal Client Portal

Legal practice management.

- id: `legal-client-portal`
- Page: https://agentic-ui-kit.com/components/legal-client-portal
- Live preview: https://agentic-ui-kit.com/legal-operations/portal?piece=legal-client-portal

## Install

```bash
agentic-ui add legal-client-portal
npx shadcn@4.17.0 add @agentic-ui/legal-client-portal
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** client-filter, messages, shared-documents, invoices
- **Intents:** manage-collection
- **Suits domains:** operations
- **Interaction:** filter, edit
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** legal practice management
- **Avoid when:** production legal records without backend authorization
- **Preserve when adapting:** state-model
- **Replace when adapting:** fixtures, domain-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, badge
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Legal Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** docs-approval-flow, lib-docs-version-history, lib-motion, lib-motion-micro-interactions, lib-primitives, lib-tokens


### Legal Deadlines Calendar

Legal practice management.

- id: `legal-deadlines-calendar`
- Page: https://agentic-ui-kit.com/components/legal-deadlines-calendar
- Live preview: https://agentic-ui-kit.com/legal-operations/calendar?piece=legal-deadlines-calendar

## Install

```bash
agentic-ui add legal-deadlines-calendar
npx shadcn@4.17.0 add @agentic-ui/legal-deadlines-calendar
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** court-deadlines, rule-computation, mark-done
- **Intents:** manage-collection
- **Suits domains:** operations
- **Interaction:** filter, edit
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** legal practice management
- **Avoid when:** production legal records without backend authorization
- **Preserve when adapting:** state-model
- **Replace when adapting:** fixtures, domain-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, badge
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Legal Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** docs-approval-flow, lib-calendar-month-week-agenda, lib-docs-version-history, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Legal Documents Workspace

Legal practice management.

- id: `legal-documents-workspace`
- Page: https://agentic-ui-kit.com/components/legal-documents-workspace
- Live preview: https://agentic-ui-kit.com/legal-operations/documents?piece=legal-documents-workspace

## Install

```bash
agentic-ui add legal-documents-workspace
npx shadcn@4.17.0 add @agentic-ui/legal-documents-workspace
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** approval-flow, version-history, client-sharing
- **Intents:** manage-collection
- **Suits domains:** operations
- **Interaction:** filter, edit
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** legal practice management
- **Avoid when:** production legal records without backend authorization
- **Preserve when adapting:** state-model
- **Replace when adapting:** fixtures, domain-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, badge
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Legal Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** docs-approval-flow, lib-docs-version-history, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Legal Hourly Billing

Legal practice management.

- id: `legal-hourly-billing`
- Page: https://agentic-ui-kit.com/components/legal-hourly-billing
- Live preview: https://agentic-ui-kit.com/legal-operations/billing?piece=legal-hourly-billing

## Install

```bash
agentic-ui add legal-hourly-billing
npx shadcn@4.17.0 add @agentic-ui/legal-hourly-billing
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** timer, time-entry, invoice, send
- **Intents:** manage-collection
- **Suits domains:** operations
- **Interaction:** filter, edit
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** legal practice management
- **Avoid when:** production legal records without backend authorization
- **Preserve when adapting:** state-model
- **Replace when adapting:** fixtures, domain-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, badge
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Legal Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** docs-approval-flow, lib-docs-version-history, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Legal Matter Detail

Legal practice management.

- id: `legal-matter-detail`
- Page: https://agentic-ui-kit.com/components/legal-matter-detail
- Live preview: https://agentic-ui-kit.com/live/fixture/legal-matter-detail?piece=legal-matter-detail

## Install

```bash
agentic-ui add legal-matter-detail
npx shadcn@4.17.0 add @agentic-ui/legal-matter-detail
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** status-change, activity, deadlines
- **Intents:** manage-collection
- **Suits domains:** operations
- **Interaction:** filter, edit
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** legal practice management
- **Avoid when:** production legal records without backend authorization
- **Preserve when adapting:** state-model
- **Replace when adapting:** fixtures, domain-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, badge
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Legal Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** docs-approval-flow, lib-docs-version-history, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Legal Matters Directory

Legal practice management.

- id: `legal-matters-directory`
- Page: https://agentic-ui-kit.com/components/legal-matters-directory
- Live preview: https://agentic-ui-kit.com/legal-operations/matters?piece=legal-matters-directory

## Install

```bash
agentic-ui add legal-matters-directory
npx shadcn@4.17.0 add @agentic-ui/legal-matters-directory
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** search, status-filter, conflict-check, create-matter
- **Intents:** manage-collection
- **Suits domains:** operations
- **Interaction:** filter, edit
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** legal practice management
- **Avoid when:** production legal records without backend authorization
- **Preserve when adapting:** state-model
- **Replace when adapting:** fixtures, domain-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, badge
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Legal Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** docs-approval-flow, lib-docs-version-history, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Legal Practice App Shell

Legal practice management.

- id: `legal-practice-app-shell`
- Page: https://agentic-ui-kit.com/components/legal-practice-app-shell
- Live preview: https://agentic-ui-kit.com/live/fixture/legal-practice-app-shell?piece=legal-practice-app-shell

## Install

```bash
agentic-ui add legal-practice-app-shell
npx shadcn@4.17.0 add @agentic-ui/legal-practice-app-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** navigation, theme, motion-settings, running-timer
- **Intents:** manage-collection
- **Suits domains:** operations
- **Interaction:** filter, edit
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** legal practice management
- **Avoid when:** production legal records without backend authorization
- **Preserve when adapting:** state-model
- **Replace when adapting:** fixtures, domain-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, badge
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Legal Operations (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** docs-approval-flow, lib-docs-version-history, lib-motion, lib-motion-micro-interactions, lib-primitives, lib-tokens


### Marketing App Shell

Analytics dashboard shell with a global date range.

- id: `marketing-app-shell`
- Page: https://agentic-ui-kit.com/components/marketing-app-shell
- Live preview: https://agentic-ui-kit.com/live/fixture/marketing-app-shell?piece=marketing-app-shell

## Install

```bash
agentic-ui add marketing-app-shell
npx shadcn@4.17.0 add @agentic-ui/marketing-app-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** sidebar-navigation, mobile-horizontal-nav, global-date-range-picker, fixture-clock-presets, theme-toggle, motion-settings-panel, skip-link, variant-badge
- **Intents:** navigate, configure
- **Suits domains:** marketing, analytics, saas, operations
- **Interaction:** navigate, date-range, theme-toggle, motion-settings
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Analytics dashboard shell with a global date range, Console with per-project motion controls, Back office with side navigation
- **Avoid when:** Single-screen apps, Public marketing sites
- **Preserve when adapting:** sidebar-header-main-layout, global-range-context, motion-settings
- **Replace when adapting:** navigation-items, branding, presets
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** badge, label, switch
- **npm dependencies:** lucide-react, date-fns, react-day-picker
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-cohort-retention, chart-funnel-conversion, lib-chart-heatmap-matrix, lib-chart-sankey-flow, lib-form-date-range-picker, lib-motion, lib-primitives, lib-tokens


### Marketing Attribution Flow

Multi-touch attribution by channel.

- id: `marketing-attribution-flow`
- Page: https://agentic-ui-kit.com/components/marketing-attribution-flow
- Live preview: https://agentic-ui-kit.com/marketing-analytics/attribution?piece=marketing-attribution-flow

## Install

```bash
agentic-ui add marketing-attribution-flow
npx shadcn@4.17.0 add @agentic-ui/marketing-attribution-flow
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** attribution-model-switch, channel-touchpoint-outcome-sankey, credited-conversions-table, model-vs-last-touch-delta, hour-weekday-heatmap, conversion-calendar
- **Intents:** show-composition, explore-detail, compare-over-time
- **Suits domains:** marketing, analytics, ecommerce, saas
- **Interaction:** model-tabs, node-select, unit-toggle, metric-toggle, mode-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Multi-touch attribution by channel, Lead flow from source → stage → outcome, When customers convert by hour and day
- **Avoid when:** Real algorithmic attribution (requires a data backend), Fewer than 3 channels
- **Preserve when adapting:** model-switch-plus-flow-plus-credit-table, timing-heatmap
- **Replace when adapting:** attribution-weights, touchpoints, domain-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, table
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-cohort-retention, chart-funnel-conversion, lib-chart-heatmap-matrix, lib-chart-sankey-flow, lib-form-date-range-picker, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Marketing Audience Explorer

Customer segment explorer.

- id: `marketing-audience-explorer`
- Page: https://agentic-ui-kit.com/components/marketing-audience-explorer
- Live preview: https://agentic-ui-kit.com/marketing-analytics/audiences?piece=marketing-audience-explorer

## Install

```bash
agentic-ui add marketing-audience-explorer
npx shadcn@4.17.0 add @agentic-ui/marketing-audience-explorer
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** lifecycle-tabs-with-counts, region-filter, search, sort, segment-cards-with-trend, segment-detail-panel, targeting-campaign-links, create-segment-dialog
- **Intents:** manage-collection, explore-detail, create-edit
- **Suits domains:** marketing, analytics, crm, ecommerce
- **Interaction:** tabs, search, filter, sort, select-card, modal-create
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Customer segment explorer, Audience directory with rules, CRM lists with size trend
- **Avoid when:** Bulk attribute editing (use enterprise-data-table)
- **Preserve when adapting:** card-grid-plus-detail-panel, rules-display
- **Replace when adapting:** segment-attributes, domain-copy, size-estimator
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, button, input, label, textarea
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-cohort-retention, chart-funnel-conversion, chart-sparkline, lib-chart-heatmap-matrix, lib-chart-sankey-flow, lib-form-date-range-picker, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Marketing Campaign Detail

Campaign detail with ROAS vs target and creatives.

- id: `marketing-campaign-detail`
- Page: https://agentic-ui-kit.com/components/marketing-campaign-detail
- Live preview: https://agentic-ui-kit.com/live/fixture/marketing-campaign-detail?piece=marketing-campaign-detail

## Install

```bash
agentic-ui add marketing-campaign-detail
npx shadcn@4.17.0 add @agentic-ui/marketing-campaign-detail
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards-with-sparklines, revenue-vs-spend-timeseries, roas-gauge-vs-target, campaign-funnel, creatives-table, audience-summary, pause-resume, edit-budget-dialog, section-tabs
- **Intents:** explore-detail, compare-over-time, configure
- **Suits domains:** marketing, analytics, ecommerce, saas
- **Interaction:** tabs, modal-edit, toggle-status, stage-inspect
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Campaign detail with ROAS vs target and creatives, Promotion page with an editable budget, Acquisition channel detail with its funnel
- **Avoid when:** Comparing many campaigns at once (use marketing-campaign-table)
- **Preserve when adapting:** header-actions-kpis-tabs, target-gauge-bands, session-state-mutations
- **Replace when adapting:** domain-copy, metrics, thresholds, fixture-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, button, table, input, label
- **npm dependencies:** recharts, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0, recharts-v2@npm:recharts@^2.15.4
- **Registry dependencies:** chart-cohort-retention, chart-funnel-conversion, chart-gauge-kpi, chart-sparkline, lib-chart-heatmap-matrix, lib-chart-sankey-flow, lib-form-date-range-picker, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Marketing Campaign Overview

Paid media campaign performance by period with ROAS and CPA.

- id: `marketing-campaign-overview`
- Page: https://agentic-ui-kit.com/components/marketing-campaign-overview
- Live preview: https://agentic-ui-kit.com/marketing-analytics/campaigns?piece=marketing-campaign-overview

## Install

```bash
agentic-ui add marketing-campaign-overview
npx shadcn@4.17.0 add @agentic-ui/marketing-campaign-overview
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards-with-sparklines, period-over-period-delta, revenue-vs-spend-timeseries, channel-spend-composition, campaign-data-table, global-date-range, create-campaign-dialog, loading-skeletons
- **Intents:** compare-over-time, show-composition, manage-collection
- **Suits domains:** marketing, analytics, ecommerce, saas
- **Interaction:** date-range, kpi-focus, status-tabs, faceted-filter, sort, bulk-actions, export, modal-create
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Paid media campaign performance by period with ROAS and CPA, Growth marketing overview with channel mix, Summary of email and affiliate campaigns with CSV export
- **Avoid when:** Ad-hoc BI with free-form queries, Real-time per-second monitoring (use monitor-live)
- **Preserve when adapting:** kpi-to-trend-to-table-hierarchy, period-comparison-model, enterprise-table-composition
- **Replace when adapting:** domain-copy, metrics, fixture-adapter, channel-taxonomy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, button, table, input, checkbox, label
- **npm dependencies:** recharts, lucide-react, date-fns, react-day-picker
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0, recharts-v2@npm:recharts@^2.15.4
- **Registry dependencies:** chart-cohort-retention, chart-funnel-conversion, chart-sparkline, lib-chart-heatmap-matrix, lib-chart-sankey-flow, lib-form-date-range-picker, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Marketing Campaign Table

Campaign listing with bulk pause/resume.

- id: `marketing-campaign-table`
- Page: https://agentic-ui-kit.com/components/marketing-campaign-table
- Live preview: https://agentic-ui-kit.com/marketing-analytics/campaigns?piece=marketing-campaign-table

## Install

```bash
agentic-ui add marketing-campaign-table
npx shadcn@4.17.0 add @agentic-ui/marketing-campaign-table
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** search, status-tabs-with-counts, faceted-channel-filter, sortable-columns, row-selection, bulk-pause-resume, pagination, csv-export, sparkline-cells, target-breach-highlight
- **Intents:** manage-collection, track-status, import-export
- **Suits domains:** marketing, analytics, saas, ecommerce, billing
- **Interaction:** search, status-tabs, faceted-filter, sort, select-rows, bulk-actions, pagination, export
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Campaign listing with bulk pause/resume, Ad inventory with CSV export, Subscription list with status and trend
- **Avoid when:** Settings tables with fewer than 10 rows, Mobile reading as the main view (use responsive-table-to-cards)
- **Preserve when adapting:** toolbar-search-facets-table-pagination, bulk-action-bar, keyboard-model
- **Replace when adapting:** columns, status-values, domain-copy, export-schema
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** table, checkbox, input, badge, button
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-cohort-retention, chart-funnel-conversion, chart-sparkline, lib-chart-heatmap-matrix, lib-chart-sankey-flow, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Marketing Cohort Retention

Repurchase retention by weekly cohort.

- id: `marketing-cohort-retention`
- Page: https://agentic-ui-kit.com/components/marketing-cohort-retention
- Live preview: https://agentic-ui-kit.com/marketing-analytics/cohorts?piece=marketing-cohort-retention

## Install

```bash
agentic-ui add marketing-cohort-retention
npx shadcn@4.17.0 add @agentic-ui/marketing-cohort-retention
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** weekly-monthly-cohorts, source-filter, cell-inspector, retention-by-source-bars, summary-ribbon
- **Intents:** compare-over-time, track-status, explore-detail
- **Suits domains:** marketing, analytics, saas, ecommerce
- **Interaction:** granularity-toggle, metric-toggle, source-tabs, cell-select, keyboard-grid
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Repurchase retention by weekly cohort, SaaS user retention by sign-up month, Comparing acquisition quality by channel
- **Avoid when:** Fewer than 3 cohorts, Metrics without an acquisition date
- **Preserve when adapting:** cohort-grid-plus-inspector, source-comparison
- **Replace when adapting:** cohort-definition, retention-event, domain-copy
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-cohort-retention, chart-funnel-conversion, lib-chart-heatmap-matrix, lib-chart-sankey-flow, lib-form-date-range-picker, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Marketing Conversion Funnel

Session → purchase funnel by channel.

- id: `marketing-conversion-funnel`
- Page: https://agentic-ui-kit.com/components/marketing-conversion-funnel
- Live preview: https://agentic-ui-kit.com/marketing-analytics/funnel?piece=marketing-conversion-funnel

## Install

```bash
agentic-ui add marketing-conversion-funnel
npx shadcn@4.17.0 add @agentic-ui/marketing-conversion-funnel
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** channel-scoped-funnel, per-stage-dropoff, bottleneck-detection, stage-inspector, period-comparison-table, keyboard-stage-navigation
- **Intents:** show-composition, compare-over-time, explore-detail
- **Suits domains:** marketing, analytics, ecommerce, saas
- **Interaction:** channel-tabs, stage-select, keyboard-scrubbing, unit-toggle
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Session → purchase funnel by channel, SaaS activation funnel by source, E-commerce checkout with period comparison
- **Avoid when:** Non-sequential processes, Fewer than 3 stages
- **Preserve when adapting:** funnel-plus-step-table, stage-inspector, period-comparison
- **Replace when adapting:** stage-definitions, segments, domain-copy
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** card, table
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** chart-cohort-retention, chart-funnel-conversion, lib-chart-heatmap-matrix, lib-chart-sankey-flow, lib-form-date-range-picker, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Marketing CTA

Closing call to action at the bottom of a landing page with start trial and talk to sales buttons.

- id: `marketing-cta`
- Page: https://agentic-ui-kit.com/components/marketing-cta
- Live preview: https://agentic-ui-kit.com/live/component/marketing-cta?piece=marketing-cta

## Install

```bash
agentic-ui add marketing-cta
npx shadcn@4.17.0 add @agentic-ui/marketing-cta
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** brand-panel, subtle-panel, dual-cta, grid-pattern, footnote, dark-mode
- **Intents:** execute-flow, navigate
- **Suits domains:** marketing, saas, devtools, ecommerce, ai-agents
- **Interaction:** click
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** closing call to action at the bottom of a landing page with start trial and talk to sales buttons, conversion band between sections of a marketing site, signup prompt at the end of a blog post or docs landing page
- **Avoid when:** forms that collect data inline (use marketing-newsletter), in-app upgrade prompts tied to usage limits, more than two competing actions
- **Preserve when adapting:** contrast-pairing, action-order
- **Replace when adapting:** copy, cta-links, tone
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Marketing FAQ

Frequently asked questions section on a landing or pricing page with schema.org FAQ structured data for SEO.

- id: `marketing-faq`
- Page: https://agentic-ui-kit.com/components/marketing-faq
- Live preview: https://agentic-ui-kit.com/live/component/marketing-faq?piece=marketing-faq

## Install

```bash
agentic-ui add marketing-faq
npx shadcn@4.17.0 add @agentic-ui/marketing-faq
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** native-disclosure, exclusive-open, split-layout, contact-prompt, faq-structured-data, dark-mode
- **Intents:** retrieve-knowledge, explore-detail
- **Suits domains:** marketing, saas, ecommerce, support, billing
- **Interaction:** expand-collapse, keyboard-toggle
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** frequently asked questions section on a landing or pricing page with schema.org FAQ structured data for SEO, pre-purchase questions about trial, billing and data next to the pricing table, short FAQ before the footer of a product marketing site
- **Avoid when:** a searchable help center with categories and feedback (use docs-faq-block or docs-knowledge-base), answers that need rich content such as tables or video, more than about twelve questions
- **Preserve when adapting:** details-semantics, json-ld-escaping
- **Replace when adapting:** items, contact, layout
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Marketing Feature Grid

Features section of a SaaS landing page listing six capabilities with icons, titles and one-line descriptions.

- id: `marketing-feature-grid`
- Page: https://agentic-ui-kit.com/components/marketing-feature-grid
- Live preview: https://agentic-ui-kit.com/live/component/marketing-feature-grid?piece=marketing-feature-grid

## Install

```bash
agentic-ui add marketing-feature-grid
npx shadcn@4.17.0 add @agentic-ui/marketing-feature-grid
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** feature-cards, bento-layout, icon-tiles, learn-more-links, stagger-entrance, reduced-motion, dark-mode
- **Intents:** explore-detail, communicate
- **Suits domains:** marketing, saas, devtools, ai-agents, ecommerce
- **Interaction:** scroll-reveal, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** features section of a SaaS landing page listing six capabilities with icons, titles and one-line descriptions, bento grid highlighting the main product benefits on a marketing homepage, why-us section on a pricing or comparison page
- **Avoid when:** detailed spec comparisons between plans (use marketing-pricing or a comparison table), in-app onboarding checklists, more than nine features: split into several sections
- **Preserve when adapting:** list-semantics, reduced-motion
- **Replace when adapting:** features, icons, layout, copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion-list, lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion-list, lib-primitives


### Marketing Footer

Site footer for a SaaS landing page with product, resources, company and legal link columns.

- id: `marketing-footer`
- Page: https://agentic-ui-kit.com/components/marketing-footer
- Live preview: https://agentic-ui-kit.com/live/component/marketing-footer?piece=marketing-footer

## Install

```bash
agentic-ui add marketing-footer
npx shadcn@4.17.0 add @agentic-ui/marketing-footer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** link-columns, brand-blurb, social-links, status-pill, legal-links, dark-mode
- **Intents:** navigate
- **Suits domains:** marketing, saas, ecommerce, devtools, education
- **Interaction:** click, keyboard-focus
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** site footer for a SaaS landing page with product, resources, company and legal link columns, marketing site footer with social links, a system status link and copyright, documentation or blog footer that mirrors the main site navigation
- **Avoid when:** inside an authenticated app layout (use the app shell), pages that need a mega footer with newsletter and sitemap (compose with marketing-newsletter), single-screen tools without navigation
- **Preserve when adapting:** nav-landmarks, link-labels
- **Replace when adapting:** columns, brand, socials, legal
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Marketing Hero Centered

Landing page hero for a SaaS or developer tool with a launch announcement, headline, signup and demo buttons and an install command.

- id: `marketing-hero-centered`
- Page: https://agentic-ui-kit.com/components/marketing-hero-centered
- Live preview: https://agentic-ui-kit.com/live/component/marketing-hero-centered?piece=marketing-hero-centered

## Install

```bash
agentic-ui add marketing-hero-centered
npx shadcn@4.17.0 add @agentic-ui/marketing-hero-centered
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** announcement-pill, accent-headline, dual-cta, copyable-command, aurora-backdrop, grid-backdrop, media-slot, reduced-motion, dark-mode
- **Intents:** navigate, communicate
- **Suits domains:** marketing, saas, devtools, ai-agents, ecommerce
- **Interaction:** click, copy-to-clipboard, keyboard-focus
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** landing page hero for a SaaS or developer tool with a launch announcement, headline, signup and demo buttons and an install command, top of a product marketing site or waitlist page that needs one strong h1 and two calls to action over an animated backdrop, launch page for a new feature or open-source CLI where the copyable install line is the main action
- **Avoid when:** the hero must show a product screenshot beside the copy (use marketing-hero-split), inside an authenticated app screen or dashboard header, pages that already have an h1 above this section
- **Preserve when adapting:** single-h1, cta-order, backdrop-aria-hidden
- **Replace when adapting:** copy, cta-links, backdrop, command
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/fx-aurora-background, lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** fx-aurora-background, lib-primitives


### Marketing Hero Split

Landing page hero for a B2B SaaS or analytics product that shows the product dashboard next to the headline and signup button.

- id: `marketing-hero-split`
- Page: https://agentic-ui-kit.com/components/marketing-hero-split
- Live preview: https://agentic-ui-kit.com/live/component/marketing-hero-split?piece=marketing-hero-split

## Install

```bash
agentic-ui add marketing-hero-split
npx shadcn@4.17.0 add @agentic-ui/marketing-hero-split
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** two-column-layout, product-mockup, media-slot, proof-points, dual-cta, reverse-layout, heading-level, dark-mode
- **Intents:** navigate, communicate, explore-detail
- **Suits domains:** marketing, saas, analytics, finance, devtools
- **Interaction:** click, keyboard-focus
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** landing page hero for a B2B SaaS or analytics product that shows the product dashboard next to the headline and signup button, product section further down a marketing page (h2 mode) explaining one capability with a visual, homepage hero with three proof points such as setup time, compliance and cancel anytime
- **Avoid when:** there is no product visual to show and the message is the headline alone (use marketing-hero-centered), app screens behind login, very long copy that pushes the visual below the fold on desktop
- **Preserve when adapting:** heading-semantics, mockup-label
- **Replace when adapting:** copy, media, proof-points, cta-links
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Marketing Logo Cloud

Trusted-by strip of customer logos under the hero on a SaaS landing page.

- id: `marketing-logo-cloud`
- Page: https://agentic-ui-kit.com/components/marketing-logo-cloud
- Live preview: https://agentic-ui-kit.com/live/component/marketing-logo-cloud?piece=marketing-logo-cloud

## Install

```bash
agentic-ui add marketing-logo-cloud
npx shadcn@4.17.0 add @agentic-ui/marketing-logo-cloud
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** logo-grid, logo-marquee, pause-control, monochrome-logos, image-or-icon-logos, reduced-motion, dark-mode
- **Intents:** communicate
- **Suits domains:** marketing, saas, devtools, ecommerce, fintech
- **Interaction:** pause-toggle, hover-pause
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** trusted-by strip of customer logos under the hero on a SaaS landing page, scrolling marquee of partner or integration logos on a marketing site, logo row on a pricing page to reassure buyers
- **Avoid when:** logos you have no permission to show, lists that need descriptions or links per company (use a card grid), dashboard or app screens
- **Preserve when adapting:** pause-control, clone-hiding
- **Replace when adapting:** logos, title, mode
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion-marquee, lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives, motion-marquee


### Marketing Newsletter

Newsletter signup band on a landing page or blog with email validation and a success message.

- id: `marketing-newsletter`
- Page: https://agentic-ui-kit.com/components/marketing-newsletter
- Live preview: https://agentic-ui-kit.com/live/component/marketing-newsletter?piece=marketing-newsletter

## Install

```bash
agentic-ui add marketing-newsletter
npx shadcn@4.17.0 add @agentic-ui/marketing-newsletter
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** email-validation, async-submit, success-state, error-state, live-region, privacy-note, banner-or-inline, dark-mode
- **Intents:** execute-flow, communicate
- **Suits domains:** marketing, saas, ecommerce, education, devtools
- **Interaction:** typing, form-submit, validation
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** newsletter signup band on a landing page or blog with email validation and a success message, waitlist form for a product launch page that posts the email to your provider, product updates subscription above the footer of a marketing site
- **Avoid when:** account signup with password or SSO (use auth-login-signup), multi-field lead forms, transactional email preferences inside settings
- **Preserve when adapting:** label-and-errors, live-region
- **Replace when adapting:** copy, subscribe-handler, layout
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** input, button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Marketing Pricing

Public pricing page section with monthly and annual billing toggle, three or four plans and a most popular badge.

- id: `marketing-pricing`
- Page: https://agentic-ui-kit.com/components/marketing-pricing
- Live preview: https://agentic-ui-kit.com/live/component/marketing-pricing?piece=marketing-pricing

## Install

```bash
agentic-ui add marketing-pricing
npx shadcn@4.17.0 add @agentic-ui/marketing-pricing
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** billing-cycle-toggle, annual-savings, highlighted-plan, quote-based-plan, price-morph, controlled-and-uncontrolled, currency-locale, dark-mode
- **Intents:** explore-detail, execute-flow
- **Suits domains:** marketing, saas, billing, devtools, ai-agents
- **Interaction:** toggle, click, keyboard-arrows
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** public pricing page section with monthly and annual billing toggle, three or four plans and a most popular badge, landing page pricing block that links each plan to signup or contact sales, pricing teaser on a SaaS homepage with a free tier and a custom enterprise tier
- **Avoid when:** in-app plan management for a signed-in customer (use billing-plan-comparison or billing-pricing-table), checkout or payment collection (use billing-checkout-flow), row-by-row feature comparison across many plans
- **Preserve when adapting:** radio-toggle, price-announcement, pricing-model
- **Replace when adapting:** plans, currency, copy, cta-links
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion-number-morph, lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives, motion-number-morph


### Marketing Stats

By-the-numbers band on a landing page with customers, uptime and time saved.

- id: `marketing-stats`
- Page: https://agentic-ui-kit.com/components/marketing-stats
- Live preview: https://agentic-ui-kit.com/live/component/marketing-stats?piece=marketing-stats

## Install

```bash
agentic-ui add marketing-stats
npx shadcn@4.17.0 add @agentic-ui/marketing-stats
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** key-figures, count-up-on-view, intl-formatting, plain-or-cards, reduced-motion, dark-mode
- **Intents:** communicate, show-composition
- **Suits domains:** marketing, saas, fintech, analytics, operations
- **Interaction:** scroll-reveal
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** by-the-numbers band on a landing page with customers, uptime and time saved, impact metrics section on a company or about page, social proof figures beside testimonials on a marketing site
- **Avoid when:** live operational KPIs that change while viewing (use dashboard-kpi-goal or chart blocks), figures that need trend charts or comparisons, unverifiable claims in production copy
- **Preserve when adapting:** description-list, server-final-values
- **Replace when adapting:** stats, formats, appearance
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion-number-morph, lucide-react
- **Registry dependencies:** lib-primitives, motion-number-morph


### Marketing Testimonials

Customer testimonials section with a featured quote and a grid of reviews on a SaaS landing page.

- id: `marketing-testimonials`
- Page: https://agentic-ui-kit.com/components/marketing-testimonials
- Live preview: https://agentic-ui-kit.com/live/component/marketing-testimonials?piece=marketing-testimonials

## Install

```bash
agentic-ui add marketing-testimonials
npx shadcn@4.17.0 add @agentic-ui/marketing-testimonials
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** featured-quote, masonry-grid, star-rating, initials-avatars, image-avatars, dark-mode
- **Intents:** communicate
- **Suits domains:** marketing, saas, ecommerce, education, healthcare
- **Interaction:** read-only
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** customer testimonials section with a featured quote and a grid of reviews on a SaaS landing page, wall of love with star ratings on a product marketing site, case-study quotes near the pricing table to support conversion
- **Avoid when:** product reviews with sorting, filtering or submission (use commerce-reviews-block), invented quotes presented as real customers in production, in-app activity or comment feeds
- **Preserve when adapting:** figure-semantics, rating-label
- **Replace when adapting:** testimonials, featured, copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Media Carousel Controls

Photo and video gallery of a project with a counter and access to each asset's detail.

- id: `media-carousel-controls`
- Page: https://agentic-ui-kit.com/components/media-carousel-controls
- Live preview: https://agentic-ui-kit.com/live/component/media-carousel-controls

## Install

```bash
agentic-ui add media-carousel-controls
npx shadcn@4.17.0 add @agentic-ui/media-carousel-controls
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** controlled-index, previous-next-navigation, direct-slide-selection, touch-swipe-navigation, keyboard-navigation, optional-loop, pausable-autoplay, reduced-motion-fallback, live-status-announcement, empty-state-fallback, error-state-fallback, dark-mode
- **Intents:** navigate, explore-detail, show-composition
- **Suits domains:** media, ecommerce, travel, marketing, social, music
- **Interaction:** tap, click, swipe, drag, keyboard-navigation, autoplay
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** photo and video gallery of a project with a counter and access to each asset's detail, product image carousel with direct selection by thumbnail or dot, campaign hero with autoplay that pauses on mouse hover or when focusing a button, destination tour with infinite loop and touch swipe on mobile
- **Avoid when:** content that must be compared side by side or scanned in full at a glance, long lists of more than 15 items where a grid or scrolling rail is more efficient, critical or business messages that must not be hidden behind an inactive slide
- **Preserve when adapting:** controlled-index-contract, keyboard-model, autoplay-pause-rules, reduced-motion-fallback, slide-accessibility-semantics
- **Replace when adapting:** slide-content, aspect-ratio, interval-and-loop-defaults, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0
- **Registry dependencies:** lib-primitives, lib-tokens


### Mobile Bottom Nav

Bottom bar of a mobile app with Home, Search, Inbox and Profile.

- id: `mobile-bottom-nav`
- Page: https://agentic-ui-kit.com/components/mobile-bottom-nav
- Live preview: https://agentic-ui-kit.com/live/component/mobile-bottom-nav

## Install

```bash
agentic-ui add mobile-bottom-nav
npx shadcn@4.17.0 add @agentic-ui/mobile-bottom-nav
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** bottom-tab-navigation, count-badge, dot-badge, badge-overflow-cap, roving-tabindex, keyboard-navigation, disabled-destination, safe-area-inset, controlled-and-uncontrolled, touch-target-floor
- **Intents:** navigate, track-status
- **Suits domains:** saas, ecommerce, social, personal-productivity, operations
- **Interaction:** tap, keyboard-navigation, roving-focus, select-destination, badge-feedback
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** bottom bar of a mobile app with Home, Search, Inbox and Profile, count of unread conversations on the inbox icon, new-activity dot in a feed where the exact number adds nothing, destination disabled by plan or permission that stays visible but cannot be activated
- **Avoid when:** more than five destinations, where the label no longer fits and a menu or drawer is more appropriate, desktop navigation with side space, which calls for a sidebar
- **Preserve when adapting:** destination-order, badge-semantics, touch-target-floor, keyboard-model
- **Replace when adapting:** domain-copy, icon-set, destination-set, badge-nouns
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card
- **npm dependencies:** lucide-react
- **Registry dependencies:** lib-primitives


### Motion Accordion

Setup checklist with per-step status.

- id: `motion-accordion`
- Page: https://agentic-ui-kit.com/components/motion-accordion
- Live preview: https://agentic-ui-kit.com/live/component/motion-accordion

## Install

```bash
agentic-ui add motion-accordion
npx shadcn@4.17.0 add @agentic-ui/motion-accordion
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** expand-collapse-transition, single-or-multiple-open, personality-tuning, reduced-motion-fallback, keyboard-navigation, informative-state-preservation
- **Intents:** explore-detail, configure, execute-flow
- **Suits domains:** saas, settings, knowledge, billing, project-management
- **Interaction:** click, keyboard-navigation, expand-collapse
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Setup checklist with per-step status, Frequently asked questions on a help or pricing page, Groups of advanced settings folded inside a configuration form, Invoice line breakdown by category
- **Avoid when:** Content the user needs to compare side by side at the same time, Navigation between sibling views, where tabs fit better
- **Preserve when adapting:** grid-rows-height-transition, aria-accordion-keyboard-model, accessible-informative-states, personality-tokens
- **Replace when adapting:** item-titles, item-status-copy, panel-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8.5/10, responsive 9/10, accessibility 9.5/10, code 9/10
- **Uses primitives:** accordion, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Achievement Unlock

Learning or fitness app that reveals a badge in a corner toast when the first lesson of the day is done.

- id: `motion-achievement-unlock`
- Page: https://agentic-ui-kit.com/components/motion-achievement-unlock
- Live preview: https://agentic-ui-kit.com/live/component/motion-achievement-unlock

## Install

```bash
agentic-ui add motion-achievement-unlock
npx shadcn@4.17.0 add @agentic-ui/motion-achievement-unlock
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** badge-scale-in, shine-sweep, points-count-up, ring-and-spark-burst, toast-variant, modal-variant, inline-variant, dialog-focus-handling, status-announcement, reveal-on-view, unlock-state-callback, semantic-colour-tokens, shown-without-js, reduced-motion-fallback
- **Intents:** communicate, execute-flow
- **Suits domains:** education, saas, ecommerce, social
- **Interaction:** click, keyboard-navigation, scroll
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Learning or fitness app that reveals a badge in a corner toast when the first lesson of the day is done, Weekly streak or level milestone shown as a modal worth a pause, with a link to the badge collection, Onboarding checklist that reveals an inline badge in the card once every step is complete
- **Avoid when:** Browsing a collection of badges with progress, which is the achievements grid, Billing, healthcare or legal screens, where the delight group never runs, Personalities other than playful, which render the badge statically, Frequent, low-value events, where repeated celebrations become noise
- **Preserve when adapting:** status-or-dialog-semantics-by-variant, modal-focus-in-and-return, final-points-announced-once, transform-and-opacity-only, static-badge-without-motion, work-only-in-view
- **Replace when adapting:** copy, icon, tone, points-format, actions, timing
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** dialog, button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion AI Thinking Orb

Assistant status next to the chat composer while a reply is thinking or streaming.

- id: `motion-ai-thinking-orb`
- Page: https://agentic-ui-kit.com/components/motion-ai-thinking-orb
- Live preview: https://agentic-ui-kit.com/live/component/motion-ai-thinking-orb

## Install

```bash
agentic-ui add motion-ai-thinking-orb
npx shadcn@4.17.0 add @agentic-ui/motion-ai-thinking-orb
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** ai-state-indicator, idle-state, listening-state, thinking-state, speaking-state, error-state, orb-variant, ring-variant, bars-variant, voice-orb-full-duplex, recording-pulse, live-level-input, status-announcement, pause-offscreen, reduced-motion-fallback
- **Intents:** communicate, track-status
- **Suits domains:** ai-workspace, saas, devtools, operations, analytics
- **Interaction:** status-announcement, keyboard-navigation
- **Screen role:** communication
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Assistant status next to the chat composer while a reply is thinking or streaming, Voice mode stage showing whether the assistant listens or speaks, with live levels, Recording indicator with an elapsed timer in a voice note or dictation field
- **Avoid when:** Progress with a known percentage, where a progress bar says more, Showing the audio signal itself, where a waveform fits, A person typing in a thread, where a typing indicator fits
- **Preserve when adapting:** role-status-with-state-text, distinct-shape-and-colour-per-state, static-glyph-with-label-without-motion, loops-only-while-in-view, transform-opacity-only
- **Replace when adapting:** state-labels, size, variant, level-sources, tone-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, select, textarea
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Async Button

Save settings button that shows Saving…, then Settings saved or Retry save, without changing width.

- id: `motion-async-button`
- Page: https://agentic-ui-kit.com/components/motion-async-button
- Live preview: https://agentic-ui-kit.com/live/component/motion-async-button

## Install

```bash
agentic-ui add motion-async-button
npx shadcn@4.17.0 add @agentic-ui/motion-async-button
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** async-action-states, constant-width-labels, morph-to-circle, error-shake, standalone-success-checkmark, polite-result-announcement, reduced-motion-fallback, informative-state-preservation
- **Intents:** execute-flow, configure, track-status
- **Suits domains:** saas, finance, ecommerce, ai-workspace, devtools, operations
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Save settings button that shows Saving…, then Settings saved or Retry save, without changing width, Publish changes in a compact toolbar, morphing to a circle while the request runs, Standalone success checkmark next to an Invoice sent confirmation
- **Avoid when:** Waits that belong to a region and report no action result, such as refreshing a table (use motion-spinner-set), Destructive actions that need an explicit confirmation step (use a hold or confirm pattern first), Long jobs with measurable progress (use a determinate progress bar)
- **Preserve when adapting:** constant-width-label-grid, aria-busy-and-polite-result, focus-stays-on-button, static-fallback-with-label-change
- **Replace when adapting:** action-labels, announcements, idle-icon
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9.5/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Attention Nudge

New-feature dot on a navigation item that pulses three times and then stays as a static dot.

- id: `motion-attention-nudge`
- Page: https://agentic-ui-kit.com/components/motion-attention-nudge
- Live preview: https://agentic-ui-kit.com/live/component/motion-attention-nudge

## Install

```bash
agentic-ui add motion-attention-nudge
npx shadcn@4.17.0 add @agentic-ui/motion-attention-nudge
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** periodic-capped-nudge, pulse-variant, wiggle-variant, ring-variant, new-feature-badge-dot, stop-on-hover-and-focus, offscreen-pause, reduced-motion-fallback, informative-state-preservation
- **Intents:** navigate, execute-flow, track-status
- **Suits domains:** saas, ai-workspace, devtools, project-management, analytics, settings
- **Interaction:** hover, keyboard-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** New-feature dot on a navigation item that pulses three times and then stays as a static dot, Updates bell with an unread dot that wiggles until it is hovered or focused, Upgrade or trial call to action with an expanding ring that stops once the person acts or dismisses it
- **Avoid when:** Errors or validation (use motion-shake-error), Several items on the same screen at once (pick the single most useful one), Continuous live status such as online or recording (use motion-live-pulse)
- **Preserve when adapting:** capped-repeat, stop-on-hover-and-focus, dot-stays-after-motion, aria-describedby-dot-label
- **Replace when adapting:** dot-label, tone, kind, repeat-and-interval
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Audio Visualizer

Now playing card in a music studio or podcast player.

- id: `motion-audio-visualizer`
- Page: https://agentic-ui-kit.com/components/motion-audio-visualizer
- Live preview: https://agentic-ui-kit.com/live/component/motion-audio-visualizer

## Install

```bash
agentic-ui add motion-audio-visualizer
npx shadcn@4.17.0 add @agentic-ui/motion-audio-visualizer
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** web-audio-analyser-input, levels-array-input, bars-variant, radial-variant, line-variant, log-spaced-frequency-bands, attack-decay-smoothing, center-aligned-bars, host-owned-playback-state, static-level-meter-fallback, pause-offscreen, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** monitor-live, track-status
- **Suits domains:** music, media, ai-workspace, saas
- **Interaction:** play-pause-host
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Now playing card in a music studio or podcast player, Per-stem or per-channel activity in a mixer, Speaker output of an AI voice assistant reply
- **Avoid when:** Recording or listening to a voice with a timer and spoken status, which the voice waveform covers, Precise metering where people read decibel values, which needs a labelled meter, Screens with no audio playing, where it would only decorate
- **Preserve when adapting:** aria-hidden-visualizer, host-owned-controls, static-meter-without-motion, transform-only-writes, work-only-in-view
- **Replace when adapting:** audio-source, variant, bands, tone, height, meter-caption
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Bar Race

Marketing channel share of signups quarter by quarter.

- id: `motion-bar-race`
- Page: https://agentic-ui-kit.com/components/motion-bar-race
- Live preview: https://agentic-ui-kit.com/live/component/motion-bar-race

## Install

```bash
agentic-ui add motion-bar-race
npx shadcn@4.17.0 add @agentic-ui/motion-bar-race
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** ranking-over-time, flip-reorder, value-counting, play-pause, step-through, scrubber, loop-playback, frame-global-or-fixed-scale, top-n, frame-announcement, semantic-colour-token, reduced-motion-fallback
- **Intents:** compare-over-time, show-composition
- **Suits domains:** analytics, saas, ecommerce, finance, social, operations
- **Interaction:** play-pause, step-through, scrubber, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Marketing channel share of signups quarter by quarter, Top products by revenue month by month in a store report, Leaderboard of regions or teams over a season in a review deck
- **Avoid when:** Exact comparison of many values at once (use a static bar chart or table), Series where rank rarely changes, so the playback shows nothing new, Dense operational dashboards where one expressive piece per viewport is already used
- **Preserve when adapting:** transform-and-opacity-only, rank-order-matches-reading-order, final-value-for-assistive-technology, step-through-without-motion, work-only-while-playing-in-view
- **Replace when adapting:** series, frames, format, labels, variant, scale
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** button, slider, chart
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Card Flip

Pricing plan card with the price up front and the full feature list on the back.

- id: `motion-card-flip`
- Page: https://agentic-ui-kit.com/components/motion-card-flip
- Live preview: https://agentic-ui-kit.com/live/component/motion-card-flip

## Install

```bash
agentic-ui add motion-card-flip
npx shadcn@4.17.0 add @agentic-ui/motion-card-flip
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** two-sided-card, 3d-flip-variant, fold-variant, crossfade-variant, click-trigger, hover-trigger, keyboard-toggle, pressed-state-button, inert-hidden-face, height-locked-to-taller-face, reversible-mid-turn, controlled-and-uncontrolled, flip-state-callback, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** explore-detail, navigate
- **Suits domains:** saas, billing, ecommerce, travel
- **Interaction:** click, hover, keyboard-navigation
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Pricing plan card with the price up front and the full feature list on the back, Product or destination card that turns to show specs, opening hours or terms, Team member or flashcard-style card that hides a short answer or bio on the back
- **Avoid when:** Content that must be compared side by side at a glance, which belongs in a comparison table, Faces with very different amounts of content, where the short face leaves a large empty area, Linear or enterprise personalities, where the depth group is not allowed and cards only crossfade, Long forms or anything that needs scrolling inside a face
- **Preserve when adapting:** pressed-state-toggle-button, inert-hidden-face, height-of-taller-face, transform-and-opacity-only, crossfade-without-motion, work-only-in-view
- **Replace when adapting:** face-content, toggle-label-and-icon, variant, trigger, timing
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Card Stack

Moderation queue where each reported post is kept, removed or skipped one at a time.

- id: `motion-card-stack`
- Page: https://agentic-ui-kit.com/components/motion-card-stack
- Live preview: https://agentic-ui-kit.com/live/component/motion-card-stack

## Install

```bash
agentic-ui add motion-card-stack
npx shadcn@4.17.0 add @agentic-ui/motion-card-stack
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** card-stack, swipe-to-decide, button-decisions, arrow-key-decisions, swipe-variant, buttons-only-variant, deck-shuffle-variant, requeue-skipped, drag-threshold, flick-commit, decision-announcement, empty-state, reduced-motion-fallback
- **Intents:** manage-collection, execute-flow, track-status
- **Suits domains:** saas, operations, support, social, personal-productivity
- **Interaction:** drag-and-drop, keyboard-navigation, status-announcement
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Moderation queue where each reported post is kept, removed or skipped one at a time, Review queue for appeals or content approvals where a skipped card goes back under the pile, Onboarding tips shown one card at a time with Got it and Later buttons
- **Avoid when:** Acting on rows of a list that stays in place, where row swipe actions fit, Comparing many items side by side, where a table or grid fits, Irreversible decisions that need a confirmation step
- **Preserve when adapting:** button-and-arrow-key-for-every-swipe, live-region-announcement, instant-replacement-without-motion, back-cards-inert, transform-opacity-only
- **Replace when adapting:** card-content, labels, decisions, variant, visible-count, threshold
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Chart Axis Morph

Traffic chart with a 7d, 30d and 90d range selector.

- id: `motion-chart-axis-morph`
- Page: https://agentic-ui-kit.com/components/motion-chart-axis-morph
- Live preview: https://agentic-ui-kit.com/live/component/motion-chart-axis-morph

## Install

```bash
agentic-ui add motion-chart-axis-morph
npx shadcn@4.17.0 add @agentic-ui/motion-chart-axis-morph
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** axis-morph, gridline-morph, range-selection, zoom, linear-and-time-axes, nice-ticks, calendar-ticks, interruptible-transition, domain-announcement, semantic-colour-token, reduced-motion-fallback
- **Intents:** compare-over-time, monitor-live
- **Suits domains:** analytics, saas, finance, ecommerce, operations, devtools
- **Interaction:** range-selector, zoom, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Traffic chart with a 7d, 30d and 90d range selector, Latency by load chart zoomed into the knee of the curve, Revenue chart switching between metrics with very different scales
- **Avoid when:** Charts whose domain never changes after load, Categorical axes (bars by category); use a bar chart transition instead, Very dense multi-chart walls where several axes would morph at once on one control
- **Preserve when adapting:** transform-and-opacity-only, tick-labels-as-text, domain-announcement, instant-ticks-without-motion, no-work-offscreen
- **Replace when adapting:** series, x-format, y-format, labels, variant, range-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** chart, toggle-group
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Chart Live Stream

DevOps status page with API gateway requests per second sliding over the last 30 seconds.

- id: `motion-chart-live-stream`
- Page: https://agentic-ui-kit.com/components/motion-chart-live-stream
- Live preview: https://agentic-ui-kit.com/live/component/motion-chart-live-stream

## Install

```bash
agentic-ui add motion-chart-live-stream
npx shadcn@4.17.0 add @agentic-ui/motion-chart-live-stream
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** streaming-timeseries, compositor-sliding-window, point-ease-in, line-and-bars-variants, pause-control, offscreen-pause, throttled-live-region, reduced-motion-fallback, informative-state-preservation
- **Intents:** monitor-live, compare-over-time, track-status
- **Suits domains:** devtools, operations, analytics, finance, saas, ai-workspace
- **Interaction:** pause-resume, read-only
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** DevOps status page with API gateway requests per second sliding over the last 30 seconds, Error rate bars next to the request rate chart, spiking during an incident, Token throughput or queue depth of an AI inference service updated every second
- **Avoid when:** A single "this is live" signal is enough (use motion-live-pulse next to the value), Data arrives less than once every few seconds or in irregular batches (render a static chart and refresh it), Historical ranges that users zoom and inspect point by point (use an interactive timeseries chart with a tooltip)
- **Preserve when adapting:** compositor-slide-one-slot-per-sample, pause-control, throttled-polite-announcement, one-refresh-per-second-without-motion
- **Replace when adapting:** labels, format, y-domain, window-size, interval
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** chart, button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Confetti Success

Workspace created at the end of onboarding.

- id: `motion-confetti-success`
- Page: https://agentic-ui-kit.com/components/motion-confetti-success
- Live preview: https://agentic-ui-kit.com/live/component/motion-confetti-success

## Install

```bash
agentic-ui add motion-confetti-success
npx shadcn@4.17.0 add @agentic-ui/motion-confetti-success
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** canvas-particle-burst, one-shot-celebration, personality-gating, reduced-motion-fallback, focus-management, informative-state-preservation
- **Intents:** execute-flow, track-status, communicate
- **Suits domains:** saas, project-management, personal-productivity, ecommerce
- **Interaction:** click, keyboard-navigation, replay
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Workspace created at the end of onboarding, First project published or plan milestone reached, Order confirmed in a casual-toned store
- **Avoid when:** Protected domains such as billing, healthcare or legal and enterprise forms, Frequent or routine actions where celebration becomes noise, Projects with motion.profile restrained or a particle-free personality; there it degrades to a check without particles
- **Preserve when adapting:** particle-personality-gating, static-success-fallback, status-message-and-focus-to-result, particle-budget-by-width
- **Replace when adapting:** success-copy, actions, confetti-palette
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8.5/10, responsive 8.5/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile expressive, library canvas, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Cube Transition

Onboarding carousel where each setup step turns in as the next face of a cube.

- id: `motion-cube-transition`
- Page: https://agentic-ui-kit.com/components/motion-cube-transition
- Live preview: https://agentic-ui-kit.com/live/component/motion-cube-transition

## Install

```bash
agentic-ui add motion-cube-transition
npx shadcn@4.17.0 add @agentic-ui/motion-cube-transition
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** tabbed-panels, 3d-cube-variant, flip-panel-variant, crossfade-fallback, direction-aware-turn, keyboard-tabs-pattern, inert-inactive-panels, height-locked-to-tallest-panel, interruptible-transition, controlled-and-uncontrolled, state-callback, rtl-mirroring, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** navigate, execute-flow
- **Suits domains:** saas, ecommerce, personal-productivity, ai-workspace
- **Interaction:** click, keyboard-navigation
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Onboarding carousel where each setup step turns in as the next face of a cube, Marketing feature tabs that turn between short feature panels, Product tour or plan explainer with three or four short panels
- **Avoid when:** Dense forms or data views that people switch between often, where a turn on every change slows work down, Panels whose heights differ a lot, where the short ones leave a large empty stage, Linear or enterprise personalities, where the depth group is not allowed and panels only crossfade, More than one expressive piece in the same viewport
- **Preserve when adapting:** tabs-pattern, inert-inactive-panels, height-of-tallest-panel, transform-and-opacity-only, crossfade-without-motion, work-only-in-view
- **Replace when adapting:** panel-content, tab-labels, variant, timing
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** tabs, card, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Cursor Follower

Agency portfolio where a ring grows over project covers and reads "View case".

- id: `motion-cursor-follower`
- Page: https://agentic-ui-kit.com/components/motion-cursor-follower
- Live preview: https://agentic-ui-kit.com/live/component/motion-cursor-follower

## Install

```bash
agentic-ui add motion-cursor-follower
npx shadcn@4.17.0 add @agentic-ui/motion-cursor-follower
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** pointer-follower, scoped-container, ring-variant, dot-variant, label-variant, trail-variant, morph-on-link-text-media, pressed-state, custom-labels, opt-in-native-cursor-hiding, coarse-pointer-and-forced-colors-off, pause-offscreen, reduced-motion-fallback
- **Intents:** explore-detail, navigate
- **Suits domains:** marketing, media, ecommerce
- **Interaction:** hover, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Agency portfolio where a ring grows over project covers and reads "View case", Campaign landing page hero with a trailing dot over the call to action, Product showcase gallery with a label cursor over media tiles
- **Avoid when:** Dashboards, forms, admin tools and any productivity surface, Billing, healthcare or legal screens, where the policy switches it off, Touch-first products, where it never renders, Pages that need the native cursor to carry meaning, such as text editors or drawing canvases
- **Preserve when adapting:** native-cursor-visible-by-default, aria-hidden-and-not-focusable, scope-limited, off-for-coarse-pointer-and-forced-colors, not-rendered-without-motion
- **Replace when adapting:** variant, labels, colour, trail-length, scope
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, input, select, table
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Depth Scroll

Landing hero where sky, hills and trees drift apart as the page scrolls.

- id: `motion-depth-scroll`
- Page: https://agentic-ui-kit.com/components/motion-depth-scroll
- Live preview: https://agentic-ui-kit.com/live/component/motion-depth-scroll

## Install

```bash
agentic-ui add motion-depth-scroll
npx shadcn@4.17.0 add @agentic-ui/motion-depth-scroll
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** layered-depth, scroll-linked-parallax, scroll-driven-timeline, two-and-three-layer-variants, per-layer-depth-rates, scrolling-state, semantic-colour-token, reduced-motion-fallback
- **Intents:** communicate
- **Suits domains:** marketing, saas, travel
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Landing hero where sky, hills and trees drift apart as the page scrolls, Mid-page feature band with a star field behind and a ridge in front, Product launch section with layered illustration around the headline
- **Avoid when:** Dense application screens, dashboards or forms, Sections whose layers carry information the reader must not miss, Pages that already use a parallax header right above the section
- **Preserve when adapting:** transform-only, decorative-layers-aria-hidden, flat-layers-without-motion, no-work-offscreen
- **Replace when adapting:** layer-art, depths, shift, content, variant
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** section
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Direction Aware Hover

Portfolio or case-study grid where the overlay shows the discipline, a summary and a View case study action.

- id: `motion-direction-aware-hover`
- Page: https://agentic-ui-kit.com/components/motion-direction-aware-hover
- Live preview: https://agentic-ui-kit.com/live/component/motion-direction-aware-hover

## Install

```bash
agentic-ui add motion-direction-aware-hover
npx shadcn@4.17.0 add @agentic-ui/motion-direction-aware-hover
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** direction-aware-enter, direction-aware-exit, slide-variant, reveal-mask-variant, interruptible-turn-around, keyboard-focus-from-bottom, escape-to-dismiss, touch-tap-toggle, offscreen-pause, reduced-motion-fallback
- **Intents:** navigate, explore-detail
- **Suits domains:** marketing, media, ecommerce, saas, travel
- **Interaction:** hover, keyboard-navigation, touch
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Portfolio or case-study grid where the overlay shows the discipline, a summary and a View case study action, Template or theme gallery with Preview and Use template actions on each card, Product or listing grid with a quick-view overlay that follows the pointer between cards
- **Avoid when:** The overlay holds the only way to reach essential information on touch-first screens (show it inline instead), Dense data tables or lists where hover overlays would hide neighbouring rows, Cards that are themselves a single link (nested interactive content inside a link is invalid)
- **Preserve when adapting:** overlay-content-in-tab-order, focus-shows-from-bottom, escape-dismisses, fade-only-with-motion-off
- **Replace when adapting:** overlay-content, overlay-surface-colour, variant, distance
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Donut Spin In

Budget breakdown by department switching between plan, actuals and next quarter.

- id: `motion-donut-spin-in`
- Page: https://agentic-ui-kit.com/components/motion-donut-spin-in
- Live preview: https://agentic-ui-kit.com/live/component/motion-donut-spin-in

## Install

```bash
agentic-ui add motion-donut-spin-in
npx shadcn@4.17.0 add @agentic-ui/motion-donut-spin-in
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sequential-sweep, composition-morph, donut-pie-gauge, legend-with-values, table-fallback, interruptible-transition, composition-announcement, semantic-colour-token, reduced-motion-fallback
- **Intents:** show-composition, compare-over-time
- **Suits domains:** finance, analytics, saas, operations, ecommerce
- **Interaction:** view-selector, replay, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Budget breakdown by department switching between plan, actuals and next quarter, Monthly software spend by category as a pie, Annual budget used as a gauge filled quarter by quarter
- **Avoid when:** More than about eight segments or many tiny shares; use a bar chart, Precise comparison of similar values; use bars or a table, Dense dashboards where many rings would sweep in at once on load
- **Preserve when adapting:** transform-and-opacity-only, legend-with-values, table-fallback, composition-announcement, final-composition-without-motion, no-work-offscreen
- **Replace when adapting:** segments, value-format, labels, variant, view-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** chart, button, table, toggle-group
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Feature Highlight Seq

Landing page feature section that walks through dashboards, funnels, alerts and reports with a product screen per feature.

- id: `motion-feature-highlight-seq`
- Page: https://agentic-ui-kit.com/components/motion-feature-highlight-seq
- Live preview: https://agentic-ui-kit.com/live/component/motion-feature-highlight-seq

## Install

```bash
agentic-ui add motion-feature-highlight-seq
npx shadcn@4.17.0 add @agentic-ui/motion-feature-highlight-seq
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** auto-advancing-tabs, per-tab-progress-bar, synced-media-panel, pause-on-hover-focus-offscreen, pause-play-control, manual-takeover, horizontal-and-vertical-variants, reduced-motion-fallback, informative-state-preservation
- **Intents:** navigate, explore-detail
- **Suits domains:** saas, analytics, ai-workspace, devtools, ecommerce
- **Interaction:** click, hover, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Landing page feature section that walks through dashboards, funnels, alerts and reports with a product screen per feature, Onboarding overview in a SaaS app that cycles through what is new until the user picks a topic, Product page highlights for a developer tool with a code or UI preview per capability
- **Avoid when:** The content is a form or a step the user must complete (use a stepper), Panels hold information users compare side by side (use a comparison table or a grid), Enterprise, billing or regulated screens where content must not change on its own (use plain tabs)
- **Preserve when adapting:** tabs-pattern, pause-play-control, pause-on-hover-focus-offscreen, plain-tabs-when-motion-is-off
- **Replace when adapting:** features, media, strings, interval, orientation
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** tabs, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react, react-dom
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Filter Grid

Template or theme gallery filtered by category and sorted by popularity.

- id: `motion-filter-grid`
- Page: https://agentic-ui-kit.com/components/motion-filter-grid
- Live preview: https://agentic-ui-kit.com/live/component/motion-filter-grid

## Install

```bash
agentic-ui add motion-filter-grid
npx shadcn@4.17.0 add @agentic-ui/motion-filter-grid
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** filter-reflow, sort-reflow, enter-exit-presence, masonry-layout, responsive-columns, results-announcement, focus-preservation, personality-timing, reduced-motion-fallback, informative-state-preservation
- **Intents:** manage-collection, navigate
- **Suits domains:** saas, ecommerce, media, file-storage, ai-workspace, knowledge
- **Interaction:** click, keyboard-navigation, search
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Template or theme gallery filtered by category and sorted by popularity, Product catalog grid reacting to facet chips and a sort menu, Media or file library switching between a uniform grid and masonry
- **Avoid when:** Collections of hundreds of cards rendered at once (virtualize and skip the reflow), Hand-ordering items by drag (use motion-flip-reorder), Inserting or deleting single entries in a feed or list (use motion-item-add-remove)
- **Preserve when adapting:** last-painted-box-snapshot, inert-hidden-leaving-copies, results-count-live-region, focus-fallback-to-list, instant-fallback-without-animations
- **Replace when adapting:** card-content, domain-copy, filter-and-sort-controls
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8.5/10, responsive 9/10, accessibility 8.5/10, code 8.5/10
- **Uses primitives:** card, button, badge
- **npm dependencies:** @agentic-ui/motion, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Fireworks Success

Success page after a plan upgrade.

- id: `motion-fireworks-success`
- Page: https://agentic-ui-kit.com/components/motion-fireworks-success
- Live preview: https://agentic-ui-kit.com/live/component/motion-fireworks-success

## Install

```bash
agentic-ui add motion-fireworks-success
npx shadcn@4.17.0 add @agentic-ui/motion-fireworks-success
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** canvas-particles, bounded-one-shot-show, fireworks-sparkle-deploy-variants, idle-bursting-done-states, replay, focus-to-result, semantic-colour-token, reduced-motion-fallback, protected-domain-policy
- **Intents:** communicate, execute-flow, track-status
- **Suits domains:** saas, devtools, analytics, project-management
- **Interaction:** click, keyboard-navigation, replay
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Success page after a plan upgrade, First production launch or a major release going live, Usage milestone such as the first 10,000 tracked events
- **Avoid when:** Routine completions such as saving a form or closing a task; use motion-confetti-success or a check instead, Protected domains such as billing, healthcare or legal; the policy renders the static illustration there, Screens the user reaches many times a day, where a celebration becomes noise
- **Preserve when adapting:** bounded-show-duration, canvas-aria-hidden, message-in-text, static-illustration-fallback, no-work-offscreen
- **Replace when adapting:** domain-copy, variant, actions, palette-tokens
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** section, canvas
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library canvas, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Flip Reorder

Prioritize a backlog or a launch plan by dragging tasks.

- id: `motion-flip-reorder`
- Page: https://agentic-ui-kit.com/components/motion-flip-reorder
- Live preview: https://agentic-ui-kit.com/live/component/motion-flip-reorder

## Install

```bash
agentic-ui add motion-flip-reorder
npx shadcn@4.17.0 add @agentic-ui/motion-flip-reorder
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** flip-reorder, drag-and-drop, keyboard-reorder, programmatic-sort, add-remove-layout, personality-timing, reduced-motion-fallback, informative-state-preservation
- **Intents:** manage-collection, create-edit
- **Suits domains:** project-management, saas, personal-productivity, ecommerce, crm, operations
- **Interaction:** drag-and-drop, keyboard-navigation, click
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Prioritize a backlog or a launch plan by dragging tasks, Order the stages of a pipeline or the visible columns of a table, Reorder featured products in a collection
- **Avoid when:** Virtualized lists with hundreds of rows (use reordering without FLIP), Order that arrives in real time from the server several times per second, Complex multi-column grids; this component is a vertical list
- **Preserve when adapting:** last-painted-position-snapshot, static-moved-marker-and-positions, keyboard-sensor-and-announcements, instant-fallback-without-animations
- **Replace when adapting:** row-content, domain-copy, sort-actions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 8.5/10, accessibility 9/10, code 8.5/10
- **Uses primitives:** card, button
- **npm dependencies:** @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, @dnd-kit/sortable@10.0.0, @dnd-kit/utilities@3.2.2
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Globe Dots

Global infrastructure section listing hosting regions and the backbone links between them.

- id: `motion-globe-dots`
- Page: https://agentic-ui-kit.com/components/motion-globe-dots
- Live preview: https://agentic-ui-kit.com/live/component/motion-globe-dots

## Install

```bash
agentic-ui add motion-globe-dots
npx shadcn@4.17.0 add @agentic-ui/motion-globe-dots
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** dotted-land-globe, orthographic-2d-canvas-projection, location-markers, great-circle-arcs, auto-rotation, drag-to-rotate, keyboard-rotation, focus-location, pause-control, offscreen-pause, hidden-tab-pause, reduced-motion-fallback, theme-adaptive-palette
- **Intents:** monitor-live, explore-detail, navigate
- **Suits domains:** saas, devtools, operations, ecommerce, travel
- **Interaction:** drag, keyboard-navigation, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Global infrastructure section listing hosting regions and the backbone links between them, Office or team locations on an about page, with each office in the list bringing it to the front, Shipping lanes or delivery coverage on a logistics landing page
- **Avoid when:** Exact geography matters, such as precise borders, small countries or routes (use a real map instead), More than one ambient loop is already on screen, or the page is a dense working view such as a table or form, Billing, healthcare or legal screens under the enterprise or linear personalities, where the policy shows a static frame
- **Preserve when adapting:** markers-listed-as-text, canvas-aria-hidden, pause-control, static-frame-facing-first-marker, offscreen-pause
- **Replace when adapting:** markers, arcs, variant, size, labels
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library canvas, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Motion Hero To Detail

Brand media library where an asset thumbnail grows into its detail dialog with metadata, tags and download actions.

- id: `motion-hero-to-detail`
- Page: https://agentic-ui-kit.com/components/motion-hero-to-detail
- Live preview: https://agentic-ui-kit.com/live/component/motion-hero-to-detail

## Install

```bash
agentic-ui add motion-hero-to-detail
npx shadcn@4.17.0 add @agentic-ui/motion-hero-to-detail
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** list-to-detail-expansion, shared-image-and-title, view-transitions-api, flip-fallback, instant-fallback, modal-detail-variant, route-detail-variant, history-back-forward, deep-link, focus-handoff-and-restore, escape-to-close, reduced-motion-fallback
- **Intents:** explore-detail, navigate, manage-collection
- **Suits domains:** media, ecommerce, file-storage, marketing, travel
- **Interaction:** navigate, keyboard-navigation, history
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Brand media library where an asset thumbnail grows into its detail dialog with metadata, tags and download actions, Product grid opening a product page whose hero image is the card thumbnail, with a shareable URL, Listing gallery that opens a property detail over the results and returns focus to the card on Escape
- **Avoid when:** Items have no image or visual anchor to carry across (use a page transition or a plain dialog), The detail needs stepping between items, a hash-based router or a polite view announcement (use motion-shared-element), Dense tables where rows open side panels (use a drawer or split view without a shared element)
- **Preserve when adapting:** focus-to-detail-heading-and-back-to-trigger, escape-closes, route-variant-pushes-history, single-owner-per-shared-name, instant-swap-without-motion
- **Replace when adapting:** items-and-media, detail-content, strings, route-param, transition-duration
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, dialog, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react, react-dom
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Hold To Confirm

Delete workspace button in a settings danger zone that runs only after a 1.2 second hold, with Deletion cancelled on an early release.

- id: `motion-hold-to-confirm`
- Page: https://agentic-ui-kit.com/components/motion-hold-to-confirm
- Live preview: https://agentic-ui-kit.com/live/component/motion-hold-to-confirm

## Install

```bash
agentic-ui add motion-hold-to-confirm
npx shadcn@4.17.0 add @agentic-ui/motion-hold-to-confirm
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** press-and-hold-confirmation, release-to-cancel, keyboard-hold-space-enter, fill-ring-shrinking-border-variants, stepped-progress-value, double-confirm-dialog-alternative, polite-result-announcement, reduced-motion-fallback, informative-state-preservation
- **Intents:** execute-flow, configure, manage-collection
- **Suits domains:** saas, devtools, operations, finance, ai-workspace, ecommerce
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Delete workspace button in a settings danger zone that runs only after a 1.2 second hold, with Deletion cancelled on an early release, Remove member row action with a ring that closes next to the label, Revoke API key button whose border shrinks onto its edge while held, with a dialog alternative under reduced motion
- **Avoid when:** Reversible or frequent actions where a hold only adds friction (use a plain button with undo), Actions that start a request and need to report its result on the button (use motion-async-button after the confirmation), Flows that must collect extra input before confirming, such as typing the workspace name (use a confirmation dialog)
- **Preserve when adapting:** release-cancels-before-completion, aria-describedby-hold-hint, stepped-progressbar-value, dialog-alternative-when-motion-is-off
- **Replace when adapting:** labels, hint, dialog-labels, duration
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, dialog
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Horizontal Scroll Section

Product roadmap timeline on a marketing page.

- id: `motion-horizontal-scroll-section`
- Page: https://agentic-ui-kit.com/components/motion-horizontal-scroll-section
- Live preview: https://agentic-ui-kit.com/live/fixture/motion-horizontal-scroll-section?piece=motion-horizontal-scroll-section

## Install

```bash
agentic-ui add motion-horizontal-scroll-section
npx shadcn@4.17.0 add @agentic-ui/motion-horizontal-scroll-section
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** pinned-section, scroll-linked-horizontal-track, cards-variant, timeline-variant, progress-bar, configurable-gap, speed-control, focus-brings-item-into-view, native-scroll-snap-fallback, works-without-js, state-callback, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** navigate, communicate, explore-detail
- **Suits domains:** saas, devtools, ecommerce, media, knowledge
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Product roadmap timeline on a marketing page, Recently shipped features or case studies shown as a row of cards, Company history or release timeline on an about page
- **Avoid when:** App screens, dashboards or forms where content must stay in place, Content people must compare side by side or scan quickly, Fewer items than fit in one screen width, where there is nothing to scroll
- **Preserve when adapting:** document-order-list, focus-brings-item-into-view, no-focus-trap, native-scroll-snap-without-motion, transform-and-opacity-only, work-only-in-view
- **Replace when adapting:** items, heading, gap, top, variant, item-width
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Icon Hover Set

Sidebar navigation where each section icon plays as the link is hovered or focused.

- id: `motion-icon-hover-set`
- Page: https://agentic-ui-kit.com/components/motion-icon-hover-set
- Live preview: https://agentic-ui-kit.com/live/component/motion-icon-hover-set

## Install

```bash
agentic-ui add motion-icon-hover-set
npx shadcn@4.17.0 add @agentic-ui/motion-icon-hover-set
```

## Metadata

- **Level:** primitive
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** animated-icons, hover-micro-animation, press-micro-animation, parent-trigger, line-and-filled-variants, personality-timing, pause-offscreen, reduced-motion-fallback
- **Intents:** navigate, configure, communicate
- **Suits domains:** saas, project-management, file-storage, ai-workspace, personal-productivity, settings
- **Interaction:** hover, click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Sidebar navigation where each section icon plays as the link is hovered or focused, Toolbar icon buttons (refresh, send, download) that animate when pressed, Empty states or feature lists that play each icon once as it comes into view
- **Avoid when:** Dense data tables with an icon in every row (hundreds of triggers for little benefit), Icons that switch between two states such as menu and close (use motion-icon-morph), Healthcare, legal or finance screens where the policy keeps motion minimal
- **Preserve when adapting:** decorative-aria-hidden-default, parent-hover-and-focus-visible-trigger, transform-opacity-only-keyframes, no-restart-while-playing, static-icon-fallback
- **Replace when adapting:** icon-choice, labels-and-titles, knockout-surface-colour
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8.5/10, responsive 9/10, accessibility 9/10, code 8.5/10
- **Uses primitives:** button, badge
- **npm dependencies:** @agentic-ui/motion, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Icon Morph

Header menu button whose three bars cross into a close mark while the navigation panel opens, named Open menu or Close menu.

- id: `motion-icon-morph`
- Page: https://agentic-ui-kit.com/components/motion-icon-morph
- Live preview: https://agentic-ui-kit.com/live/component/motion-icon-morph

## Install

```bash
agentic-ui add motion-icon-morph
npx shadcn@4.17.0 add @agentic-ui/motion-icon-morph
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** seven-original-icon-pairs, transform-opacity-morph, interruptible-reversible-morph, label-or-aria-pressed-state, instant-swap-fallback, offscreen-instant-swap, reduced-motion-fallback, informative-state-preservation
- **Intents:** navigate, configure, explore-detail
- **Suits domains:** saas, devtools, operations, ai-workspace, ecommerce, media
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Header menu button whose three bars cross into a close mark while the navigation panel opens, named Open menu or Close menu, Theme switch in an app bar where the sun retracts its rays and becomes a crescent moon, exposed as Dark theme with aria-pressed, Password field reveal button whose eye gets a slash when the password is shown
- **Avoid when:** On/off settings that read better as a switch with a visible track (use motion-toggle-spring), Copy actions that need clipboard handling and result feedback out of the box (use motion-copy-success), Icons that must stay meaningful on their own without a labelled parent control
- **Preserve when adapting:** icon-aria-hidden, state-on-parent-label-or-aria-pressed, transform-opacity-only, instant-swap-when-motion-is-off
- **Replace when adapting:** labels, pair, size, duration
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, toggle
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Image Reveal Hover

Agency case study index where each project title reveals its cover near the pointer.

- id: `motion-image-reveal-hover`
- Page: https://agentic-ui-kit.com/components/motion-image-reveal-hover
- Live preview: https://agentic-ui-kit.com/live/component/motion-image-reveal-hover

## Install

```bash
agentic-ui add motion-image-reveal-hover
npx shadcn@4.17.0 add @agentic-ui/motion-image-reveal-hover
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** hover-image-preview, focus-image-preview, pointer-follow, velocity-tilt, follow-variant, side-panel-variant, crossfade-between-items, viewport-edge-flip, escape-to-dismiss, pause-offscreen, reduced-motion-fallback
- **Intents:** explore-detail, navigate
- **Suits domains:** marketing, media, ecommerce
- **Interaction:** hover, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Agency case study index where each project title reveals its cover near the pointer, Editorial archive listing issues with a cover preview in a side panel, Collection or lookbook index that previews product imagery as the visitor scans titles
- **Avoid when:** Dense data tables or admin lists where a floating image hides neighbouring rows, Lists without a meaningful image per item, Touch-first products where the side slot adds little over a card grid, Projects whose personality excludes the depth group (linear, enterprise), where only the side slot remains
- **Preserve when adapting:** links-are-primary, alt-text-on-every-image, preview-on-focus, escape-dismisses, side-slot-without-motion
- **Replace when adapting:** items, size, variant, placeholder, colour
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, select, table
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Infinite Sentinel

Team activity feed that fetches older events as the reader scrolls.

- id: `motion-infinite-sentinel`
- Page: https://agentic-ui-kit.com/components/motion-infinite-sentinel
- Live preview: https://agentic-ui-kit.com/live/component/motion-infinite-sentinel

## Install

```bash
agentic-ui add motion-infinite-sentinel
npx shadcn@4.17.0 add @agentic-ui/motion-infinite-sentinel
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** infinite-scroll, intersection-sentinel, skeleton-rows, staggered-entry, load-more-button, error-retry, end-of-list, status-announcement, focus-preservation, reduced-motion-fallback
- **Intents:** manage-collection, monitor-live, audit-trail
- **Suits domains:** saas, devtools, social, project-management, operations
- **Interaction:** infinite-scroll, load-more, retry, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Team activity feed that fetches older events as the reader scrolls, Deploy history with a Load more button instead of automatic loading, Notification or audit log paged from an API with retry on failure
- **Avoid when:** Lists where users need to reach the footer or jump to a known page; use pagination, Tables that are sorted, filtered or compared across pages, Short lists that fit in one request
- **Preserve when adapting:** load-more-button-always-available, status-announcements, focus-preservation, no-auto-retry-after-error, transform-and-opacity-only, no-work-offscreen
- **Replace when adapting:** row-content, skeleton-row, labels, page-size, fetcher
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, skeleton, list
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Line Draw

MRR KPI detail page whose area draws in on view and morphs between the last 12 months and the previous 12 months.

- id: `motion-line-draw`
- Page: https://agentic-ui-kit.com/components/motion-line-draw
- Live preview: https://agentic-ui-kit.com/live/component/motion-line-draw

## Install

```bash
agentic-ui add motion-line-draw
npx shadcn@4.17.0 add @agentic-ui/motion-line-draw
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** chart-entrance, in-view-trigger, line-draw, area-reveal, data-morph, multi-series, series-toggle, change-summary, data-table-fallback, replay, offscreen-pause, reduced-motion-fallback
- **Intents:** compare-over-time, track-status, explore-detail
- **Suits domains:** saas, analytics, finance, ecommerce, marketing, operations
- **Interaction:** filter, toggle, read-only
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** MRR KPI detail page whose area draws in on view and morphs between the last 12 months and the previous 12 months, Revenue by plan with three series that morph when the reader switches from revenue to account counts, Churn or conversion trend on a report page drawn once when it scrolls into view
- **Avoid when:** Streaming data that arrives every second (use motion-chart-live-stream), A single-measure bar or line chart that only needs a one-off entrance with per-point keyboard inspection (use motion-chart-enter-series), Dense time series with hundreds of points or zoom and brush interaction (use a canvas timeseries chart)
- **Preserve when adapting:** pen-draw-on-first-view, morph-same-point-count, text-summary-and-data-table, series-rendered-in-place-without-motion
- **Replace when adapting:** labels, format, y-domain, series-colors, height
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** chart, button, table
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Logo Reveal

App splash while the first data loads.

- id: `motion-logo-reveal`
- Page: https://agentic-ui-kit.com/components/motion-logo-reveal
- Live preview: https://agentic-ui-kit.com/live/component/motion-logo-reveal

## Install

```bash
agentic-ui add motion-logo-reveal
npx shadcn@4.17.0 add @agentic-ui/motion-logo-reveal
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** supplied-svg-logo, stroke-draw-then-fill, mask-wipe-variant, splash-sequence-variant, wait-for-app-ready, skippable-splash, fullscreen-splash-focus-handling, static-state-previews, replay, pause-offscreen, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** communicate, track-status
- **Suits domains:** saas, ai-workspace, personal-productivity, ecommerce
- **Interaction:** skip, replay
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** App splash while the first data loads, Loading screen for a desktop or installed web app, Brand moment on a welcome or onboarding screen
- **Avoid when:** Every navigation or route change, where it would delay work that is already loaded, Billing, healthcare, legal or enterprise form screens, where the policy turns it off, Logos made of open strokes or text outlines that do not read as closed shapes
- **Preserve when adapting:** accessible-brand-name, finished-logo-without-motion, wait-for-ready, work-only-in-view, stroke-mark-within-160px
- **Replace when adapting:** logo, brand-tones, wordmark, tagline, labels, duration
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Marquee

Service status ticker in the header of an operations dashboard.

- id: `motion-marquee`
- Page: https://agentic-ui-kit.com/components/motion-marquee
- Live preview: https://agentic-ui-kit.com/live/component/motion-marquee

## Install

```bash
agentic-ui add motion-marquee
npx shadcn@4.17.0 add @agentic-ui/motion-marquee
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** continuous-marquee, pause-control, hover-focus-hold, offscreen-pause, bidirectional, personality-timing, reduced-motion-fallback, informative-state-preservation
- **Intents:** monitor-live, track-status, navigate
- **Suits domains:** saas, operations, devtools, finance, ecommerce, analytics
- **Interaction:** hover, click, keyboard-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Service status ticker in the header of an operations dashboard, Quote or indicator tape in a financial dashboard, Rotating list of capabilities or integrations on a product landing page
- **Avoid when:** Critical alerts the user must read in full and all at once (use a static list or a banner), Content that changes several times per second; the marquee is not a real-time feed, Forms or task flows where peripheral motion distracts
- **Preserve when adapting:** pause-button-and-hover-focus-hold, inert-aria-hidden-clones, offscreen-pause, static-wrapped-fallback
- **Replace when adapting:** item-content, domain-copy, speed-and-direction
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 8.5/10, accessibility 9/10, code 8.5/10
- **Uses primitives:** card, button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Number Morph

Pricing card whose price morphs between monthly and yearly billing and between currencies.

- id: `motion-number-morph`
- Page: https://agentic-ui-kit.com/components/motion-number-morph
- Live preview: https://agentic-ui-kit.com/live/component/motion-number-morph

## Install

```bash
agentic-ui add motion-number-morph
npx shadcn@4.17.0 add @agentic-ui/motion-number-morph
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** formatted-value-transition, per-intl-part-animation, digits-slide-variant, digits-fade-variant, currency-swap-variant, score-tick-variant, price-period-toggle, currency-switch, unit-switch, reserved-width, tabular-numerals, single-polite-announcement, reduced-motion-fallback
- **Intents:** compare-over-time, configure, monitor-live
- **Suits domains:** billing, saas, ecommerce, finance, ai-workspace, analytics
- **Interaction:** toggle, select, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Pricing card whose price morphs between monthly and yearly billing and between currencies, Plan limits that switch between gigabytes and terabytes, Eval dashboard where accuracy, cost per 1K runs and p95 latency tick to the next run
- **Avoid when:** The number keeps counting on its own as a live KPI with a delta (use motion-counter-ticker-odometer), Only a background flash is needed to signal that a cell changed (use motion-value-change-flash), Long prose or non-numeric text switches (use a text transition)
- **Preserve when adapting:** one-polite-announcement-of-the-final-value, aria-hidden-animated-parts, tabular-numerals-and-reserved-width, instant-value-without-motion, transform-and-opacity-only
- **Replace when adapting:** values-and-formats, locale, label, variant, duration
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, radio-group, select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Particle Field

AI platform hero with a constellation of nodes behind the headline and calls to action.

- id: `motion-particle-field`
- Page: https://agentic-ui-kit.com/components/motion-particle-field
- Live preview: https://agentic-ui-kit.com/live/component/motion-particle-field

## Install

```bash
agentic-ui add motion-particle-field
npx shadcn@4.17.0 add @agentic-ui/motion-particle-field
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** canvas-2d-particle-field, area-scaled-particle-count, connecting-lines, pointer-repulsion, seeded-static-frame, snow-variant, ambient-drift-variant, pause-control, offscreen-pause, hidden-tab-pause, reduced-motion-fallback, theme-adaptive-palette
- **Intents:** navigate, communicate
- **Suits domains:** saas, ai-workspace, devtools, analytics
- **Interaction:** hover, click
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** AI platform hero with a constellation of nodes behind the headline and calls to action, Onboarding welcome screen with slow ambient drift behind the first step, Seasonal snow behind a marketing banner or a success moment
- **Avoid when:** Dense working views such as tables, forms or dashboards, or when another looping animation is already on screen, Billing, healthcare or legal screens, and the linear, stripe or enterprise personalities, where the policy shows a static frame, Long body text over the field, where moving dots compete with reading
- **Preserve when adapting:** canvas-aria-hidden, pause-control, seeded-static-frame, offscreen-pause, area-scaled-count
- **Replace when adapting:** variant, density, links, repel-radius, labels, children
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library canvas, reduced-motion fallback yes, target 30 fps
- **Registry dependencies:** lib-motion


### Motion Perspective Gallery

Case-study or portfolio showcase on an agency or product marketing page.

- id: `motion-perspective-gallery`
- Page: https://agentic-ui-kit.com/components/motion-perspective-gallery
- Live preview: https://agentic-ui-kit.com/live/component/motion-perspective-gallery

## Install

```bash
agentic-ui add motion-perspective-gallery
npx shadcn@4.17.0 add @agentic-ui/motion-perspective-gallery
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** horizontal-gallery, coverflow-variant, fan-variant, flat-carousel-variant, snap-to-centre, mouse-drag-with-fling, native-touch-and-trackpad-scroll, click-side-item-to-centre, keyboard-carousel-pattern, inert-side-items, controlled-and-uncontrolled, state-callback, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** navigate, explore-detail
- **Suits domains:** saas, ecommerce, media, marketing, travel
- **Interaction:** drag, click, keyboard-navigation, scroll
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Case-study or portfolio showcase on an agency or product marketing page, Featured products or collections on a storefront landing page, Album, film or course covers in a media library hero, Short process or timeline stages with the fan variant
- **Avoid when:** Browsing many items to compare them, where a grid shows more at once, Dense dashboards or forms, where one card at a time slows work down, Linear or enterprise personalities, where the depth group is not allowed and the gallery is a flat scroll-snap carousel, More than one expressive piece in the same viewport
- **Preserve when adapting:** carousel-pattern, inert-side-items, snap-to-centre, transform-and-opacity-only, flat-carousel-without-motion, work-only-in-view
- **Replace when adapting:** item-content, labels, variant, card-width, timing
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** carousel, card, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Scroll Text Fill

Manifesto or mission statement block on a product page.

- id: `motion-scroll-text-fill`
- Page: https://agentic-ui-kit.com/components/motion-scroll-text-fill
- Live preview: https://agentic-ui-kit.com/live/component/motion-scroll-text-fill

## Install

```bash
agentic-ui add motion-scroll-text-fill
npx shadcn@4.17.0 add @agentic-ui/motion-scroll-text-fill
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** scroll-linked-fill, word-variant, character-variant, line-variant, reversible-fill, css-view-timeline, works-without-js, js-scroll-fallback, fill-state-callback, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** communicate, explore-detail, navigate
- **Suits domains:** saas, knowledge, notes, ai-workspace, personal-productivity
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Manifesto or mission statement block on a product page, Long pull quote in an about page or a case study, Key statement between sections of a landing page story
- **Avoid when:** Body copy that people read in full, such as documentation or articles, Text inside app screens, forms or dashboards, Short labels or headings that should appear at once
- **Preserve when adapting:** readable-text-in-muted-token, aria-hidden-full-colour-copy, opacity-only-fill, full-colour-without-motion, work-only-in-view
- **Replace when adapting:** text, colour-tokens, range, variant, element
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Scrollytelling Section

Product tour on the website where each step of how the product works takes over a sticky product visual.

- id: `motion-scrollytelling-section`
- Page: https://agentic-ui-kit.com/components/motion-scrollytelling-section
- Live preview: https://agentic-ui-kit.com/live/component/motion-scrollytelling-section

## Install

```bash
agentic-ui add motion-scrollytelling-section
npx shadcn@4.17.0 add @agentic-ui/motion-scrollytelling-section
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** scroll-driven-steps, sticky-visual, centre-line-activation, layer-crossfade, single-visual-progress, hero-sequence, step-navigation, step-caption, offscreen-pause, reduced-motion-fallback
- **Intents:** navigate, explore-detail, communicate
- **Suits domains:** saas, marketing, ai-workspace, devtools, analytics, knowledge
- **Interaction:** scroll, click, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Product tour on the website where each step of how the product works takes over a sticky product visual, Landing page hero sequence whose frame fills in panel by panel as the headline steps scroll past, Explainer or case study page where short paragraphs drive one chart or diagram beside them
- **Avoid when:** Content users must compare side by side or complete as a task (use a grid, a comparison table or a stepper), Auto-advancing feature tabs that do not depend on scroll (use motion-feature-highlight-seq), Enterprise, billing or regulated screens and app dashboards; the policy lists the scroll group as none for the enterprise personality
- **Preserve when adapting:** steps-in-document-flow, centre-line-activation, text-caption-for-the-active-step, static-list-without-motion
- **Replace when adapting:** steps, visuals, labels, offset, sticky-top
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Shake Error

Password field that shakes once after a wrong-password sign-in, with an error border, an alert icon and an announced message.

- id: `motion-shake-error`
- Page: https://agentic-ui-kit.com/components/motion-shake-error
- Live preview: https://agentic-ui-kit.com/live/component/motion-shake-error

## Install

```bash
agentic-ui add motion-shake-error
npx shadcn@4.17.0 add @agentic-ui/motion-shake-error
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** horizontal-shake-once-per-error, nudge-variant, guardrail-block-variant, error-icon, error-border, aria-invalid-and-describedby-wiring, live-region-message, reduced-motion-fallback, informative-state-preservation
- **Intents:** authenticate, create-edit, execute-flow
- **Suits domains:** auth, saas, settings, billing, ai-workspace, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Password field that shakes once after a wrong-password sign-in, with an error border, an alert icon and an announced message, Email field that nudges once when a form is submitted empty, Guardrail panel that bumps once when an assistant action is blocked by a data policy or when sign-in is paused after repeated failures
- **Avoid when:** Validation while the person is still typing (show the message without motion), Success or neutral feedback (use motion-copy-success or motion-async-button), Long forms with many errors at once (use a validation summary and move focus to it)
- **Preserve when adapting:** one-run-per-error-trigger, aria-invalid-and-describedby, message-in-live-region, border-and-icon-when-motion-is-off
- **Replace when adapting:** message, guardrail-title, icon, intensity
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** input, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Sidebar Collapse

Main navigation of an operations console that the user collapses to gain width for tables.

- id: `motion-sidebar-collapse`
- Page: https://agentic-ui-kit.com/components/motion-sidebar-collapse
- Live preview: https://agentic-ui-kit.com/live/component/motion-sidebar-collapse

## Install

```bash
agentic-ui add motion-sidebar-collapse
npx shadcn@4.17.0 add @agentic-ui/motion-sidebar-collapse
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** collapsible-rail, off-canvas-drawer, label-fade-stagger, collapsed-tooltips, badge-preservation, keyboard-shortcut, state-persistence, personality-timing, reduced-motion-fallback, informative-state-preservation
- **Intents:** navigate, configure
- **Suits domains:** saas, operations, devtools, analytics, finance, project-management
- **Interaction:** click, hover, keyboard-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Main navigation of an operations console that the user collapses to gain width for tables, Sidebar of a SaaS panel with counters for issues and unread messages, Side menu that opens on mobile as a sliding panel from the header
- **Avoid when:** Sites with fewer than four destinations (use top navigation), Deep hierarchical navigation with cascading submenus (this block is single-level with groups), Full-screen task flows where navigation must be hidden completely
- **Preserve when adapting:** aria-expanded-toggle-and-shortcut, badge-counts-in-accessible-name, collapsed-tooltips, drawer-focus-handoff, instant-fallback
- **Replace when adapting:** sections-and-items, brand, icons, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8.5/10, responsive 9/10, accessibility 9/10, code 8.5/10
- **Uses primitives:** sidebar, button, badge, tooltip
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Slide To Confirm

Payout release card where the treasury operator slides the thumb to the end to release a 48-recipient batch, and a shorter drag springs back with Not released announced.

- id: `motion-slide-to-confirm`
- Page: https://agentic-ui-kit.com/components/motion-slide-to-confirm
- Live preview: https://agentic-ui-kit.com/live/component/motion-slide-to-confirm

## Install

```bash
agentic-ui add motion-slide-to-confirm
npx shadcn@4.17.0 add @agentic-ui/motion-slide-to-confirm
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** drag-to-confirm, spring-back-below-threshold, slider-role-with-valuetext, enter-confirms-after-explicit-focus, pill-and-square-variants, standard-button-fallback, polite-result-announcement, reduced-motion-fallback, informative-state-preservation
- **Intents:** execute-flow, configure, manage-collection
- **Suits domains:** finance, payments, billing, operations, ecommerce, saas
- **Interaction:** drag, keyboard-navigation
- **Screen role:** flow
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Payout release card where the treasury operator slides the thumb to the end to release a 48-recipient batch, and a shorter drag springs back with Not released announced, Square destructive track to cancel a scheduled transfer on a mobile banking screen, Approve invoice track in an accounts payable queue that resets itself after confirming
- **Avoid when:** Routine or reversible actions where a drag only adds friction (use a plain button with undo), Desktop-first dense tables where many rows need confirming (use a confirmation dialog or bulk action), Destructive button actions in settings where a press-and-hold fits better (use motion-hold-to-confirm)
- **Preserve when adapting:** release-short-springs-back, slider-role-and-valuetext, enter-after-explicit-focus, button-fallback-when-motion-is-off
- **Replace when adapting:** labels, hint, threshold, tone
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 9/10
- **Uses primitives:** button, slider
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Step Loader

AI workflow run that walks through Analyzing, Generating and Validating, with durations per step and a failed validation that can be retried.

- id: `motion-step-loader`
- Page: https://agentic-ui-kit.com/components/motion-step-loader
- Live preview: https://agentic-ui-kit.com/live/component/motion-step-loader

## Install

```bash
agentic-ui add motion-step-loader
npx shadcn@4.17.0 add @agentic-ui/motion-step-loader
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-step-progress-checklist, pending-active-done-failed-states, list-inline-timeline-variants, aria-current-step, completion-and-failure-announcement, compact-density, offscreen-pause, reduced-motion-fallback, informative-state-preservation
- **Intents:** track-status, execute-flow, monitor-live
- **Suits domains:** ai-workspace, saas, devtools, analytics, operations
- **Interaction:** live-updates, keyboard-navigation
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** AI workflow run that walks through Analyzing, Generating and Validating, with durations per step and a failed validation that can be retried, Report generation checklist (collecting data, aggregating metrics, rendering charts, exporting PDF) that announces when the file is ready, Compact inline summary of a run in a card header next to its title
- **Avoid when:** A single operation with a known percentage (use motion-progress-animated), An indeterminate wait with no named steps (use motion-spinner-set), Steps the user fills in and navigates between (use form-multi-step-wizard)
- **Preserve when adapting:** ordered-list-semantics, aria-current-step, completion-announcement, transform-opacity-only, static-checklist-when-motion-is-off
- **Replace when adapting:** step-labels, strings, variant, duration
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** list, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Sticky Stack

Feature list on a pricing page, one feature per card.

- id: `motion-sticky-stack`
- Page: https://agentic-ui-kit.com/components/motion-sticky-stack
- Live preview: https://agentic-ui-kit.com/live/component/motion-sticky-stack

## Install

```bash
agentic-ui add motion-sticky-stack
npx shadcn@4.17.0 add @agentic-ui/motion-sticky-stack
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sticky-pinning, scroll-linked-stacking, scale-variant, fade-variant, configurable-offset, hold-before-release, reversible-stacking, focus-brings-card-forward, works-without-js, stack-state-callback, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** navigate, communicate, explore-detail
- **Suits domains:** saas, devtools, ecommerce, fintech, knowledge
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Feature list on a pricing page, one feature per card, Step-by-step how it works section on a landing page, Case study highlights or release notes told as a stack of cards
- **Avoid when:** App screens, dashboards or forms where content must stay in place, Long lists of more than six or seven cards, where the stack edge gets too thick, Cards that people need to compare side by side
- **Preserve when adapting:** document-order-list, sticky-pinning-without-js, transform-and-opacity-only, focus-brings-card-forward, normal-list-without-motion, work-only-in-view
- **Replace when adapting:** items, offset, scale-step, top, variant, hold
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Tab Indicator

Switching sections in a project detail header with per-tab counters.

- id: `motion-tab-indicator`
- Page: https://agentic-ui-kit.com/components/motion-tab-indicator
- Live preview: https://agentic-ui-kit.com/live/component/motion-tab-indicator

## Install

```bash
agentic-ui add motion-tab-indicator
npx shadcn@4.17.0 add @agentic-ui/motion-tab-indicator
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sliding-tab-indicator, personality-tuning, reduced-motion-fallback, keyboard-navigation, informative-state-preservation, zero-layout-shift
- **Intents:** navigate, explore-detail, manage-collection
- **Suits domains:** saas, project-management, analytics, settings, ai-workspace
- **Interaction:** click, keyboard-navigation, select
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Switching sections in a project detail header with per-tab counters, Segmenting views in analytics panels without reloading the page, Navigating between settings groups within a configuration screen, Switching between work inboxes with a badge of pending items
- **Avoid when:** Primary application navigation that requires a route change and its own URL, More than seven destinations, where a menu or side list is more appropriate
- **Preserve when adapting:** compositor-driven-transform, aria-tabs-keyboard-model, accessible-informative-states, personality-tokens
- **Replace when adapting:** tab-labels, panel-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9.5/10, code 9.5/10
- **Uses primitives:** tabs, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion, lib-motion-personalities


### Motion Text Annotate

Pricing copy that circles or highlights one-time payment or no credit card needed.

- id: `motion-text-annotate`
- Page: https://agentic-ui-kit.com/components/motion-text-annotate
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-annotate

## Install

```bash
agentic-ui add motion-text-annotate
npx shadcn@4.17.0 add @agentic-ui/motion-text-annotate
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** hand-drawn-annotation, underline-variant, highlight-variant, box-variant, circle-variant, strike-variant, draw-on-view, manual-trigger-and-replay, deterministic-wobble-seed, annotation-state-callback, semantic-colour-tokens, final-state-without-js, reduced-motion-fallback
- **Intents:** communicate
- **Suits domains:** saas, ecommerce, devtools, knowledge, education
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Pricing copy that circles or highlights one-time payment or no credit card needed, Landing hero that underlines the key benefit once the headline is in view, Changelog or comparison copy that strikes through the old limit and boxes the new one
- **Avoid when:** Dense app screens, tables or forms, where decoration competes with data, Long phrases that would wrap across lines, More than two or three annotations visible at the same time, Protected enterprise screens where the personality does not allow the text group
- **Preserve when adapting:** plain-text-in-reading-order, decorative-svg-aria-hidden, transform-and-opacity-only, final-state-without-motion, highlight-aa-contrast, work-only-in-view
- **Replace when adapting:** variant, tone, trigger, timing, stroke-width, padding, seed
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** select, button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Text Reveal Split

Hero headline on a product landing page that rises line by line on load.

- id: `motion-text-reveal-split`
- Page: https://agentic-ui-kit.com/components/motion-text-reveal-split
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-reveal-split

## Install

```bash
agentic-ui add motion-text-reveal-split
npx shadcn@4.17.0 add @agentic-ui/motion-text-reveal-split
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** split-by-word-line-or-character, masked-rise-reveal, fade-and-soft-rise-variants, token-stagger-within-400ms, in-view-or-mount-trigger, replay-with-once-false, line-split-recalculated-on-resize, original-text-kept-for-assistive-technology, reduced-motion-fallback
- **Intents:** navigate, communicate
- **Suits domains:** saas, ai-workspace, devtools, finance, ecommerce, analytics
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Hero headline on a product landing page that rises line by line on load, Feature section headings that reveal word by word as each section scrolls into view, Short onboarding step titles revealed character by character
- **Avoid when:** Body copy, table cells, form labels or any text people need to read immediately, More than one or two revealing headings visible on the same screen, Enterprise or data-dense dashboards (the enterprise personality blocks the text group)
- **Preserve when adapting:** original-text-as-accessible-name, aria-hidden-split-copy, stagger-within-400ms, plain-text-when-motion-is-off
- **Replace when adapting:** heading-text, heading-level, split-unit, variant, stagger
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** heading
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Text Scramble

Security page heading that decodes when it scrolls into view.

- id: `motion-text-scramble`
- Page: https://agentic-ui-kit.com/components/motion-text-scramble
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-scramble

## Install

```bash
agentic-ui add motion-text-scramble
npx shadcn@4.17.0 add @agentic-ui/motion-text-scramble
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** glyph-scramble, decode-variant, hover-glitch-variant, number-scramble-variant, in-view-trigger, hover-and-focus-trigger, replay-trigger, rescramble-on-value-change, locked-width, pause-offscreen, accessible-target-text, reduced-motion-fallback
- **Intents:** communicate, track-status
- **Suits domains:** saas, devtools, auth, settings, ai-workspace
- **Interaction:** scroll-trigger, hover, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Security page heading that decodes when it scrolls into view, Key rotation counter whose digits scramble to the new value, Navigation labels that glitch briefly on hover or keyboard focus, Access code or API key reveal on a developer settings page
- **Avoid when:** Body copy, form labels, errors or anything the user must read immediately, More than one scrambling heading in the same viewport, Protected enterprise screens, where the personality does not allow the text group, Values that change several times per second (use motion-number-morph or motion-counter-ticker)
- **Preserve when adapting:** target-text-in-dom, aria-hidden-glyph-layer, no-live-region, locked-width, target-text-without-motion
- **Replace when adapting:** text, glyphs, timing, glyph-colour, variant, trigger
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, select, table
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Theme Toggle Transition

App header toggle that reveals the dark theme with a circle growing from the button.

- id: `motion-theme-toggle-transition`
- Page: https://agentic-ui-kit.com/components/motion-theme-toggle-transition
- Live preview: https://agentic-ui-kit.com/live/component/motion-theme-toggle-transition

## Install

```bash
agentic-ui add motion-theme-toggle-transition
npx shadcn@4.17.0 add @agentic-ui/motion-theme-toggle-transition
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** theme-toggle, circular-wipe-from-toggle, diagonal-wipe-variant, fade-variant, view-transitions-api, next-themes-compatible, aria-pressed-toggle, reduced-motion-fallback, informative-state-preservation
- **Intents:** configure, navigate
- **Suits domains:** saas, settings, ai-workspace, devtools, marketing, knowledge
- **Interaction:** click, keyboard-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** App header toggle that reveals the dark theme with a circle growing from the button, Marketing site header where the new theme sweeps in diagonally from the toggle's corner, Documentation header with a short cross-fade between light and dark
- **Avoid when:** The product needs a light, dark and system choice (use a theme settings control), Pages with embedded video or iframes where a full-page snapshot swap would flash, Frequent programmatic theme changes (the wipe is meant for a deliberate click)
- **Preserve when adapting:** aria-pressed-for-dark-theme, wipe-origin-at-the-toggle, instant-swap-when-motion-is-off, controlled-theme-and-onthemechange
- **Replace when adapting:** labels, icons, shape
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react, react-dom
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Toast Stack

Global notifications in a SaaS workspace after inviting a teammate, saving settings or exporting data.

- id: `motion-toast-stack`
- Page: https://agentic-ui-kit.com/components/motion-toast-stack
- Live preview: https://agentic-ui-kit.com/live/component/motion-toast-stack

## Install

```bash
agentic-ui add motion-toast-stack
npx shadcn@4.17.0 add @agentic-ui/motion-toast-stack
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** stacked-toasts, fan-out-on-hover-and-focus, swipe-to-dismiss, pause-on-hover-timers, list-variant, severity-roles, landmark-hotkey, queue-overflow-count, reduced-motion-fallback, informative-state-preservation
- **Intents:** communicate, track-status
- **Suits domains:** saas, settings, ai-workspace, devtools, ecommerce
- **Interaction:** click, hover, drag, keyboard-navigation
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Global notifications in a SaaS workspace after inviting a teammate, saving settings or exporting data, Deploy failure toast with a Retry action in a developer console, Quota warning that stays readable while the user hovers or focuses the stack
- **Avoid when:** The user needs a persistent history of notifications to search, pin or archive (use a notification center), Critical errors that block the task (use an inline alert or a dialog), Messages that must stay until acted upon in regulated flows (use a banner)
- **Preserve when adapting:** role-by-severity, timers-pause-on-hover-and-focus, close-button-for-every-card, static-stack-when-motion-is-off
- **Replace when adapting:** strings, position, duration, variant
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react, react-dom
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Top Loading Bar

Route change indicator in an app shell while the next page loads.

- id: `motion-top-loading-bar`
- Page: https://agentic-ui-kit.com/components/motion-top-loading-bar
- Live preview: https://agentic-ui-kit.com/live/component/motion-top-loading-bar

## Install

```bash
agentic-ui add motion-top-loading-bar
npx shadcn@4.17.0 add @agentic-ui/motion-top-loading-bar
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-loading-indicator, estimated-trickle, reported-progress, complete-and-fade, spinner-variant, semantic-colour-token, viewport-or-container-position, progressbar-when-determinate, decorative-when-estimated, state-callback, rtl-aware, reduced-motion-fallback
- **Intents:** track-status, navigate
- **Suits domains:** saas, devtools, analytics, operations, ecommerce, knowledge
- **Interaction:** live-updates, keyboard-navigation
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Route change indicator in an app shell while the next page loads, Top bar that follows reported progress of a data export or a file upload, Loading hint at the top of a panel or preview frame that refreshes its content
- **Avoid when:** Long operations that need a label, a percentage or a cancel action (use a visible progress component), Loads that finish in under about 100 ms, where the bar only flashes, Multi-step processes where each step has a name (use motion-step-loader)
- **Preserve when adapting:** transform-and-opacity-only, forward-only-progress, progressbar-only-when-determinate, visible-without-motion, work-only-while-loading-in-view
- **Replace when adapting:** color, variant, height, label, position
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** progress, spinner
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Typewriter

Landing hero headline cycling three product verbs.

- id: `motion-typewriter`
- Page: https://agentic-ui-kit.com/components/motion-typewriter
- Live preview: https://agentic-ui-kit.com/live/component/motion-typewriter

## Install

```bash
agentic-ui add motion-typewriter
npx shadcn@4.17.0 add @agentic-ui/motion-typewriter
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** typed-text, blinking-caret, delete-and-retype-loop, single-variant, rotating-phrases-variant, prompt-variant, streaming-caret-variant, shared-prefix-delete, reserved-size, pause-control, pause-offscreen, accessible-full-text, reduced-motion-fallback
- **Intents:** communicate, navigate
- **Suits domains:** saas, ai-workspace, devtools, analytics, personal-productivity
- **Interaction:** pause-control, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Landing hero headline cycling three product verbs, Search placeholder that rotates through the things you can search, Command prompt demo that types sample queries after a leading glyph, Scripted assistant suggestion typed behind a block caret
- **Avoid when:** The text is a model response arriving over the network (use motion-streaming-text), The copy is long or the user needs to read it immediately, such as form labels, errors or data values, Protected enterprise screens where the personality does not allow the text group
- **Preserve when adapting:** full-text-accessible-name, aria-hidden-typed-glyphs-and-caret, no-live-region, reserved-size, pause-control-for-loops, full-text-without-motion
- **Replace when adapting:** phrases, glyph, timing, caret-colour, variant
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Value Change Flash

Trading order book where each size cell flashes when its level changes, at most twice a second.

- id: `motion-value-change-flash`
- Page: https://agentic-ui-kit.com/components/motion-value-change-flash
- Live preview: https://agentic-ui-kit.com/live/component/motion-value-change-flash

## Install

```bash
agentic-ui add motion-value-change-flash
npx shadcn@4.17.0 add @agentic-ui/motion-value-change-flash
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** value-change-highlight, direction-arrow-and-colour, stream-rate-limit, cell-badge-inline-variants, positive-direction-tone, signed-change-text, reduced-motion-fallback, informative-state-preservation
- **Intents:** monitor-live, track-status, compare-over-time
- **Suits domains:** finance, analytics, operations, ecommerce, devtools, saas
- **Interaction:** read-only
- **Screen role:** detail
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Trading order book where each size cell flashes when its level changes, at most twice a second, Watchlist table with last price, 24h change badge and volume that highlight on every quote, Operations badge for p95 latency where a drop is shown as good news with positive set to down
- **Avoid when:** Values that change only on page load (a static delta badge is enough), Screens that must announce every change to assistive technology (pair it with a single summary live region), Dense tables updating dozens of cells many times per second where even rate-limited flashes become noise (show the arrow and colour only with motion none)
- **Preserve when adapting:** arrow-plus-text-direction, no-live-region-per-cell, per-value-rate-limit, opacity-only-flash
- **Replace when adapting:** labels, icons, format, positive
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, table
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Motion Word Rotate

Landing hero headline naming the teams a product serves, one at a time.

- id: `motion-word-rotate`
- Page: https://agentic-ui-kit.com/components/motion-word-rotate
- Live preview: https://agentic-ui-kit.com/live/component/motion-word-rotate

## Install

```bash
agentic-ui add motion-word-rotate
npx shadcn@4.17.0 add @agentic-ui/motion-word-rotate
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rotating-word, vertical-slide-fade, slide-variant, fade-variant, flip-x-variant, flip-width-reflow, pause-on-hover, pause-control, pause-offscreen, cycle-limit, accessible-word-list, static-list-fallback, reduced-motion-fallback
- **Intents:** communicate, navigate
- **Suits domains:** saas, analytics, ai-workspace, devtools, ecommerce
- **Interaction:** hover-pause, pause-control, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Landing hero headline naming the teams a product serves, one at a time, Feature strip that cycles the audiences or use cases of a plan, Onboarding welcome line that rotates the kinds of work a workspace supports
- **Avoid when:** The word carries data or status the user must read, such as values, errors or form labels, More than one rotating element is visible at the same time, Protected enterprise screens where the personality does not allow the text group
- **Preserve when adapting:** accessible-text-lists-every-word-once, aria-live-off, pause-on-hover-and-pause-control, cycle-limit-when-preference-unknown, first-word-without-motion, transform-opacity-only
- **Replace when adapting:** words, sentence-copy, variant, timing, word-colour
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion


### Org Team Invite

Invite the team to a workspace with viewer, member, billing and admin roles.

- id: `org-team-invite`
- Page: https://agentic-ui-kit.com/components/org-team-invite
- Live preview: https://agentic-ui-kit.com/live/component/org-team-invite

## Install

```bash
agentic-ui add org-team-invite
npx shadcn@4.17.0 add @agentic-ui/org-team-invite
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-email-entry, paste-many-addresses, per-recipient-role, bulk-role-assignment, duplicate-detection, existing-member-detection, pending-invite-detection, blocked-domain-rules, recipient-limit, privileged-role-warning, optional-message, empty-state, keyboard-navigation
- **Intents:** create-edit, configure
- **Suits domains:** saas, settings, auth, hr, operations
- **Interaction:** type, paste, add-recipient, remove-recipient, change-role, bulk-role-change, validation-feedback, keyboard-navigation, submit
- **Screen role:** management
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** invite the team to a workspace with viewer, member, billing and admin roles, bulk onboarding of external collaborators restricted to corporate domains, resending a batch of invitations with addresses that are already members or pending, onboarding a new account by pasting the team's email list
- **Avoid when:** a single invitation with no roles, where an email field in a dialog is enough, managing existing members, which belongs in a permissions table
- **Preserve when adapting:** recipient-identity, rejection-model, role-assignment, separator-parsing
- **Replace when adapting:** domain-copy, role-set, rejection-messages, blocked-domains
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, input, label, select, textarea
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### RAG Source Manager

Adding product documentation as the knowledge base of an assistant.

- id: `rag-source-manager`
- Page: https://agentic-ui-kit.com/components/rag-source-manager
- Live preview: https://agentic-ui-kit.com/live/component/rag-source-manager

## Install

```bash
agentic-ui add rag-source-manager
npx shadcn@4.17.0 add @agentic-ui/rag-source-manager
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** document-upload, url-ingestion, sitemap-ingestion, indexing-status, indexing-progress, re-sync, retry-failed-source, remove-source, status-summary, empty-state, error-state, responsive-table-to-cards
- **Intents:** retrieve-knowledge, manage-collection, import-export, track-status
- **Suits domains:** knowledge, ai-workspace, saas, devtools, support
- **Interaction:** upload, add-source, re-sync, retry, remove, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** adding product documentation as the knowledge base of an assistant, ingesting a full sitemap of public docs for semantic search, indexing status panel with retry of failed sources, periodic re-sync of a URL whose content changes
- **Avoid when:** a single static source that is never re-indexed, file management without indexing or chunk semantics
- **Preserve when adapting:** ingestion-tabs, indexing-status-semantics, re-sync-model, error-retry-affordance
- **Replace when adapting:** domain-copy, source-fixtures, indexing-backend, chunk-metrics
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, progress, separator, dialog, tabs, input, label
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Responsive Command Bar

Document action bar preserving Save and Edit when narrowed and collapsing secondary actions to an overflow menu.

- id: `responsive-command-bar`
- Page: https://agentic-ui-kit.com/components/responsive-command-bar
- Live preview: https://agentic-ui-kit.com/live/component/responsive-command-bar

## Install

```bash
agentic-ui add responsive-command-bar
npx shadcn@4.17.0 add @agentic-ui/responsive-command-bar
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** priority-based-collapse, overflow-menu, overflow-bottom-sheet, container-width-measurement, roving-tabindex, keyboard-navigation, focus-remap-on-collapse, disabled-action, destructive-action, shortcut-hint, overflow-count-in-accessible-name, empty-state
- **Intents:** execute-flow, manage-collection, navigate
- **Suits domains:** saas, operations, project-management, devtools, ecommerce, knowledge
- **Interaction:** click, keyboard-arrow-navigation, overflow-menu-open, bottom-sheet-open, container-resize
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** document action bar preserving Save and Edit when narrowed and collapsing secondary actions to an overflow menu, admin table toolbar in a narrow sidebar that collapses based on container width rather than viewport, bulk selection actions on mobile presented as a thumb-reachable bottom sheet, editor toolbar where secondary utilities yield space to primary actions
- **Avoid when:** global command palette with search across an entire action catalog, primary top-level site navigation between application sections
- **Preserve when adapting:** priority-over-position-collapse, keyboard-reachability-of-collapsed-actions, focus-remap-on-collapse, overflow-count-in-accessible-name
- **Replace when adapting:** action-set-and-icons, sheet-breakpoint, overflow-trigger-affordance, action-handlers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, dropdown-menu, sheet, separator
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Responsive Table To Cards

Invoice listing that must remain usable on a mobile device.

- id: `responsive-table-to-cards`
- Page: https://agentic-ui-kit.com/components/responsive-table-to-cards
- Live preview: https://agentic-ui-kit.com/live/component/responsive-table-to-cards

## Install

```bash
agentic-ui add responsive-table-to-cards
npx shadcn@4.17.0 add @agentic-ui/responsive-table-to-cards
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** container-query-layout, table-to-card-collapse, column-card-roles, shared-sort-state, typed-value-sorting, row-selection, select-all-tristate, row-actions, empty-state, single-layout-mount
- **Intents:** manage-collection, explore-detail
- **Suits domains:** saas, ecommerce, billing, operations, logistics
- **Interaction:** sort, select-row, select-all, row-actions, layout-switch
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** invoice listing that must remain usable on a mobile device, order table embedded in a narrow side panel on the same screen, inventory with a right-aligned amount that sorts by numeric value rather than text, empty collection after applying filters, which informs instead of painting a grid with no rows
- **Avoid when:** comparison tables where the value lies in reading several aligned rows at once, which the card breaks, fewer than three columns, where the table already fits on mobile and the card only adds height
- **Preserve when adapting:** column-model, card-role-mapping, sort-semantics, selection-model
- **Replace when adapting:** domain-copy, columns, status-enum, formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** table, card, checkbox, badge, button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Saas Form Natural Date

Invoice due date typed as 'next Friday' or 'end of month' with confirmation before saving.

- id: `saas-form-natural-date`
- Page: https://agentic-ui-kit.com/components/saas-form-natural-date
- Live preview: https://agentic-ui-kit.com/live/component/saas-form-natural-date

## Install

```bash
agentic-ui add saas-form-natural-date
npx shadcn@4.17.0 add @agentic-ui/saas-form-natural-date
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** natural-language-date-parsing, explicit-reference-date, interpretation-preview-before-commit, explicit-confirmation, ambiguity-candidates, unsupported-input-error, min-max-bounds, keyboard-calendar-alternative, controlled-and-uncontrolled, external-error-override, disabled-state, hidden-form-input, dark-mode
- **Intents:** create-edit, configure
- **Suits domains:** saas, billing, project-management, crm, operations, personal-productivity
- **Interaction:** typing, keyboard-confirm, click, calendar-keyboard-navigation, form-submit
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** invoice due date typed as 'next Friday' or 'end of month' with confirmation before saving, contract renewal date in a SaaS account form with an overlaid server error, report start date bounded to a quarter with min/max and an ambiguous dd/mm vs mm/dd reading, due date of tasks or reminders in productivity and CRM tools
- **Avoid when:** selecting date ranges (use form-date-range-picker), time or date-time input with a time zone, interfaces in languages other than English without extending the parser rules
- **Preserve when adapting:** explicit-reference-date, confirm-before-commit, no-silent-fallback, ambiguity-as-error, keyboard-model
- **Replace when adapting:** phrase-rules, validation-copy, locale, size-and-spacing
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, input, label, popover, calendar
- **npm dependencies:** lucide-react, react-day-picker
- **npm dependencies (registry):** lucide-react@0.577.0, react-day-picker-v9@npm:react-day-picker@^9.14.0
- **Registry dependencies:** lib-primitives


### Saas Form Number Field

Number of licenses or seats in a SaaS checkout with plan limits.

- id: `saas-form-number-field`
- Page: https://agentic-ui-kit.com/components/saas-form-number-field
- Live preview: https://agentic-ui-kit.com/live/component/saas-form-number-field

## Install

```bash
agentic-ui add saas-form-number-field
npx shadcn@4.17.0 add @agentic-ui/saas-form-number-field
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** visible-stepper-buttons, min-max-step-clamping, decimal-safe-stepping, keyboard-stepping, locale-formatting, deterministic-validation, controlled-and-uncontrolled, external-error-override, disabled-readonly-states, hidden-form-input, accessible-spinbutton, dark-mode
- **Intents:** create-edit, configure
- **Suits domains:** saas, ecommerce, billing, settings, operations, finance
- **Interaction:** click, keyboard-stepping, typing, focus-blur-commit, form-submit
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** number of licenses or seats in a SaaS checkout with plan limits, unit price with two decimals and a currency symbol in a product editor, discount percentage in steps of 0.5 inside a campaign configuration, alert threshold with a negative range and a decimal step in monitoring settings, rows per page or quota limits in toolbars and dense tables (size sm)
- **Avoid when:** free text input or numeric identifiers that must not be incremented (phone numbers, postal codes), selecting a value within a continuous range where a slider better communicates proportion, huge ranges with no meaningful step where stepper buttons add nothing
- **Preserve when adapting:** spinbutton-semantics, step-grid-model, validation-order, keyboard-model
- **Replace when adapting:** validation-copy, locale, adornments, size-and-spacing
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, input, label
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives


### Saas Navigation Mega Menu

Main navigation bar of a SaaS platform with products, solutions and resources menus.

- id: `saas-navigation-mega-menu`
- Page: https://agentic-ui-kit.com/components/saas-navigation-mega-menu
- Live preview: https://agentic-ui-kit.com/live/component/saas-navigation-mega-menu

## Install

```bash
agentic-ui add saas-navigation-mega-menu
npx shadcn@4.17.0 add @agentic-ui/saas-navigation-mega-menu
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** grouped-rich-panels, keyboard-navigation, responsive-drawer, touch-target-floor, route-synchronization, empty-state-fallback, error-state-fallback, spotlight-callout, quick-search-filter, dark-mode
- **Intents:** navigate, explore-detail, track-status
- **Suits domains:** saas, devtools, operations, fintech, ecommerce
- **Interaction:** tap, click, hover, keyboard-navigation, expand-collapse, search, route-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** main navigation bar of a SaaS platform with products, solutions and resources menus, rich navigation panel with a what's-new card and shortcuts to documentation, mobile navigation with accordions per category and a quick page search, services menu with an empty state fallback and retry on connection failures
- **Avoid when:** applications with fewer than three routes where a simple row of links is enough, single linear flow interfaces where a step progress bar is required
- **Preserve when adapting:** keyboard-model, responsive-drawer, touch-target-floor, radix-primitive-semantics
- **Replace when adapting:** brand-identity, navigation-hierarchy, spotlight-content, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** navigation-menu
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** @radix-ui/react-navigation-menu@^1.2.22, class-variance-authority@^0.7.1, clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0


### Saas Starter App Shell

Multi-tenant SaaS admin shell with org switcher.

- id: `saas-starter-app-shell`
- Page: https://agentic-ui-kit.com/components/saas-starter-app-shell
- Live preview: https://agentic-ui-kit.com/saas-admin-starter/dashboard?piece=saas-starter-app-shell

## Install

```bash
agentic-ui add saas-starter-app-shell
npx shadcn@4.17.0 add @agentic-ui/saas-starter-app-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** org-switching, sidebar-navigation, theme-toggle, motion-personality-control, reduced-motion-toggle, skip-link, live-status-notice, invite-modal
- **Intents:** navigate, configure
- **Suits domains:** saas, devtools, billing, settings
- **Interaction:** navigation, dropdown, modal-form, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** multi-tenant SaaS admin shell with org switcher, B2B backoffice starter layout
- **Avoid when:** marketing site navigation, single-page tools without sections
- **Preserve when adapting:** route-structure, local-action-feedback
- **Replace when adapting:** fixtures, brand-copy, service-adapters
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 7/10
- **Uses primitives:** button, select, badge
- **npm dependencies:** next, next-themes
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** SaaS Admin Starter (blueprint)
- **npm dependencies (registry):** next-themes@0.4.6
- **Registry dependencies:** auth-forgot-reset, auth-login-signup, auth-mfa-passkey, billing-pricing-table, billing-usage-meter, lib-billing-checkout-flow, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-org-team-invite, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator, org-permissions-matrix, org-switcher, security-sessions-devices


### Saas Starter Audit Log

Workspace audit trail in a SaaS starter.

- id: `saas-starter-audit-log`
- Page: https://agentic-ui-kit.com/components/saas-starter-audit-log
- Live preview: https://agentic-ui-kit.com/saas-admin-starter/audit?piece=saas-starter-audit-log

## Install

```bash
agentic-ui add saas-starter-audit-log
npx shadcn@4.17.0 add @agentic-ui/saas-starter-audit-log
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** event-table, text-filter, cross-route-event-capture
- **Intents:** audit-trail, manage-collection
- **Suits domains:** saas, devtools, settings
- **Interaction:** filter
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** workspace audit trail in a SaaS starter
- **Avoid when:** compliance exports with retention policies
- **Preserve when adapting:** route-structure, local-action-feedback
- **Replace when adapting:** fixtures, brand-copy, service-adapters
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 7/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** table, input
- **npm dependencies:** next, next-themes
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** SaaS Admin Starter (blueprint)
- **npm dependencies (registry):** next-themes@0.4.6
- **Registry dependencies:** auth-forgot-reset, auth-login-signup, auth-mfa-passkey, billing-pricing-table, billing-usage-meter, lib-billing-checkout-flow, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-org-team-invite, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator, org-permissions-matrix, org-switcher, security-sessions-devices


### Saas Starter Auth Journey

Sign-in then MFA before entering an admin workspace.

- id: `saas-starter-auth-journey`
- Page: https://agentic-ui-kit.com/components/saas-starter-auth-journey
- Live preview: https://agentic-ui-kit.com/saas-admin-starter/login?piece=saas-starter-auth-journey

## Install

```bash
agentic-ui add saas-starter-auth-journey
npx shadcn@4.17.0 add @agentic-ui/saas-starter-auth-journey
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** login, signup, magic-link, forgot-reset-password, totp-mfa, passkey-simulation, route-driven-steps
- **Intents:** authenticate, execute-flow
- **Suits domains:** saas, auth, devtools, billing
- **Interaction:** form, mode-switch, otp-input
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** sign-in then MFA before entering an admin workspace, password recovery flow for a SaaS starter
- **Avoid when:** real identity provider integration (adapter required)
- **Preserve when adapting:** route-structure, local-action-feedback
- **Replace when adapting:** fixtures, brand-copy, service-adapters
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** card, button, input, label, tabs
- **npm dependencies:** next, next-themes
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** SaaS Admin Starter (blueprint)
- **npm dependencies (registry):** next-themes@0.4.6
- **Registry dependencies:** auth-forgot-reset, auth-login-signup, auth-mfa-passkey, billing-pricing-table, billing-usage-meter, lib-billing-checkout-flow, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-org-team-invite, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator, org-permissions-matrix, org-switcher, security-sessions-devices


### Saas Starter Billing Center

Subscription and usage page of a SaaS admin.

- id: `saas-starter-billing-center`
- Page: https://agentic-ui-kit.com/components/saas-starter-billing-center
- Live preview: https://agentic-ui-kit.com/saas-admin-starter/billing?piece=saas-starter-billing-center

## Install

```bash
agentic-ui add saas-starter-billing-center
npx shadcn@4.17.0 add @agentic-ui/saas-starter-billing-center
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** usage-meter, plan-selection, monthly-annual-toggle, checkout-simulation, invoice-download, payment-recovery-entry, tabbed-views
- **Intents:** configure, execute-flow, track-status
- **Suits domains:** saas, billing, devtools
- **Interaction:** tabs, plan-select, form, download
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** subscription and usage page of a SaaS admin, plan upgrade to checkout flow
- **Avoid when:** real payment processing without a billing adapter
- **Preserve when adapting:** route-structure, local-action-feedback
- **Replace when adapting:** fixtures, brand-copy, service-adapters
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** card, button, tabs, badge, progress
- **npm dependencies:** next, next-themes
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** SaaS Admin Starter (blueprint)
- **npm dependencies (registry):** next-themes@0.4.6
- **Registry dependencies:** auth-forgot-reset, auth-login-signup, auth-mfa-passkey, billing-pricing-table, billing-usage-meter, lib-billing-checkout-flow, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-org-team-invite, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator, org-permissions-matrix, org-switcher, security-sessions-devices


### Saas Starter Overview Dashboard

SaaS workspace home with MRR, members and uptime.

- id: `saas-starter-overview-dashboard`
- Page: https://agentic-ui-kit.com/components/saas-starter-overview-dashboard
- Live preview: https://agentic-ui-kit.com/saas-admin-starter/dashboard?piece=saas-starter-overview-dashboard

## Install

```bash
agentic-ui add saas-starter-overview-dashboard
npx shadcn@4.17.0 add @agentic-ui/saas-starter-overview-dashboard
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** kpi-cards, revenue-bars, recent-activity, refresh-with-skeleton, launch-checklist
- **Intents:** track-status, compare-over-time
- **Suits domains:** saas, billing, analytics
- **Interaction:** refresh, link-through
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** SaaS workspace home with MRR, members and uptime
- **Avoid when:** deep analytics exploration
- **Preserve when adapting:** route-structure, local-action-feedback
- **Replace when adapting:** fixtures, brand-copy, service-adapters
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, button, badge
- **npm dependencies:** next, next-themes
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** SaaS Admin Starter (blueprint)
- **npm dependencies (registry):** next-themes@0.4.6
- **Registry dependencies:** auth-forgot-reset, auth-login-signup, auth-mfa-passkey, billing-pricing-table, billing-usage-meter, lib-billing-checkout-flow, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-org-team-invite, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator, org-permissions-matrix, org-switcher, security-sessions-devices


### Saas Starter Settings Security

Workspace settings and active sessions pages.

- id: `saas-starter-settings-security`
- Page: https://agentic-ui-kit.com/components/saas-starter-settings-security
- Live preview: https://agentic-ui-kit.com/saas-admin-starter/settings?piece=saas-starter-settings-security

## Install

```bash
agentic-ui add saas-starter-settings-security
npx shadcn@4.17.0 add @agentic-ui/saas-starter-settings-security
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** workspace-settings-form, timezone-select, notification-preference, session-list, revoke-session, revoke-other-sessions
- **Intents:** configure, manage-collection
- **Suits domains:** saas, settings, auth
- **Interaction:** form, destructive-action
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** workspace settings and active sessions pages
- **Avoid when:** per-user profile editing with avatars upload
- **Preserve when adapting:** route-structure, local-action-feedback
- **Replace when adapting:** fixtures, brand-copy, service-adapters
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** input, select, checkbox, button, card
- **npm dependencies:** next, next-themes
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** SaaS Admin Starter (blueprint)
- **npm dependencies (registry):** next-themes@0.4.6
- **Registry dependencies:** auth-forgot-reset, auth-login-signup, auth-mfa-passkey, billing-pricing-table, billing-usage-meter, lib-billing-checkout-flow, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-org-team-invite, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator, org-permissions-matrix, org-switcher, security-sessions-devices


### Saas Starter Team Access

Workspace members and roles admin.

- id: `saas-starter-team-access`
- Page: https://agentic-ui-kit.com/components/saas-starter-team-access
- Live preview: https://agentic-ui-kit.com/saas-admin-starter/users?piece=saas-starter-team-access

## Install

```bash
agentic-ui add saas-starter-team-access
npx shadcn@4.17.0 add @agentic-ui/saas-starter-team-access
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** member-search, role-change, member-removal, team-invite, permissions-matrix, owner-protection
- **Intents:** manage-collection, configure
- **Suits domains:** saas, settings, devtools, hr
- **Interaction:** search, inline-select, modal-form, toggle-grid
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** workspace members and roles admin, RBAC matrix for a B2B product
- **Avoid when:** enterprise directory sync (SCIM) screens
- **Preserve when adapting:** route-structure, local-action-feedback
- **Replace when adapting:** fixtures, brand-copy, service-adapters
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** table, input, select, button, checkbox, dialog
- **npm dependencies:** next, next-themes
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** SaaS Admin Starter (blueprint)
- **npm dependencies (registry):** next-themes@0.4.6
- **Registry dependencies:** auth-forgot-reset, auth-login-signup, auth-mfa-passkey, billing-pricing-table, billing-usage-meter, lib-billing-checkout-flow, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-org-team-invite, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator, org-permissions-matrix, org-switcher, security-sessions-devices


### Saas Step Progress Navigation

Progress header in a subscription sign-up.

- id: `saas-step-progress-navigation`
- Page: https://agentic-ui-kit.com/components/saas-step-progress-navigation
- Live preview: https://agentic-ui-kit.com/live/component/saas-step-progress-navigation?piece=saas-step-progress-navigation

## Install

```bash
agentic-ui add saas-step-progress-navigation
npx shadcn@4.17.0 add @agentic-ui/saas-step-progress-navigation
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** step-status-indicator, current-completed-error-state, responsive-orientation, back-navigation, keyboard-navigation, roving-tabindex
- **Intents:** navigate, track-status, execute-flow
- **Suits domains:** saas, billing, ecommerce, hr, healthcare
- **Interaction:** step-navigate, keyboard-navigation
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** progress header in a subscription sign-up, checkout step indicator, phase tracking in staff onboarding, staged clinical admission progress
- **Avoid when:** single-step processes, continuous progress with no discrete stages, where a bar is enough
- **Preserve when adapting:** step-status-semantics, responsive-orientation, keyboard-model
- **Replace when adapting:** domain-copy, step-labels, icons
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies (registry):** lucide-react@0.577.0, zod-v3@npm:zod@^3.24.2
- **Registry dependencies:** lib-primitives


### Saas Table Column Resize

SaaS subscriptions and customers table with user-adjustable widths.

- id: `saas-table-column-resize`
- Page: https://agentic-ui-kit.com/components/saas-table-column-resize
- Live preview: https://agentic-ui-kit.com/live/component/saas-table-column-resize

## Install

```bash
agentic-ui add saas-table-column-resize
npx shadcn@4.17.0 add @agentic-ui/saas-table-column-resize
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** column-resize, keyboard-resize, min-max-bounds, independent-columns, header-body-alignment, column-sorting, keyboard-reset, responsive-scroll, empty-state-fallback, error-state-fallback, dark-mode
- **Intents:** manage-collection, configure, create-edit
- **Suits domains:** saas, finance, operations, devtools, ecommerce
- **Interaction:** drag, click, keyboard-navigation, sort, reset
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** SaaS subscriptions and customers table with user-adjustable widths, financial transactions listing where the user widens the amount and description columns, operations panel with sorting by metrics and persisted column dimensions, devtools resource console showing quota usage and activity states
- **Avoid when:** simple read-only lists with fewer than 3 columns of uniform length, summary cards or compact widgets where a fixed grid is preferable
- **Preserve when adapting:** column-resize-model, keyboard-adjustment-steps, header-body-alignment, min-max-bounds-enforcement
- **Replace when adapting:** column-definitions, data-records, cell-renderers, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** table, button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0


### Settings Shortcut Recorder

'Keyboard shortcuts' settings screen where each action is reassigned by recording ⌘⇧K and saving.

- id: `settings-shortcut-recorder`
- Page: https://agentic-ui-kit.com/components/settings-shortcut-recorder
- Live preview: https://agentic-ui-kit.com/live/component/settings-shortcut-recorder

## Install

```bash
agentic-ui add settings-shortcut-recorder
npx shadcn@4.17.0 add @agentic-ui/settings-shortcut-recorder
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** keyboard-shortcut-capture, modifier-plus-key-recording, modifier-only-input-ignored, layout-independent-key-codes, platform-label-normalization, canonical-mod-binding, editable-combination-builder, clear-and-cancel-without-saving, explicit-save, configurable-conflict-policy, reserved-shortcut-detection, custom-conflict-messages, external-error-override, disabled-state, hidden-form-input, dark-mode
- **Intents:** configure, create-edit
- **Suits domains:** settings, saas, devtools, project-management, ai-workspace, notes, personal-productivity
- **Interaction:** keyboard-capture, click, toggle, select, form-submit
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** 'Keyboard shortcuts' settings screen where each action is reassigned by recording ⌘⇧K and saving, shortcut editor for an IDE or devtools console that blocks combinations reserved by the browser, customize the command palette shortcut in an AI or notes workspace, configurable conflict policy: block in the product, warn in internal tools
- **Avoid when:** only the shortcut reference needs to be shown (use util-shortcuts-overlay), chained sequences like 'g then d' (the recorder records simultaneous combinations), devices without a physical keyboard as the only target
- **Preserve when adapting:** explicit-save, capture-scoped-to-field, modifier-only-ignored, canonical-mod-binding, keyboard-model
- **Replace when adapting:** action-list, reserved-shortcuts, conflict-copy, size-and-spacing
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, kbd
- **npm dependencies:** lucide-react, util-shortcuts-overlay
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives, util-shortcuts-overlay


### Settings Theme Primitive Controller

Theme and style configuration panel.

- id: `settings-theme-primitive-controller`
- Page: https://agentic-ui-kit.com/components/settings-theme-primitive-controller
- Live preview: https://agentic-ui-kit.com/live/component/settings-theme-primitive-controller

## Install

```bash
agentic-ui add settings-theme-primitive-controller
npx shadcn@4.17.0 add @agentic-ui/settings-theme-primitive-controller
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** theme-switching, primitive-catalog, style-variant-selection, keyboard-navigation, density-control
- **Intents:** configure, track-status
- **Suits domains:** settings, devtools, saas, operations
- **Interaction:** click, select, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** theme and style configuration panel, admin component controller
- **Avoid when:** screens with no customization options
- **Preserve when adapting:** component-hierarchy, theme-context-model, accessible-states
- **Replace when adapting:** domain-labels, available-options
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, input, card, badge, switch, checkbox, progress, tabs, dialog, select
- **npm dependencies:** next-themes, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** class-variance-authority@^0.7.1, clsx@^2.1.1, lucide-react@0.577.0, radix-ui@^1.6.7, tailwind-merge@3.5.0
- **Registry dependencies:** lib-tokens


### Social Account Analytics

Multi-account social analytics.

- id: `social-account-analytics`
- Page: https://agentic-ui-kit.com/components/social-account-analytics
- Live preview: https://agentic-ui-kit.com/live/piece/social-account-analytics?piece=social-account-analytics

## Install

```bash
agentic-ui add social-account-analytics
npx shadcn@4.17.0 add @agentic-ui/social-account-analytics
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** range-tabs, account-filter, period-comparison, dual-series-trend, account-breakdown, sortable-top-posts
- **Intents:** compare-over-time, show-composition
- **Suits domains:** social, analytics, saas, media
- **Interaction:** range-tabs, account-filter, period-comparison, dual-series-trend, account-breakdown, sortable-top-posts
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Multi-account social analytics, Channel performance overview for marketing
- **Avoid when:** Real-time streaming metrics, Attribution modelling
- **Preserve when adapting:** period-comparison, keyboard-readable-chart
- **Replace when adapting:** metrics, domain-copy, fixture-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Social Media Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-chart-heatmap-matrix, lib-collab-announcement-composer, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Social Account Feeds

Social inbox per connected account.

- id: `social-account-feeds`
- Page: https://agentic-ui-kit.com/components/social-account-feeds
- Live preview: https://agentic-ui-kit.com/live/piece/social-account-feeds?piece=social-account-feeds

## Install

```bash
agentic-ui add social-account-feeds
npx shadcn@4.17.0 add @agentic-ui/social-account-feeds
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** column-per-account, needs-reply-filter, inline-reply, like-toggle, mark-handled
- **Intents:** communicate, monitor-live
- **Suits domains:** social, crm, operations, saas
- **Interaction:** column-per-account, needs-reply-filter, inline-reply, like-toggle, mark-handled
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Social inbox per connected account, Support mentions triage
- **Avoid when:** Threaded long-form discussions
- **Preserve when adapting:** triage-states, per-network-reply-limits
- **Replace when adapting:** domain-copy, fixture-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Social Media Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-collab-announcement-composer, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Social Best Time Heatmap

Best time to post by network.

- id: `social-best-time-heatmap`
- Page: https://agentic-ui-kit.com/components/social-best-time-heatmap
- Live preview: https://agentic-ui-kit.com/live/piece/social-best-time-heatmap?piece=social-best-time-heatmap

## Install

```bash
agentic-ui add social-best-time-heatmap
npx shadcn@4.17.0 add @agentic-ui/social-best-time-heatmap
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** hours-by-weekday-heatmap, network-filter, top-slots, schedule-from-cell
- **Intents:** compare-over-time, explore-detail
- **Suits domains:** social, analytics, saas, ecommerce
- **Interaction:** hours-by-weekday-heatmap, network-filter, top-slots, schedule-from-cell
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Best time to post by network, Best send time for email campaigns
- **Avoid when:** Fewer than a few weeks of activity data, Metrics without weekly seasonality
- **Preserve when adapting:** hours-days-grid, keyboard-grid-navigation
- **Replace when adapting:** metric, domain-copy
- **Adaptation effort:** medium
- **Coupling:** low
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 8/10, code 8/10
- **Uses primitives:** card
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Social Media Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-chart-heatmap-matrix, lib-collab-announcement-composer, lib-motion-micro-interactions, lib-primitives


### Social Content Calendar

Social content calendar across accounts.

- id: `social-content-calendar`
- Page: https://agentic-ui-kit.com/components/social-content-calendar
- Live preview: https://agentic-ui-kit.com/live/piece/social-content-calendar?piece=social-content-calendar

## Install

```bash
agentic-ui add social-content-calendar
npx shadcn@4.17.0 add @agentic-ui/social-content-calendar
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** month-week-agenda, drag-reschedule, keyboard-reschedule, past-time-guard, status-filter, post-detail-modal
- **Intents:** manage-collection, create-edit
- **Suits domains:** social, media, operations, project-management
- **Interaction:** month-week-agenda, drag-reschedule, keyboard-reschedule, past-time-guard, status-filter, post-detail-modal
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Social content calendar across accounts, Editorial calendar for a blog or newsletter
- **Avoid when:** Hour-level resource booking with capacity
- **Preserve when adapting:** status-color-mapping, reschedule-guards
- **Replace when adapting:** domain-copy, fixture-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 7/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Social Media Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-calendar-month-week-agenda, lib-collab-announcement-composer, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Social Media Manager App Shell

Sidebar shell for a publishing tool.

- id: `social-media-manager-app-shell`
- Page: https://agentic-ui-kit.com/components/social-media-manager-app-shell
- Live preview: https://agentic-ui-kit.com/live/fixture/social-media-manager-app-shell?piece=social-media-manager-app-shell

## Install

```bash
agentic-ui add social-media-manager-app-shell
npx shadcn@4.17.0 add @agentic-ui/social-media-manager-app-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sidebar-navigation, connected-accounts-list, motion-settings, theme-toggle, skip-link, live-announcer
- **Intents:** navigate
- **Suits domains:** social, saas, analytics, operations
- **Interaction:** sidebar-navigation, connected-accounts-list, motion-settings, theme-toggle, skip-link, live-announcer
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Sidebar shell for a publishing tool
- **Avoid when:** Marketing sites without app navigation
- **Preserve when adapting:** skip-link, live-region
- **Replace when adapting:** brand, navigation-items
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** badge
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Social Media Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-collab-announcement-composer, lib-motion, lib-motion-micro-interactions, lib-primitives, lib-tokens


### Social Post Composer

Brand posts across microblog, photo and video accounts.

- id: `social-post-composer`
- Page: https://agentic-ui-kit.com/components/social-post-composer
- Live preview: https://agentic-ui-kit.com/live/piece/social-post-composer?piece=social-post-composer

## Install

```bash
agentic-ui add social-post-composer
npx shadcn@4.17.0 add @agentic-ui/social-post-composer
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** multi-account-targeting, per-network-character-limits, variable-interpolation, per-network-preview, queue-schedule-publish, best-time-suggestions
- **Intents:** create-edit, communicate
- **Suits domains:** social, saas, ecommerce, analytics
- **Interaction:** multi-account-targeting, per-network-character-limits, variable-interpolation, per-network-preview, queue-schedule-publish, best-time-suggestions
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Brand posts across microblog, photo and video accounts, Product launch announcement tailored per channel
- **Avoid when:** Single-channel long-form editorial writing, Real network publishing without an adapter
- **Preserve when adapting:** per-network-validation, preview-per-account, keyboard-controls
- **Replace when adapting:** domain-copy, networks-and-limits, fixture-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, label
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Social Media Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-collab-announcement-composer, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Social Publishing Queue

Buffer-style social posting queue.

- id: `social-publishing-queue`
- Page: https://agentic-ui-kit.com/components/social-publishing-queue
- Live preview: https://agentic-ui-kit.com/live/piece/social-publishing-queue?piece=social-publishing-queue

## Install

```bash
agentic-ui add social-publishing-queue
npx shadcn@4.17.0 add @agentic-ui/social-publishing-queue
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** ordered-queue, weekly-posting-slots, slot-auto-assignment, pause-resume, failed-post-retry, keyboard-reorder
- **Intents:** manage-collection, track-status
- **Suits domains:** social, operations, saas, media
- **Interaction:** ordered-queue, weekly-posting-slots, slot-auto-assignment, pause-resume, failed-post-retry, keyboard-reorder
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Buffer-style social posting queue, Newsletter or release queue with weekly send windows
- **Avoid when:** Exact-time-only scheduling without slots, Real-time job orchestration
- **Preserve when adapting:** slot-assignment-rules, reorder-keyboard-model
- **Replace when adapting:** domain-copy, slot-defaults, fixture-adapter
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Social Media Manager (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-collab-announcement-composer, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Support Analytics Overview

First response and CSAT per period.

- id: `support-analytics-overview`
- Page: https://agentic-ui-kit.com/components/support-analytics-overview
- Live preview: https://agentic-ui-kit.com/support-desk/analytics?piece=support-analytics-overview

## Install

```bash
agentic-ui add support-analytics-overview
npx shadcn@4.17.0 add @agentic-ui/support-analytics-overview
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** first-response-median, resolution-median, csat, sla-compliance, daily-volume, csat-distribution, frt-by-priority-vs-target, channel-mix, agent-leaderboard, range-tabs, channel-filter
- **Intents:** compare-over-time, show-composition, track-status
- **Suits domains:** support, operations, saas, devops-status
- **Interaction:** tabs, select, tooltip
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** first response and CSAT per period, SLA compliance by priority, created vs resolved volume per day
- **Avoid when:** ad-hoc BI with free-form queries, fewer than 7 days of data
- **Preserve when adapting:** kpi-then-trend-hierarchy, target-markers
- **Replace when adapting:** metrics, targets, domain-copy
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, table, avatar
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** form-async-combobox, lib-feedback-notification-center, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Support Assisted Reply Composer

Ticket reply with templates.

- id: `support-assisted-reply-composer`
- Page: https://agentic-ui-kit.com/components/support-assisted-reply-composer
- Live preview: https://agentic-ui-kit.com/live/fixture/support-ticket-workspace?piece=support-assisted-reply-composer&within=support-ticket-workspace&mark=textarea

## Install

```bash
agentic-ui add support-assisted-reply-composer
npx shadcn@4.17.0 add @agentic-ui/support-assisted-reply-composer
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** canned-slash-commands, rules-based-assist, teammate-mentions, public-internal-toggle, status-after-send, template-placeholders, char-count
- **Intents:** communicate, generate-content, create-edit
- **Suits domains:** support, crm, hr, saas
- **Interaction:** slash-commands, mentions, toggle, keyboard-submit
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** ticket reply with templates, internal note with @mentions, assisted draft that can be reviewed before sending
- **Avoid when:** streaming LLM chat (use ai-streaming-message), long document editors
- **Preserve when adapting:** review-before-send, slash-templates
- **Replace when adapting:** templates, assist-rules, copy
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, badge
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** ai-prompt-composer, lib-primitives


### Support Canned Responses

Predefined support responses.

- id: `support-canned-responses`
- Page: https://agentic-ui-kit.com/components/support-canned-responses
- Live preview: https://agentic-ui-kit.com/support-desk/settings?piece=support-canned-responses

## Install

```bash
agentic-ui add support-canned-responses
npx shadcn@4.17.0 add @agentic-ui/support-canned-responses
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** list, search, create, edit, delete-confirm, shortcut-validation, placeholder-preview, usage-count
- **Intents:** configure, create-edit, manage-collection
- **Suits domains:** support, crm, hr, saas
- **Interaction:** search, modal-form, confirm
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** predefined support responses, internal email templates, helpdesk macros
- **Avoid when:** full HTML email editor (use collab-email-template-editor)
- **Preserve when adapting:** live-preview, shortcut-contract
- **Replace when adapting:** placeholders, categories
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, badge, button
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-feedback-notification-center, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Support Customer Directory

Support contacts and companies.

- id: `support-customer-directory`
- Page: https://agentic-ui-kit.com/components/support-customer-directory
- Live preview: https://agentic-ui-kit.com/support-desk/contacts?piece=support-customer-directory

## Install

```bash
agentic-ui add support-customer-directory
npx shadcn@4.17.0 add @agentic-ui/support-customer-directory
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** contacts-table, companies-table, search, account-health, csat-per-company, ticket-drilldown, add-contact, create-company-inline
- **Intents:** manage-collection, explore-detail, create-edit
- **Suits domains:** support, crm, saas, billing
- **Interaction:** tabs, search, select-row, modal-form, combobox
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** support contacts and companies, B2B customer directory with account health, accounts with CSAT and open tickets
- **Avoid when:** Pipeline CRM with opportunities (use blueprint-crm)
- **Preserve when adapting:** contact-company-split, drilldown-panel
- **Replace when adapting:** columns, domain-copy, health-rules
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** table, card, badge, button, avatar, label, popover
- **npm dependencies:** lucide-react, cmdk
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** form-async-combobox, lib-feedback-notification-center, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Support Desk App Shell

Helpdesk shell with a notification center.

- id: `support-desk-app-shell`
- Page: https://agentic-ui-kit.com/components/support-desk-app-shell
- Live preview: https://agentic-ui-kit.com/live/fixture/support-desk-app-shell?piece=support-desk-app-shell

## Install

```bash
agentic-ui add support-desk-app-shell
npx shadcn@4.17.0 add @agentic-ui/support-desk-app-shell
```

## Metadata

- **Level:** layout
- **Category:** layout
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** sidebar-nav, mobile-nav, skip-link, notification-center, motion-settings, theme-toggle, variant-badge, live-announcer
- **Intents:** navigate, monitor-live
- **Suits domains:** support, operations, saas, devops-status
- **Interaction:** navigation, popover, settings-panel
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** helpdesk shell with a notification center, internal console with SLA alerts
- **Avoid when:** marketing sites, apps with deep navigation of >2 levels
- **Preserve when adapting:** skip-link, global-announcer, notification-entry-point
- **Replace when adapting:** nav-items, branding
- **Adaptation effort:** low
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** badge, button, card, input, avatar, tooltip, separator
- **npm dependencies:** lucide-react, next-themes
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-feedback-notification-center, lib-motion, lib-motion-micro-interactions, lib-primitives, lib-tokens


### Support Routing Rules

Ticket routing by channel, plan or subject.

- id: `support-routing-rules`
- Page: https://agentic-ui-kit.com/components/support-routing-rules
- Live preview: https://agentic-ui-kit.com/support-desk/settings?piece=support-routing-rules

## Install

```bash
agentic-ui add support-routing-rules
npx shadcn@4.17.0 add @agentic-ui/support-routing-rules
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** ordered-rules, enable-toggle, reorder, add-rule, delete-rule, live-tester, first-match-wins
- **Intents:** configure, execute-flow
- **Suits domains:** support, operations, devops-status, crm
- **Interaction:** toggle, reorder, modal-form, live-preview
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** ticket routing by channel, plan or subject, automatic assignment to teams, escalation rules
- **Avoid when:** workflows with branches and waits (use ai-workflow-canvas)
- **Preserve when adapting:** ordered-first-match, inline-tester
- **Replace when adapting:** fields, destinations
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 8/10, code 8/10
- **Uses primitives:** card, button
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-feedback-notification-center, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Support Ticket Inbox

Ticket inbox with views by status and SLA.

- id: `support-ticket-inbox`
- Page: https://agentic-ui-kit.com/components/support-ticket-inbox
- Live preview: https://agentic-ui-kit.com/support-desk/tickets?piece=support-ticket-inbox

## Install

```bash
agentic-ui add support-ticket-inbox
npx shadcn@4.17.0 add @agentic-ui/support-ticket-inbox
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** status-views, sla-filter, sla-countdown, assignee-filter, search, bulk-assign, bulk-solve, preview-pane, pagination, new-ticket-modal, routing-preview, async-requester-search
- **Intents:** manage-collection, track-status, navigate
- **Suits domains:** support, operations, devops-status, crm, project-management
- **Interaction:** tabs, filters, bulk-select, preview, modal-form
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** ticket inbox with views by status and SLA, issue queue with bulk assignment, inbox for internal requests (IT, HR)
- **Avoid when:** fewer than 10 items without statuses, analytical tables with many numeric columns
- **Preserve when adapting:** sla-first-ordering, status-views, preview-pane
- **Replace when adapting:** domain-copy, sla-targets, columns
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 8/10, code 8/10
- **Uses primitives:** button, card, checkbox, avatar, popover, badge
- **npm dependencies:** lucide-react, cmdk
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** form-async-combobox, lib-feedback-notification-center, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-motion-modal-enter, lib-primitives, lib-tokens, motion-skeleton-shimmer, motion-tab-indicator


### Support Ticket Workspace

Ticket detail with conversation and timeline.

- id: `support-ticket-workspace`
- Page: https://agentic-ui-kit.com/components/support-ticket-workspace
- Live preview: https://agentic-ui-kit.com/live/fixture/support-ticket-workspace?piece=support-ticket-workspace

## Install

```bash
agentic-ui add support-ticket-workspace
npx shadcn@4.17.0 add @agentic-ui/support-ticket-workspace
```

## Metadata

- **Level:** page
- **Category:** page
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** conversation-thread, internal-notes, assisted-reply, activity-timeline, audit-log, customer-sidebar, status-actions, assignee-combobox, free-text-tags, related-tickets
- **Intents:** explore-detail, communicate, audit-trail
- **Suits domains:** support, crm, operations, devops-status
- **Interaction:** tabs, composer, combobox, status-actions, filters
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** ticket detail with conversation and timeline, customer case with history and audit, incident with internal notes and status changes
- **Avoid when:** high-volume real-time chat, long documents with collaborative editing
- **Preserve when adapting:** thread-plus-sidebar, internal-vs-public, timeline-and-audit-split
- **Replace when adapting:** domain-copy, sidebar-fields, event-codes
- **Adaptation effort:** medium
- **Coupling:** medium
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 8/10
- **Uses primitives:** avatar, badge, button, card, label, popover
- **npm dependencies:** lucide-react, cmdk
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Support Desk (blueprint)
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** ai-prompt-composer, form-async-combobox, lib-motion, lib-motion-list, lib-motion-micro-interactions, lib-primitives, motion-skeleton-shimmer, motion-tab-indicator


### Table Inline Editing

Quick editing of the product catalog and inventory without opening modals.

- id: `table-inline-editing`
- Page: https://agentic-ui-kit.com/components/table-inline-editing
- Live preview: https://agentic-ui-kit.com/live/component/table-inline-editing

## Install

```bash
agentic-ui add table-inline-editing
npx shadcn@4.17.0 add @agentic-ui/table-inline-editing
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** inline-cell-editing, per-cell-validation, dirty-state-tracking, cell-type-renderers, revert-cell-and-row, batch-save, keyboard-navigation, gridcell-aria, empty-state-fallback, error-state-fallback, dark-mode
- **Intents:** create-edit, manage-collection, configure
- **Suits domains:** saas, operations, crm, finance, devtools
- **Interaction:** click-to-edit, keyboard-navigation, inline-validation, batch-save, discard-changes
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** quick editing of the product catalog and inventory without opening modals, updating prices and quantities in financial orders in real time, management of team members and roles in a SaaS console, adjusting deployment variable configuration in a devtools panel
- **Avoid when:** long, highly complex step-by-step sequential forms, static read-only views with no editing capability
- **Preserve when adapting:** inline-edit-lifecycle, per-cell-validation-model, dirty-state-tracking, keyboard-cell-navigation
- **Replace when adapting:** schema-columns, cell-validators, domain-entity-records, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** table, button, input, badge
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0


### Table Pivot Basic

Sales pivot table grouped by category and region for profitability analysis.

- id: `table-pivot-basic`
- Page: https://agentic-ui-kit.com/components/table-pivot-basic
- Live preview: https://agentic-ui-kit.com/live/component/table-pivot-basic

## Install

```bash
agentic-ui add table-pivot-basic
npx shadcn@4.17.0 add @agentic-ui/table-pivot-basic
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** column-grouping, drag-and-drop-grouping, multi-level-hierarchy, group-aggregations, expand-collapse-tree, column-sorting, text-search-filter, keyboard-reorder, grand-total-summary, responsive-scroll, empty-state-fallback, error-state-fallback, dark-mode
- **Intents:** compare-over-time, manage-collection, show-composition, explore-detail
- **Suits domains:** saas, finance, analytics, operations, ecommerce
- **Interaction:** drag, click, keyboard-navigation, sort
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** sales pivot table grouped by category and region for profitability analysis, operations matrix with cost and revenue aggregation by channel and quarter, analytical breakdown of units sold and percentage margins by product segment, SaaS metrics explorer with grand totals and an expandable multi-level hierarchy
- **Avoid when:** simple flat lists with fewer than 5 records and no grouping dimensions, data entry forms or step-by-step wizards
- **Preserve when adapting:** group-tree-model, aggregation-pipeline, dropzone-interaction-model, expand-collapse-state-handling
- **Replace when adapting:** column-definitions, data-records, custom-formatters, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** table, button, badge
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0