Skip to Content
ComponentsOverview

Components

Browse all available components in the Apollo Vertex design system.

Accordion

Vertically stacked set of interactive headings.

Alert

Displays a callout for important information.

Alert Dialog

A modal dialog that interrupts the user.

Aspect Ratio

Displays content within a desired ratio.

Avatar

An image element with a fallback.

Badge

Displays a small status indicator.

Breadcrumb

Navigation trail showing the current location.

Button

Displays a button or a component that looks like a button.

Button Group

Groups related buttons together.

Calendar

A date field component for picking dates.

Card

Displays content in a contained card layout.

Carousel

A component for cycling through elements.

Chart

Data visualization components.

Checkbox

A control that allows selecting multiple options.

Collapsible

An interactive component that expands and collapses.

Combobox

Autocomplete input with a dropdown list.

Command

A command menu for searching and executing actions.

Context Menu

A menu triggered by right-click.

Data Table

A powerful table with sorting, filtering, and pagination.

Date Picker

A component for selecting dates.

Dialog

A modal window overlaid on the primary content.

Drawer

A panel that slides in from the edge.

Dropdown Menu

A menu of actions triggered by a button.

Empty

Placeholder for empty states.

Feature Flags

Conditionally render content based on feature flags.

Field

A form field wrapper with label and error handling.

Filter Dropdown

A dropdown for applying filters.

Form

Building forms with validation.

Hover Card

A card that appears on hover.

Input

A text input field.

Input Group

Groups related input elements together.

Input OTP

One-time password input field.

Item

A generic list item component.

Kbd

Displays keyboard shortcuts.

Label

Renders an accessible label for form controls.

Menubar

A horizontal menu bar with dropdowns.

Navigation Menu

A collection of navigation links.

Pagination

Controls for navigating between pages.

Popover

A floating panel anchored to a trigger.

Progress

Displays a progress indicator.

Radio Group

A set of checkable buttons where only one can be selected.

Resizable

Resizable panel groups and layouts.

Scroll Area

Custom scrollbar component.

Select

A dropdown for selecting a single option.

Separator

Visually separates content.

Sheet

A panel that slides in from the side.

Sidebar

A collapsible side navigation component.

Skeleton

A placeholder for loading content.

Slider

An input for selecting a value from a range.

Sonner

Toast notifications.

Spinner

A loading spinner indicator.

Switch

A toggle between two states.

Table

A responsive table component.

Tabs

Organizes content into switchable panels.

Textarea

A multi-line text input.

Toggle

A two-state button.

Toggle Group

A group of toggle buttons.

Tooltip

A popup that displays information on hover.