Components
Browse all components available in the Passport UI library. Click on any component to view examples, documentation, and code snippets.
Accordion
A vertically stacked set of interactive headings that reveal sections of content.
Alert
Displays a short, important message in a way that attracts the user's attention.
Alert Dialog
A modal dialog that interrupts the user with important content, requiring action.
Analytics
A component to easily add analytics providers like Vercel and Google Analytics.
Aspect Ratio
A container that maintains a specific aspect ratio.
Avatar
An image element with a fallback for representing a user or entity.
Badge
A small visual element for labeling, categorizing, or organizing items.
Blockquote
A component for displaying quoted text with optional citation.
Breadcrumb
A navigation aid that shows the user’s location in a site or app.
Bullet List
A component for displaying a list of items with bullet points.
Button
A clickable element that triggers an action.
Calendar
A calendar component for selecting dates and date ranges.
Card
A flexible content container with header, content, and footer sections.
Carousel
A slideshow component for cycling through images or content.
Checkbox
A control that allows the user to select one or more options from a set.
Code Block
A component for displaying formatted code with syntax highlighting.
Collapsible
A content area that can be expanded and collapsed.
Combobox
An input field that combines a text input with a dropdown list of suggestions.
Command
A fast, accessible command menu for navigation and actions.
Context Menu
A menu that appears on right-click, offering context-specific actions.
Date Picker
A component for selecting a single date from an interactive calendar.
Dialog
A window overlaid on the primary content, requiring user interaction.
Drawer
A panel that slides in from the side, typically for navigation or actions.
Dropdown Menu
A menu of actions or links that appears when a trigger is clicked.
Form
A set of components for building accessible and reusable forms.
Hover Card
A pop-up card that appears when a user hovers over an element.
Input
A standard text input field for form data.
Input OTP
A specialized input field for one-time passwords.
Label
A text label for form inputs, providing context and improving accessibility.
LiveRegion
An accessible component that announces dynamic content changes to screen readers.
Markdown
A component for rendering Markdown text with styles.
Menubar
A horizontal menu of commands, typically at the top of an application.
Navigation Menu
A collection of links for navigating a website or application.
Pagination
A component for navigating between pages of content.
Popover
A pop-up that displays information when an element is clicked.
Prefetch Link
A link component that prefetches page content for faster navigation.
Progress
A progress bar for displaying the completion status of a task.
Radio Group
A set of radio buttons where only one option can be selected.
Resizable
A component with resizable panels for flexible layouts.
Scroll Area
A container with a customizable scrollbar for scrollable content.
Select
A dropdown menu for selecting a single option from a list.
Separator
A visual divider for separating content sections.
Sheet
A side panel that slides in to display supplementary content.
Sidebar
A layout component with a collapsible sidebar and main content area.
Skeleton
A placeholder component for loading content.
Slider
A control for selecting a value from a range.
Sonner
A toast component for displaying brief, non-intrusive notifications.
Structured Data
A component for embedding structured data (like JSON-LD) for SEO.
Switch
A control for toggling between two states, such as on or off.
Table
A component for displaying data in a tabular format.
Tabs
A set of layered sections of content, known as tab panels, that display one panel of content at a time.
Textarea
A multi-line text input for longer form content.
Toggle
A two-state button that can be either on or off.
Toggle Select
A set of toggle buttons for selecting one or more options.
Tooltip
A pop-up that displays information when a user hovers over an element.
VisuallyHidden
A component that hides content visually but keeps it accessible to screen readers.