Card

Use cards to highlight navigation targets, related reading, or key callouts directly inside your MDX content.

Track progress

Keep an eye on the public roadmap and see which features are shipping next.

<Card title="Track progress" icon="panel-left-close" href="/docs/roadmap">
  Keep an eye on the public roadmap and see which features are shipping next.
</Card>

Horizontal layout

Add the horizontal prop when you want the icon and content to line up on a single row.

Horizontal card

This layout works well when cards appear in a column grid or next to tables.

<Card title="Horizontal card" icon="scroll-text" horizontal>
  This layout works well when cards appear in a column grid or next to tables.
</Card>

Custom CTA and arrows

Set the cta text to add a small call to action and control whether an arrow is shown with the arrow prop. Arrows show automatically for external links, so the manual override is useful for internal links or button-less layouts. You can also change the icon color or pass a JSX icon directly if you need more control.

Custom icon color

Icons accept Lucide names as strings or JSX components. Use the color prop to match a brand or category.

<Card title="Custom icon color" icon="sparkles" color="#f97316">
  Icons accept Lucide names as strings or JSX components. Use the `color` prop to match a brand or
  category.
</Card>

Read the docs

Explore the repository to browse the source, open issues, or contribute improvements.

<Card
  title="Read the docs"
  icon="book-open"
  href="https://github.com/prose-ui/prose-ui"
  cta="Visit GitHub"
  horizontal
  arrow="true"
/>

Use with Columns

Combine cards inside the Columns layout to build responsive grids. By default, columns collapse to a single column on small screens.

<Columns columns={2}>
  <Card title="Start here" icon="book-open" href="/docs">...</Card>
  <Card title="View components" icon="panel-left-close" href="/docs/components/overview">...</Card>
  <Card title="Customize styles" icon="sparkles" href="/docs/styling">...</Card>
</Columns>

Created by Valdemaras, designed by Domas. Source code available on GitHub.