Pure UI
DocsComponentsBlocksNEW
141

Docs

IntroductionGet Started
Installation
Theming

Components

AccordionAvatarBadgeButtonButton GroupCalendarCardCheckboxCollapsibleCombobox
Detached Triggers
DialogInputInput GroupInput OTPKbdLabelMenuNumber FieldPopoverRadio GroupNEWScroll AreaSelectSeparatorSheetSpinnerSwitchTabsNEWTextareaToastTooltip

Card

A content container for grouping related information.

Cursor

Today•03:45 PM
$40.89

Introducing IDE Plugins

Check out the latest news

Installation

Loading content...

Anatomy

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>;

Usage

Horizontal Layout

Demon Slayer: Kimetsu no Yaiba

Demon Slayer: Kimetsu no Yaiba

Follow Tanjiro Kamado as he embarks on a journey to become a demon slayer and find a cure for his sister Nezuko, who has been turned into a demon. An epic tale of courage, family bonds, and breathtaking battles.

★ 8.6/1026 episodes

With Image

Harry Potter Collections
Harry Potter18 pictures
Hell's Paradise
Hell's Paradise56 pictures

With Background Images

Beautiful aerial view of Buenos Aires cityscape
Naruto
Shonen