# 050107 Shadcn Showcase

> Building component showcase pages with shadcn/ui — variant cards, data tables with TanStack, and charts with Recharts.

- Skill: `natuleadan/050107-shadcn-showcase` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add natuleadan/050107-shadcn-showcase`
- Raw SKILL.md: https://api.skillmd.com/api/skills/natuleadan/050107-shadcn-showcase/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: natuleadan (https://skillmd.com/u/natuleadan)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/natuleadan/050107-shadcn-showcase

---


# shadcn/ui Showcase & Demo Patterns

Building component demo galleries and variant showcase pages using shadcn/ui components, TanStack Table, and Recharts.

## References

| Topic | File |
|---|---|
| Variant card pattern: mother card + child cards, page header, layout standards | [references/variant-cards.md](references/variant-cards.md) |
| Data Table with TanStack: column defs, sorting, filtering, pagination, row selection, visibility | [references/data-table.md](references/data-table.md) |
| Charts with Recharts: ChartContainer, bar/line/area/pie/radial, tooltip, legend, RTL | [references/charts.md](references/charts.md) |

## When to Use

| Trigger | Use |
|---|---|
| Building a component demo/showcase page | [references/variant-cards.md](references/variant-cards.md) |
| Adding a data table with sorting, filtering, pagination | [references/data-table.md](references/data-table.md) |
| Adding charts to a dashboard or report | [references/charts.md](references/charts.md) |