# Squad UI

> Squad UI is a private, shadcn-style component library — primitives, blocks, and app shells delivered through a CLI/registry. Each link below points to the full markdown documentation for that primitive (Hero, Installation, Usage, Composition, Examples, API Reference).

Source: https://sdk-components.thesqd.com  ·  Index regenerated on every request from `src/lib/nav-data.ts`.

## Get Started

- [Installation](https://sdk-components.thesqd.com/installation.md): Set up Squad SDK in a Next.js + Tailwind v4 project and install components from the registry.
- [Typography](https://sdk-components.thesqd.com/typography.md): Albra heading + Inter body type system used across the SDK.
- [Icons](https://sdk-components.thesqd.com/icons.md): Lucide icons + the FeaturedIcon component for brand-tinted feature tiles. · Manifests: [featured-icon.json](https://sdk-components.thesqd.com/r/featured-icon.json)

## Components

- [AI voice orb](https://sdk-components.thesqd.com/ai-voice-orb.md): An animated Siri-style orb for AI assistant interfaces. · Manifests: [ai-voice-orb.json](https://sdk-components.thesqd.com/r/ai-voice-orb.json)
- [Alert](https://sdk-components.thesqd.com/alerts.md): Displays a callout for user attention. · Manifests: [alert.json](https://sdk-components.thesqd.com/r/alert.json)
- [Avatar](https://sdk-components.thesqd.com/avatars.md): Rounded image or initials representing a user, with optional badge and group cluster. · Manifests: [avatar.json](https://sdk-components.thesqd.com/r/avatar.json)
- [Badge](https://sdk-components.thesqd.com/badges.md): Compact labels for statuses, counts, and tags. · Manifests: [badge.json](https://sdk-components.thesqd.com/r/badge.json)
- [Breadcrumb](https://sdk-components.thesqd.com/breadcrumbs.md): Displays the path to the current resource using a hierarchy of links. · Manifests: [breadcrumb.json](https://sdk-components.thesqd.com/r/breadcrumb.json)
- [Button](https://sdk-components.thesqd.com/buttons.md): Trigger actions with consistent variants and sizes. · Manifests: [button.json](https://sdk-components.thesqd.com/r/button.json)
- [Card](https://sdk-components.thesqd.com/cards.md): Surface for grouping related content with header, body, and footer slots. · Manifests: [card.json](https://sdk-components.thesqd.com/r/card.json)
- [Charts](https://sdk-components.thesqd.com/charts.md): Data-display primitives for dashboards and KPI surfaces. · Manifests: [stat.json](https://sdk-components.thesqd.com/r/stat.json), [chart.json](https://sdk-components.thesqd.com/r/chart.json)
- [Checkbox](https://sdk-components.thesqd.com/checkboxes.md): Binary toggle that supports controlled, uncontrolled, and disabled states. · Manifests: [checkbox.json](https://sdk-components.thesqd.com/r/checkbox.json)
- [Code block](https://sdk-components.thesqd.com/code-block.md): Shadcn-style code surface with header strip, copy, and collapse. · Manifests: [code-block.json](https://sdk-components.thesqd.com/r/code-block.json)
- [Collapsible](https://sdk-components.thesqd.com/collapsible.md): An interactive section that expands and collapses to reveal additional content. · Manifests: [collapsible.json](https://sdk-components.thesqd.com/r/collapsible.json), [collapsible-showcase.json](https://sdk-components.thesqd.com/r/collapsible-showcase.json)
- [Colors](https://sdk-components.thesqd.com/colors.md): Brand palette swatches and the color-picker primitive. · Manifests: [color-swatch.json](https://sdk-components.thesqd.com/r/color-swatch.json), [color-picker.json](https://sdk-components.thesqd.com/r/color-picker.json)
- [Comment](https://sdk-components.thesqd.com/comments.md): Card variant for a single comment — avatar, name, and timestamp inline. · Manifests: [comment.json](https://sdk-components.thesqd.com/r/comment.json)
- [Command menu](https://sdk-components.thesqd.com/command-menu.md): Searchable command palette with grouped items and shortcuts. · Manifests: [command.json](https://sdk-components.thesqd.com/r/command.json)
- [Data grid](https://sdk-components.thesqd.com/data-grid.md): Filterable, sortable, paginated table primitive. · Manifests: [data-grid.json](https://sdk-components.thesqd.com/r/data-grid.json)
- [Date & time picker](https://sdk-components.thesqd.com/date-time.md): One DatePicker with single/range modes, natural-language input, and paired time picker. · Manifests: [date-picker.json](https://sdk-components.thesqd.com/r/date-picker.json)
- [Description list](https://sdk-components.thesqd.com/description-list.md): Term/details list for review screens, summary cards, and metadata blocks. · Manifests: [description-list.json](https://sdk-components.thesqd.com/r/description-list.json)
- [Drawer](https://sdk-components.thesqd.com/drawer.md): A panel that slides in from the edge of the screen. · Manifests: [drawer.json](https://sdk-components.thesqd.com/r/drawer.json)
- [Dropdown menu](https://sdk-components.thesqd.com/dropdown-menu.md): Displays a menu of actions or options triggered by a button. · Manifests: [dropdown-menu.json](https://sdk-components.thesqd.com/r/dropdown-menu.json), [dropdown-menu-showcase.json](https://sdk-components.thesqd.com/r/dropdown-menu-showcase.json)
- [Empty](https://sdk-components.thesqd.com/empty.md): Empty-state surface for lists, search results, and inboxes. · Manifests: [empty.json](https://sdk-components.thesqd.com/r/empty.json)
- [Field label](https://sdk-components.thesqd.com/field-label.md): Label, description, and error treatment stacked above a form control. · Manifests: [field-label.json](https://sdk-components.thesqd.com/r/field-label.json)
- [File upload](https://sdk-components.thesqd.com/file-uploads.md): Drag-and-drop file upload with FilePond + S3 wiring. · Manifests: [file-upload.json](https://sdk-components.thesqd.com/r/file-upload.json)
- [Glass](https://sdk-components.thesqd.com/glass.md): A liquid-glass surface that refracts whatever is painted behind it — an SVG displacement-map backdrop-filter with dispersion, a 3D bevel, and grain. · Manifests: [glass.json](https://sdk-components.thesqd.com/r/glass.json), [glass-showcase.json](https://sdk-components.thesqd.com/r/glass-showcase.json)
- [Input](https://sdk-components.thesqd.com/inputs.md): Text fields, textareas, number, file-size, tag, and duration inputs. · Manifests: [text-field.json](https://sdk-components.thesqd.com/r/text-field.json), [textarea-field.json](https://sdk-components.thesqd.com/r/textarea-field.json), [number-input.json](https://sdk-components.thesqd.com/r/number-input.json), [file-size-input.json](https://sdk-components.thesqd.com/r/file-size-input.json), [tags-input.json](https://sdk-components.thesqd.com/r/tags-input.json), [duration-input.json](https://sdk-components.thesqd.com/r/duration-input.json), [member-number-input.json](https://sdk-components.thesqd.com/r/member-number-input.json)
- [Item list](https://sdk-components.thesqd.com/item-list.md): Card-per-row list with a leading icon, auto columns, inline actions, and navigation. · Manifests: [item-list.json](https://sdk-components.thesqd.com/r/item-list.json)
- [Kbd](https://sdk-components.thesqd.com/kbd.md): Displays a keyboard key or shortcut combination. · Manifests: [kbd.json](https://sdk-components.thesqd.com/r/kbd.json), [kbd-showcase.json](https://sdk-components.thesqd.com/r/kbd-showcase.json)
- [Modal](https://sdk-components.thesqd.com/modals.md): Dialog and alert-dialog overlays. · Manifests: [dialog.json](https://sdk-components.thesqd.com/r/dialog.json)
- [Notification](https://sdk-components.thesqd.com/notifications.md): Pill-shaped Sonner toasts with tonal variants. · Manifests: [notification.json](https://sdk-components.thesqd.com/r/notification.json)
- [Pagination](https://sdk-components.thesqd.com/pagination.md): Paginator with prev/next, ellipsized page numbers, and custom labels. · Manifests: [pagination.json](https://sdk-components.thesqd.com/r/pagination.json)
- [PDF viewer](https://sdk-components.thesqd.com/pdf-viewer.md): Inline PDF viewer with toolbar, sidebar, search, thumbnails, and zoom controls. · Manifests: [pdf-viewer.json](https://sdk-components.thesqd.com/r/pdf-viewer.json)
- [Popover](https://sdk-components.thesqd.com/popovers.md): Floating panel anchored to a trigger. · Manifests: [popover.json](https://sdk-components.thesqd.com/r/popover.json)
- [Progress](https://sdk-components.thesqd.com/progress.md): Linear progress indicator with optional label. · Manifests: [progress.json](https://sdk-components.thesqd.com/r/progress.json)
- [Multi select](https://sdk-components.thesqd.com/multi-select.md): One <MultiSelect /> with two type variants — cards (thumbnail rows) or chip-group (h-9 pills). · Manifests: [multi-select.json](https://sdk-components.thesqd.com/r/multi-select.json), [multi-select-showcase.json](https://sdk-components.thesqd.com/r/multi-select-showcase.json)
- [Radio group](https://sdk-components.thesqd.com/radios.md): Single-select group with basic, card, chip, and plan layouts. · Manifests: [radio-group.json](https://sdk-components.thesqd.com/r/radio-group.json)
- [Rich text editor](https://sdk-components.thesqd.com/rich-text.md): Tiptap-based editor with toolbar and length controls, plus a flat inline-markdown variant. · Manifests: [rich-text-editor.json](https://sdk-components.thesqd.com/r/rich-text-editor.json), [rich-text-editor-inline.json](https://sdk-components.thesqd.com/r/rich-text-editor-inline.json)
- [Select](https://sdk-components.thesqd.com/selects.md): Select + searchable Combobox + multi-select — one component, flat props. · Manifests: [select.json](https://sdk-components.thesqd.com/r/select.json)
- [Skeleton](https://sdk-components.thesqd.com/skeleton.md): Pulse-animated placeholder for loading states. · Manifests: [skeleton.json](https://sdk-components.thesqd.com/r/skeleton.json)
- [Slider](https://sdk-components.thesqd.com/slider.md): Lets users select a value or range by dragging a handle along a track. · Manifests: [slider.json](https://sdk-components.thesqd.com/r/slider.json)
- [Spinner](https://sdk-components.thesqd.com/spinner.md): Animated loading indicator with size and color variants. · Manifests: [spinner.json](https://sdk-components.thesqd.com/r/spinner.json)
- [Stepper](https://sdk-components.thesqd.com/stepper.md): Numbered step indicator for multi-step flows. · Manifests: [stepper.json](https://sdk-components.thesqd.com/r/stepper.json)
- [Switch](https://sdk-components.thesqd.com/switches.md): On/off toggle with size variants. · Manifests: [switch.json](https://sdk-components.thesqd.com/r/switch.json)
- [Tabs](https://sdk-components.thesqd.com/tabs.md): Tabbed sections of content displayed one at a time. · Manifests: [tabs.json](https://sdk-components.thesqd.com/r/tabs.json)
- [Toolbar](https://sdk-components.thesqd.com/toolbar.md): Compact action bar for grouping buttons, toggles, and helpers. · Manifests: [toolbar.json](https://sdk-components.thesqd.com/r/toolbar.json)
- [Tooltip](https://sdk-components.thesqd.com/tooltips.md): Floating panel that appears on hover or focus. · Manifests: [tooltip.json](https://sdk-components.thesqd.com/r/tooltip.json)
- [Video player](https://sdk-components.thesqd.com/video-player.md): Headless video player with playback, volume, scrub, speed, picture-in-picture, captions, and poster. · Manifests: [video-player.json](https://sdk-components.thesqd.com/r/video-player.json)

## Blocks

- [Activity feed](https://sdk-components.thesqd.com/blocks/activity-feed.md): Chronological list of team events with avatars, action verbs, and relative timestamps. · Manifests: [activity-feed-showcase.json](https://sdk-components.thesqd.com/r/activity-feed-showcase.json)
- [Assignees](https://sdk-components.thesqd.com/blocks/assignees.md): Collapsible roster card — avatar on the left, name on the right, one row per teammate. · Manifests: [assignees.json](https://sdk-components.thesqd.com/r/assignees.json)
- [Audience selection](https://sdk-components.thesqd.com/blocks/audience-selection.md): Searchable card grid for picking a project's primary audience, with a drawer/modal add form. · Manifests: [audience-selection-block.json](https://sdk-components.thesqd.com/r/audience-selection-block.json)
- [Calendly embed](https://sdk-components.thesqd.com/blocks/calendly-embed.md): Inline iframe and popup-button embeds for any public Calendly link. · Manifests: [calendly-embed.json](https://sdk-components.thesqd.com/r/calendly-embed.json)
- [Callout](https://sdk-components.thesqd.com/blocks/callout.md): Dismissible promo card with icon chip, copy, and a single CTA. · Manifests: [callout.json](https://sdk-components.thesqd.com/r/callout.json)
- [Carousel tile radio](https://sdk-components.thesqd.com/blocks/carousel-tile-radio-group.md): Carousel of radio tiles for swipe-driven single-select pickers. · Manifests: [carousel-tile-radio-group.json](https://sdk-components.thesqd.com/r/carousel-tile-radio-group.json)
- [Concept approval](https://sdk-components.thesqd.com/blocks/concept-approval.md): Review surface for a round of concepts — version chip, file carousel, action buttons, and a POST-backed comment thread. · Manifests: [concept-approval.json](https://sdk-components.thesqd.com/r/concept-approval.json)
- [Dashboard hero](https://sdk-components.thesqd.com/blocks/dashboard-hero.md): Welcome card with auto-localized date, name greeting, action buttons, and a stats row. · Manifests: [dashboard-hero.json](https://sdk-components.thesqd.com/r/dashboard-hero.json)
- [File size picker](https://sdk-components.thesqd.com/blocks/file-size-picker.md): Multi-select picker for design output sizes with All / My / Recommended filter chips. · Manifests: [file-size-picker-block.json](https://sdk-components.thesqd.com/r/file-size-picker-block.json)
- [Floating continue](https://sdk-components.thesqd.com/blocks/floating-continue.md): Floating bottom action bar with continue / back / clear buttons. · Manifests: [floating-continue.json](https://sdk-components.thesqd.com/r/floating-continue.json)
- [Board view / Manage my queue](https://sdk-components.thesqd.com/blocks/kanban.md): Drag-and-drop kanban board — a status-grouped Board view and a Manage My Queue board with a capped Active column. · Manifests: [kanban-board-showcase.json](https://sdk-components.thesqd.com/r/kanban-board-showcase.json)
- [Image picker](https://sdk-components.thesqd.com/blocks/image-picker.md): Grid of selectable image tiles with checkmark badge, disabled, and error states. · Manifests: [image-picker.json](https://sdk-components.thesqd.com/r/image-picker.json)
- [Login page](https://sdk-components.thesqd.com/blocks/login-page.md): Centered sign-in card built from Card, Input, and Button — with an optional Continue with Google button. · Manifests: [login-page.json](https://sdk-components.thesqd.com/r/login-page.json)
- [Messaging](https://sdk-components.thesqd.com/blocks/messaging.md): Flat chat surface with composer, replies, reactions, drag-and-drop attachments, auto-resize, and a typing indicator. · Manifests: [chat.json](https://sdk-components.thesqd.com/r/chat.json), [messaging.json](https://sdk-components.thesqd.com/r/messaging.json)
- [Page search/filter](https://sdk-components.thesqd.com/blocks/page-search-filter.md): Search input + horizontal pill filter strip with optional grouped divider. · Manifests: [page-search-filter.json](https://sdk-components.thesqd.com/r/page-search-filter.json), [page-search-filter-showcase.json](https://sdk-components.thesqd.com/r/page-search-filter-showcase.json)
- [Panel editor](https://sdk-components.thesqd.com/blocks/panel-editor.md): Side-discriminated panel layout editor with reorderable cards. · Manifests: [panel-editor.json](https://sdk-components.thesqd.com/r/panel-editor.json)
- [Record picker](https://sdk-components.thesqd.com/blocks/record-picker.md): Searchable popover for selecting structured records. · Manifests: [record-picker-block.json](https://sdk-components.thesqd.com/r/record-picker-block.json)
- [Repeatable group](https://sdk-components.thesqd.com/blocks/repeatable-group.md): Repeatable form-field group with collapsible instances. · Manifests: [repeatable-group-block.json](https://sdk-components.thesqd.com/r/repeatable-group-block.json)
- [Section header](https://sdk-components.thesqd.com/blocks/section-header.md): Lightweight form section divider with bold title and optional description. · Manifests: [section-header.json](https://sdk-components.thesqd.com/r/section-header.json)
- [User menu](https://sdk-components.thesqd.com/blocks/user-menu.md): Prop-driven user-profile menu — avatar, name, email, dropdown actions. · Manifests: [user-menu.json](https://sdk-components.thesqd.com/r/user-menu.json)

## App Shell

- [Sidebar 1 (PRF)](https://sdk-components.thesqd.com/blocks/sidebar-1-prf.md): Collapsible sidebar app shell with nav groups and search. · Manifests: [sidebar-1-prf-block.json](https://sdk-components.thesqd.com/r/sidebar-1-prf-block.json)
- [Sidebar 2](https://sdk-components.thesqd.com/blocks/sidebar-2.md): Sidebar shell with NavMain, NavProjects, and NavUser slots. · Manifests: [sidebar-2-block.json](https://sdk-components.thesqd.com/r/sidebar-2-block.json)
- [Sidebar 3](https://sdk-components.thesqd.com/blocks/sidebar-3.md): Notion-style shell (sidebar-10) with rounded top-nav tabs, favorites, and workspaces. · Manifests: [sidebar-3-block.json](https://sdk-components.thesqd.com/r/sidebar-3-block.json)

## Templates

- [Tauri + App Shell 3](https://sdk-components.thesqd.com/templates/tauri-app-shell-3.md): One-line Next.js + Tauri desktop starter built on App Shell 3. · Manifests: [desktop-titlebar.json](https://sdk-components.thesqd.com/r/desktop-titlebar.json)

## Optional

- [Full registry index](https://sdk-components.thesqd.com/r/registry.json): every `registry-item` JSON manifest in one file (shadcn CLI compatible).