MultinaireCard

Card container with border, border radius, and optional press handling.

Basic Usage

import { MultinaireCard, MultinaireText } from '@multinaire/multinaire-design';

<MultinaireCard>
  <MultinaireText>Card content</MultinaireText>
</MultinaireCard>

Props

Prop	Type	Default	Description
isLoading	boolean	false	Show a loading skeleton in place of the card content
flex	number	—	Flex grow value
margin	SpacingProps	—	Outer margin. Accepts a number for uniform margin, or an object for per-side control
padding	SpacingProps	—	Inner padding. Accepts a number for uniform padding, or an object for per-side control
width	DimensionValue	—	Fixed width of the card
height	DimensionValue	—	Fixed height of the card
borderRadius	number	theme medium	Corner radius in pixels. Defaults to the theme's medium radius
style	ViewStyle	—	Additional styles applied to the card
selected	boolean	false	When true, the card border color changes to the theme's primary color
backgroundColor	ColorKeys	—	Background color key from the active theme palette
borderColor	ColorKeys	backgroundVariant	Border color key from the active theme palette. Overrides the default backgroundVariant border. Ignored when selected is true
badge	ReactElement	—	MultinaireBadge component rendered as an overlay on the card
onPress	() => void	—	Press handler. When omitted the card renders as a plain View (fixes web ScrollView scroll freeze)

Examples

Basic Card

<MultinaireCard padding={16}>
  <MultinaireText type="heading">Card Title</MultinaireText>
  <MultinaireText color="neutral">Card description</MultinaireText>
</MultinaireCard>

Pressable Card

<MultinaireCard onPress={() => handleCardPress()}>
  <MultinaireText>Tap me</MultinaireText>
</MultinaireCard>

Selected State

<MultinaireCard selected={isSelected} onPress={() => setIsSelected(!isSelected)}>
  <MultinaireText>Selectable card</MultinaireText>
</MultinaireCard>

Custom Colors

<MultinaireCard backgroundColor="backgroundVariant" borderColor="primary">
  <MultinaireText>Custom styled card</MultinaireText>
</MultinaireCard>

Card with Badge

<MultinaireCard
  badge={<MultinaireBadge type="primary" title="New" />}
  padding={16}
>
  <MultinaireText>Card with badge overlay</MultinaireText>
</MultinaireCard>

Loading Card

<MultinaireCard isLoading width={200} height={100} />

Custom Sizing

<MultinaireCard
  width="100%"
  height={150}
  margin={{ bottom: 16 }}
  borderRadius={12}
>
  <MultinaireText>Full width card</MultinaireText>
</MultinaireCard>

Notes

• When onPress is not provided, the card renders as an Animated.View instead of a TouchableOpacity. This prevents the card from blocking scroll in a ScrollView on web.