---
name: "@persianlabsui"
slug: "persianlabsui"
description: "RTL-first, copy-paste React components and UI blocks for Persian interfaces, built on Base UI and Tailwind CSS. Includes unique Persian-focused patterns with full LTR support."
category: "Forms"
tags: ["auth", "blocks", "buttons", "cards", "dashboard", "forms", "hooks", "icons", "loaders", "maps", "media", "mobile", "navigation", "overlays", "tables"]
framework: "react"
license: null
author: "persianlabs"
website: "https://ui.persian-labs.ir"
github: "https://github.com/persianlabs/ui"
registry: "https://ui.persian-labs.ir/r/registry.json"
pro: false
pro_url: null
github_stars: 122
component_count: 105
generated_at: "2026-09-05T09:50:59.044Z"
---

# @persianlabsui

RTL-first, copy-paste React components and UI blocks for Persian interfaces, built on Base UI and Tailwind CSS. Includes unique Persian-focused patterns with full LTR support.

## Links

- Website: https://ui.persian-labs.ir
- GitHub: https://github.com/persianlabs/ui
- Registry JSON: https://ui.persian-labs.ir/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/persianlabsui
- This file: https://sh4dcn.vercel.app/md/persianlabsui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.persian-labs.ir/r/registry.json
pnpm dlx shadcn@latest add https://ui.persian-labs.ir/r/registry.json
bunx shadcn@latest add https://ui.persian-labs.ir/r/registry.json
# clone the source repo
git clone https://github.com/persianlabs/ui.git
# fetch the raw registry index
curl -s https://ui.persian-labs.ir/r/registry.json
```

## Components (105)

| name | type | description | install |
| --- | --- | --- | --- |
| button | registry:ui | A button built on Base UI with variant and size support. | `npx shadcn@latest add https://ui.persian-labs.ir/r/button.json` |
| tabs | registry:ui | An accessible, animated tabs component built on Base UI with a spring-animated sliding active-tab indicator. | `npx shadcn@latest add https://ui.persian-labs.ir/r/tabs.json` |
| input | registry:ui | A styled text input built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/input.json` |
| label | registry:ui | An accessible, styled label element. | `npx shadcn@latest add https://ui.persian-labs.ir/r/label.json` |
| scroll-area | registry:ui | Cross-browser custom scrollbars, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/scroll-area.json` |
| combobox | registry:ui | A searchable, accessible combobox built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/combobox.json` |
| command | registry:ui | A command palette component built with Dialog and Autocomplete for searching and executing commands. | `npx shadcn@latest add https://ui.persian-labs.ir/r/command.json` |
| city-selector | registry: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. | `npx shadcn@latest add https://ui.persian-labs.ir/r/city-selector.json` |
| spinner | registry:ui | A spinning loading indicator icon. | `npx shadcn@latest add https://ui.persian-labs.ir/r/spinner.json` |
| button-group | registry:ui | A container that groups related buttons together with consistent styling. | `npx shadcn@latest add https://ui.persian-labs.ir/r/button-group.json` |
| popover | registry:ui | Displays rich content in a portal, anchored to a trigger. | `npx shadcn@latest add https://ui.persian-labs.ir/r/popover.json` |
| select | registry:ui | A searchable-free listbox for choosing a single value, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/select.json` |
| dropdown-menu | registry:ui | Displays a menu of actions or options, triggered by a button. | `npx shadcn@latest add https://ui.persian-labs.ir/r/dropdown-menu.json` |
| input-group | registry:ui | Groups an input with addons, buttons, or text for complex input layouts. | `npx shadcn@latest add https://ui.persian-labs.ir/r/input-group.json` |
| field | registry:ui | Groups a label, control, and description into an accessible form field, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/field.json` |
| textarea | registry:ui | A styled multi-line text input. | `npx shadcn@latest add https://ui.persian-labs.ir/r/textarea.json` |
| kbd | registry:ui | Displays a keyboard key or shortcut. | `npx shadcn@latest add https://ui.persian-labs.ir/r/kbd.json` |
| badge | registry:ui | Displays a small badge to highlight status or metadata. | `npx shadcn@latest add https://ui.persian-labs.ir/r/badge.json` |
| input-otp | registry:ui | An accessible one-time password input, built on input-otp. | `npx shadcn@latest add https://ui.persian-labs.ir/r/input-otp.json` |
| separator | registry:ui | Visually or semantically separates content, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/separator.json` |
| card | registry:ui | Displays a card with header, content, and footer. | `npx shadcn@latest add https://ui.persian-labs.ir/r/card.json` |
| breadcrumb | registry:ui | Displays the path to the current resource using a hierarchy of links. | `npx shadcn@latest add https://ui.persian-labs.ir/r/breadcrumb.json` |
| empty | registry:ui | Displays an empty state with a title, description, and optional actions. | `npx shadcn@latest add https://ui.persian-labs.ir/r/empty.json` |
| switch | registry:ui | A control that toggles between checked and unchecked, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/switch.json` |
| checkbox | registry:ui | A control for selecting one or more options, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/checkbox.json` |
| radio-group | registry:ui | A set of mutually exclusive radio buttons, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/radio-group.json` |
| progress | registry:ui | Displays an indicator showing the completion progress of a task, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/progress.json` |
| collapsible | registry:ui | An interactive component which expands/collapses a panel, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/collapsible.json` |
| toggle | registry:ui | A two-state button that can be either on or off, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/toggle.json` |
| toggle-group | registry:ui | A set of two-state buttons that can be toggled on or off, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/toggle-group.json` |
| native-select | registry:ui | A styled native <select> element for choosing a single value. | `npx shadcn@latest add https://ui.persian-labs.ir/r/native-select.json` |
| navigation-menu | registry:ui | A collection of links for navigating websites, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/navigation-menu.json` |
| elastic-slider | registry:ui | Slider with elastic rubber-band drag and magnetic snap feedback. | `npx shadcn@latest add https://ui.persian-labs.ir/r/elastic-slider.json` |
| elastic-range-slider | registry:ui | A single-track, dual-thumb range slider in the same visual language as Elastic Slider. | `npx shadcn@latest add https://ui.persian-labs.ir/r/elastic-range-slider.json` |
| tooltip | registry:ui | Displays contextual information when hovering or focusing an element, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/tooltip.json` |
| accordion | registry:ui | A vertically stacked set of interactive headings that each reveal a section of content, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/accordion.json` |
| sheet | registry:ui | A panel that slides in from an edge of the screen to complement the main content, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/sheet.json` |
| sidebar | registry:ui | A composable, collapsible application sidebar with mobile drawer, tooltips, and RTL support, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/sidebar.json` |
| carousel | registry:ui | A carousel with motion and swipe built using Embla. | `npx shadcn@latest add https://ui.persian-labs.ir/r/carousel.json` |
| context-menu | registry:ui | A menu of actions triggered by a right click, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/context-menu.json` |
| menubar | registry:ui | A persistent horizontal menu bar for application-style commands, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/menubar.json` |
| dialog | registry:ui | A modal window layered over the page for focused tasks or confirmations, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/dialog.json` |
| alert-dialog | registry:ui | A modal dialog that interrupts the user with important content and expects a response, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/alert-dialog.json` |
| drawer | registry:ui | A swipeable panel that slides in from an edge of the screen, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/drawer.json` |
| responsive-dialog | registry:ui | Renders a Dialog on desktop and a bottom Drawer on mobile from one shared set of components. | `npx shadcn@latest add https://ui.persian-labs.ir/r/responsive-dialog.json` |
| responsive-menu | registry:ui | Renders a Dropdown Menu on desktop and a bottom Drawer menu on mobile from one shared set of components. | `npx shadcn@latest add https://ui.persian-labs.ir/r/responsive-menu.json` |
| responsive-alert-dialog | registry:ui | Renders an Alert Dialog on desktop and a bottom Drawer on mobile from one shared set of components. | `npx shadcn@latest add https://ui.persian-labs.ir/r/responsive-alert-dialog.json` |
| alert | registry:ui | Displays a callout for important, contextual messages. | `npx shadcn@latest add https://ui.persian-labs.ir/r/alert.json` |
| aspect-ratio | registry:ui | Displays content within a desired ratio. | `npx shadcn@latest add https://ui.persian-labs.ir/r/aspect-ratio.json` |
| attachment | registry:ui | Displays a file or image attachment with media, metadata, upload state, and actions. | `npx shadcn@latest add https://ui.persian-labs.ir/r/attachment.json` |
| avatar | registry:ui | An image element with a fallback, for representing a user or entity, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/avatar.json` |
| skeleton | registry:ui | Used to show a placeholder while content is loading. | `npx shadcn@latest add https://ui.persian-labs.ir/r/skeleton.json` |
| direction | registry:ui | A provider for setting the reading direction (LTR or RTL) of your app, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/direction.json` |
| hover-card | registry:ui | For sighted users to preview content available behind a link, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/hover-card.json` |
| iran-map-picker | registry:ui | An interactive SVG map of Iran's provinces for picking a province, with hover previews, keyboard selection, and shadcn-style controlled state. | `npx shadcn@latest add https://ui.persian-labs.ir/r/iran-map-picker.json` |
| item | registry:ui | A flexible layout for a piece of content, media, or action, often used in lists. | `npx shadcn@latest add https://ui.persian-labs.ir/r/item.json` |
| marker | registry:ui | A small label for annotating content, such as a section divider or inline note. | `npx shadcn@latest add https://ui.persian-labs.ir/r/marker.json` |
| bubble | registry:ui | A chat message bubble with variants, reactions, and start/end alignment. | `npx shadcn@latest add https://ui.persian-labs.ir/r/bubble.json` |
| message | registry:ui | Composable layout for a chat message with an avatar, header, content, and footer. | `npx shadcn@latest add https://ui.persian-labs.ir/r/message.json` |
| message-scroller | registry:ui | An auto-scrolling viewport for chat messages, with scroll-to-start/end buttons, built on @shadcn/react. | `npx shadcn@latest add https://ui.persian-labs.ir/r/message-scroller.json` |
| pagination | registry:ui | Navigation for paginated content, built on Button. | `npx shadcn@latest add https://ui.persian-labs.ir/r/pagination.json` |
| resizable | registry:ui | Accessible resizable panel groups and layouts, built on react-resizable-panels. | `npx shadcn@latest add https://ui.persian-labs.ir/r/resizable.json` |
| table | registry:ui | A responsive table component, with an optional card-row variant. | `npx shadcn@latest add https://ui.persian-labs.ir/r/table.json` |
| toman-icon | registry:ui | The Toman currency symbol, as a standalone icon component. | `npx shadcn@latest add https://ui.persian-labs.ir/r/toman-icon.json` |
| utils | registry:lib | The cn() class-merging helper built on clsx and tailwind-merge. | `npx shadcn@latest add https://ui.persian-labs.ir/r/utils.json` |
| iranian-bank | registry:lib | Iranian card and Shaba normalization, checksum validation, and bank detection. | `npx shadcn@latest add https://ui.persian-labs.ir/r/iranian-bank.json` |
| bank-input | registry:ui | Iranian card-number and Shaba inputs with paste normalization, checksum validation, and bank detection. | `npx shadcn@latest add https://ui.persian-labs.ir/r/bank-input.json` |
| price-input | registry:ui | A text input that live-formats digits as a grouped price as you type, with support for Persian/Arabic-Indic numerals. | `npx shadcn@latest add https://ui.persian-labs.ir/r/price-input.json` |
| password-input | registry:ui | A password input with a show/hide toggle that always renders LTR, regardless of the surrounding document direction. | `npx shadcn@latest add https://ui.persian-labs.ir/r/password-input.json` |
| qr-code | registry:ui | A rounded QR code generator with dot modules, custom foreground/background colors, configurable error correction, and a matching loading skeleton. | `npx shadcn@latest add https://ui.persian-labs.ir/r/qr-code.json` |
| questionnaire | registry:ui | A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions, built on @shadcn/react. | `npx shadcn@latest add https://ui.persian-labs.ir/r/questionnaire.json` |
| toast | registry:ui | 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 … | `npx shadcn@latest add https://ui.persian-labs.ir/r/toast.json` |
| copy-button | registry:ui | An icon button that copies text to the clipboard, morphs its icon to reflect the result, and anchors a confirmation toast to itself. | `npx shadcn@latest add https://ui.persian-labs.ir/r/copy-button.json` |
| normalize-persian-digits | registry:lib | Converts Persian (۰-۹) and Arabic-Indic (٠-٩) numerals to plain 0-9 digits. | `npx shadcn@latest add https://ui.persian-labs.ir/r/normalize-persian-digits.json` |
| normalize-persian-text | registry:lib | Unifies Arabic-codepage letters onto Persian ones (ي→ی, ك→ک, …) with opt-in digit folding, diacritic stripping, half-space repair, and space tidying. | `npx shadcn@latest add https://ui.persian-labs.ir/r/normalize-persian-text.json` |
| number-to-persian-words | registry:lib | Spells numbers out in Persian words, accepting Latin or Persian digits with signs, decimals, and thousands separators. | `npx shadcn@latest add https://ui.persian-labs.ir/r/number-to-persian-words.json` |
| use-controllable-state | registry:hook | A hook for a value that can be either controlled or uncontrolled, with a single consistent API either way. | `npx shadcn@latest add https://ui.persian-labs.ir/r/use-controllable-state.json` |
| use-copy-to-clipboard | registry:hook | Wraps the Clipboard API with a built-in timeout to reset the copied state, for copy buttons that show brief confirmation feedback. | `npx shadcn@latest add https://ui.persian-labs.ir/r/use-copy-to-clipboard.json` |
| use-countdown | registry:hook | A timer-aligned countdown hook for ISO-8601 target dates, with overdue state and formatted output. | `npx shadcn@latest add https://ui.persian-labs.ir/r/use-countdown.json` |
| use-media-query | registry:hook | Reactive media query hook with Tailwind-like breakpoint syntax, built on useSyncExternalStore for SSR safety. | `npx shadcn@latest add https://ui.persian-labs.ir/r/use-media-query.json` |
| persian-date | registry:lib | Jalali/Gregorian date utilities built on date-fns and date-fns-jalali: formatting, parsing, conversion, ranges, and digit conversion, switchable with a calenda… | `npx shadcn@latest add https://ui.persian-labs.ir/r/persian-date.json` |
| persian-date-zod | registry:lib | 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… | `npx shadcn@latest add https://ui.persian-labs.ir/r/persian-date-zod.json` |
| persian-holidays | registry:lib | Official/religious/cultural Iranian holiday lookup for a date, range, or year, resolving Jalali, Gregorian, and tabular-Hijri entries. | `npx shadcn@latest add https://ui.persian-labs.ir/r/persian-holidays.json` |
| persian-slug | registry:lib | Converts Persian/mixed Persian+English text into a URL-safe slug, keeping Persian script by default or transliterating to Latin/ASCII. | `npx shadcn@latest add https://ui.persian-labs.ir/r/persian-slug.json` |
| persian-reshape | registry:lib | 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… | `npx shadcn@latest add https://ui.persian-labs.ir/r/persian-reshape.json` |
| use-date | registry:hook | A reactive current date/time hook with Jalali/Gregorian support, formatted output, and optional holiday flagging. | `npx shadcn@latest add https://ui.persian-labs.ir/r/use-date.json` |
| use-time-ago | registry:hook | A reactive relative-time formatter ("۲ روز پیش" / "2 days ago") with built-in Persian and English message tables. | `npx shadcn@latest add https://ui.persian-labs.ir/r/use-time-ago.json` |
| hitbox | registry:ui | Extends the clickable area of a child element for improved accessibility. | `npx shadcn@latest add https://ui.persian-labs.ir/r/hitbox.json` |
| calendar | registry:ui | 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… | `npx shadcn@latest add https://ui.persian-labs.ir/r/calendar.json` |
| wheel-picker | registry:ui | An iOS-like wheel picker with smooth inertia, infinite scrolling, and keyboard navigation. | `npx shadcn@latest add https://ui.persian-labs.ir/r/wheel-picker.json` |
| date-picker | registry:ui | An opinionated, responsive Shamsi/Gregorian date and date-time picker with SSR-safe today defaults, draft state, and Popover-to-Drawer presentation. | `npx shadcn@latest add https://ui.persian-labs.ir/r/date-picker.json` |
| time-picker | registry:ui | An hour/minute/second wheel-based time picker, with a responsive Popover-on-desktop, Drawer-on-mobile composition. | `npx shadcn@latest add https://ui.persian-labs.ir/r/time-picker.json` |
| receipt-printer | registry:ui | A tactile checkout printer with processing stages and a composable thermal-paper receipt. | `npx shadcn@latest add https://ui.persian-labs.ir/r/receipt-printer.json` |
| date-wheel-picker | registry:ui | 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… | `npx shadcn@latest add https://ui.persian-labs.ir/r/date-wheel-picker.json` |
| slider | registry:ui | An input where the user selects a value from within a given range, built on Base UI. | `npx shadcn@latest add https://ui.persian-labs.ir/r/slider.json` |
| iranian-mobile | registry:lib | Iranian mobile phone number normalization, validation, and masking. | `npx shadcn@latest add https://ui.persian-labs.ir/r/iranian-mobile.json` |
| mobile-number-input | registry:ui | An Iranian mobile number input that normalizes mixed paste formats and Persian digits, with a redundant validity indicator. | `npx shadcn@latest add https://ui.persian-labs.ir/r/mobile-number-input.json` |
| national-id | registry:lib | Validates Iranian national ID (کد ملی) numbers using the standard 10-digit checksum. | `npx shadcn@latest add https://ui.persian-labs.ir/r/national-id.json` |
| postal-code | registry:lib | Validates the structural format of Iranian postal codes (کد پستی). | `npx shadcn@latest add https://ui.persian-labs.ir/r/postal-code.json` |
| status-button | registry:ui | A button that swaps between idle, loading, and success feedback for async actions. | `npx shadcn@latest add https://ui.persian-labs.ir/r/status-button.json` |
| plate-input | registry:ui | An Iranian vehicle license plate input with digit segments, a letter picker including wheelchair plates, and the Iran serial tab. | `npx shadcn@latest add https://ui.persian-labs.ir/r/plate-input.json` |
| national-id-input | registry:ui | An Iranian national ID (کد ملی) input that normalizes Persian digits as you type or paste and validates the checksum live, with a redundant validity indicator. | `npx shadcn@latest add https://ui.persian-labs.ir/r/national-id-input.json` |
| bounce-sidebar | registry:ui | A vertical navigation list with a bouncy, arc-animated active marker that springs between items. | `npx shadcn@latest add https://ui.persian-labs.ir/r/bounce-sidebar.json` |
| proximity-sidebar | registry:ui | A document minimap of proximity-reactive dashes that tracks scroll position, expands near the pointer, and smooth-scrolls to sections on click. | `npx shadcn@latest add https://ui.persian-labs.ir/r/proximity-sidebar.json` |
| duration-picker | registry:ui | A gooey, spring-animated picker for entering a duration in hours and minutes. | `npx shadcn@latest add https://ui.persian-labs.ir/r/duration-picker.json` |

## For AI agents

```text
You are adding components from @persianlabsui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/persianlabsui.md) for the component list.
2. Fetch the machine-readable index: https://ui.persian-labs.ir/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: persianlabsui).
```