{ "markdown": "# Doom Design System\n\n[![Doom CI](https://github.com/ornelasEduardo/doom/actions/workflows/main.yml/badge.svg)](https://github.com/ornelasEduardo/doom/actions/workflows/main.yml)\n[![npm version](https://img.shields.io/npm/v/doom-design-system.svg)](https://www.npmjs.com/package/doom-design-system)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA modern, premium, neubrutalist and comic book inspired design system built with React and SASS Modules.\n\n## Features\n\n- 🎨 **Distinctive Aesthetic**: Bold, high-contrast, and playful design.\n- 🚀 **Server Components Ready**: Fully compatible with Next.js App Router and React Server Components (RSC) with zero-runtime CSS.\n- 🧩 **Framework Agnostic**: Works with any React framework (Next.js, Vite, Remix).\n- 🌙 **Theming**: Built-in dark mode and theming support via CSS Variables.\n- ♿ **Accessible**: Built with accessibility in mind.\n- 📦 **TypeScript**: Fully typed for excellent developer experience.\n\n## Installation\n\n### 1. Install the package\n\n```bash\nnpm install doom-design-system\n```\n\n### 2. Install Peer Dependencies\n\nThis library requires just `react` and `lucide-react`.\n\n```bash\nnpm install lucide-react\n```\n\n## Usage\n\n### 1. Setup Provider\n\nWrap your application with the `DesignSystemProvider` to ensure all styles and themes are applied correctly. It injects the necessary global CSS and theme variables.\n\n```tsx\nimport { DesignSystemProvider } from \"doom-design-system\";\nimport { Montserrat } from \"next/font/google\";\n\n// Optional: Use a custom google font\nconst montserrat = Montserrat({ subsets: [\"latin\"] });\n\nexport default function RootLayout({ children }) {\n return (\n \n \n {children}\n \n \n );\n}\n```\n\n### 2. Use Components\n\nImport and use components in your application. They are now fully tree-shakeable and lightweight.\n\n```tsx\nimport { Button, Card, Text, Link } from \"doom-design-system\";\n\nfunction MyComponent() {\n return (\n \n Hello World\n

\n Check out this awesome link.\n

\n \n \n );\n}\n```\n\n### 3. Theming\n\nThe Design System uses CSS Variables for theming. You can control the theme using the `DesignSystemProvider`.\n\n```tsx\n\n {/* The entire app will be themed automatically */}\n\n```\n\n## Requirements\n\nThis library requires the following peer dependencies:\n\n- React >= 19\n- lucide-react (for icons)\n\n## Architecture\n\nThis 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.\n", "bytes": 3039, "sha": "e20b581da80ddd35ac8481584199fc28633cc6eb7aaa50b9bb1f748d4bc57b7a", "repo_slug": "ornelaseduardo/doom", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/plg_ornelaseduardo_doom_doom_design_system_93876a97/readme" }