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">
npm install chonks-ui-react
Note: The React package imports the CSS automatically, so you don't need to install both packages for React projects.
<!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
npm install chonks-ui-react
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
Security researchers report widespread abuse of OpenClaw skills to deliver info-stealing malware, exposing a new supply chain risk as agent ecosystems scale.
Security News
Claude Opus 4.6 has uncovered more than 500 open source vulnerabilities, raising new considerations for disclosure, triage, and patching at scale.
Research
/Security News
Malicious dYdX client packages were published to npm and PyPI after a maintainer compromise, enabling wallet credential theft and remote code execution.