Getting Started
Generate components via CLI and import locally in your project.
# Prerequisites
- Node.js 18+
- Next.js 14+
# Generate
npx vui-registry-cli-v1 add button
# Use locally
import { Button } from '@/components/ui/button'
export default function Page() {
return <Button variant="primary">Click</Button>
}Installation Guide
Environment requirements, dependency management, build process, and troubleshooting.
# Environment
- Node 18+, pnpm or npm
- TailwindCSS optional
# Build
npm run build
# Troubleshooting
- Clear node_modules
- Delete .next and re-buildComponents Catalog
Usage examples, customization options, and best practices for all components.
Button
Usage, customization, and best practices.
Card
Usage, customization, and best practices.
Toast
Usage, customization, and best practices.
Tooltip
Usage, customization, and best practices.
API Reference
Props, methods, events, return values, and TypeScript interfaces.
export type ButtonProps = {
variant?: 'primary' | 'ghost'
size?: 'sm' | 'md' | 'lg'
onClick?: () => void
}Real-World Examples
Practical scenarios with complete code samples using local imports.
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
export function ProductCard() {
return (
<Card>
<Card.Header>Pro Plan</Card.Header>
<Card.Content>Unlimited components</Card.Content>
<Card.Footer>
<Button variant="primary">Subscribe</Button>
</Card.Footer>
</Card>
)
}FAQ
Common questions, known issues, and solutions.
How to install?
Use the CLI: npx vui-registry-cli-v1 add <component>.
Does it support Tailwind?
Yes, works with or without Tailwind.
Where to report bugs?
Open an issue or use support channel.
Changelog
Versioned releases, breaking changes, new features, bug fixes, and migration notes.
## 1.0.0
- Initial release
## 1.1.0
- New components: Tooltip, Toast
- Breaking: Button ghost defaults to subtle
- Migration: Update ghost usageStartup Playbook
Launch quickly with a focused component strategy, brand consistency, and a clear release plan.
# 30-60-90 Plan
- 30d: Ship core pages (Landing, Pricing, Auth)
- 60d: Add dashboards and 3-5 essential components
- 90d: Polish interactions, accessibility, and docs
# Core Components
- Buttons, Cards, Forms, Modals, Navigation, Alerts
# Release Cadence
- Weekly minor releases
- Monthly feature drops
- Changelog and migration notesBrand & Theme
Use design tokens to maintain consistent brand, typography, spacing and contrast.
/* tokens.css */
:root{
--foreground: 220 14% 96%;
--background: 220 14% 6%;
--border: 220 10% 20%;
--primary: 260 90% 64%;
}
/* app/layout.tsx */
import { ThemeProvider } from 'next-themes'
export default function RootLayout({ children }:{
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<ThemeProvider attribute="class" defaultTheme="dark">
{children}
</ThemeProvider>
</body>
</html>
)
}Accessibility Basics
Keyboard navigation, contrast ratios, focus management, and ARIA best practices.
# Checklist
- Keyboard: Tab/Shift+Tab through interactive elements
- Focus: Visible focus ring on all controls
- Contrast: >= 4.5:1 for text
- Labels: Use aria-label/aria-labelledby when needed
- Semantics: Use button/input/select instead of divs