doom-design-system
AI skills, agents, hooks, and commands for the Doom Design System, a neubrutalist React component library. Gives AI agents deep knowledge of
Open source Repository Open in the app JSON README (API)
About
AI skills, agents, hooks, and commands for the Doom Design System, a neubrutalist React component library. Gives AI agents deep knowledge of every component's API, A2UI protocol, design tokens, and coding standards.
Details
- Kind
- Plugins
- Topic
- Media, design & games
- Publisher
- ornelaseduardo
- Origin
- marketplace
- Category
- ferramentas
- Stars
- 2
- Forks
- 2
- Open pull requests
- 12
- Last push
- 2026-08-31T07:21:17Z
- Repository state
- ativo
- Language
- TypeScript
- Added
- 2026-08-30 01:48:58
- Updated
- 2026-08-30 01:48:58
- Origin id
ornelaseduardo/doom/doom-design-system
README
# Doom Design System
[](https://github.com/ornelasEduardo/doom/actions/workflows/main.yml)
[](https://www.npmjs.com/package/doom-design-system)
[](https://opensource.org/licenses/MIT)
A modern, premium, neubrutalist and comic book inspired design system built with React and SASS Modules.
## Features
- 🎨 **Distinctive Aesthetic**: Bold, high-contrast, and playful design.
- 🚀 **Server Components Ready**: Fully compatible with Next.js App Router and React Server Components (RSC) with zero-runtime CSS.
- 🧩 **Framework Agnostic**: Works with any React framework (Next.js, Vite, Remix).
- 🌙 **Theming**: Built-in dark mode and theming support via CSS Variables.
- ♿ **Accessible**: Built with accessibility in mind.
- 📦 **TypeScript**: Fully typed for excellent developer experience.
## Installation
### 1. Install the package
```bash
npm install doom-design-system
```
### 2. Install Peer Dependencies
This library requires just `react` and `lucide-react`.
```bash
npm install lucide-react
```
## Usage
### 1. Setup Provider
Wrap your application with the `DesignSystemProvider` to ensure all styles and themes are applied correctly. It injects the necessary global CSS and theme variables.
```tsx
import { DesignSystemProvider } from "doom-design-system";
import { Montserrat } from "next/font/google";
// Optional: Use a custom google font
const montserrat = Montserrat({ subsets: ["latin"] });
export default function RootLayout({ children }) {
return (
<html lang="en">
<DesignSystemProvider withBody fontClassName={montserrat.className}>
{children}
</DesignSystemProvider>
</html>
);
}
```
### 2. Use Components
Import and use components in your application. They are now fully tree-shakeable and lightweight.
```tsx
import { Button, Card, Text, Link } from "doom-design-system";
function MyComponent() {
return (
<Card>
<Text variant="h2">Hello World</Text>
<p>
Check out this <Link href="#">awesome link</Link>.
</p>
<Button variant="primary" onClick={() => alert("Boom!")}>
Click Me
</Button>
</Card>
);
}
```
### 3. Theming
The Design System uses CSS Variables for theming. You can control the theme using the `DesignSystemProvider`.
```tsx
<DesignSystemProvider initialTheme="doom">
{/* The entire app will be themed automatically */}
</DesignSystemProvider>
```
## Requirements
This library requires the following peer dependencies:
- React >= 19
- lucide-react (for icons)
## Architecture
This system uses **CSS Modules** (`.module.scss`) for component styling, ensuring styles are locally scoped and avoid collisions. It uses **SASS** for mixins and shared logic at build time. All styles are compiled to standard CSS during the build, making it extremely fast and lightweight.