Installation
Learn how to install and set up the YaVendio Registry in your project
Prerequisites
Before you begin, make sure you have:
- Node.js 18.0 or later
- pnpm, npm, or yarn package manager
- A React project with Tailwind CSS (Next.js, Vite, etc.)
- Access token for the YaVendio Registry
Installation
Install shadcn CLI
If you haven't set up shadcn/ui in your project yet:
npx shadcn@latest initThis creates a components.json file and sets up the necessary dependencies.
Configure Authentication
Create a .env.local file in your project root:
YAVENDIO_REGISTRY_TOKEN=your_access_token_hereSecurity
Never commit your .env.local file to version control. Make sure it's in your .gitignore.
Configure the Registry
Add the YaVendio registry to your components.json:
{
"$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
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
},
"registries": {
"@yavendio": {
"url": "https://www.ya.style/api/registry/{name}",
"headers": {
"Authorization": "Bearer ${YAVENDIO_REGISTRY_TOKEN}"
}
}
}
}The YaVendio Registry is hosted at https://www.ya.style.
Install Components
Now you can install any component:
npx shadcn@latest add @yavendio/ya-buttonThis will authenticate, download the component, install dependencies, and update import paths automatically.
Install the YaVendio Theme
Install the complete theme using shadcn CLI:
npx shadcn@latest add @yavendio/ya-themeThis automatically adds all design tokens to your globals.css, including:
- Shadcn standard variables (
--primary,--secondary, etc.) - Brand color primitives (
--ya-plum-*,--ya-stone-*) - Custom effects (
--ya-shadow-inset,--ya-ring) - Semantic color palettes
- Gradients
The theme uses shadcn conventions, so YaVendio components work seamlessly with standard shadcn components.
Alternative: Manually copy from ya-theme.css if you prefer.
Import Font
YaVendio uses Bricolage Grotesque. Add it to your layout:
import { Bricolage_Grotesque } from 'next/font/google'
const bricolageGrotesque = Bricolage_Grotesque({
subsets: ['latin'],
variable: '--font-bricolage-grotesque',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={bricolageGrotesque.variable}>
<body>{children}</body>
</html>
)
}Update Tailwind Config
Add the font family to Tailwind:
module.exports = {
theme: {
extend: {
fontFamily: {
bricolage: ['var(--font-bricolage-grotesque)'],
},
},
},
}Verify Installation
Test that everything works:
import { YaButton } from '@/components/ui/ya-button'
export default function Home() {
return (
<div className="p-8">
<YaButton variant="primary">Hello YaVendio!</YaButton>
</div>
)
}