ai2

Styled sheet: the essentials set. 5 decorative sheet variations (RightSheet, LeftSheet, TopSheet, BottomSheet, GlassSheet) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled badges: the Shine set. 5 decorative badges variations (MetallicBadge, NeonBadge, HolographicBadge, GoldBadge, ChromeBadge) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled buttons: the Shiny set. 5 decorative buttons variations (ShimmerButton, SheenButton, MetallicButton, SpotlightButton, HolographicButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled menubar: the Shortcut set. 5 decorative menubar variations (KbdMenubar, InlineMenubar, TrailingMenubar, GroupedMenubar, CompactMenubar) 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 Side set. 5 decorative drawer variations (RightDrawer, LeftDrawer, RightInsetDrawer, LeftInsetDrawer, CornerDrawer) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled label: the Size set. 5 decorative label variations (MicroLabel, SmallLabel, BoldLabel, WideLabel, TightLabel) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Loading placeholder on the ai2 surface-3 token with 3 shapes (line, circle, rect) and 2 animations (pulse, none). Style dimensions via className.

Usage example for the ai2 skeleton component.

Styled skeleton: the essentials set. 5 decorative skeleton variations (ShimmerSkeleton, PulseSkeleton, WaveSkeleton, GradientSkeleton, GlowSkeleton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled loaders: the Skeleton set. 5 decorative loaders variations (LineSkeleton, CardSkeleton, AvatarSkeleton, TextSkeleton, ListSkeleton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Range slider on radix-ui with 4 tones (neutral, brand, success, danger) coloring the range and thumb, and 3 sizes (sm, md, lg) for the track and thumb. Supports single and multi-thumb, horizontal and vertical.

Usage example for the ai2 slider component.

Styled slider: the essentials set. 5 decorative slider variations (GradientSlider, GlowSlider, TicksSlider, BubbleSlider, ThickSlider) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled alert: the Solid set. 5 decorative alert variations (FlatAlert, DeepAlert, GradientAlert, SplitAlert, ContrastAlert) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Usage example for the ai2 sonner component.

Styled sonner: the essentials set. 5 decorative sonner variations (SimpleToaster, ToneToaster, GlassToaster, ActionToaster, PromiseToaster) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled table: the Sortable set. 5 decorative table variations (SortTable, ArrowsTable, IndicatorTable, MultiTable, StickyTable) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Loading spinner (lucide) with 3 tones (current, brand, muted) and 4 sizes (sm-xl). Has role=status and an aria-label.

Usage example for the ai2 spinner component.

Styled collapsible: the Split set. 5 decorative collapsible variations (PillCollapsible, SquareCollapsible, GhostCollapsible, OutlineCollapsible, FilledCollapsible) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled avatars: the Stack set. 5 decorative avatars variations (AvatarStack, AvatarStackMore, AvatarRowGap, FannedStack, GridAvatars) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Styled card: the Stat set. 5 decorative card variations (MetricCard, TrendCard, SparklineCard, CompareCard, IconStatCard) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Styled badges: the Status set. 5 decorative badges variations (OnlineBadge, AwayBadge, BusyBadge, OfflineBadge, CountBadge) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled item: the Status set. 5 decorative item variations (DotItem, StatusBadgeItem, ToneItem, ProgressItem, StatusIconItem) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Styled table: the Status set. 5 decorative table variations (BadgeTable, DotTable, ToneTable, ProgressTable, IconTable) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Styled progress: the Stepped set. 5 decorative progress variations (StepsProgress, DotsStepProgress, NumberedProgress, CheckStepProgress, PillStepProgress) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled buttons: the Stroke set. 5 decorative buttons variations (RotateStrokeButton, BeamButton, GradientStrokeButton, CornersButton, GrowRingButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Toggle switch on radix-ui with 4 tones (neutral, brand, success, danger) and 3 sizes (sm, md, lg). Thumb travel and easing use ai2 motion tokens.

Styled checkbox: the Switch set. 5 decorative checkbox variations (ToggleCheckbox, PillCheckbox, SlideCheckbox, TrackCheckbox, CompactSwitchCheckbox) 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 switch component.

Composable table primitives (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption) with hover rows, selected state and horizontal scroll. Table takes density (compact, comfortable, relaxed) and variant (line, striped, outline), both flowing to rows and cells via context.

Usage example for the ai2 table component.

Styled table: the essentials set. 5 decorative table variations (StripedTable, BorderedTable, HoverGlowTable, CompactTable, CardTable) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Styled skeleton: the Table set. 5 decorative skeleton variations (RowsSkeleton, ColumnsSkeleton, TableGridSkeleton, HeaderSkeleton, CompactSkeleton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Tabs on radix-ui with 3 variants (solid segmented, line underline, pill) and 2 sizes (sm, md). Variant and size flow from TabsList to every trigger via context. Exports Tabs, TabsList, TabsTrigger, TabsContent.

Usage example for the ai2 tabs component.

Styled tabs: the essentials set. 5 decorative tabs variations (UnderlineTabs, PillTabs, SegmentedTabs, BoxedTabs, IconTabs) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled buttons: the Text-animated set. 5 decorative buttons variations (BounceTextButton, WaveTextButton, RevealTextButton, FlipTextButton, SlideTextButton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Auto-growing textarea (field-sizing-content) with 3 variants (outline, soft, ghost), 3 sizes (sm, md, lg) and 3 tones (neutral, success, danger) matching Input. Invalid state also via aria-invalid.

Usage example for the ai2 textarea component.

Styled textarea: the essentials set. 5 decorative textarea variations (UnderlineTextarea, FloatTextarea, GlowTextarea, FilledTextarea, CountTextarea) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Styled loaders: the Text set. 5 decorative loaders variations (TypingLoader, EllipsisLoader, ScrambleLoader, WaveTextLoader, BlinkLoader) 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 Text set. 5 decorative skeleton variations (LineSkeleton, ParagraphSkeleton, HeadingSkeleton, MixedSkeleton, CaptionSkeleton) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled toggles: the Themed set. 5 decorative toggles variations (DayNightToggle, CheckXToggle, OnOffToggle, EyeToggle, LockToggle) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled separator: the Thick set. 5 decorative separator variations (BarSeparator, RuleSeparator, DoubleSeparator, InsetSeparator, ShadowSeparator) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.

Styled carousel: the Thumbnails set. 5 decorative carousel variations (BelowCarousel, SideCarousel, DotsThumbsCarousel, ScaledCarousel, BorderedCarousel) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Styled accordion: the Timeline set. 5 decorative accordion variations (LineAccordion, DashedAccordion, NodeAccordion, FilledAccordion, GradientAccordion) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.

Toast notifications via sonner, themed with ai2 tokens and synced to next-themes. Drop the Toaster once in your root layout, then call toast() anywhere.