Theme

Introduction Installation Principles Claude Code Changelog

Foundations

Themes Colors Typography Shape & motion Signature

Components

Overview Accordion Activity Log Alert Alert Dialog Aspect Ratio Attachment Avatar Badge Breadcrumb Bubble Button Button Group Calendar Card Carousel Chart Checkbox Code Block Collapsible Combobox Command Context Menu Date Time Picker Description List Dialog Diff Direction Drawer Dropdown Menu Empty Entity Picker Field Hover Card Input Input Group Input OTP Item Kbd Label Marker Menubar Message Native Select Navigation Menu Number Ticker Pagination Person Popover Progress Radio Group Resizable Scroll Area Select Separator Sheet Sidebar Skeleton Slider Sonner Spinner Switch Table Tabs Textarea Toast Toggle Toggle Group Tooltip Trace Tree

Patterns

Data table Server data table Forms List page Detail page Settings page Destructive action

Maintaining

Upstream & releases

Overview

Every component in @zynactra/ui, each with a live preview, its code, usage and guidelines.

All components are shadcn/ui on Base UI, synced from upstream and styled by the active theme. Import any of them as @zynactra/ui/<name>.

accordion activity log alert alert dialog aspect ratio attachment avatar badge breadcrumb bubble button button group calendar card carousel chart checkbox code block collapsible combobox command context menu date time picker description list dialog diff direction drawer dropdown menu empty entity picker field hover card input input group input otp item kbd label marker menubar message native select navigation menu number ticker pagination person popover progress radio group resizable scroll area select separator sheet sidebar skeleton slider sonner spinner switch table tabs textarea toast toggle toggle group tooltip trace tree

Signature

The motion and detail that make a screen read as Zynactra. Precise and engineered, with heat.

Accordion

Stacked sections that expand one at a time. For FAQs and long settings pages, not for primary content.