Configuration
Configure the YaVendio Registry for your project
The components.json file is the central configuration for managing components from the YaVendio Registry.
Basic Configuration
Complete example with authentication:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "app/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"registries": {
"@yavendio": {
"url": "https://www.ya.style/api/registry/{name}",
"headers": {
"Authorization": "Bearer ${YAVENDIO_REGISTRY_TOKEN}"
}
}
}
}Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
style | string | "default" | Style variant. YaVendio uses "default" |
rsc | boolean | true | Use React Server Components (Next.js 13+ App Router) |
tsx | boolean | true | Use TypeScript. Strongly recommended |
tailwind.config | string | — | Path to Tailwind CSS config file |
tailwind.css | string | — | Path to global CSS file |
tailwind.cssVariables | boolean | true | Use CSS variables for theming. Required for YaVendio |
aliases | object | — | Import path aliases |
registries | object | — | Remote registries configuration |
Registry Authentication
The YaVendio Registry requires authentication to protect proprietary components.
Obtain Your Access Token
Contact your YaVendio team administrator to get your personal or team access token.
Configure Environment Variable
Add your token to .env.local:
YAVENDIO_REGISTRY_TOKEN=your_access_token_hereSecurity
Never commit tokens to version control. Ensure .env.local is in your .gitignore.
Configure Registry Headers
Update components.json with authorization headers:
{
"registries": {
"@yavendio": {
"url": "https://www.ya.style/api/registry/{name}",
"headers": {
"Authorization": "Bearer ${YAVENDIO_REGISTRY_TOKEN}"
}
}
}
}The ${YAVENDIO_REGISTRY_TOKEN} syntax tells the shadcn CLI to read from environment variables.
Error Reference
Authentication Errors
| Code | Description | Solution |
|---|---|---|
| 401 Unauthorized | Token missing or invalid | Verify YAVENDIO_REGISTRY_TOKEN is set correctly |
| 500 Server Error | Registry auth not configured | Contact the registry administrator |
Other Errors
| Code | Description | Solution |
|---|---|---|
| 400 Bad Request | Invalid component name | Use only letters, numbers, hyphens, underscores |
| 404 Not Found | Component not found | Check component name exists in registry |
Security Best Practices
Tailwind CSS Configuration
YaVendio is optimized for Tailwind CSS v4:
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));
@theme inline {
--font-bricolage: var(--font-bricolage-grotesque);
}For Tailwind CSS v3:
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
extend: {
fontFamily: {
bricolage: ['var(--font-bricolage-grotesque)'],
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
},
},
},
plugins: [],
}Customizing Design Tokens
YaVendio uses shadcn standard variables for theming. After installing the theme, customize by overriding variables:
:root {
/* Rebrand primary color */
--primary: #ff6b35;
--primary-foreground: #ffffff;
/* Customize secondary */
--secondary: #f0f0f0;
--secondary-foreground: #333333;
/* Or reference YA primitives */
--primary: var(--ya-indigo-400); /* Use Yago indigo */
--border: var(--ya-stone-300); /* Lighter borders */
}All YaVendio components automatically adapt because they use shadcn standard classes (bg-primary, text-secondary, border-border).
See Themes for the complete token reference.
TypeScript Configuration
Ensure your tsconfig.json includes path mappings:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}Environment Variables
Required
YAVENDIO_REGISTRY_TOKEN=your_access_token_hereOptional
# Custom registry URL (if self-hosting)
YAVENDIO_REGISTRY_URL=https://www.ya.style/api/registryCI/CD Configuration
Set the token as a secret in your CI/CD pipeline:
env:
YAVENDIO_REGISTRY_TOKEN: ${{ secrets.YAVENDIO_REGISTRY_TOKEN }}variables:
YAVENDIO_REGISTRY_TOKEN: $YAVENDIO_REGISTRY_TOKENAdd YAVENDIO_REGISTRY_TOKEN to your project's Environment Variables in the Vercel dashboard.