A retro brutalist design system for power users. Built with simplicity, consistency, and swappable themes in mind.
Chonks UI is inspired by:
cutie (pink theme) and bops.to (blue theme)npm install chonks-ui
<!-- In your HTML -->
<link rel="stylesheet" href="node_modules/chonks-ui/css/chonks.css">
<link rel="stylesheet" href="node_modules/chonks-ui/css/themes/pink.css">
<!DOCTYPE html>
<html>
<head>
<!-- Main CSS -->
<link rel="stylesheet" href="https://unpkg.com/chonks-ui@latest/css/chonks.css">
<!-- Pick a theme -->
<link rel="stylesheet" href="https://unpkg.com/chonks-ui@latest/css/themes/pink.css">
</head>
<body>
<div class="chonks-container">
<h1 class="chonks-h1 chonks-display">Hello World</h1>
<button class="chonks-btn">Click Me</button>
</div>
</body>
</html>
📖 Getting Started Guide | 🤝 Contributing | 🔒 Security
import {
Button,
Card,
Terminal,
useTheme,
THEMES
} from 'chonks-ui-react'
function App() {
// Apply theme
useTheme(THEMES.PINK)
return (
<div className="chonks-container">
<h1 className="chonks-h1 chonks-display">Hello World</h1>
<Button>Click Me</Button>
<Card>
<Terminal title="terminal">
<pre>npm install chonks-ui-react</pre>
</Terminal>
</Card>
</div>
)
}
Chonks UI comes with 5 pre-built color themes:
themes/pink.css) - Inspired by the cutie appthemes/blue.css) - Inspired by bops.tothemes/purple.css) - A vibrant purple schemethemes/green.css) - A fresh green schemethemes/greyscale.css) - Classic monochrome aestheticPlain HTML/CSS:
<!-- Just change the theme CSS import -->
<link rel="stylesheet" href="path/to/themes/blue.css">
React:
import { useTheme, THEMES } from 'chonks-ui-react'
function App() {
const [theme, setTheme] = useState(THEMES.PINK)
useTheme(theme)
return (
<button onClick={() => setTheme(THEMES.BLUE)}>
Switch to Blue
</button>
)
}
.chonks-btn - Buttons.chonks-card - Cards/Windows.chonks-terminal - Terminal/Code blocks.chonks-input - Text inputs.chonks-select - Dropdown selects.chonks-checkbox - Checkboxes.chonks-radio - Radio buttons.chonks-badge - Badges.chonks-spinner - Loading spinners.chonks-alert - Alert messages<Button /> - Interactive buttons<Card />, <CardHeader />, <CardBody />, <CardFooter /> - Card layouts<Terminal />, <Code /> - Terminal and code display<Input />, <Textarea />, <InputGroup />, <Label /> - Text inputs<Select /> - Dropdown selects<Checkbox />, <CheckboxGroup /> - Checkboxes<Radio />, <RadioGroup /> - Radio buttons<Badge /> - Status badges<Spinner />, <Loading /> - Loading states<Alert /> - Notifications<WindowControls /> - macOS-style window controlsChonks UI uses three font families:
Font classes:
.chonks-display - Display text (uppercase, bold, mono).chonks-mono - Monospace text.chonks-h1, .chonks-h2, .chonks-h3, .chonks-h4 - Headings.chonks-text-sm, .chonks-text-base, .chonks-text-lg, .chonks-text-xl - Text sizesAll colors and styles are controlled via CSS custom properties:
:root {
/* Primary Colors */
--chonks-primary: #87CEEB;
--chonks-primary-dark: #4682B4;
--chonks-primary-light: #B0E0E6;
/* Neutral Colors */
--chonks-surface: #FFFFFF;
--chonks-background: #F8FAFB;
--chonks-text: #2C3E50;
/* Spacing */
--chonks-space-xs: 4px;
--chonks-space-sm: 8px;
--chonks-space-md: 16px;
--chonks-space-lg: 24px;
--chonks-space-xl: 32px;
/* Shadows */
--chonks-shadow-sm: 2px 2px 0;
--chonks-shadow-md: 4px 4px 0;
--chonks-shadow-lg: 6px 6px 0;
}
Create your own theme by overriding the CSS custom properties:
/* my-custom-theme.css */
:root {
--chonks-primary: #ff00ff;
--chonks-primary-dark: #cc00cc;
--chonks-primary-light: #ff99ff;
}
Then import it after the main CSS:
<link rel="stylesheet" href="chonks.css">
<link rel="stylesheet" href="my-custom-theme.css">
Chonks UI includes utility classes for spacing, layout, and more:
<!-- Spacing -->
<div class="chonks-p-md chonks-m-lg"></div>
<div class="chonks-mb-xl chonks-mt-sm"></div>
<!-- Layout -->
<div class="chonks-flex chonks-gap-md chonks-items-center"></div>
<div class="chonks-flex chonks-justify-between"></div>
<!-- Text -->
<div class="chonks-text-center"></div>
<div class="chonks-text-left"></div>
<!-- Width -->
<div class="chonks-w-full"></div>
<!-- Container -->
<div class="chonks-container"></div>
Check out the examples directory for complete demos:
/examples/html/index.html - Plain HTML/CSS example/examples/react/App.jsx - React example with theme switchingchonks-ui/
├── css/
│ ├── chonks.css # Main CSS file
│ └── themes/
│ ├── pink.css # Pink theme
│ ├── blue.css # Blue theme
│ ├── purple.css # Purple theme
│ └── green.css # Green theme
├── react/
│ ├── package.json
│ └── src/
│ ├── index.js # Main export
│ ├── components/ # React components
│ └── hooks/ # React hooks
├── examples/
│ ├── html/ # HTML examples
│ └── react/ # React examples
└── docs/ # Documentation
Chonks UI works in all modern browsers that support CSS custom properties:
MIT
This is a personal design system, but feel free to fork and customize for your own projects!
Created by Cory Wilkerson
Inspired by the aesthetic of terminal interfaces, retro computing, and brutalist web design.
FAQs
A retro brutalist design system for power users
The npm package chonks-ui receives a total of 15 weekly downloads. As such, chonks-ui popularity was classified as not popular.
We found that chonks-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
After Matplotlib rejected an AI-written PR, the agent fired back with a blog post, igniting debate over AI contributions and maintainer burden.
Security News
HashiCorp disclosed a high-severity RCE in next-mdx-remote affecting versions 4.3.0 to 5.x when compiling untrusted MDX on the server.
Security News
Security researchers report widespread abuse of OpenClaw skills to deliver info-stealing malware, exposing a new supply chain risk as agent ecosystems scale.