Installation

Sulaf components are distributed as raw source code that you add directly to your project. This gives you full control and ownership over the implementation.

Prerequisites

Before adding Sulaf components, you need an existing project with:

• Vue 3.4+
• Tailwind CSS
• shadcn-vue

If you haven't set up shadcn-vue yet, follow their installation guide. Your project must have a valid components.json file.

Choose your installation method

You can add components using the Sulaf CLI (the fastest method) or by leveraging the standard shadcn-vue CLI.

Method 1: Using Sulaf CLI (Recommended)

The dedicated sulaf acts as a seamless wrapper, letting you add components with zero extra configuration.

pnpmnpmyarnbun
pnpm dlx sulaf@latest <component-name>
Copy

For example, to add the autocomplete component:

pnpmnpmyarnbun
pnpm dlx sulaf@latest autocomplete
Copy

You can install all components at once with:

pnpmnpmyarnbun
pnpm dlx sulaf@latest all
Copy

Method 2: Registry Setup (usnig shadcn-vue CLI directly)

If you prefer using the standard shadcn-vue CLI, you can register Sulaf as a recognized component source within your project.

1. Open your components.json file.
2. Add @sulaf to the registries object:

Copy{
  "aliases": { ... },
  "registries": {
    "@sulaf": "https://sulaf-socd8d.cranl.net/r/components/{name}.json"
  }
}

3. Add components using the shorthand prefix:

pnpmnpmyarnbun
pnpm dlx shadcn-vue@latest add @sulaf/autocomplete
Copy

Method 3: Direct URL (shadcn-vue CLI)

If you don't want to modify your components.json registry, you can pass the direct URL to the shadcn-vue CLI:

pnpmnpmyarnbun
pnpm dlx shadcn-vue@latest add https://sulaf-socd8d.cranl.net/r/components/autocomplete.json
Copy

Method 4: Manual installation

You can also copy component source code directly from our documentation pages into your project. Each page includes the required snippets, dependency list, and usage examples.

Next Steps

Start Browsing Components to see what's available.