Build UIs at Velocity
Accessible React components with scoped CSS Modules, 9 named themes, ambient animation presets, and full TypeScript support — zero configuration required.
$ npm install @velocityuikit/velocityui35+
Components
9
Themes
3
Density Scales
100%
TypeScript
In Use
Apps currently using VelocityUI
A couple of real apps already shipping with the VelocityUI npm package.
Component Library
Everything you need to ship
Forms, layout, feedback, overlays, data display, and ambient animations — all accessible out of the box.
Button
Triggers actions with multiple variants, sizes, and a loading state.
Input
Text input with label, hint, error state, icons, and multiple sizes.
Textarea
Multi-line text input with label, error, hint, and resize control.
Select
Styled native select with custom arrow, label, error, and size variants.
Checkbox
Custom-styled checkbox with label, description, error state, and sizes.
RadioGroup
Accessible radio group with fieldset, legend, descriptions, and orientations.
Switch
Toggle control with track and thumb animation, label, description, and sizes.
Display Heading
Section Title
Primary Color Title
Title
Semantic headings with size scale, weight, alignment, and color variants.
Badge
Status labels with dot indicators, multiple variants, and sizes.
Alert
Notification banners with four semantic variants, icons, and dismiss button.
Card Title
Subtitle or metadata
Card body content goes here.
Card
Flexible container with compound Header, Body, Footer slots and hover effects.
Confirm action
This cannot be undone.
Are you sure you want to delete this?
Dialog
Modal dialog with focus trap, Escape close, compound parts, and sizes.
Overview tab content is shown here.
Tabs
Accessible tab navigation with keyboard support and three visual variants.
A modern, accessible React component library.
Accordion
Collapsible sections with smooth animation, multiple mode, and three variants.
Tooltip
Hover/focus tooltip with four placements, delay support, and ARIA wiring.
Divider
Horizontal or vertical separator with an optional centered text label.
Real-World Templates
Ready-made page examples
Drop-in page templates built entirely with VelocityUI components.
Login
Sign-in form with social providers and validation.
Dashboard
Stats cards, charts area, and data table layout.
E-commerce
Product grid with filters, cart, and checkout flow.
Settings
Account preferences with tabs, toggles, and forms.
Animated Backgrounds
GradientOrbs and GridGlow ambient presets.
Landing Page
Marketing page with hero, features, and CTA.
Analytics
Data-driven page with progress bars and tables.
Checkout
Multi-step checkout with stepper and form validation.
Why VelocityUI
Design decisions that matter
What makes VelocityUI different from other React component libraries.
Zero Config
No Tailwind, no CSS-in-JS runtime, no configuration needed. Import and use.
TypeScript First
Every component ships with full TypeScript types, props interfaces and JSDoc hints.
9 Named Themes
One class on body applies a full visual identity. Switch themes at runtime with zero rebuilds.
Accessible by Default
Built with ARIA attributes, keyboard navigation and focus management baked in.
Tree-Shakeable
ESM build. Import individual components and your bundler will eliminate the rest.
Ambient Animations
AnimatedBackground, GradientOrbs, and GridGlow presets for decorative motion — reduced-motion aware.
AI-ready documentation
A comprehensive guide for AI coding agents — setup instructions, full API reference, common pitfalls, and prompt templates to get accurate results from any LLM.
Start building today
Install the package, import the stylesheet, and drop in any component. It just works.