Installation

Add VelocityUI to your project in minutes. Supports npm, yarn, pnpm, and bun.

Requirements

Dependency	Version
react	≥ 18.0.0
react-dom	≥ 18.0.0
node	≥ 18.0.0

Install

Install the package

bash

npm install @velocityuikit/velocityui

Import the stylesheet

Import the CSS file once at the root of your application. In Next.js App Router this is your root layout.tsx. In Vite projects, add it to main.tsx.

tsx

import '@velocityuikit/velocityui/dist/style.css'

Start using components

Import any component directly from the package — no provider or global setup required.

tsx

import { Button, Input, Card } from '@velocityuikit/velocityui'

export default function App() {
  return (
    <Card>
      <Input placeholder="Your email" />
      <Button>Subscribe</Button>
    </Card>
  )
}

Framework setup

Next.js (App Router)

Import the stylesheet in your root layout. Components work in both Server and Client Components — interactive ones (Dialog, Dropdown, etc.) are already marked 'use client' internally.

tsx

// app/layout.tsx
import '@velocityuikit/velocityui/dist/style.css'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My App',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Next.js (Pages Router)

tsx

// pages/_app.tsx
import '@velocityuikit/velocityui/dist/style.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Vite + React

tsx

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import '@velocityuikit/velocityui/dist/style.css'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Remix

tsx

// app/root.tsx
import velocityStyles from '@velocityuikit/velocityui/dist/style.css?url'
import type { LinksFunction } from '@remix-run/node'

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: velocityStyles },
]

CDN (no build step)

For quick prototypes or environments without a bundler, you can load VelocityUI from a CDN. Note: this approach does not support tree-shaking.

CDN usage is intended for prototyping only. For production apps, use the npm package to benefit from tree-shaking and optimized bundle sizes.

html

<!-- CSS -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@velocityuikit/velocityui@latest/dist/style.css"
/>

<!-- ES Module (modern browsers) -->
<script type="module">
  import { Button } from 'https://cdn.jsdelivr.net/npm/@velocityuikit/velocityui@latest/dist/index.js'
</script>

TypeScript

VelocityUI is written in TypeScript and ships with full type definitions — no @types package needed. All component props, variants, and callbacks are typed.

tsx

import { Button } from '@velocityuikit/velocityui'
import type { ButtonProps } from '@velocityuikit/velocityui'

function MyButton(props: ButtonProps) {
  return <Button {...props} />
}

Verify your install

Drop this snippet anywhere in your app. If you see a styled button, everything is wired up correctly.

tsx

import { Button } from '@velocityuikit/velocityui'

export default function Test() {
  return (
    <Button onClick={() => alert('VelocityUI is working!')}>
      Hello VelocityUI
    </Button>
  )
}

Next steps

Theming

Apply built-in themes and density modifiers across your entire app.

Browse components

Explore all 30+ components with live previews and code examples.