Components

Card

Linked or static summary cards, alone or in a grid.

Use Card and CardGroup for scannable links or feature summaries.

Basic usage#

Learn how to model response schemas.

<Card title="API reference" icon="code" href="/docs/components/response-field">
  Learn how to model response schemas.
</Card>

Card group#

Installation

Create a standalone Shiso site.

Components

Browse all docs components.

<CardGroup cols={2}>
  <Card title="Installation" icon="rocket" href="/docs/installation">
    Create a standalone Shiso site.
  </Card>
  <Card title="Components" icon="book-open" href="/docs/components">
    Browse all docs components.
  </Card>
</CardGroup>

Horizontal card#

Changelog

<Card title="Changelog" icon="history" href="/docs" horizontal cta="Read more" />

Image card#

Image card

Add an image above the card content with img.

<Card title="Image card" img="/images/sample.jpg">
  Add an image above the card content with `img`.
</Card>

Link card#

Shiso website

External links show an arrow by default. Set arrow={false} to hide it.

Visit site

<Card
  title="Shiso website"
  icon="rocket"
  color="#16a34a"
  href="https://shiso.umami.is"
  cta="Visit site"
>
  External links show an arrow by default. Set `arrow={false}` to hide it.
</Card>

Typed cards#

Typed cards use the matching callout theme and default icon. Set icon to override the default.

Note card

Supporting information.

Info card

Additional context.

Warning card

Something needs attention.

Tip card

A helpful suggestion.

Check card

A successful result.

Danger card

A risky or destructive action.

<Card title="Note card" type="note">Supporting information.</Card>
<Card title="Info card" type="info">Additional context.</Card>
<Card title="Warning card" type="warning">Something needs attention.</Card>
<Card title="Tip card" type="tip">A helpful suggestion.</Card>
<Card title="Check card" type="check">A successful result.</Card>
<Card title="Danger card" type="danger">A risky or destructive action.</Card>

Cards with href render as links; without it they are static containers. External href values open in a new tab. For mixed content side by side, use Columns.

Properties#

Card#

Name	Type	Description
title	ReactNode	Card heading.
href	string	Optional link destination. When set, the card is interactive.
icon	ReactNode \| string	Lucide icon name, image URL or path, or rendered element.
color	string	CSS color applied to the icon.
img	string	Image shown above the body.
cta	string	Trailing action label.
horizontal	boolean	Lay out icon, title, and body in a row. Default: false
arrow	boolean	Show or hide the trailing arrow. External links show it by default.
type	'note' \| 'info' \| 'warning' \| 'tip' \| 'check' \| 'danger'	Apply the matching callout background, border, text color, and default icon.
children	ReactNode	Body content.

CardGroup#

Name	Type	Description
cols	1 \| 2 \| 3 \| 4	Number of columns in the grid. Default: 2
children	ReactNode	One or more `Card` children.

Last updated on Aug 8, 2026

Callout Code group