Introduction
VelocityUI is a modern React component library built for speed, accessibility, and design consistency. Ship polished UIs without writing CSS from scratch.
What is VelocityUI?
VelocityUI is an open-source component library for React that gives you 30+ production-ready components out of the box. Every component is styled, accessible, and themeable — so you can focus on building features, not fighting CSS.
The library ships as a standard npm package with full TypeScript support, tree-shakeable exports, and a single CSS file you import once. There is no extra configuration, no provider wrap, and no build-time magic.
Features
30+ components
Buttons, inputs, dialogs, tables, navigation, overlays — everything you need to build a complete product.
8 built-in themes
Switch between Default, Midnight, Ocean, Construction, Glass, Soft, High Contrast, and Monochrome Red with a single class.
Density modifiers
Compact, comfortable, and spacious density modes let you tune information density without changing your components.
Fully typed
Written in TypeScript with complete prop definitions and JSDoc annotations. No @types packages required.
Accessible
Components follow WAI-ARIA patterns with keyboard navigation, focus management, and screen-reader support baked in.
Zero runtime dependencies
VelocityUI has no third-party runtime deps beyond React itself — keeping your bundle lean.
Tree-shakeable
Import only what you use. Unused components are eliminated at build time by any modern bundler.
Framework agnostic
Works with Next.js (App & Pages Router), Vite, Remix, Create React App, and any React 18+ setup.
Quick start
1. Install
npm install @velocityuikit/velocityui2. Import the stylesheet
import '@velocityuikit/velocityui/dist/style.css'3. Use components
import { Button, Input, Card } from '@velocityuikit/velocityui'
export default function App() {
return (
<Card>
<Input placeholder="Your email" />
<Button>Subscribe</Button>
</Card>
)
}How theming works
VelocityUI uses CSS custom properties scoped to theme classes. Apply a theme by adding a class to <body> or any container element — all components inside inherit it automatically.
<!-- dark theme -->
<body class="vui-theme-midnight">
<!-- different section uses ocean theme -->
<section class="vui-theme-ocean vui-density-compact">
<!-- components here use ocean + compact density -->
</section>Open source
VelocityUI is MIT licensed and developed in the open on GitHub. Contributions, bug reports, and feature requests are all welcome.