Component

Card

Content surface with variants, elevation, borders, and optional press behavior.

React Native

Card variants

Use surfaces to group related information.

Account balance

$4,280.00 available

import { Card, Text, useTheme } from '@sohantalukder/rn-kit';

export function AccountCard() {
  const { gutters } = useTheme();

  return (
    <Card variant="outlined" style={gutters.gap_8}>
      <Text variant="heading3" weight="semibold">Savings</Text>
      <Text color="secondary">Available balance</Text>
      <Text variant="heading2" weight="bold">$2,450.00</Text>
    </Card>
  );
}

Live component

defaultelevatedoutlinedfilled

Use cards for repeated content groups.
Keep nested card structures out of app screens.

Usage

import { Card } from '@sohantalukder/rn-kit';

import { Card, Text, useTheme } from '@sohantalukder/rn-kit';

export function AccountCard() {
  const { gutters } = useTheme();

  return (
    <Card variant="outlined" style={gutters.gap_8}>
      <Text variant="heading3" weight="semibold">Savings</Text>
      <Text color="secondary">Available balance</Text>
      <Text variant="heading2" weight="bold">$2,450.00</Text>
    </Card>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

variant"default" | "elevated" | "outlined" | "filled" | "pressable"defaultSelects the visual style variant for the component.

paddingnumberthemeOverrides the internal spacing of the component surface.

elevationnumber0Controls shadow depth for elevated card surfaces.

pressablebooleanfalseMakes the entire card surface respond to press events.

childrenReactNode-Content rendered inside the component surface.

Theme

Card reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
elevated
outlined
filled
pressable

Best Practices

Use cards for repeated content groups.
Keep nested card structures out of app screens.