Neubrutalist and comic book inspired design system
npm install doom-design-system
A modern, premium, neubrutalist and comic book inspired design system built with React and SASS Modules.
- 🎨 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.
``bash`
npm install doom-design-system
This library requires just react and lucide-react.
`bash`
npm install lucide-react
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 (
{children}
);
}
`
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 (
Check out this awesome link.
);
}
`
The Design System uses CSS Variables for theming. You can control the theme using the DesignSystemProvider.
`tsx`
{/ The entire app will be themed automatically /}
This library requires the following peer dependencies:
- React >= 19
- lucide-react (for icons)
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.