Components
Cards
Cards/ holds the pre-composed card layouts built on top of Card.
Each is a fixed arrangement rather than a slot-based primitive — pick the one whose shape matches, or drop to Card directly.
CardWithIcon and IconCard take identical props and differ only in where
the icon sits: CardWithIcon pushes it to the trailing edge, IconCard
places it before the title. The IconPlacement story shows them side by side.
<View className="w-80 gap-4">
<CardWithIcon
title="Option A"
description="Supporting description text for the first option."
icon={<Icon name="building" size={24} />}
/>
<CardWithIcon
title="Option B"
description="Supporting description text for the second option."
icon={<Icon name="banknote" size={24} />}
isSelected
/>
</View>Import
import { Cards } from '@simal/ui/nativewindui';Examples
Icon Placement
The two icon layouts, same props, different arrangement. Worth comparing directly — the file names do not make the difference obvious.
<View className="w-80 gap-6">
<View className="gap-2">
<Text variant="caption2" color="tertiary" className="font-mono uppercase">
CardWithIcon — icon trails
</Text>
<CardWithIcon
title="Option A"
description="Supporting description text for the option."
icon={<Icon name="building" size={24} />}
/>
</View>
<View className="gap-2">
<Text variant="caption2" color="tertiary" className="font-mono uppercase">
IconCard — icon leads
</Text>
<IconCard
title="Option A"
description="Supporting description text for the option."
icon={<Icon name="building" size={24} />}
/>
</View>
</View>Icon Card Selected
<View className="w-80 gap-4">
<IconCard
title="Option B"
description="Supporting description text for the second option."
icon={<Icon name="banknote" size={24} />}
/>
<IconCard
title="Option C"
description="Supporting description text for the third option."
icon={<Icon name="doc" size={24} />}
isSelected
/>
</View>Empty State
<View className="w-80">
<EmptyStateCard
title="Nothing here yet"
description="Items you need to action will land here."
buttonText="View all items"
onButtonClick={() => {}}
/>
</View>Footer
<View className="w-80">
<FooterCard
title="Item title"
description="Supporting description text for the item."
icon={<Icon name="doc" size={24} />}
footerContent={<Text variant="footnote" color="tertiary">Footnote text</Text>}
/>
</View>Quote
<View className="w-80">
<QuoteCard
quote="A short pull quote, long enough to run to about two lines."
author="Attribution"
/>
</View>Side Image
<View className="w-96">
<SideImageCard
title="Item title"
subtitle="Subtitle"
imageSource={{ uri: COVER_IMAGE }}
content={<Text variant="footnote" color="tertiary">Footnote text</Text>}
progress={62}
total={88}
/>
</View>