Back to Cards

Card Group

An iOS/macOS-style grouped list card — a header plus divided, hoverable icon+label+description rows for settings and menu screens.

Workspace Settings

Manage your account and preferences

Cardscardlistsettings
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react

Overview

Layout

Header block, then divided rows in one card

Rows

Icon chip, label+description, trailing chevron

Interaction

Each row is a real <button>, not a nested <a>

Accessibility

Row icon and chevron decorative — label is the real control name

Prompt