All Components
Every Vortex building block in one place. Pick one to see it in action.
Primitives
Backdrop
Backdrop is a wrapper that places content above a page or container, such as a custom dialog or contained panel.
md
Breakpoints Indicator
Breakpoints Indicator displays the active breakpoint while developing responsive layouts.
Container
Container is a layout element that centers content within a set width, such as a page or an article.
Dismissible
Dismissible is a wrapper that adds a close button to content, such as a notice or an attachment.
Floating
Floating is a positioning primitive for custom overlays anchored to a trigger, another element, or a point in the viewport.
Grid
Grid is a layout element that places content in rows and columns, such as a card gallery or a page with a sidebar.
Hover Highlight
Hover Highlight is a wrapper that moves a shared background between rows, such as navigation links or menu actions.
Icon
Icon is a graphic element that displays SVG icons, such as a search glyph in a button or a status symbol beside text.
Image
Image is a media element that displays a picture with a fallback if loading fails, such as a product photo or profile cover.
Interactive
Interactive is a base element that makes content clickable and focusable, such as cards or list rows that act as buttons or links.
List Item
List Item is a base element that arranges content in compact rows, such as navigation links, project actions, or account details.
Scroll Area
Scroll Area is a container that scrolls overflowing content with themed scrollbars, such as a long activity log or a wide timeline.
Stack
Stack is a layout element that arranges content in a row or column, such as form fields or toolbar actions.
Theme Scope
Theme Scope is a wrapper that applies a different theme or color mode to part of the page, such as a dark hero section.
Components
Accordion
Accordion is a widget that stacks sections of content under headers people can expand or collapse, such as FAQs or grouped settings.
Alert
Alert is a feedback message that informs people within the page, such as confirming a saved change or warning about a failed payment.
Avatar
Avatar is a visual identifier that represents a person or team, such as a profile owner or a project's collaborators.
Badge
Badge
Badge is a compact label that marks an item with a status or count, such as a shipped order or unread messages.
Breadcrumbs
Breadcrumbs are navigation aids that show where the current page sits in a hierarchy, such as a product within its category.
Button
Button is a widget that lets people trigger an action, such as submitting a form, opening a dialog, or deleting a project.
Calendar
Calendar is a form control that lets people choose a date or range, such as a booking period or a reporting window.
Card
Card is a surface that groups related content into one unit, such as a project summary or a settings option.
Carousel Gallery
Carousel Gallery is a widget that shows media one item at a time, such as product photos or a slideshow.
Carousel Rail
Carousel Rail is a widget that scrolls through a horizontal row of items, such as featured projects or related articles.
Checkbox
Checkbox is a form control that lets people select one or more options, such as accepting terms or choosing notification preferences.
Command Menu
Command Menu is an overlay that lets people find and run commands by typing, such as jumping to a page or switching projects.
Context Menu
Context Menu is an overlay that shows actions for an item on right-click or long press, such as renaming or deleting a file.
Divider
Divider is a separator that splits content into groups, such as sections of a list or items in a menu.
Drawer
Drawer is an overlay that slides a panel in from an edge of the screen, such as a filters panel or a mobile action sheet.
Dropdown Menu
Dropdown Menu is an overlay that lists actions behind a button, such as editing, duplicating, or archiving a project.
- report.pdf2.5 MB60%
File Upload
File Upload is a form control that lets people pick or drop files, such as attaching documents or uploading photos.
Link
Link is a widget that takes people to another page or runs an inline action, such as opening a help article or resending an email.
Modal
Modal is an overlay that focuses people on a task above the page, such as confirming changes or renaming a project.
Pagination
Pagination is a navigation control that lets people move through pages of content, such as search results or invoices.
Pin Field
Pin Field is a form control that lets people enter a code in separate cells, such as a verification code or access code.
Popover
Popover is an overlay that shows content beside a trigger, such as display settings, filters, or quick actions.
Progress Bar
Progress Bar is a loading indicator that shows how much of a task is complete, such as uploading a file or importing records.
Radio
Radio is a form control that lets people choose a single option from a set, such as a delivery method or billing interval.
Select
Select is a form control that lets people choose options from a list, such as picking a project status or assigning skills.
Shortcut
Shortcut is a keyboard hint that shows the keys for an action, such as pressing Cmd+K to open search.
Skeleton
Skeleton is a loading placeholder that stands in for content while it loads, such as a profile or a project card.
Slider
Slider is a form control that lets people choose a number or range within set bounds, such as volume or a price filter.
Spinner
Spinner is a loading indicator that shows work is in progress, such as fetching data or processing a payment.
- 2Profile
- 3Review
Stepper
Stepper is a navigation aid that shows progress through a multistep flow, such as checkout, onboarding, or account setup.
Switch
Switch is a form control that lets people turn a setting on or off, such as email updates or autosave.
Tabs
Tabs are widgets that let people switch between related views, such as a project's overview, activity, and settings.
Text
Text is a typography element that displays content with theme type styles, such as page titles, body copy, or captions.
Text Area
Text Area is a form control that lets people enter several lines of text, such as a project description or feedback.
Text Field
Text Field is a form control that lets people enter a single line of text, such as a project name or email address.
Toast
Toast is a status message that briefly appears over the page, such as confirming an export or offering to undo an action.
Hooks
useBreakpoints()useBreakpoints
useBreakpoints is a hook that resolves a value for the viewport, such as a result limit or a control size.
useCanDismiss()useCanDismiss
useCanDismiss is a hook that checks whether an overlay can close, such as dismissing a nested menu before its parent.
useCheckboxGroup()useCheckboxGroup
useCheckboxGroup is a hook that reads the nearest Checkbox.Group, such as showing its current selection in a summary.
useInteractOutside()useInteractOutside
useInteractOutside is a hook that detects clicks outside chosen elements, such as closing an expanded panel or canceling an editor.
useIsomorphicLayoutEffect()useIsomorphicLayoutEffect
useIsomorphicLayoutEffect is a hook that runs browser layout work before paint, such as measuring an element or positioning a tooltip.
useKeyboardFocusMode()useKeyboardFocusMode
useKeyboardFocusMode is a hook that controls Vortex focus rings, such as highlighting a button or field focused by your code.
useLatestRef()useLatestRef
useLatestRef is a hook that keeps a stable ref to the latest committed value, such as a callback or delayed counter.
useRadioGroup()useRadioGroup
useRadioGroup is a hook that reads the nearest Radio.Group, such as showing its current selection in a summary.
useRovingFocus()useRovingFocus
useRovingFocus is a hook that moves focus between controls with arrow keys, such as buttons in a toolbar.
useRTL()useRTL
useRTL is a hook that reads and changes the page’s direction between left-to-right and right-to-left.
useScrollLock()useScrollLock
useScrollLock is a hook that pauses scrolling on a page or container, such as keeping background content still behind an overlay.
useShortcuts()useShortcuts
useShortcuts is a hook that binds keyboard shortcuts to callbacks, such as opening search with Cmd+K or closing a panel with Escape.
useSwitch()useSwitch
useSwitch is a hook that manages an on or off value, such as whether a menu or panel is open.