Skip to content

Component installs need the registry setup— the Base UI shadcn project, the @vegastack namespace and the Cloudflare Access service token.

DesignVegaStack Design

DesignVegaStack Design

Introduction Install From VegaStack Registry

Guides

Quickstart Migrating to the shadcn reset Registry access & auth Agent skills Working with components Building a multi-step flow Markdown Provider setup Theming, dark mode & tokens Client projects Production checklist Troubleshooting

Foundations

Design Principles Colors Typography Spacing Page layout Lists and tables Radius Elevation Motion Interaction patterns Icons Empty states Accessibility Theming & dark mode

Components

Buttons & Actions

Button Button Group Copy Button Toggle Toggle Group

Inputs & Controls

Input Input Group Search Input Password Input Input OTP Textarea Number Field Chip Input Auto Save Input Dropzone Upload Dialog Upload Panel Avatar Picker Text Edit Template Editor Formula Input Field Field Grid Editable Cell Field Cell Label Slider Checkbox Radio Group Switch Select Native Select Combobox Searchable Select People Picker Record Picker Destination Picker Field Type Picker Field Type Link Step Country Select Region Select Date Picker Calendar Color Picker Choice Card Space Picker Emoji Picker

Overlays

Dialog Alert Dialog Sheet Drawer Record Peek Responsive Dialog Share Dialog Popover Hover Card Tooltip Info Hint

Menus & Commands

Dropdown Menu Permission Menu Context Menu Menubar Command Menu Command Search

Navigation

Stepper Multi-Step Form Breadcrumb Breadcrumb Cascade Navigation Menu Pagination Tabs Route Tabs Sidebar Help Menu Sidebar Menu Flyout Folder Tree Table of Contents Page Header

Layout & Structure

Direction Aspect Ratio Board Board Card Card Separator Scroll Area Resizable App Shell Record Layout Document Layout Comments Activity Feed Comment Margin Version List Version Compare Diff View Reactions Settings Layout Settings Row

Data Display

Timeline Sortable List Table Data List Data List Pager Cursor Pager Load More Media Card Thumbnail View Tabs Data Grid Block Header Recent Strip Property List Record Aside Record Header Person Hover Card Access Chip Member List Meta Line Entry List Value Change File Card Record Chip Block Toolbar Task Inline Record List Item Chart Animated Number List Toolbar Filter Row Add Filter Menu Sort Menu Display Menu Floating Cell Editor Dropdown Menu Form Option List Editor Filter Builder Avatar Image QR Code File Viewer Carousel Media Player Controls Audio Player Level Meter Video Player Badge Chip Tag Group Stat Accordion Collapsible

Feedback & Status

Action Bar Alert Announcement Banner Toast Provider Priority Icon Progress Spinner Skeleton Status Icon Status Line Empty Inbox Notification Bell Shortcut Overlay

Content & Typography

Inline Chip Markdown View Code Block Mermaid Block Terminal Kbd Truncated Text Dates & times

Chat & Communication

Marker Message Bubble Attachment Tool Call Chip Cited List Approval Card Agent Edit Banner Agent Panel Delegate Popover Message Scroller Transcript Questionnaire Icon Picker Icon Glyph

Blocks

Auth

Shell

App pages

list-page-01 settings-01 settings-02 board-01 issue-detail-01 page-editor-01 share-01 notifications-01 command-search-01 review-split-01 library-01 status-pages-01

Email

Charts

charts-area charts-bar charts-line charts-pie charts-radar charts-radial charts-tooltip

Utilities

Shimmer Scroll Fade Motion helpers

Releases

Animated icon gallery

Browse and replay every lucide-animated icon available through the VegaStack registry.

Return to icon guidance and installation

Functional — `Icon` (lucide)

Check

Search

Settings

Bell

Heart

Star

Trash

Download

Brand — `BrandIcon` (thesvg)

GitHub

Slack

Figma

Motion — `AnimatedIcon` (lucide-animated) · hover or focus the card to animate

Icons 1–50

Icons 51–100

Icons 101–150

Icons 151–200

Icons 201–250

Icons 251–300

Icons 301–350

Icons 351–400

Icons 401–450

Icons 451–467