---
name: "@vectorstudio-ir"
slug: "vectorstudio-ir"
description: "Vectorstudio UI design system: 60 shadcn-compatible primitives on @base-ui/react, RTL/Persian first, 578-icon pixel-icon library, Tailwind v4 + orange brand palette."
category: "Charts/data viz"
tags: ["auth", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "hooks", "icons", "loaders", "media", "mobile", "navigation", "overlays", "pro-available", "retro", "tables"]
framework: "react"
license: "MIT"
author: "vectorstudio-ir"
website: "https://github.com/vectorstudio-ir/ui"
github: "https://github.com/vectorstudio-ir/ui"
registry: "https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/registry.json"
pro: true
pro_url: "https://github.com/enterprise/premium-support"
github_stars: 1
component_count: 66
generated_at: "2026-09-21T01:50:16.753Z"
---

# @vectorstudio-ir

Vectorstudio UI design system: 60 shadcn-compatible primitives on @base-ui/react, RTL/Persian first, 578-icon pixel-icon library, Tailwind v4 + orange brand palette.

## Links

- Website: https://github.com/vectorstudio-ir/ui
- GitHub: https://github.com/vectorstudio-ir/ui
- Registry JSON: https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/vectorstudio-ir
- This file: https://sh4dcn.vercel.app/md/vectorstudio-ir.md
- Pro / pricing: https://github.com/enterprise/premium-support

## Install

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

## Components (66)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | A vertically stacked set of interactive headings that each reveal a section of content. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/accordion.json` |
| alert | registry:ui | Displays a callout for user attention. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/alert.json` |
| alert-dialog | registry:ui | A modal dialog that interrupts the user with important content and expects a response. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/alert-dialog.json` |
| aspect-ratio | registry:ui | Displays content within a desired ratio. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/aspect-ratio.json` |
| attachment | registry:ui | File attachment preview chip with download / remove affordances. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/attachment.json` |
| avatar | registry:ui | An image element with a fallback for representing the user. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/avatar.json` |
| badge | registry:ui | Displays a badge or a component that looks like a badge. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/badge.json` |
| base-nova-rtl | registry:style | Injects the Vectorstudio brand palette (orange primary, brand neutrals, success/warning tokens), the Persian/Latin variable font registrations, and the RTL-awa… | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/base-nova-rtl.json` |
| breadcrumb | registry:ui | Displays the path to the current resource using a hierarchy of links. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/breadcrumb.json` |
| bubble | registry:ui | Chat bubble layout with avatar slot and timestamp. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/bubble.json` |
| button | registry:ui | Displays a button or a component that looks like a button. Base-nova variants on @base-ui/react. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/button.json` |
| button-group | registry:ui | Container that groups related buttons together with consistent spacing. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/button-group.json` |
| calendar | registry:ui | A date field component that allows users to enter and edit date values. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/calendar.json` |
| card | registry:ui | Displays a card with header, content, and footer. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/card.json` |
| carousel | registry:ui | A carousel with motion and swipe gestures, built on Embla. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/carousel.json` |
| chart | registry:ui | Recharts wrapper with theme tokens for bar/line/area/pie/radar charts. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/chart.json` |
| checkbox | registry:ui | A control that allows the user to toggle between checked and not checked. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/checkbox.json` |
| collapsible | registry:ui | An interactive component which expands/collapses a panel. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/collapsible.json` |
| combobox | registry:ui | Autocomplete input with a filterable list of options, built on @base-ui/react. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/combobox.json` |
| command | registry:ui | Fast, searchable command palette (⌘K) built on cmdk. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/command.json` |
| context-menu | registry:ui | Displays a menu to the user — such as a set of actions — triggered by right-click. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/context-menu.json` |
| dialog | registry:ui | A window overlaid on either the primary window or another dialog window. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/dialog.json` |
| direction | registry:ui | Re-export of @base-ui/react/direction-provider for RTL/LTR directionality. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/direction.json` |
| drawer | registry:ui | A draggable, dismissable side panel. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/drawer.json` |
| dropdown-menu | registry:ui | Displays a menu to the user — such as a set of actions — triggered by a button. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/dropdown-menu.json` |
| empty | registry:ui | Placeholder for empty states (lists, tables, search results). | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/empty.json` |
| field | registry:ui | Label + control + helper/error message container with consistent spacing. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/field.json` |
| globals | registry:style | Tailwind v4 CSS-first config with the Vectorstudio palette, Persian font registration, RTL defaults, and shadcn-style layer base. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/globals.json` |
| hover-card | registry:ui | For sighted users to preview content available behind a link. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/hover-card.json` |
| icons | registry:ui | Auto-generated barrel of 578 icons from @hackernoon/pixel-icon-library across regular, solid, brands, and purcats categories. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/icons.json` |
| input | registry:ui | Displays a form input field. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/input.json` |
| input-group | registry:ui | Input wrapper that supports addons, prefixes, and suffixes with consistent styling. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/input-group.json` |
| input-otp | registry:ui | Accessible one-time password input with individual character slots. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/input-otp.json` |
| item | registry:ui | A versatile content container with header/body/footer slots. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/item.json` |
| kbd | registry:ui | Displays keyboard shortcuts inside a kbd element. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/kbd.json` |
| label | registry:ui | Renders an accessible label associated with a form control. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/label.json` |
| marker | registry:ui | Compact badge-like marker used for tags and statuses. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/marker.json` |
| menubar | registry:ui | A visually persistent menu common in desktop applications. Built on @base-ui/react. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/menubar.json` |
| message | registry:ui | Single chat message with author, body, and timestamp slots. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/message.json` |
| message-scroller | registry:ui | Auto-scrolling container for chat-style message lists with sticky scroll behavior. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/message-scroller.json` |
| native-select | registry:ui | Native HTML <select> styled to match the design system. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/native-select.json` |
| navigation-menu | registry:ui | A collection of links for navigating websites, with hover-to-open dropdowns. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/navigation-menu.json` |
| pagination | registry:ui | Pagination with previous/next and page-number controls. Built on @base-ui/react. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/pagination.json` |
| pixel-icon | registry:ui | Single-icon wrapper that renders a pixel-icon SVG with consistent sizing and color. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/pixel-icon.json` |
| popover | registry:ui | Displays rich content in a portal, triggered by a button. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/popover.json` |
| progress | registry:ui | Displays an indicator showing the completion progress of a task. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/progress.json` |
| radio-group | registry:ui | A set of checkable buttons where no more than one can be checked at a time. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/radio-group.json` |
| resizable | registry:ui | Accessible resizable panel groups, built on react-resizable-panels. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/resizable.json` |
| scroll-area | registry:ui | Augments native scroll viewport with custom styled scrollbars. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/scroll-area.json` |
| select | registry:ui | Displays a list of options for the user to pick from — triggered by a button. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/select.json` |
| separator | registry:ui | Visually or semantically separates content. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/separator.json` |
| sheet | registry:ui | Extends the Dialog component to display content that complements the main content. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/sheet.json` |
| sidebar | registry:ui | Persisted, collapsible, mobile-aware sidebar with composable subcomponents. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/sidebar.json` |
| skeleton | registry:ui | Use to show a placeholder while content is loading. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/skeleton.json` |
| slider | registry:ui | An input where the user selects a value from within a given range. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/slider.json` |
| sonner | registry:ui | Opinionated toast component built on the sonner library. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/sonner.json` |
| spinner | registry:ui | Loading spinner used to indicate a busy state. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/spinner.json` |
| switch | registry:ui | A control that allows the user to toggle between checked and not checked. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/switch.json` |
| table | registry:ui | A responsive table component with semantic markup and a sticky header option. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/table.json` |
| tabs | registry:ui | A set of layered sections of content — known as tab panels — that are displayed one at a time. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/tabs.json` |
| textarea | registry:ui | Displays a form textarea. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/textarea.json` |
| toggle | registry:ui | A two-state button that can be either on or off. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/toggle.json` |
| toggle-group | registry:ui | A set of two-state buttons that can be toggled on or off. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/toggle-group.json` |
| tooltip | registry:ui | A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/tooltip.json` |
| use-mobile | registry:hook | Hook that returns true when the viewport is below the mobile breakpoint. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/use-mobile.json` |
| utils | registry:lib | clsx + tailwind-merge wrapper used by every primitive. | `npx shadcn@latest add https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/r/utils.json` |

## For AI agents

```text
You are adding components from @vectorstudio-ir to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/vectorstudio-ir.md) for the component list.
2. Fetch the machine-readable index: https://raw.githubusercontent.com/vectorstudio-ir/ui/develop/public/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: vectorstudio-ir).
```