# 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](https://cruiseui.dev/studio)
- **HTML / CSS**: Add one stylesheet and use the classes (brutal, btn, on-primary …) in any page, from any backend. [HTML / CSS setup](https://cruiseui.dev/docs/installation#html)
- **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](https://cruiseui.dev/docs/installation#react)

## 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](https://cruiseui.dev/docs/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).

![Cruise UI](https://cruiseui.dev/brand/logo-mark.svg)Light (logo-mark.svg)

![Cruise UI](https://cruiseui.dev/brand/logo-mark-dark.svg)Dark (logo-mark-dark.svg)

- [logo-mark.svg](https://cruiseui.dev/brand/logo-mark.svg) logo mark, light
- [logo-mark-dark.svg](https://cruiseui.dev/brand/logo-mark-dark.svg) logo mark, Dark mode
- [logo-mark-512.png](https://cruiseui.dev/brand/logo-mark-512.png) logo mark, 512px PNG
- [app-icon.svg](https://cruiseui.dev/brand/app-icon.svg) app icon
- [favicon.svg](https://cruiseui.dev/brand/favicon.svg) favicon (SVG)
- [favicon-small.svg](https://cruiseui.dev/brand/favicon-small.svg) favicon for tiny sizes
- [favicon.ico](https://cruiseui.dev/brand/favicon.ico) favicon 16 / 32 / 48px
- [favicon-16.png](https://cruiseui.dev/brand/favicon-16.png) favicon 16px
- [favicon-32.png](https://cruiseui.dev/brand/favicon-32.png) favicon 32px
- [favicon-48.png](https://cruiseui.dev/brand/favicon-48.png) favicon 48px
- [apple-touch-icon.png](https://cruiseui.dev/brand/apple-touch-icon.png) iOS home screen
- [icon-192.png](https://cruiseui.dev/brand/icon-192.png) app icon 192px
- [icon-512.png](https://cruiseui.dev/brand/icon-512.png) app icon 512px