Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Tabs with Cards for Svelte

Featured, Popular and Recent. Each panel is a grid of article cards with a badge, a title, a short description and a Learn More button.

UI library: Ark UI

Featured, Popular and Recent switch a two-column grid of article cards. Featured is selected. Each card has a badge, a title, a short description and Learn More. One title is Building Modern Web Apps.

Use tabs of cards for posts or products grouped by category. A Carousel fits when only one card should show at a time. In Svelte, Ark UI does not lay out the cards.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Tabs anatomy: root, list, indicator, trigger, content

Usage

<Tabs class="w-full max-w-2xl" defaultValue="featured"><TabsList>{#each categories as category (category.value)}<TabsTrigger value={category.value}>{category.label}</TabsTrigger>{/each}</TabsList>{#each categories as category (category.value)}<TabsContent value={category.value}><div class="grid gap-4 md:grid-cols-2">{#each category.articles as article (article.title)}<div class="flex flex-col items-start rounded-lg border bg-card p-6 text-card-foreground shadow-sm"><Badge class="mb-3" variant={category.badgeVariant}>{category.badge}</Badge><h3 class="mb-2 font-semibold text-lg">{article.title}</h3><p class="mb-4 text-muted-foreground text-sm">{article.description}</p><Button size="sm" variant="outline">Learn More</Button></div>{/each}</div></TabsContent>{/each}</Tabs>

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 lazyMount and unmountOnExit to false on Tabs to keep a panel mounted if a card later holds state.

API Reference

Tabs

Sets defaultValue="featured" and value={category.value}. The rest is on the Tabs page.

Badge

Sets variant={category.badgeVariant}. The rest is on the Badge page.

Button

Sets size="sm" and variant="outline". The rest is on the Button page.

All 11 tabs examples