UI Components
The building blocks of user interfaces — buttons, inputs, cards, modals, navigation elements, and more.
Filter by Subcategory
All Terms
Accordion
A vertically stacked list of headers that can be clicked to reveal or hide associated content panels, useful for organizing large amounts of content.
navigationAlert
A prominent banner or box that displays important messages, warnings, or notifications that require user attention, typically with an icon indicating severity.
feedbackAvatar
A visual representation of a user or entity, typically displayed as a circular image, initials, or icon placeholder.
content-displayBadge
A small visual indicator used to display status, counts, or labels. Often appears as a small circle or rounded rectangle attached to other elements.
content-displayBottom Sheet
A mobile UI pattern where a panel slides up from the bottom of the screen, revealing content or actions while keeping the context of the current screen visible.
overlaysBreadcrumbs
A secondary navigation aid showing the user's location within the site hierarchy, typically displayed as a horizontal trail of links separated by arrows or slashes.
navigationCard
A contained, flexible component that groups related information and actions, typically with a border, shadow, or background that visually separates it from the page.
content-displayCarousel
A slideshow component that displays multiple items (images, cards, content) in a horizontal sequence, allowing users to navigate through them one at a time.
content-displayCheckbox
A small square box that can be toggled between checked and unchecked states, used for selecting multiple options from a list or confirming a single choice.
inputsChip
A compact element representing an input, attribute, or action, often with optional dismiss functionality. Used for tags, filters, or multi-select displays.
content-displayDrawer
A panel that slides in from the edge of the screen (usually left or right) to reveal navigation, filters, or additional content without navigating away from the current view.
overlaysDropdown
An interactive element that reveals a list of options when clicked, allowing users to select one or more items from a collapsed menu.
inputsEmpty State
A placeholder screen or section shown when there's no content to display, guiding users on how to get started or explaining why the area is empty.
feedbackFAB (Floating Action Button)
A circular button that floats above the UI, typically in the bottom-right corner, representing the primary action of a screen.
buttonsGhost Button
A minimal button style with transparent background and only text (or text with icon), used for tertiary actions or to reduce visual clutter.
buttonsHamburger Menu
A button consisting of three horizontal lines that, when clicked, reveals a hidden navigation menu. Named for its resemblance to a hamburger.
navigationIcon Button
A button that displays only an icon without visible text, used for common actions where the icon meaning is universally understood.
buttonsLoading Spinner
An animated circular indicator that shows users that a process is in progress, typically used during data fetching or form submissions.
feedbackModal
A dialog box that appears on top of the main content, requiring user interaction before returning to the underlying page. It typically includes an overlay that dims the background.
overlaysNavbar
A horizontal navigation bar typically placed at the top of a page, containing the logo, main navigation links, and often search or user account controls.
navigationPagination
A navigation pattern that divides content into discrete pages, allowing users to move between pages using numbered links or prev/next buttons.
navigationPopover
A floating container that appears near a trigger element, displaying additional content, actions, or forms without leaving the current context.
overlaysPrimary Button
The main action button on a page, designed to draw attention and guide users toward the most important action.
buttonsProgress Bar
A horizontal indicator that shows the completion status of a task or process, filling from left to right as progress is made.
feedbackRadio Button
A circular input control used in groups where only one option can be selected at a time, with selecting one automatically deselecting others in the group.
inputsSecondary Button
A button style used for secondary or alternative actions, visually less prominent than primary buttons, typically featuring an outline or subtle background.
buttonsSkeleton Loader
A placeholder UI that mimics the layout of content while it's loading, using animated gray shapes to represent text, images, and other elements.
feedbackSlider
An input control that allows users to select a value from a range by dragging a thumb along a horizontal track.
inputsStepper
A control that allows users to incrementally increase or decrease a numeric value using plus/minus buttons, with an optional text input for direct entry.
inputsTable
A structured layout displaying data in rows and columns, allowing users to compare information and often including features like sorting, filtering, and pagination.
content-displayTabs
A navigation pattern that organizes content into separate panels, where only one panel is visible at a time, switched by clicking horizontal tab headers.
navigationText Input
A single-line form field that allows users to enter and edit text, such as names, emails, or search queries.
inputsToast Notification
A small, non-blocking message that appears temporarily to provide feedback about an action, typically sliding in from the corner of the screen and auto-dismissing.
feedbackToggle Switch
A control that allows users to switch between two mutually exclusive states (on/off, yes/no, enabled/disabled) with immediate effect.
inputsTooltip
A small informational popup that appears when hovering over or focusing on an element, providing additional context or explanation.
content-displayShowing 35 of 78 terms. More coming soon!