Display@knitui/components

Card

Card is a surface container composed with Card.Header, Card.Footer, and full-bleed Card.Section sub-components. withBorder adds an outline, shadow elevates with a drop shadow, radius rounds the corners, and orientation switches the main axis.

WebiOSAndroid3 style slots0 own props8 examples

Stories Source Tests Open in Storybook

import { Card } from "@knitui/components";

Playground

Loading playground…

withBorderAdds a 1 px border around the card.

false

shadowDrop-shadow depth token.

radiusBorder-radius token.

orientationMain flex axis of the card.

paddingInner padding token.

Playground

<Card
  withBorder={false}
  orientation="vertical"
  padding="$lg"
/>

Examples

Compound API

Card.Header / Card.Footer compound sub-components in a fully composed card.

Loading example…

Compound APISource Storybook

With Sections

Card.Section spans edge-to-edge, negating the card padding; withBorder adds dividers.

Loading example…

With SectionsSource Storybook

Horizontal Orientation

Horizontal orientation lays out children side by side — useful for media + text layouts.

Loading example…

Horizontal OrientationSource Storybook

Shadow Depths

Multiple shadow depths side by side — xs through xl.

Loading example…

Shadow DepthsSource Storybook

With Border

withBorder outlines the card boundary without adding a shadow.

Loading example…

With BorderSource Storybook

Plain

Minimal card with no sub-components — plain body content only.

Loading example…

PlainSource Storybook

Styles

Per-slot styles targets individual parts — here the header and footer.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	—
`radius` system	`string \| number \| undefined` unset · xs · sm · md · lg · xl	—	Border-radius token.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` unset · xs · sm · md · lg · xl	—	Drop-shadow depth token.
`styles` system	`SlotStyles<CardStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching child parts.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element

Style slots

Every part of Card can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`footer`	`styles={{ footer: { … } }}`
`header`	`styles={{ header: { … } }}`
`section`	`styles={{ section: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 500 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.