A
Auralix UI

Card

A container component for grouping related content.

Preview

Card Title

This is a card description.

Cards are containers that group related content and actions.

Installation

bash
npx auralix-ui add card

Usage

Basic Card

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>This is the card content.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Hoverable Card

tsx
<Card hoverable>
  <CardContent>Hover over me!</CardContent>
</Card>

Props

NameTypeDefaultDescription
hoverablebooleanfalseWhether the card shows hover effect.
classNamestring-Additional CSS classes.
childrenReactNode-Card content.

Variants

Simple
Simple Variant
Glass
Glass Variant
Neon
Neon Variant
SelectModal