persianlabsui

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.

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 inputs with paste normalization, checksum validation, 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, with an optional showHolidays prop for Iranian holiday highlighting.

Displays a card with header, content, and footer.

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

A province and city picker for Iran, built on Combobox and bundled with a full dataset of 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.

An opinionated, responsive Shamsi/Gregorian date and date-time picker with SSR-safe today defaults, draft state, and Popover-to-Drawer presentation.

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.

Extends the clickable area of a child element for improved accessibility.

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

A styled text input built on Base UI.

Groups an input with addons, buttons, or text for complex input layouts.

An accessible one-time password input, built on input-otp.

Iranian card and Shaba normalization, checksum validation, and bank detection.

Iranian mobile phone number normalization, validation, and masking.

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.

Validates Iranian national ID (کد ملی) numbers using the standard 10-digit checksum.

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

Converts Persian (۰-۹) and Arabic-Indic (٠-٩) numerals to plain 0-9 digits.