Prefer to let your AI assistant do it? Install the DarkCode UI MCP Server in your editor, then paste the prompt into your AI assistant — it will analyze your project and handle the entire setup for you.

Install DarkCode UI and required dependencies:

npm i @darkcode-ui/styles @darkcode-ui/react

pnpm add @darkcode-ui/styles @darkcode-ui/react

yarn add @darkcode-ui/styles @darkcode-ui/react

bun add @darkcode-ui/styles @darkcode-ui/react

Import Styles

Add to your main CSS file globals.css:

@import "tailwindcss";
@import "@darkcode-ui/styles";

Import order matters. Always import tailwindcss first.

Use Components

import { Button } from '@darkcode-ui/react';

function App() {
  return (
    <Button>
      My Button
    </Button>
  );
}

Want the smallest bundle? Components are tree-shakeable and each ships as its own entry point (@darkcode-ui/react/button), and you can import only the CSS you use. See Performance.

What's Next?

Themes - Create and share your own themes
Browse Components - See all available components
Learn Styling - Customize with Tailwind CSS
Optimize Performance - Ship the smallest JS and CSS
Explore Patterns - Master compound components

Quick Start

Requirements

Quick Install

Import Styles

Use Components

What's Next?

On this page