Introduction

Dark-UI is a collection of re-usable components focused on premium dark aesthetics, smooth animations, and developer experience. Built with React, Tailwind CSS, and Framer Motion.

This isn't just another component library. It's designed to help you build applications that feel premium and alive.

Key Features

• Premium Dark Aesthetics: Carefully crafted dark color palettes, sophisticated animations, and micro-interactions that wow users.
• Performance Optimized: Tree-shakeable exports, memoized components, and hoisted constants ensure your app stays fast.
• Developer Experience: TypeScript first, consistent API patterns, and easy integration with existing projects.
• Production Ready: Fully accessible (ARIA compliant), responsive, and mobile-friendly out of the box.

Getting Started

Dark-UI components are designed to be copied and pasted into your project, or installed via CLI.

Prerequisites

Dark-UI is built on top of modern web technologies:

• React 18 or later
• Next.js 13 or later (App Router)
• Tailwind CSS 3 or later
• Framer Motion for animations

Installation

You can add components to your project using the CLI:

npx shadcn@latest add http://dark-ui.vercel.app/r/component-name.json

Replace component-name with the specific component you want to add (e.g., luminated-checkbox).

Explore Components

Ready to build? Check out our available components:

• Tubelight Accordion - A sleek accordion with a moving light effect.
• Luminated Checkbox - An animated checkbox with glowing states.
• Smooth Accordion - A buttery smooth accordion for content toggling.

Philosophy

We believe in composition over configuration. Our components export sub-components and utilities, giving you full control over how they are rendered and behaved.

import { SubComponent, DEFAULT_CONFIG } from "@/components/component-name";

export default function CustomImplementation() {
  return (
    <div>
      <SubComponent config={DEFAULT_CONFIG} />
    </div>
  );
}