Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tabs examples · Content

Tabs with Cards for React

Featured, Popular and Recent tabs, each showing a two-column grid of article cards.

Framework
UI library

A long list of articles is easier to browse in groups. Each tab shows a grid of cards with a badge, a title, a short description and a Learn More button. Use it for posts by category, products by collection or courses by topic.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How are the three categories set up?

A categories array gives each tab its value, label, badge and two articles. The default is featured, and the group is w-full max-w-2xl.

What is the card layout?

Each panel is grid gap-4 md:grid-cols-2. From the md breakpoint up the two cards sit side by side, and below it they stack. The cards are bordered bg-card blocks.

Which badge does each card use?

Featured cards use the secondary Badge with the text Featured, Popular cards the default badge, and Recent cards the outline badge with the text New.

What does Learn More do?

Nothing yet. It is a small outline Button with no link or handler. Make it a link to the article in your app.

What else is in a card?

The badge, an h3 title, a muted description, then the button. Featured shows Building Modern Web Apps and Advanced TypeScript.

Do the cards stay mounted on another tab?

No, they unmount with their panel. These cards have no state, so coming back renders the same two. Set keepMounted on each TabsContent to keep a panel mounted if a card later holds state.

All 11 tabs examples