Open source & Open code — v1.0 now available

Components built to last.

A set of beautifully designed, accessible components you can copy, customize, and build on. No npm install. Just code you own.

Get started Browse components

40+Components

100%Accessible

0Dependencies

MITLicense

components/button.tsx

import { Button } from "@nexui/react"

export default function App() {
  return (
    <Button variant="default">Get started</Button>
  )
}

Live preview

Components

Everything you need.

40+ components ready to copy into your project. Each one is accessible, responsive, and built with Tailwind CSS.

ButtonInputs

Trigger actions with multiple variants and sizes.

DefaultSecondaryOutlineDestructive

BadgeDisplay

Small status indicators and labels.

InputInputs

Text fields for capturing user input.

Alex Chen

Product Designer

"NexUI components saved us weeks of work. Clean and easy to customize."

CardDisplay

Container for grouping related content.

New release

NexUI v1.0 is now available.

Error

Something went wrong. Please retry.

AlertFeedback

Communicate important messages inline.

ACBJCKDL

AvatarDisplay

User profile pictures with fallback initials.

Saved successfully

Upload failed

ToastFeedback

Temporary notifications at the edge of the screen.

Overview content goes here.

TabsNavigation

Segmented navigation between related views.

And many more — dialogs, dropdowns, tables, calendars, data pickers, and more coming soon.

Installation

Up and running in minutes.

No package to install. No version conflicts. Just copy the component code into your project and make it your own.

Initialize your project

Start with a new Next.js or Vite project, or use an existing one.

bash

npx create-next-app@latest my-app --typescript --tailwind

CLI

One command away.

Use the NexUI CLI to initialize your project and pull any component straight into your codebase — no copy-paste required.

Config file

nexui.config.ts

// nexui.config.ts
import type { NexUIConfig } from "nexui"

export default {
  outputDir: "components/ui",
  utils: "lib/utils.ts",
  style: "minimal",          // "minimal" | "rounded" | "sharp"
  typescript: true,
} satisfies NexUIConfig

nexui init

Scaffolds a nexui.config.ts, installs the utils helper, and sets up CSS variables in your project. Run this once.

terminal

$npx nexui@latest init

Detecting project... Writing nexui.config.ts Adding CSS variables to globals.css Installing dependencies... Done. Your project is ready.

Tip — You can also run npx nexui@latest add with no arguments and the CLI will show an interactive picker.

CLI vs Manual

Add a componentnpx nexui add buttonCopy button.tsx

Init projectnpx nexui initSet up manually

Code ownershipFull — file is yoursFull — file is yours

Works offlineAfter first fetchAlways

Theming

Make it yours.

All components use CSS custom properties. Swap your accent color, tweak the radius, and the entire system updates instantly.

Preset themes

CSS variables — one file, full control

globals.css

:root {
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.96 0 0);
  --primary: oklch(0.65 0.17 160);   /* ← swap this */
  --primary-foreground: oklch(0.98 0 0);
  --border: oklch(0.22 0 0);
  --muted: oklch(0.16 0 0);
  --muted-foreground: oklch(0.52 0 0);
  --radius: 0.5rem;
}

One CSS file controls every component

Works with Tailwind CSS v4 and v3

Dark mode built in by default

Fully typed with TypeScript

Code

Copy. Paste. Ship.

Every component is a single file. No abstractions, no magic — just clean TypeScript you can read and modify.

import { cn } from "@/lib/utils"

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "secondary" | "outline" | "ghost" | "destructive"
  size?: "sm" | "md" | "lg"
}

export function Button({
  variant = "default",
  size = "md",
  className,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        "inline-flex items-center justify-center rounded-md font-medium transition-colors",
        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
        "disabled:pointer-events-none disabled:opacity-50",
        size === "sm" && "text-xs px-3 py-1.5",
        size === "md" && "text-sm px-4 py-2",
        size === "lg" && "text-base px-6 py-3",
        variant === "default" && "bg-primary text-primary-foreground hover:bg-primary/90",
        variant === "secondary" && "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        variant === "outline" && "border border-border hover:bg-secondary",
        variant === "ghost" && "hover:bg-secondary text-muted-foreground hover:text-foreground",
        variant === "destructive" && "bg-destructive/15 text-destructive hover:bg-destructive/25",
        className
      )}
      {...props}
    />
  )
}