@vectorstudio-ir/ui — Vectorstudio shadcn registry

A shadcn-compatible registry for the Vectorstudio design system. Hosts the canonical source for every UI primitive used across studio projects (web, CMS, future studios).

You own the code: every primitive is installed into your repo as a real source file, not pulled from node_modules at runtime. Updates flow from this repo through the standard shadcn CLI.

Quick start

1. Set up a consumer project

The registry works with any shadcn-compatible consumer. The only prerequisite is a globals.css Tailwind v4 entry that imports tailwindcss. Most consumers get this from npx shadcn init.

# In your app (Next.js, Vite, TanStack Start, anything with a CSS file)npx shadcn@latest init

For a brand-new project, shadcn creates src/styles/globals.css (or whatever your tailwind.css in components.json points at) with the @import "tailwindcss"; line in it. The Vectorstudio registry hooks into that file.

2. Register the namespace (one-time)

npx shadcn@latest registry add @vectorstudio-ir=https://ui.vectorstudio.ir/r/{name}.json

(Or use the GitHub address directly without registering a namespace — see below.)

3. Install the Vectorstudio base palette

npx shadcn@latest add @vectorstudio-ir/base-nova-rtl

This injects the brand palette (orange primary, brand neutrals, success/warning tokens), font registrations (Geist, Vazirmatn, Space Mono), and the RTL/Persian heading rule into your existing globals.css. It does not overwrite your @import "tailwindcss" or anything else.

4. Add components

# Single componentnpx shadcn@latest add @vectorstudio-ir/button
# A block with its dependenciesnpx shadcn@latest add @vectorstudio-ir/sidebar
# Many at oncenpx shadcn@latest add @vectorstudio-ir/dialog @vectorstudio-ir/chart @vectorstudio-ir/select

shadcn auto-installs the npm deps (@base-ui/react, class-variance-authority, etc.) and writes the source files into your components/, hooks/, lib/, and components/icons/ directories.

5. (Optional) drop the full globals.css bundle

npx shadcn@latest add @vectorstudio-ir/globals

This writes the full globals.css (with @theme inline palette + light/dark semantic tokens + @layer base) to src/styles/globals.css. Use this when starting a brand-new project; skip it if you already have CSS conventions you want to keep.

The Morabba and RooyinFreeFaNum woff2 files are not bundled in the registry — those are template-specific. Drop them into your own public/fonts/ and add the @font-face blocks manually (see the figma-implementation skill for the canonical set).

GitHub-registry mode

The repo's root registry.json is a valid shadcn catalog, so consumers can install directly without registering a namespace:

npx shadcn@latest add vectorstudio-ir/ui/button

This works once the github.com/vectorstudio-ir/ui repo is public. Use this for casual one-off installs; use the namespace form above for project-wide configuration.

What's in the registry

Total: 66 items in the catalog.

Every component file ships with registryDependencies declaring every other component it imports, so shadcn pulls the whole subgraph. Internal imports use @/components/<name>, @/hooks/<name>, @/lib/utils, and @/components/icons — paths the consumer's components.json aliases control.

What's preserved from the custom CLI

Every product decision that distinguished this registry from stock shadcn carries over:

• @base-ui/react primitives, not Radix
• Pixel icons (@hackernoon/pixel-icon-library, 578 icons across regular/solid/brands/purcats)
• RTL / Persian-first with rtl: true, --font-heading: 'RooyinFreeFaNum', heading weight 700 baked in via @layer base
• Custom palette (orange primary #FE5000, brand neutrals, success/warning tokens)
• Persian + Latin + monospace fonts (Vazirmatn, Space Mono, Geist, RooyinFreeFaNum)
• Direction provider as a registry:ui item
• iconLibrary: "pixel" in the consumer's components.json

The Morabba + RooyinFreeFaNum woff2 files stay in the bootstrap templates (they're project-specific and not redistributable from this repo). The figma-implementation agent skill ships as a registry:item with explicit file targets.

Bootstrap a new project from scratch

For a brand-new TanStack Start monorepo with everything wired up, the studio-app-{pnpm,bun}/ templates in templates/ are the canonical scaffold. They ship with {{var}} substitution for brand name and package manager.

# From a fresh, empty dir:npx -y @vectorstudio-ir/create . --pm pnpmpnpm installcd packages/uipnpm dlx shadcn add @vectorstudio-ir/base-nova-rtl @vectorstudio-ir/button @vectorstudio-ir/sidebarpnpm dev

The create/ directory in this repo is the standalone @vectorstudio-ir/create tool — a small Node script that copies the templates, renders substitutions, and prints the next-step commands. Promote it to a separate npm package when the bootstrap story needs more features.

Local development

# Regenerate the icon barrel (reads from node_modules/@hackernoon/pixel-icon-library)pnpm build:icons
# Regenerate registry.json (catalog + legacy index.json) after adding/removing primitivespnpm build:registry
# Build the per-item JSONs into public/r/ for static hostingpnpm build:shadcn
# Validate the catalog against the shadcn schemapnpm validate
# Smoke test: build, then install via shadcn CLI into a scratch consumerpnpm smoke

Adding a new primitive

1. Create the file under registry/base-nova/ui/<kebab-case>.tsx. Use @/lib/utils, @/components/..., @/components/icons, or @/hooks/... for imports — never hardcode a relative path.
2. Add a metadata entry to ITEM_META in scripts/build-registry.mjs (title, description, categories) — keeps the catalog readable in shadcn search.
3. Run pnpm build:registry to regenerate registry.json.
4. Run pnpm build:icons if you touched the icons barrel.

Distribution channels

We submit @vectorstudio-ir to the public registry index at https://ui.shadcn.com/r/registries.json so consumers can npx shadcn registry add @vectorstudio-ir by name.

Release process

1. Land changes on main — CI runs shadcn registry validate and the smoke test.
2. Tag: git tag v0.5.0 && git push --tags.
3. No automated publish — the catalog IS the source of truth. GitHub-registry mode picks up new items as soon as registry.json lands on main.

The legacy studio-ui CLI was removed in v0.5.0. The studio-ui-0.4.0.tgz artifact in the repo root is stale and ignored by .gitignore; delete it locally with git clean -nd to confirm.

License

MIT — see LICENSE.