← ClaudeAtlas

050107-shadcn-showcaselisted

Building component showcase pages with shadcn/ui — variant cards, data tables with TanStack, and charts with Recharts.
natuleadan/skills · ★ 2 · AI & Automation · score 74
Install: claude install-skill natuleadan/skills
# 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) |