Basics

Buttons, badges, avatars, tooltips and loading indicators

Buttons

• Button — Buttons in every variant (Free, MIT)
• Icon Button — Icon-only button (Free, MIT)
• Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded (Free, MIT)
• Button Group — Grouped buttons (Free, MIT)
• Copy to Clipboard — Copy with confirmation (Free, MIT)

Labels and tooltips

• Badge — Status labels and tags (Free, MIT)
• Tag — Removable and clickable tags, groups with +N (Free, MIT)
• Avatar — User avatars (Free, MIT)
• Tooltip — Hover and focus hints (Free, MIT)
• Separator — Dividers (Free, MIT)

Text and icons

• Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons (Free, MIT)
• Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words (Free, MIT)
• Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit (Free, MIT)

Loading

• Skeleton — Loading placeholders (Free, MIT)
• Spinner — Loading indicator (Free, MIT)
• Progress Bar — Progress bars (Free, MIT)
• Progress Circle — Circular progress: a ring that glides to each value, or spins while waiting (Free, MIT)

Other categories

Navigation and layout · Overlays and notifications · Forms and input · Data and metrics · Charts and analytics · Work and teams · Account and access · AI chat and agents · Image generation · Developer tools · Landing pages and brand · Shop and payments · Content and social · Games · Animated components · Effects · 3D and motion