Introduction

Cruise UI is a set of Naija Brutalism themes for your app.

Naija Brutalism is neobrutalism from Nigerian street life: thick ink borders, hard shadows that buttons drop into when pressed, Danfo yellow, hazard stripes and big, confident type. Each city is a theme: Lagos · Danfo and Ibadan · Micra so far. Every value comes from one design spec, so the AI prompt, the CSS and the React components all look the same.

Three ways to use it

  • AI prompt

    Pick a theme in the Studio, copy one prompt + spec, and paste it into ChatGPT, Claude, Gemini or Meta AI. No code to install.

    Open the Studio

  • HTML / CSS

    Add one stylesheet and use the classes (brutal, btn, on-primary …) in any page, from any backend.

    HTML / CSS setup

  • React / Next.js

    Add the components to your project with the shadcn CLI. They land in components/cruise/, next to anything you already have.

    React setup

What's in it

Tokens (colours, borders, shadows, corners, type), dark mode, and 49 components (listed in the menu), from buttons and inputs to tabs, a combobox and a drawer. Every component works in light and dark mode, with the keyboard, and on a 360px phone. See Theming for what you can change.

Brand

The C-Sail mark: a C as a sail on a danfo-yellow tile. Use it next to the name "Cruise UI" set in Baloo 2; in Dark mode use the dark version (its shadow turns yellow).

Light (logo-mark.svg)
Dark (logo-mark-dark.svg)