Components

A vertical navigation list with a bouncy, arc-animated active marker that springs between items.

A gooey, spring-animated picker for entering a duration in hours and minutes.

A document minimap of proximity-reactive dashes that tracks scroll position, expands near the pointer, and smooth-scrolls to sections on click.

A vertically stacked set of interactive headings that each reveal a section of content, built on Base UI.

Displays a callout for important, contextual messages.

A modal dialog that interrupts the user with important content and expects a response, built on Base UI.

Displays content within a desired ratio.

Displays a file or image attachment with media, metadata, upload state, and actions.

An image element with a fallback, for representing a user or entity, built on Base UI.

Displays a small badge to highlight status or metadata.

Iranian card-number and Shaba fields with paste normalization, checksums, and bank detection.

Displays the path to the current resource using a hierarchy of links.

A chat message bubble with variants, reactions, and start/end alignment.

A button built on Base UI with variant and size support.

A container that groups related buttons together with consistent styling.

A date-grid calendar built on react-day-picker, switchable between the Jalali (Shamsi) and Gregorian (Miladi) calendars via a calendarType prop.

Displays a card with header, content, and footer.

A carousel with motion and swipe built using Embla.

A control for selecting one or more options, built on Base UI.

A province & city picker for Iran, built on Combobox and bundled with all 31 provinces and 1,119 cities.

An interactive component which expands/collapses a panel, built on Base UI.

A searchable, accessible combobox built on Base UI.

A command palette component built with Dialog and Autocomplete for searching and executing commands.

A menu of actions triggered by a right click, built on Base UI.

An icon button that copies text to the clipboard, morphs its icon to reflect the result, and anchors a confirmation toast to itself.

Responsive Shamsi/Gregorian date and date-time fields with SSR-safe defaults and confirmation flows.

An iOS-style year/month/day wheel-based date picker, switchable between the Shamsi and Gregorian calendars, with a responsive Popover-on-desktop, Drawer-on-mobile composition.

A modal window layered over the page for focused tasks or confirmations, built on Base UI.

A provider for setting the reading direction (LTR or RTL) of your app, built on Base UI.

A swipeable panel that slides in from an edge of the screen, built on Base UI.

Displays a menu of actions or options, triggered by a button.

A single-track, dual-thumb range slider in the same visual language as Elastic Slider.

Slider with elastic rubber-band drag and magnetic snap feedback.

Displays an empty state with a title, description, and optional actions.

Groups a label, control, and description into an accessible form field, built on Base UI.

For sighted users to preview content available behind a link, built on Base UI.

A styled text input built on Base UI.

Add addons, buttons, and helper content to inputs.

Accessible one-time password component with copy-paste functionality.

An interactive SVG map of Iran's provinces for picking a province, with hover previews, keyboard selection, and shadcn-style controlled state.

A flexible layout for a piece of content, media, or action, often used in lists.

Displays a keyboard key or shortcut.

An accessible, styled label element.

A small label for annotating content, such as a section divider or inline note.

A persistent horizontal menu bar for application-style commands, built on Base UI.

Composable layout for a chat message with an avatar, header, content, and footer.

An auto-scrolling viewport for chat messages, with scroll-to-start/end buttons, built on @shadcn/react.

An Iranian mobile number input that normalizes mixed paste formats and Persian digits, with a redundant validity indicator.

An Iranian national ID (کد ملی) input that normalizes Persian digits as you type or paste and validates the checksum live, with a redundant validity indicator.

A styled native <select> element for choosing a single value.

A collection of links for navigating websites.

Navigation for paginated content, built on Button.

A password input with a show/hide toggle that always renders LTR, regardless of the surrounding document direction.

An Iranian vehicle license plate input with digit segments, a letter picker including wheelchair plates, and the Iran serial tab.

Displays rich content in a portal, anchored to a trigger.

A text input that formats digits as a grouped price as you type, with support for Persian/Arabic-Indic numerals.

Displays an indicator showing the completion progress of a task, built on Base UI.

A rounded QR code generator with dot modules, custom foreground/background colors, and a center logo slot.

A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions, built on @shadcn/react.

A set of mutually exclusive radio buttons, built on Base UI.

A tactile checkout printer with processing stages and a composable thermal-paper receipt.

Accessible resizable panel groups and layouts, built on react-resizable-panels.

Renders an Alert Dialog on desktop and a bottom Drawer on mobile from one shared set of components.

Renders a Dialog on desktop and a bottom Drawer on mobile from one shared set of components.

Renders a Dropdown Menu on desktop and a bottom Drawer menu on mobile from one shared set of components.

Cross-browser custom scrollbars, built on Base UI.

A listbox for choosing a single value, built on Base UI.

Visually or semantically separates content, built on Base UI.

A panel that slides in from an edge of the screen to complement the main content, built on Base UI.

A composable, collapsible application sidebar with mobile drawer, tooltips, and RTL support, built on Base UI.

Used to show a placeholder while content is loading.

An input where the user selects a value from within a given range, built on Base UI.

A spinning loading indicator icon.

A button that swaps between idle, loading, and success feedback for async actions.

A control that toggles between checked and unchecked, built on Base UI.

A responsive table component, with an optional card-row variant.

Layered panels with a sliding active-tab indicator, built on Base UI.

Displays a form textarea, or a component that looks like a textarea.

An hour/minute/second wheel-based time picker, with a responsive Popover-on-desktop, Drawer-on-mobile composition.

A temporary notification that stacks in a corner of the screen or anchors to an element, built on Base UI.

A two-state button that can be either on or off, built on Base UI.

A set of two-state buttons that can be toggled on or off, built on Base UI.

The Toman currency symbol, as a standalone icon component.

Displays contextual information when hovering or focusing an element, built on Base UI.

An iOS-like wheel picker with smooth inertia, infinite scrolling, and keyboard navigation.