DisclosureView component
Accordion
Show and hide sections of related content, one or several at a time.
Design system
Ark UI, styled with Panda.
Accessible Ark UI components wired to the recipes in @isbatak/panda-ds, for React, Vue, Solid and Svelte.
InstallationData DisplayView component
Badge
A short label for status, counts or categories.
ButtonsView component
Button
Trigger an action, with variants, sizes and a built-in loading state. Includes IconButton, ButtonGroup and CloseButton.
OverlaysView component
Drawer
A panel that slides in from any edge, with swipe to dismiss, snap points and an indented page behind it.
Data DisplayView component
Grid table
A table laid out with CSS grid, for column sizes a native table can't express and rows built from any element.
LayoutView component
Group
Lay out a row or column of elements, optionally attached into one control.
OverlaysView component
Hover card
Preview the content behind a link when it is hovered or focused.
FeedbackView component
Loader
Swap content for a spinner or loading text while work is in progress.
OverlaysView component
Menu
A list of actions that opens from a trigger, with keyboard navigation and typeahead.
NavigationView component
Navigation menu
A row of site links whose menus open in a shared panel that resizes to fit them.
OverlaysView component
Popover
Show rich content in a floating panel anchored to a trigger.
FormsView component
Radio card
Pick one option from a set of cards that can hold a description or addon.
FormsView component
Segment group
Switch between a few options with a sliding indicator.
FormsView component
Select
Pick one or more values from a list in a dropdown.
FormsView component
Slider
Choose a value or range by dragging a thumb along a track.
FeedbackView component
Spinner
An animated indicator for work in progress.
FormsView component
Switch
Toggle a setting on or off.
Data DisplayView component
Table
Show rows of data in columns, with sticky headers and columns, selectable rows and borders.
NavigationView component
Table of contents
List the headings on a page and highlight the ones in view as the reader scrolls.
DisclosureView component
Tabs
Organize content into panels, showing one at a time.
OverlaysView component
Tooltip
A short hint that appears when an element is hovered or focused.
OverlaysView component
Tour
Guide people through a page step by step, with a spotlight on each target.