Binhlaig UI Component

Card

Cards group related content and actions into a clear, flexible container.

Installation

Add the latest Card component using either the Binhlaig Native installer or the Shadcn CLI installer.

Initialize Binhlaig UI first

The init command prepares the shared Binhlaig theme, utilities, component directory and required dependencies.

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add card

Native Beta fetches the Card directly from the Binhlaig registry and writes it into your project.

Import

Import the Card components from your UI components directory.

TypeScript

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

Usage

Use Card components to group related content.

Binhlaig UI

Reusable components for React and Next.js projects.

Build clean and modern user interfaces quickly.

Create project

Start a new project using Binhlaig UI.

Your project will include reusable components and Tailwind CSS styles.

Card Action

Use CardAction for actions aligned with the card heading.

Team members

Manage people with access to this project.

12 team members

Workspace access enabled

Welcome back

Enter your account details to continue.

Password

Product Card

Combine images, content and actions in a product card.

Wireless Headphones

High-quality sound with active noise cancellation.

$129

4.8

Notification Card

Display alerts, notifications and status information.

Notifications

You have three unread notifications.

Deployment successful

Your project was deployed successfully.

Horizontal Card

Use a horizontal layout for compact content and actions.

Starter components

Install reusable buttons, cards, inputs and tabs in your Next.js project.

Custom Style

Customize Card components using Tailwind CSS classes.

Custom card

Use className to customize the card style.

Binhlaig UI components support Tailwind CSS utility classes.

Update or Overwrite

Replace an older Card source file with the latest registry version.

Existing Card code will be replaced

Save your custom changes before running the overwrite command.

npx binhlaig-ui@latest add card --overwrite

API Reference

Components available in the Binhlaig UI Card.

Component	Element	Description
`Card`	`div`	The main card container.
`CardHeader`	`div`	Contains the card title, description and action.
`CardTitle`	`div`	Displays the primary card heading.
`CardDescription`	`div`	Displays supporting text below the title.
`CardAction`	`div`	Displays an action aligned with the card heading.
`CardContent`	`div`	Contains the main card content.
`CardFooter`	`div`	Contains actions or supporting content at the bottom.