Installation

Get up and running with the neobrutalism component library in three steps.

1

Initialize shadcn/ui

Start by setting up a new project with shadcn/ui. If you already have shadcn/ui configured, skip to step 2. 

bunx --bun shadcn@latest init
2

Add the styling

Add these CSS custom properties to your global stylesheet. These control the entire neobrutalism design system — borders, shadows, typography, and colors.

globals.css
:root {
  /* Border & Shadow */
  --border-radius: 5px;
  --box-shadow-x: 4px;
  --box-shadow-y: 4px;
  --shadow: var(--box-shadow-x) var(--box-shadow-y) 0px 0px var(--border);
  --border: oklch(0% 0 0);
  --ring: oklch(0% 0 0);

  /* Typography */
  --heading-font-weight: 700;
  --base-font-weight: 500;

  /* Theme Colors (Nord palette — default) */
  --background: #eceff4;
  --secondary-background: #e5e9f0;
  --foreground: #2e3440;
  --main: #5e81ac;
  --main-foreground: #ffffff;
  --accent: #8fbcbb;
  --accent-foreground: #2e3440;
}
3

Install components

Install any component from the registry using the shadcn CLI. Components are installed directly into your project — you own the code. 

bunx --bun shadcn@latest add https://trents.tech/r/button.json

Browse the sidebar to see all available components and their install commands.

0