12 components

Component Library.
Anatomy, variants, rules.

12 essential UI components — how they work, when to use them, and what makes them right or wrong.

actionbeginner

Button

The primary interactive element for triggering actions.

DefaultHover (darker background)Active/pressed (scale down)+3
inputbeginner

Input

A form field for text, numbers, or other typed data entry.

DefaultFocus (accent border)Filled (same as default with value)+3
displaybeginner

Card

A bounded container grouping related content into a scannable unit.

DefaultHover (lift + shadow)Selected (accent border)+2
feedbackintermediate

Modal

A dialog that appears over page content and requires user interaction.

Opening (animation)OpenLoading (spinner in body)+2
navigationintermediate

Navbar

The primary horizontal navigation bar at the top of a page or application.

DefaultActive page (highlighted link)Scrolled (shadow appears)+1
navigationintermediate

Sidebar

A vertical navigation panel beside the main content area of a web application.

Item: default, hover, activeSidebar: expanded, collapsed
navigationintermediate

Tabs

A navigation pattern for switching between multiple related views.

DefaultHoverActive/selected+1
inputintermediate

Dropdown

A menu revealing a list of selectable options triggered by a click or keyboard interaction.

ClosedOpenItem: default, hover, selected, disabled
displayintermediate

Table

A structured component for displaying rows and columns of related data.

DefaultRow: hover, selectedColumn: sorted ascending, sorted descending+1
feedbackintermediate

Toast

A brief notification that appears temporarily to confirm actions or report status.

Entering (animation)VisibleExiting (animation)
displaybeginner

Badge

A compact label for status, count, or category metadata.

DefaultDismissible (with ×)
displaybeginner

Avatar

A visual representation of a user, team, or entity.

With imageInitials fallbackLoading (skeleton)