shadcn_ui-card

Installation
SKILL.md

Shadcn UI — Card

Instructions

ShadCard displays a card with optional header (title, description), body (child), and footer. Use width to constrain width.

Basic card

final theme = ShadTheme.of(context);
ShadCard(
  width: 350,
  title: Text('Create project', style: theme.textTheme.h4),
  description: const Text('Deploy your new project in one-click.'),
  footer: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      ShadButton.outline(child: const Text('Cancel'), onPressed: () {}),
      ShadButton(child: const Text('Deploy'), onPressed: () {}),
Related skills

More from serverpod/skills-registry

Installs
6
GitHub Stars
8
First Seen
Apr 13, 2026