CardiOS

Compound surface — header, title, content and footer slots.

$ npx lumioui add card

import { Card } from "@/components/ui/card/card";

Props6

Card
className?	string
variant?	"elevated" \| "outlined" \| "filled" \| "glass"	Surface voice — "elevated" (default, soft shadow on card color), "outlined" (hairline border, no shadow — the paper-canvas idiom), "filled" (tonal secondary fill, no shadow), "glass" (liquid-glass material — floating panels over content).
onPress?	(e: GestureResponderEvent) => void	Makes the card pressable: spring scale + light haptic.
haptic?	"light" \| "medium" \| "heavy" \| "selection" \| false	Haptic on press. Default "light"; false to disable.
disabled?	boolean
CardText
className?	string

Card — Glassglass.tsx

card/variants/glass.tsx open

Compound surface — header, title, content and footer slots.

import { CardGlass } from "@/components/ui/card/variants/glass";

export function Example() {
  return (
    <CardGlass />
  );
}

import * as React from "react";
import { View, Text } from "react-native";
import { Card } from "../card";
import { Button } from "../../button/button";
import { Ambient } from "../../glass/ambient";

/** CardGlass — a floating glass card hovering over a travel photo. */
export function CardGlass() {
  return (
    <View className="relative h-[420px] w-full overflow-hidden rounded-3xl">
      <Ambient seed="card" />
      <View className="absolute inset-x-4 bottom-5">
        <Card variant="glass">
          <Card.Header>
            <Card.Title>Lake Bled at dawn</Card.Title>
            <Card.Description>Julian Alps · Slovenia</Card.Description>
          </Card.Header>
          <Card.Footer className="flex-row gap-2">
            <Button variant="glass" size="sm">Directions</Button>
            <Button variant="glass" size="sm">Save</Button>
          </Card.Footer>
        </Card>
      </View>
      <View className="absolute left-5 top-5">
        <Text className="text-[10px] font-semibold uppercase tracking-widest text-white/90">
          FLOATING SURFACE
        </Text>
      </View>
    </View>
  );
}

Card — Profileprofile.tsx

card/variants/profile.tsx open

Compound surface — header, title, content and footer slots.

import { CardProfile } from "@/components/ui/card/variants/profile";

export function Example() {
  return (
    <CardProfile />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Card } from "../card";
import { Avatar } from "../../avatar/avatar";
import { Badge } from "../../badge/badge";
import { Button } from "../../button/button";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** CardProfile — member card with header, stat tiles and action footer. */
export function CardProfile() {
  return (
    <View className="w-full gap-3">
        <Card variant="glass" className="w-full">
          <Card.Header>
            <View className="flex-row items-center gap-3">
              <Avatar source={{ uri: "https://i.pravatar.cc/150?img=47" }} fallback="AC" alt="Amara Chen" />
              <View className="flex-1">
                <Card.Title className="text-lg">Amara Chen</Card.Title>
                <Card.Description>Field author</Card.Description>
              </View>
              <Badge variant="success">Verified</Badge>
            </View>
          </Card.Header>
          <Card.Content>
            <View className="flex-row gap-2">
              <Glass interactive curvature="edge" className="flex-1 items-center rounded-xl py-3">
                <Text variant="small">Photos</Text>
                <Text variant="large">214</Text>
              </Glass>
              <Glass interactive curvature="edge" className="flex-1 items-center rounded-xl py-3">
                <Text variant="small">Trails</Text>
                <Text variant="large">28</Text>
              </Glass>
            </View>
          </Card.Content>
          <Card.Footer>
            <Button size="sm" className="flex-1">View profile</Button>
            <Button size="sm" variant="outline" className="flex-1">Message</Button>
          </Card.Footer>
        </Card>
      </View>
  );
}

Card — Ticketticket.tsx

card/variants/ticket.tsx open

Compound surface — header, title, content and footer slots.

import { CardTicket } from "@/components/ui/card/variants/ticket";

export function Example() {
  return (
    <CardTicket />
  );
}

import * as React from "react";
import { View } from "react-native";
import { Card } from "../card";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** CardTicket — compact transit booking card, content-only composition. */
export function CardTicket() {
  return (
    <View className="w-full gap-3">
        <Card variant="glass" className="w-full">
          {/* Content-only card: Card.Content defaults to pt-0 (it normally
              follows Card.Header) — restore the top pad or the row hugs the
              card's top edge. */}
          <Card.Content className="pt-5">
            <View className="flex-row items-center gap-3">
              <Glass interactive curvature="edge" className="h-11 w-11 items-center justify-center rounded-full">
                <Icon name="tram-front" size="md" color="primary" />
              </Glass>
              <View className="flex-1">
                <Card.Title>Lisbon → Porto</Card.Title>
                <Card.Description>Fri, Sep 18 • 09:36 • Seat 42A</Card.Description>
              </View>
              <Text variant="large">$38.20</Text>
            </View>
          </Card.Content>
        </Card>
      </View>
  );
}