Get Started

Install with AI Registry Changelog

Elements

Colors Typography Icons Spacing Elevation

Components

Input

Button Toggle Slider Single Selection Multiple Selection Dropdown Toolbar Text field Search Password input Phone input 6-digit code input Number stepper Date picker Time picker Voice recorder Signature input Drag & drop

Navigation

Tabs Segmented control Chip Filter Navigation Bar Breadcrumb Table of Contents Accordion Tree view Dot pagination Pagination

Status

Tag Badge Progress Skeleton Progress Bar Avatar Avatar Group Circular Gauge Routine Tracker Activity Heatmap Horizontal Step Progress Vertical Step Progress

Layout

Card Image Card List Table Grid Gallery Carousel Fluid layout Inline expansion Push panel Popover Modal Bottom sheet Side Panel Toast Floating card

Components/Status /Circular Gauge

Circular Gauge

Show goal progress in a ring.

Preview

Interact with the component and explore its states.