Cruise UI vs other neobrutalism libraries

There are several good neobrutalism libraries, and many of them are built on shadcn/ui and Tailwind CSS too. This page doesn't rank them. It sets out what Cruise UI does, what it adds, and the questions worth asking when you choose any library.

What Cruise UI is

Cruise UI is a set of themes and React components in Naija Brutalism, a neobrutalist style built from Nigerian street life. Everything comes from one design spec, so three ways of using it look the same:

  • an AI prompt with the full spec, built in the Studio for ChatGPT, Claude, Gemini or Meta AI;
  • plain HTML/CSS with one stylesheet;
  • React / Next.js components installed with the shadcn CLI from the @cruiseui registry.

What it adds

  • City themes: Lagos · Danfo and Ibadan · Micra, each a palette, a signature band and extra copy, with more cities planned.
  • A design spec written for AI assistants, so a generated page follows the same rules as the components.
  • Nigerian inputs: a Naira input that formats ₦12,500 as you type and gives back a plain number, and a phone input that takes 0801…, 801… or +234… and gives back +2348012345678.
  • Game pieces: XP bar, score counter, leaderboard, countdown, achievement toast and dialogue box.
  • Scoped theme: the theme only applies inside .cruise, and components install to components/cruise/ with Cruise* names, so an existing shadcn/ui setup keeps working.
  • Dark mode and three corner styles from CSS variables.

When another library may suit you better

  • You want neobrutalism without a Nigerian look or city themes.
  • You need a component Cruise UI doesn't have yet. Check the list in the docs menu.
  • Your project doesn't use React or Tailwind CSS and you need more than the stylesheet and HTML classes.

Questions to ask any library

  1. Stack: does it fit your framework, Tailwind version and component setup (shadcn/ui or not)?
  2. Theming: can you change colours, borders, shadows and corners in one place? Is there a dark mode?
  3. Accessibility: are controls real buttons and native inputs, with labels, keyboard support, visible focus and reduced motion?
  4. Install model: do you copy the code into your project (as with shadcn) or depend on a package?
  5. Licence and upkeep: check the licence and how actively it is maintained.

For Cruise UI, the answers are in Installation, Theming and the Accessibility notes on each component page.