Card

Cards create visually distinct content blocks, perfect for feature lists, navigation links, or highlighted content.

Usage

Code

mdx

1<Card 
2  title="Getting Started" 
3  description="Learn the basics of our platform"
4  href="/docs/v1.0.0/getting-started"
5/>

Read the full documentation for detailed guides and API references.

Begin your journey with our quick start guide

Step-by-step tutorials and best practices

View the source code and contribute

Use CardGrid to display multiple cards in a responsive grid layout:

Code

mdx

1<CardGrid cols={2}>
2  <Card title="Card 1" description="First card" />
3  <Card title="Card 2" description="Second card" />
4</CardGrid>

Get up and running in 5 minutes

In-depth tutorials and walkthroughs

Complete API documentation

Contribute to the project

Prop	Type	Default	Description
`title`	`string`	required	Card title
`description`	`string`	-	Card description text
`href`	`string`	-	Link URL (makes card clickable)
`icon`	`string \| ReactNode`	-	Lucide icon name or custom icon
`external`	`boolean`	`false`	Opens link in new tab
`children`	`ReactNode`	-	Custom content

Prop	Type	Default	Description
`children`	`ReactNode`	required	Card components
`cols`	`1 \| 2 \| 3`	`2`	Number of columns