kliping.pro
  • Docs
  • Directory
  • Colors
  • Typeset
Docs
    • Accordion
    • Action Bar
    • Alert
    • Alert Dialog
    • Angle Slider
    • Aspect Ratio
    • Attachment
    • Avatar
    • Avatar Group
    • Badge
    • Badge Overflow
    • Banner
    • Breadcrumb
    • Bubble
    • Button
    • Button Group
    • Calendar
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Checkbox Group
    • Chip
    • Circular Progress
    • Client Only
    • Collapsible
    • Color Picker
    • Color Swatch
    • Combobox
    • Combobox Advanced
    • Command
    • Compare Slider
    • Composition
    • Context Menu
    • Cropper
    • Data Grid
    • Data Table
    • Data Table Advanced
    • Date Picker
    • Dialog
    • Direction Provider
    • Drawer
    • Dropdown Menu
    • Editable
    • Empty
    • Field
    • File Upload
    • Form
    • FPS
    • Gauge
    • Hitbox
    • Hover Card
    • Input
    • Input Group
    • Input OTP
    • Item
    • Kanban
    • Kbd
    • Kbd Advanced
    • Key Value
    • Label
    • List
    • Listbox
    • Map
    • Marker
    • Marquee
    • Mask Input
    • Masonry
    • Media Player
    • Mention
    • Menubar
    • Message
    • Message Scroller
    • Native Select
    • Navigation Menu
    • Number Field
    • Pagination
    • Pending
    • Phone Input
    • Pin Input
    • Popover
    • Portal
    • Presence
    • Progress
    • QR Code
    • Questionnaire
    • Radio Group
    • Range Calendar
    • Rating
    • Relative Time Card
    • Resizable
    • Responsive Dialog
    • Scroll Area
    • Scroll Spy
    • Scroller
    • Segmented Input
    • Select
    • Selection Toolbar
    • Separator
    • Sheet
    • Sidebar
    • Skeleton
    • Slider
    • Software Purchase Card
    • Sonner
    • Sortable
    • Speed Dial
    • Spinner
    • Stack
    • Stat
    • Status
    • Stepper
    • Stepper Advanced
    • Swap
    • Switch
    • Table
    • Tabs
    • Tags Input
    • Tags Input Advanced
    • Textarea
    • Time Picker
    • Timeline
    • Toast
    • Toggle
    • Toggle Group
    • Tooltip
    • Tour
    • Typography
    • Visually Hidden
    • Visually Hidden Input

Card

PreviousNext

Menampilkan kartu dengan bagian header, konten, dan footer.

View 13 variants

Login to your account

Enter your email below to login to your account

Forgot your password?

Installation ​

pnpm dlx shadcn-vue@latest add card

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Usage ​

vue
<script setup lang="ts">
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>Card Title</CardTitle>
      <CardDescription>Card Description</CardDescription>
    </CardHeader>
    <CardContent>
      <p>Card Content</p>
    </CardContent>
    <CardFooter>
      <p>Card Footer</p>
    </CardFooter>
  </Card>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
PreviousCalendarNext Carousel

On This Page

InstallationUsage
Dirilis di bawah lisensi MIT. Ditulis ulang untuk Vue dari shadcn-vue, shadcn-ui-blocks, dan shadcn-hooks. Hak cipta © 2026 Kliping