Styled dialog: the Bordered set. 5 decorative dialog variations (RingDialog, GlowDialog, GradientBorderDialog, InsetDialog, AccentBarDialog) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Accessible breadcrumb (nav + ordered list) with link, current page, separator and ellipsis parts. Semantic aria-current on the active page.

Usage example for the ai2 breadcrumb component.

Styled breadcrumb: the essentials set. 5 decorative breadcrumb variations (SlashBreadcrumb, ChevronBreadcrumb, PillBreadcrumb, ArrowBreadcrumb, DotBreadcrumb) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Button with a full variant x tone x size matrix: 5 variants (solid, soft, outline, ghost, link), 6 tones (neutral, brand, success, warning, danger, info), 10 sizes (xs-xl plus square icon-xs through icon-xl for icon-only buttons), plus isLoading and asChild. Every tone is driven by ai2 semantic tokens.

Usage example for the ai2 button component.

Joins buttons, inputs and selects into a single segmented control on horizontal or vertical orientation, collapsing inner radii and borders. Exports ButtonGroup, ButtonGroupText, ButtonGroupSeparator.

Usage example for the ai2 button-group component.

Date calendar on react-day-picker v10 styled with ai2 Button and tokens. Single, multiple and range selection, dropdown or label caption, outside days, week numbers. Exports Calendar, CalendarDayButton.

Usage example for the ai2 calendar component.

Styled calendar: the essentials set. 5 decorative calendar variations (ClassicCalendar, RoundedCalendar, CompactCalendar, GlassCalendar, RangeCalendar) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Card surface with 4 variants (outline, elevated, soft, glass) and 3 inset scales (sm, md, lg) that pad header, content and footer together. Parts: Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter.

Styled hover: the Card-accent set. 5 decorative hover variations (BorderHoverCard, GlowHoverCard, RingHoverCard, TopBarHoverCard, FillHoverCard) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled checkbox: the Card set. 5 decorative checkbox variations (CardCheckbox, TileCheckbox, PanelCheckbox, BorderedCheckbox, FilledCardCheckbox) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Usage example for the ai2 card component.

Styled card: the essentials set. 5 decorative card variations (GlassCard, GradientBorderCard, GlowCard, TiltCard, SpotlightCard) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled hover: the Card-layout set. 5 decorative hover variations (HorizontalHoverCard, CompactHoverCard, WideHoverCard, StackedHoverCard, SplitHoverCard) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled hover: the Card-motion set. 5 decorative hover variations (FadeHoverCard, ScaleHoverCard, SlideHoverCard, PopHoverCard, SpringHoverCard) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled hover: the Card-placement set. 5 decorative hover variations (TopHoverCard, BottomHoverCard, LeftHoverCard, RightHoverCard, FollowHoverCard) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled skeleton: the Card set. 5 decorative skeleton variations (MediaSkeleton, ProfileSkeleton, ListSkeleton, GridSkeleton, ArticleSkeleton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled hover: the Card-styled set. 5 decorative hover variations (ProfileHoverCard, GlassHoverCard, PreviewHoverCard, StatsHoverCard, MediaHoverCard) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Styled hover: the Card-tone set. 5 decorative hover variations (PrimaryHoverCard, SuccessHoverCard, WarningHoverCard, DangerHoverCard, InfoHoverCard) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Slider/carousel on embla-carousel-react with horizontal or vertical orientation, keyboard support and prev/next controls built from ai2 Button. Exports Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext.

Usage example for the ai2 carousel component.

Styled carousel: the essentials set. 5 decorative carousel variations (SlideCarousel, FadeCarousel, CardsCarousel, DotsCarousel, AutoCarousel) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Checkbox on radix-ui with 4 tones (neutral, brand, success, danger) and 3 sizes (sm, md, lg). Invalid state via aria-invalid.

Usage example for the ai2 checkbox component.

Styled checkbox: the essentials set. 5 decorative checkbox variations (FillCheckbox, BounceCheckbox, DrawCheckbox, GlowCheckbox, RoundedCheckbox) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled progress: the Circular set. 5 decorative progress variations (RingProgress, ConicProgress, DualRingProgress, DashRingProgress, GlowRingProgress) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled breadcrumb: the Collapse set. 5 decorative breadcrumb variations (EllipsisBreadcrumb, DropdownBreadcrumb, ScrollBreadcrumb, TruncateBreadcrumb, CompactBreadcrumb) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Single expand/collapse region on radix-ui. Exports Collapsible, CollapsibleTrigger, CollapsibleContent. Unstyled by design so it composes into any layout.

Usage example for the ai2 collapsible component.

Styled collapsible: the essentials set. 5 decorative collapsible variations (SimpleCollapsible, CardCollapsible, GhostCollapsible, PlusCollapsible, PreviewCollapsible) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Searchable single-select built from Popover + Command. Trigger follows the Input contract: 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg), 3 tones (neutral, success, danger). Controlled or uncontrolled via value/defaultValue and onValueChange; options as {value, label} pairs.

Usage example for the ai2 combobox component.

Styled combobox: the essentials set. 5 decorative combobox variations (SimpleCombobox, GlassCombobox, IconCombobox, TagsCombobox, InlineCombobox) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled kbd: the Combo set. 5 decorative kbd variations (ComboKbd, ChainKbd, PlusKbd, SequenceKbd, GroupKbd) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Command palette (cmdk) with fuzzy search, groups, items, shortcuts and a CommandDialog wrapper for a ⌘K experience.

Usage example for the ai2 command component.

Styled command: the essentials set. 5 decorative command variations (SimpleCommand, GroupedCommand, IconCommand, GlassCommand, KbdCommand) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled command: the Compact set. 5 decorative command variations (DenseCommand, MinimalCommand, NarrowCommand, InlineCommand, BareCommand) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled pagination: the Compact set. 5 decorative pagination variations (InputPagination, JumpPagination, RangePagination, SimplePagination, CounterPagination) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled popover: the Compact set. 5 decorative popover variations (MiniPopover, DensePopover, WidePopover, TallPopover, SplitPopover) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled sonner: the Compact set. 5 decorative sonner variations (MinimalToaster, InlineToaster, PillToaster, IconToaster, BareToaster) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled drawer: the Content set. 5 decorative drawer variations (MenuDrawer, FormDrawer, ListDrawer, DetailDrawer, GridDrawer) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled sheet: the Content set. 5 decorative sheet variations (MenuSheet, FormSheet, ListSheet, DetailSheet, SplitSheet) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Right-click menu on radix-ui with items, checkbox and radio items, submenus, labels, separators and shortcuts. Item variant default or danger. Icons work with lucide svg and remixicon i. Exports the full ContextMenu part set.

Usage example for the ai2 context-menu component.