Skip to content
Drivn logoDrivn
$ npx drivn add button dialog card
 
◆ Drivn v1.0.0
 
Analyzing dependencies...
├── button (2.1kb) - base component
├── dialog (3.2kb) - requires: button ✓
└── card (1.8kb) - base component
 
Installing to src/components/ui...
 
✓ Done in 1.2s — Added 7.1kb total
Introducing Drivn v1.0.0

Write less.Build more.

Components with dot notation, smart dependencies, and zero verbosity. Ship faster with cleaner code.

~npx drivn add dialog
Drivn add dialog
Required dependency: button
button → components/ui/button.tsx
dialog → components/ui/dialog.tsx
Done.
Why Drivn

Rethinking Components

We rebuilt everything from scratch. No patterns borrowed, no compromises made.

Dot Notation

One import, infinite possibilities. Dialog.Trigger, Dialog.Content — clean, predictable, fully typed.

Pure React

Zero runtime UI dependencies. Every line is standard React and Tailwind you already know.

Tiny Footprint

Under 4kb per component. Tree-shaking is built in, and smart bundling means you only ship what you use.

Copy & Own

Components live in your codebase. Full control, full customization. No external dependencies after install.

Type-Safe Styles

const styles with keyof typeof gives TypeScript autocomplete for every variant. No magic strings, no runtime validation.

One Command

No complex setup. Just run the CLI and start building. Works with Next.js and other frameworks.

Developer Experience

Beautiful by Default

Components that look great and read great. No configuration required.

import { Dialog } from '@drivn/ui'

export function ConfirmDialog() {
  return (
    <Dialog>
      <Dialog.Trigger>Open</Dialog.Trigger>
      <Dialog.Content title="Confirm">
        <Dialog.Close />
      </Dialog.Content>
    </Dialog>
  )
}
Dot NotationSlotsResponsive
Library

20+ Components

Everything you need. Nothing you don't.

Start building

One command. Less code. Better components.

~ npx drivn@latest create