Velocity UI Documentation
Search detailed guides for installation, components, theming, API usage, accessibility, production readiness, and premium licensing.
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.
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.
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