Getting Started

Prerequisites

Before installing Vuzeno components, make sure you have:

• Vue 3.5+ — Vuzeno uses the latest Vue features
• Tailwind CSS 4 — For styling components
• A components.json file — Used by the shadcn-vue CLI to know where to install files

If you don't have a registry setup yet, run bunx shadcn-vue@latest init to create components.json, then add Vuzeno as a registry below.

Registry setup

Add Vuzeno to your components.json registries so you can install components with the @vuzeno/ shorthand:

      Copy
      {
  "registries": {
    "@vuzeno": "https://vuzeno.com/r/{name}.json"
  }
}
    

Installation

Install components with the shadcn-vue CLI:

      Copy
      bunx --bun shadcn-vue@latest add @vuzeno/[component]
    

      Copy
      npx shadcn-vue@latest add @vuzeno/[component]
    

      Copy
      yarn dlx shadcn-vue@latest add @vuzeno/[component]
    

      Copy
      pnpm dlx shadcn-vue@latest add @vuzeno/[component]
    

Replace [component] with the component name (e.g. dialog, phone-field, autocomplete). Without registry setup, you can also install by URL: shadcn-vue add https://vuzeno.com/r/[component].json

The CLI copies the component source and its registry dependencies into your project. Runtime packages such as @ark-ui/vue are installed as npm dependencies when needed. Some components also list extra npm packages on their docs (e.g. libphonenumber-js for Phone Field) — install those if prompted or as shown on the component page.

Manual installation

You can also copy component source code from the docs into your project. Each component page includes dependencies, source snippets, and usage examples.

TypeScript

Vuzeno is written in TypeScript and provides full type definitions. No additional configuration is required — types are inferred automatically.

Next Steps

Ready to add your first component? Browse the components catalog, or start with:

• Dialog — Accessible modal dialogs on Ark UI
• Phone Field — Auto-formatting and validation for phone numbers
• Autocomplete — Searchable combobox patterns

Each component page includes installation, source, props, and usage examples.