Card

A simple customizable card component with a variety of variants to choose from.

NOTE: This is a starting point for the Button component. You can customize it according to your needs, we are adding more variants as you read this guide, so stay tuned for more updates.

Examples

Card Title

Card Description

This is the card content. You can put any content here.

Installation

npx shadcn@latest add "https://aurora-ui-opal.vercel.app/c/card.json"

Component Props

You can customize the content of the Card by passing the following props:

Prop	Type	Default	Description
children	ReactNode	-	Content to be displayed inside the card.
className	string	-	Additional class names to be applied to the card.
variant	default \| destructive \| success	default	Variant of the card.
size	default \| sm \| lg \| icon	default	Size of the card.
...props	any	-	Additional props to be passed to the card.

Credits

This one goes to shadcn for the original idea and implementation — we are building variants on top of it. here.