@vectorstudio-ir

A vertically stacked set of interactive headings that each reveal a section of content.

Displays a callout for user attention.

A modal dialog that interrupts the user with important content and expects a response.

Displays content within a desired ratio.

File attachment preview chip with download / remove affordances.

An image element with a fallback for representing the user.

Displays a badge or a component that looks like a badge.

Injects the Vectorstudio brand palette (orange primary, brand neutrals, success/warning tokens), the Persian/Latin variable font registrations, and the RTL-awa…

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

Chat bubble layout with avatar slot and timestamp.

Displays a button or a component that looks like a button. Base-nova variants on @base-ui/react.

Container that groups related buttons together with consistent spacing.

A date field component that allows users to enter and edit date values.

Displays a card with header, content, and footer.

A carousel with motion and swipe gestures, built on Embla.

Recharts wrapper with theme tokens for bar/line/area/pie/radar charts.

A control that allows the user to toggle between checked and not checked.

An interactive component which expands/collapses a panel.

Autocomplete input with a filterable list of options, built on @base-ui/react.

Fast, searchable command palette (⌘K) built on cmdk.

Displays a menu to the user — such as a set of actions — triggered by right-click.

A window overlaid on either the primary window or another dialog window.

Re-export of @base-ui/react/direction-provider for RTL/LTR directionality.

A draggable, dismissable side panel.

Displays a menu to the user — such as a set of actions — triggered by a button.

Placeholder for empty states (lists, tables, search results).

Label + control + helper/error message container with consistent spacing.

Tailwind v4 CSS-first config with the Vectorstudio palette, Persian font registration, RTL defaults, and shadcn-style layer base.

For sighted users to preview content available behind a link.

Auto-generated barrel of 578 icons from @hackernoon/pixel-icon-library across regular, solid, brands, and purcats categories.

Displays a form input field.

Input wrapper that supports addons, prefixes, and suffixes with consistent styling.

Accessible one-time password input with individual character slots.

A versatile content container with header/body/footer slots.

Displays keyboard shortcuts inside a kbd element.

Renders an accessible label associated with a form control.

Compact badge-like marker used for tags and statuses.

A visually persistent menu common in desktop applications. Built on @base-ui/react.

Single chat message with author, body, and timestamp slots.

Auto-scrolling container for chat-style message lists with sticky scroll behavior.

Native HTML <select> styled to match the design system.

A collection of links for navigating websites, with hover-to-open dropdowns.

Pagination with previous/next and page-number controls. Built on @base-ui/react.

Single-icon wrapper that renders a pixel-icon SVG with consistent sizing and color.

Displays rich content in a portal, triggered by a button.

Displays an indicator showing the completion progress of a task.

A set of checkable buttons where no more than one can be checked at a time.

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

Augments native scroll viewport with custom styled scrollbars.

Displays a list of options for the user to pick from — triggered by a button.

Visually or semantically separates content.

Extends the Dialog component to display content that complements the main content.

Persisted, collapsible, mobile-aware sidebar with composable subcomponents.

Use to show a placeholder while content is loading.

An input where the user selects a value from within a given range.

Opinionated toast component built on the sonner library.

Loading spinner used to indicate a busy state.

A control that allows the user to toggle between checked and not checked.

A responsive table component with semantic markup and a sticky header option.

A set of layered sections of content — known as tab panels — that are displayed one at a time.

Displays a form textarea.

A two-state button that can be either on or off.

A set of two-state buttons that can be toggled on or off.

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Hook that returns true when the viewport is below the mobile breakpoint.

clsx + tailwind-merge wrapper used by every primitive.