Card

Card is a neobrutalist React component from Cruise UI. A bordered box with an optional --primary header strip; clickable when it has a link. Install it with npx shadcn@latest add @cruiseui/card.

Install

Terminal

npx shadcn@latest add @cruiseui/card

First time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.

Example

Corners

Oshodi – CMS

9 stops · ₦800 · every 15 minutes

Ikeja – Yaba

7 stops · ₦600. The whole card is a link.

import { CruiseCard } from "@/components/cruise/card";

export default function CardExample() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <CruiseCard title="Oshodi – CMS">9 stops · ₦800 · every 15 minutes</CruiseCard>
      <CruiseCard title="Ikeja – Yaba" href="#routes">
        7 stops · ₦600. The whole card is a link.
      </CruiseCard>
    </div>
  );
}

<article class="brutal" style="padding: 24px">
  <h3>Oshodi – CMS</h3>
  <p>9 stops · ₦800</p>
</article>

Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.

When to use

Grouping one item's details: a product, a route, a plan.

When not to

Page sections (use plain sections with dividers). Wrapping a single line of text.

Props

`CruiseCard`

Prop	Type	Default	Description
`title?`	`ReactNode`	—	Shown in a full-width --primary header strip. Omit for no strip.
`children`	`ReactNode`	—	—
`href?`	`string`	—	Makes the whole card a link that moves on hover/active.
`className?`	`string`	—	—
`style?`	`CSSProperties`	—	—

A clickable card is one link (the whole card), not nested links.
The title is a heading, so people can jump between cards.