@cooolpower/headless-ui

Ultimate Headless Experience for Next.js

Style-agnostic, accessible, and high-performance React components.
Focus on your design, let us handle the logic.

✨ Features

• 🧩 70+ Headless Components — Logic-first, style-agnostic design
• ♿ Accessible — ARIA roles, keyboard navigation, focus management
• 🎨 Optional Default Styles — Toggle with injectStyles prop
• 🌗 Dark Mode — CSS custom properties based theming
• 📦 Zero Config — Just import and use, no setup required
• 🔒 TypeScript Strict — Full type safety with no any
• 🧪 Interactive Playground — Live preview with control panels
• 📖 MDX Documentation — Code examples + live demos in one place

📸 Screenshots

🚀 Quick Start

Installation

# Using pnpm
pnpm add @cooolpower/headless-ui

# Using npm
npm install @cooolpower/headless-ui

# Using yarn
yarn add @cooolpower/headless-ui

Usage

import { Badge } from '@cooolpower/headless-ui';
import '@cooolpower/headless-ui/styles.css'; // optional default styles

export function MyComponent() {
  return (
    <Badge count={5}>
      <button>Messages</button>
    </Badge>
  );
}

🧩 Components

Each component includes: Usage examples · Interactive playground · API reference · Accessibility notes · Default CSS snippet

🛠 Tech Stack

| Layer | Technology | | ----------------- | ---------------------------------- | | Framework | Next.js 16 (App Router) | | Language | TypeScript (strict mode) | | Styling | Vanilla Extract + CSS Custom Props | | Documentation | MDX + rehype-pretty-code (Shiki) | | Build | tsup (library) |

🧠 Design Philosophy

| Principle | Description | | ------------------ | ------------------------------------------------------- | | Headless First | Components expose behavior, not styles | | Opt-in Styling | Default CSS via injectStyles — override with your own | | Composition | Small, composable APIs over monolithic configs | | Accessibility | ARIA, keyboard nav, focus trap built-in | | Type Safety | TypeScript strict, no any, explicit return types |

📄 License

MIT © cooolpower