UI Component Encyclopedia
Explore 52 UI components with detailed guides on variants, properties, accessibility patterns, and code snippets for HTML and React.
Actions
5 components
ActionsButton
Triggers an action or event when clicked. The most fundamental interactive element in any UI.
ActionsButton Group
Groups related buttons together to form a cohesive set of actions.
ActionsFloating Action Button
A circular button that floats above the UI to promote a primary action.
ActionsIcon Button
A button that displays only an icon, used for compact actions.
ActionsSplit Button
Combines a default action with a dropdown for additional options.
Navigation
6 components
NavigationBreadcrumb
Shows the user's location within a site hierarchy and enables upward navigation.
NavigationNavigation Bar
Primary navigation element, typically at the top of the page, containing links and actions.
NavigationPagination
Divides content across multiple pages and provides controls to navigate between them.
NavigationSidebar
A vertical navigation panel typically positioned on the left side of the layout.
NavigationTabs
Organizes content into separate views where only one is visible at a time.
NavigationStepper
Guides users through a multi-step process with clear progress indication.
Data Input
10 components
Data InputCheckbox
Allows users to select one or more options from a set of choices.
Data InputRadio Button
Allows users to select exactly one option from a set of mutually exclusive choices.
Data InputSelect
Presents a list of options in a dropdown overlay for single selection.
Data InputCombobox
Combines a text input with a filterable dropdown list for enhanced selection.
Data InputDate Picker
Allows users to select a date or date range through a calendar interface.
Data InputFile Upload
Enables users to select and upload files through drag-and-drop or file browser.
Data InputSlider
Lets users select a value or range from a continuous spectrum by dragging a thumb.
Data InputSwitch
A binary control that immediately toggles between two states (on/off).
Data InputText Input
A single-line text field for capturing short-form user input.
Data InputColor Picker
Allows users to select a color through various interfaces like spectrum, swatches, or input.
Data Display
9 components
Data DisplayAvatar
Represents a user or entity with an image, icon, or initials.
Data DisplayBadge
A small status indicator or label used to highlight information.
Data DisplayCard
A container for grouping related content and actions about a single subject.
Data DisplayList
Displays a continuous group of related items vertically.
Data DisplayTable
Displays structured data in rows and columns with optional sorting, filtering, and pagination.
Data DisplayTree View
Displays hierarchical data in an expandable/collapsible tree structure.
Data DisplayTag
A compact element used for categorization, filtering, or displaying metadata.
Data DisplayRating
Allows users to rate or view ratings using a visual scale (typically stars).
Data DisplayStat
Displays a numerical value with a label, often used in dashboards and summaries.
Feedback
6 components
FeedbackAlert
Displays an important message to attract the user's attention without interrupting workflow.
FeedbackToast
A brief, auto-dismissing message that appears temporarily to provide feedback.
FeedbackProgress Bar
Indicates the completion progress of a task or operation.
FeedbackSpinner
An animated indicator showing that content or a process is loading.
FeedbackSkeleton
A placeholder UI that mimics the layout of content while it loads.
FeedbackEmpty State
Displayed when there is no content to show, guiding users toward taking action.
Overlay
5 components
OverlayDialog
An overlay window that requires user interaction before returning to the main content.
OverlayDrawer
A panel that slides in from the edge of the screen, overlaying the content.
OverlayPopover
Displays rich content in a floating panel anchored to a trigger element.
OverlayTooltip
A small text popup that appears on hover or focus to describe an element.
OverlayDropdown Menu
A menu that appears on trigger, displaying a list of actions or options.
Layout
6 components
LayoutAccordion
Vertically stacked sections that expand and collapse to reveal content.
LayoutCarousel
Displays a series of content items that users can cycle through horizontally.
LayoutDivider
A visual separator used to divide sections of content.
LayoutGrid
A two-dimensional layout system for organizing content in rows and columns.
LayoutStack
Arranges children elements in a vertical or horizontal stack with consistent spacing.
LayoutHero
A prominent section typically at the top of a page with a headline, description, and CTA.
Typography
5 components
TypographyHeading
Typography component for section titles and content headings.
TypographyText
A flexible typography component for body text, captions, and other content.
TypographyBlockquote
Highlights a quotation or excerpt with distinctive visual styling.
TypographyCode Block
Displays formatted code with optional syntax highlighting and copy functionality.
TypographyLabel
Associates a text description with a form control for accessibility and clarity.
Build better interfaces
Use our free design tools alongside this component encyclopedia to create pixel-perfect UI. 52 components and counting.