# Cruise UI > Cruise UI is a free set of themes and React components in Naija Brutalism: neobrutalism built from Nigerian street life (thick ink borders, hard offset shadows, bold Baloo 2 type, Danfo yellow), with city themes (Lagos · Danfo, Ibadan · Micra), dark mode and a game-like feel. Use it three ways: React / Next.js components installed with the shadcn CLI from the @cruiseui registry, plain HTML/CSS with one stylesheet, or one AI prompt (with the full design spec) from the Studio for ChatGPT, Claude, Gemini or Meta AI. Every docs page is also plain markdown: add `.md` to its URL (e.g. https://cruiseui.dev/docs/components/button.md). All of it in one file: https://cruiseui.dev/llms-full.txt. ## Docs - [Introduction](https://cruiseui.dev/docs.md): Cruise UI is a set of Naija Brutalism themes for your app. - [Use Cruise UI as an AI skill](https://cruiseui.dev/docs/ai-skill.md): One download teaches your AI assistant the whole style: the rules, both city themes, every component and the starters. - [Installation](https://cruiseui.dev/docs/installation.md): Three ways in: an AI prompt, plain HTML/CSS, or React components. - [Theming](https://cruiseui.dev/docs/theming.md): Everything is CSS variables, so a theme is a handful of values. The Studio sets them for you. ## Guides - [What is Naija Brutalism?](https://cruiseui.dev/docs/guides/what-is-naija-brutalism.md): Naija Brutalism is neobrutalism built from Nigerian street life: thick ink borders, hard shadows, bold type and city themes like Lagos · Danfo. - [Cruise UI vs other neobrutalism libraries](https://cruiseui.dev/docs/guides/cruise-ui-vs-other-neobrutalism-libraries.md): What Cruise UI adds to neobrutalism (city themes, an AI-ready design spec, HTML and React, Nigerian inputs) and how to choose a library. - [Building a Nigerian checkout form (Naira + +234 phone input)](https://cruiseui.dev/docs/guides/nigerian-checkout-form.md): Build a checkout form with a ₦ amount field that sends 12500 and a +234 phone field that sends +2348012345678, in React or plain HTML. ## Components - [Accordion](https://cruiseui.dev/docs/components/accordion.md): Sections that open and close, one or several at a time: FAQs, details, settings. - [Achievement toast](https://cruiseui.dev/docs/components/achievement-toast.md): A game toast: trophy chip, "Achievement unlocked", the title, a line and an XP reward. - [Alert](https://cruiseui.dev/docs/components/alert.md): Info, success, warning and danger messages with a square icon chip; a full-width banner variant. - [Avatar](https://cruiseui.dev/docs/components/avatar.md): A photo from any URL, falling back to initials or an icon; circle or square, 32–80px, status dots, auto colours and groups. - [Badge](https://cruiseui.dev/docs/components/badge.md): A small label for status or category: Paid, New, Sold out. - [Breadcrumb](https://cruiseui.dev/docs/components/breadcrumb.md): Where a page sits in the site; the middle collapses into "…" on phones. - [Button](https://cruiseui.dev/docs/components/button.md): The core action: a thick ink border and a hard shadow it drops into when pressed. - [Button group](https://cruiseui.dev/docs/components/toggle-button-group.md): A row of joined buttons for switching between 2–5 views or filters. - [Card](https://cruiseui.dev/docs/components/card.md): A bordered box with an optional --primary header strip; clickable when it has a link. - [Checkbox](https://cruiseui.dev/docs/components/checkbox.md): A native checkbox, restyled: square box, --primary when checked. - [Combobox](https://cruiseui.dev/docs/components/combobox.md): A filterable select: type to filter, grouped options, async loading and multi-select chips. - [Countdown](https://cruiseui.dev/docs/components/countdown.md): Days, hours, minutes and seconds in boxes, or one compact line; red in the last minute. - [Custom select](https://cruiseui.dev/docs/components/custom-select.md): A select with our own list (check on the chosen option), for when native won't do. - [Date picker](https://cruiseui.dev/docs/components/date-picker.md): A calendar (single day or a range) and a DD/MM/YYYY input that opens it in a popover. - [Dialogue box](https://cruiseui.dev/docs/components/dialogue-box.md): A game-style speech box for tours and tips: portrait, name tab, typewriter text, Next / Skip and a step count. - [Drawer](https://cruiseui.dev/docs/components/drawer.md): A side panel (left for navigation, right for a cart or filters) that becomes a bottom sheet on phones. - [Dropdown menu](https://cruiseui.dev/docs/components/dropdown-menu.md): A short list of actions behind one button, with icons, hints and a destructive item. - [Empty state](https://cruiseui.dev/docs/components/empty-state.md): What a list or page shows with nothing in it: an icon, a heading, one line and the next step. - [File upload](https://cruiseui.dev/docs/components/file-upload.md): A drag-and-drop zone that's also a button, with a file list, thumbnails, progress and remove. - [Form field](https://cruiseui.dev/docs/components/form-field.md): Label (with an optional Required marker), the control, a hint and an error with an icon; wires the ARIA for you. - [Hero](https://cruiseui.dev/docs/components/hero.md): The big --primary opening section: headline, two actions, an illustration (danfo bus, Micra taxi or cruise ship) and a ghost word. - [Input](https://cruiseui.dev/docs/components/input.md): A text field with a label above, optional hint and an error state. - [Leaderboard](https://cruiseui.dev/docs/components/leaderboard.md): Ranked rows with gold/silver/bronze chips, avatars, change arrows and scores; stacked cards on phones. - [Modal](https://cruiseui.dev/docs/components/modal.md): A dialog with a --primary title bar, for confirmations and short forms. - [Naira input](https://cruiseui.dev/docs/components/naira-input.md): A ₦ amount field that formats 12,500 as you type and gives back a plain number. - [Navbar](https://cruiseui.dev/docs/components/navbar.md): The top bar: logo, links and actions, with a Menu drawer on phones. - [OTP input](https://cruiseui.dev/docs/components/otp-input.md): 4 or 6 boxes for a one-time code, with paste, error and a resend countdown. - [Pagination](https://cruiseui.dev/docs/components/pagination.md): Page numbers with Previous / Next; compacts to "Page 3 of 12" on phones. - [Phone input](https://cruiseui.dev/docs/components/phone-input.md): A Nigerian mobile number with a +234 block: shows 0801 234 5678, gives back +2348012345678. - [Popover](https://cruiseui.dev/docs/components/popover.md): A small panel tied to a button: a title, content and actions; a bottom sheet on phones for longer content. - [Pricing card](https://cruiseui.dev/docs/components/pricing-card.md): A plan card with name, price, features and an action; the featured one is --primary. - [Progress](https://cruiseui.dev/docs/components/progress.md): Linear bars and circular rings for how far along something is, or a spinner. - [Radio group](https://cruiseui.dev/docs/components/radio-group.md): Native radios in a fieldset: pick exactly one of a few visible options. - [Rating](https://cruiseui.dev/docs/components/rating.md): Stars filled with --primary and outlined in ink, with the number next to them: read-only (halves) or pick-a-score. - [Score counter](https://cruiseui.dev/docs/components/score-counter.md): Coins or points in Baloo 2 with a coin or star chip; counts up when it changes, with a floating +50. - [Scroll to top](https://cruiseui.dev/docs/components/scroll-top.md): A square button in a bottom corner that appears on long pages and takes you, and your keyboard focus, back to the top. - [Select (native)](https://cruiseui.dev/docs/components/select.md): A native