Buttons
20 variantsButtons, groups and toggles.
UI elements for React and Tailwind
The small parts. Buttons, inputs, cards, overlays, charts and effects.
22 categories · 112 components · 373 variants
The small parts every section is made of
Elements are the building blocks inside every section, buttons, inputs, selects, date pickers, cards, dialogs, tooltips, tabs, tables, charts and media players. They share one set of tokens for color, radius, spacing and type, so a form in a hero and a form in a settings page look the same.
Each element follows the keyboard and screen reader patterns people expect, from the arrow keys in tabs to focus that stays inside a dialog. Text effects, text accents, backgrounds and motion effects add the details that give a page its character, and every one of them rests when the system asks for reduced motion.
22 categories
Forms and inputs
22 variantsInputs, textareas, selects, checkboxes, radios, switches, sliders, search fields and form layouts.
Pickers and selections
21 variantsDate, time and color pickers, number fields, comboboxes, multi selects and tag inputs that keep every choice in view.
Special input fields
20 variantsPhone numbers with country, card details, one-time codes, file uploads, profile pictures and signatures.
Cards
10 variantsCards for people, products, stats and links.
Overlays
21 variantsDialogs, sheets, popovers, tooltips and toasts.
Navigation elements
15 variantsTabs, accordions, breadcrumbs, pagination, steppers and link lists.
Menu bars and switchers
14 variantsMenu bars with keyboard support, floating actions that follow the scroll and language switchers for every layout.
Data display
15 variantsIcons, badges, avatars, tags, keyboard keys and ratings.
Progress and states
13 variantsProgress bars and rings, skeletons while content loads, empty states with the next step and stat cards with a key number.
Lists, trees and timelines
17 variantsDescription lists for details, sortable lists to drag, tree views for folders and timelines for events in order.
Charts
22 variantsLine, bar, area and donut charts, radial charts, heatmaps and funnels for the everyday numbers.
Comparison charts
22 variantsBefore and after, rankings, targets, shares of a whole and waterfalls that show how one value becomes another.
Statistical charts
20 variantsScatter plots, distributions from histogram to box plot, radar profiles and treemaps for data with many points.
KPI, live and map charts
22 variantsGauges, progress rings and sparklines for key numbers, data that keeps arriving, price candles and values by region on a map.
Text effects
15 variantsHeadlines that arrive. Blur in, letters and words one by one, typewriter and scramble.
Text accents
16 variantsGradient sweeps, shimmer, hand-drawn markers, rotating words and numbers that count up, for the one line that matters.
Backgrounds
19 variantsAurora, gradient mesh, noise, glowing dots, fading grids and a spotlight that follows the pointer.
Beams, particles and motion
18 variantsBeams of light, meteors, particles, orbits, endless marquees and a light that travels around a card border.
Media
19 variantsVideo and audio players, image compare, device frames and QR codes.
Code and JSON
8 variantsCode blocks with file tabs, line numbers, highlights and a terminal style, and JSON viewers that fold, search and copy paths.
Panels and splitters
4 variantsResizable panes, split views and folding rails.