@persianlabsui

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

An accessible, animated tabs component built on Base UI with a spring-animated sliding active-tab indicator.

A styled text input built on Base UI.

An accessible, styled label element.

Cross-browser custom scrollbars, 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 province and city picker for Iran, built on Combobox and bundled with a full dataset of all 31 provinces and 1,119 cities.

A spinning loading indicator icon.

A container that groups related buttons together with consistent styling.

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

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

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

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

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

A styled multi-line text input.

Displays a keyboard key or shortcut.

Displays a small badge to highlight status or metadata.

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

Visually or semantically separates content, built on Base UI.

Displays a card with header, content, and footer.

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

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

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

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

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

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

An interactive component which expands/collapses a panel, 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.

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

A collection of links for navigating websites, built on Base UI.

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

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

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

A vertically stacked set of interactive headings that each reveal a section of 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.

A carousel with motion and swipe built using Embla.

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

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

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

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

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

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.

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

Displays a callout for important, contextual messages.

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.

Used to show a placeholder while content is loading.

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

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

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.

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

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

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.

Navigation for paginated content, built on Button.

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

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

The Toman currency symbol, as a standalone icon component.

The cn() class-merging helper, powered by the cn package (a drop-in clsx + tailwind-merge engine).

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

Iranian card-number and Shaba inputs with paste normalization, checksum validation, and bank detection.

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

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

A rounded QR code generator with dot modules, custom foreground/background colors, configurable error correction, and a matching loading skeleton.

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

A temporary notification that stacks in a corner of the screen or anchors to an element, built on Base UI, with success/error/warning/info/loading and X-style …

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

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

Unifies Arabic-codepage letters onto Persian ones (ي→ی, ك→ک, …) with opt-in digit folding, diacritic stripping, half-space repair, and space tidying.

Spells numbers out in Persian words, accepting Latin or Persian digits with signs, decimals, and thousands separators.

A hook for a value that can be either controlled or uncontrolled, with a single consistent API either way.

Wraps the Clipboard API with a built-in timeout to reset the copied state, for copy buttons that show brief confirmation feedback.

A timer-aligned countdown hook for ISO-8601 target dates, with overdue state and formatted output.

Reactive media query hook with Tailwind-like breakpoint syntax, built on useSyncExternalStore for SSR safety.

Jalali/Gregorian date utilities built on date-fns and date-fns-jalali: formatting, parsing, conversion, ranges, and digit conversion, switchable with a calenda…

zod schemas for persian-date: zPersianDate coerces an ISO string, a shamsi yyyy/MM/dd string, an epoch number, or a Date into a Date with optional min/max boun…

Official/religious/cultural Iranian holiday lookup for a date, range, or year, resolving Jalali, Gregorian, and tabular-Hijri entries.

Converts Persian/mixed Persian+English text into a URL-safe slug, keeping Persian script by default or transliterating to Latin/ASCII.

Pre-shapes Persian/Arabic text into joined Unicode presentation-form codepoints so it renders correctly in Satori/next-og images, which don't shape connected s…

A reactive current date/time hook with Jalali/Gregorian support, formatted output, and optional holiday flagging.

A reactive relative-time formatter ("۲ روز پیش" / "2 days ago") with built-in Persian and English message tables.

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

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

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

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

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

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

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-mob…

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

Iranian mobile phone number normalization, validation, and masking.

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.

Validates the structural format of Iranian postal codes (کد پستی).

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

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

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 vertical navigation list with a bouncy, arc-animated active marker that springs between items.

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

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