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
Build tooling	Use the Node.js version required by your framework.

Install

Install the package

$ 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.

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

Start using components

Import components directly from the package. No Tailwind configuration is needed. Toast notifications require ToastProvider; other components need no library provider.

'use client'

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

export default function App() {
  return (
    <Card>
      <Card.Body>
        <Input label="Email" type="email" placeholder="you@example.com" />
        <Button>Subscribe</Button>
      </Card.Body>
    </Card>
  )
}

Framework setup

Next.js (App Router)

Import the stylesheet in your root layout. The package declares a client boundary. Add 'use client' to your own component when using event handlers, state, or compound APIs such as Card.Body and Dialog.Footer. Keep your root layout a Server Component.

// 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)

// 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

// 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

// 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 },
]

Stylesheet via CDN

You can load the stylesheet from a CDN. Install the JavaScript package through your bundler so React and React DOM resolve to the same versions used by your application.

Match the stylesheet version to your installed package version. Importing the raw JavaScript bundle into a browser without a bundler or import map will not resolve its React dependencies.

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

TypeScript

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

'use client'

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.

'use client'

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 46 components with live previews and code examples.