Card

Component card để hiển thị nội dung trong một hộp chứa với các phần header, content và footer.

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add card

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add card

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add card

bun

bunx @galaxy-stack/nebula-cli@latest add card

global

# Nếu bạn đã cài đặt galaxy-design toàn cục
galaxy-design add card

Dependencies

Component này tự động cài đặt các dependencies sau:

• React: class-variance-authority
• Vue: class-variance-authority
• Angular: class-variance-authority
• React Native: nativewind, tailwindcss
• Flutter: Không cần thêm dependencies

Không cần cài đặt thủ công!

Sử dụng

Ví dụ cơ bản

React

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

export default function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Tiêu đề Card</CardTitle>
        <CardDescription>Mô tả Card</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Nội dung Card</p>
      </CardContent>
    </Card>
  )
}

Vue

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

<template>
  <Card>
    <CardHeader>
      <CardTitle>Tiêu đề Card</CardTitle>
      <CardDescription>Mô tả Card</CardDescription>
    </CardHeader>
    <CardContent>
      <p>Nội dung Card</p>
    </CardContent>
  </Card>
</template>

Với Actions

React

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

export default function CardWithActions() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Tiêu đề Card</CardTitle>
        <CardDescription>Mô tả Card</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Nội dung Card</p>
      </CardContent>
      <CardFooter className="flex gap-2">
        <Button variant="outline">Hủy</Button>
        <Button>Lưu</Button>
      </CardFooter>
    </Card>
  )
}

Vue

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

<template>
  <Card>
    <CardHeader>
      <CardTitle>Tiêu đề Card</CardTitle>
      <CardDescription>Mô tả Card</CardDescription>
    </CardHeader>
    <CardContent>
      <p>Nội dung Card</p>
    </CardContent>
    <CardFooter class="flex gap-2">
      <Button variant="outline">Hủy</Button>
      <Button>Lưu</Button>
    </CardFooter>
  </Card>
</template>

API Reference

Components

Component	Description	Props
Card	Container chính	className / class
CardHeader	Phần header	className / class
CardTitle	Văn bản tiêu đề	className / class
CardDescription	Văn bản mô tả	className / class
CardContent	Khu vực nội dung chính	className / class
CardFooter	Phần footer	className / class

Accessibility

• Semantic HTML: Sử dụng các phần tử <article>, <header>, <footer> phù hợp
• Screen Reader: Phân cấp nội dung rõ ràng
• Focus Management: Kế thừa hành vi focus từ parent
• WCAG Compliance: Tuân thủ WCAG 2.1 Level AA

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)