Integrate NeoBrutalism

This collection delivers each component from the publisher's public shadcn registry. Apply the Default Theme first, load the two fonts, then choose one primitive implementation per component. No provider is required for the design system itself.

Apply the complete theme

The Default Theme is a public registry:theme item with light and dark variables. Keep all of its values together:

• Surfaces and text: --background, --foreground, --card, --card-foreground, --popover, --popover-foreground, --muted, and --muted-foreground.
• Actions: --primary, --primary-hover, --primary-foreground, --secondary, --secondary-foreground, --accent, --accent-foreground, --destructive, and --destructive-foreground.
• Controls: --border, --input, --ring, --shadow-color, --border-w, and --radius.
• Data visualization: --chart-1 through --chart-5.
• Hard shadows: --shadow-xs, --shadow-sm, --shadow, --shadow-md, --shadow-lg, --shadow-xl, and --shadow-2xl.

Retain the Tailwind v4 @theme inline mappings for radius, colors, and the shadow scale. Add the font mappings below; the public theme payload does not supply them. Keep @import "tailwindcss" and @import "tw-animate-css". The square default is --radius: 0; changing it is a supported visual adaptation, but it changes the system's character.

The theme item is the only fixed public theme install unit. The theme builder can generate custom palettes, but those generated choices are not stable named registry items. The source repository also uses purple, lime, red, lavender, orange, and green classes for its own site. They are site selectors, not additional component registry themes.

Load the fonts

Load Archivo Black at weight 400 for headings and Space Grotesk for body text. Bind them to --font-head and --font-sans on the application root. For Next.js, use the corresponding next/font/google loaders with display: "swap"; for another framework, load equivalent font files and set the same variables.

For Next.js, add the font loaders to the root layout:

import { Archivo_Black, Space_Grotesk } from "next/font/google";
import type { ReactNode } from "react";

const headingFont = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-archivo-black",
  display: "swap",
});
const bodyFont = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-space-grotesk",
  display: "swap",
});

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body className={`${headingFont.variable} ${bodyFont.variable} font-sans`}>{children}</body>
    </html>
  );
}

Add these mappings to the global Tailwind stylesheet so the components' font-head and font-sans classes select the loaded fonts:

@theme inline {
  --font-head: var(--font-archivo-black), sans-serif;
  --font-sans: var(--font-space-grotesk), sans-serif;
}

For another framework, load the same font families and define the two source variables on the app root, or map the utilities directly to the loaded families.

Do not replace the font variables with fixed family names inside individual components. The variable contract keeps the collection adaptable and avoids loading the same font more than once.

Choose the primitive target

Every component has three externally hosted targets:

• Base UI at the base route, using @base-ui/react. This is the first and default choice.
• Radix UI at the radix route, using radix-ui.
• React Aria at the aria route, using react-aria-components.

Choose the target that matches the host project. Do not install two targets of the same component. The visual recipe and public component role stay the same, while trigger composition, state attributes, and event shapes follow the selected primitive library.

The publisher's general installation page currently shows Base UI and Radix UI commands, while the public component pages and live registry also expose React Aria. Catalogs preflights all three routes and keeps that live delivery choice explicit.

Integration checks

Let the shadcn installer resolve file aliases, transitive registry dependencies, and package dependencies. Keep existing project aliases and place the delivered source where the project keeps UI components.

Verify both light and dark modes, focus visibility, disabled and invalid states, keyboard interaction, portal stacking, right-to-left behavior where relevant, and the press motion that collapses hard shadows. Preserve accessible labels on icon-only controls and do not use color alone for status.