PanelUI
DocsComponentsTheming1Get started

Card

Content surface with header, body and footer.

A content surface. Use the full composition rather than dropping everything into the content slot.

Installation

Card ships with the library — no separate install.

import { Card, Button, Input } from 'panelui-native';

Usage

<Card>
  <Card.Header>
    <Card.Title>Create project</Card.Title>
    <Card.Description>Deploy your new project in one click.</Card.Description>
  </Card.Header>
  <Card.Content className="gap-4">
    <Input label="Name" placeholder="My project" />
  </Card.Content>
  <Card.Footer>
    <Button size="sm">Deploy</Button>
  </Card.Footer>
</Card>

Composition

<Card>
  <Card.Header>
    <Card.Title>…</Card.Title>
    <Card.Description>…</Card.Description>
  </Card.Header>
  <Card.Content>…</Card.Content>
  <Card.Footer>…</Card.Footer>
</Card>
  • Card.Header — Title and description block.
  • Card.Title — Card heading.
  • Card.Description — Muted supporting line.
  • Card.Content — Main body.
  • Card.Footer — Row of actions.

API Reference

Card

PropTypeDefaultDescription
classNamestring—

Every part also accepts the underlying React Native props (ViewProps or TextProps) and a className for Tailwind utilities.

Button

Pressable action with variants, sizes, loading state and icon slots.

Checkbox

Animated checkbox, as a row or a selectable card.

On this page

InstallationUsageCompositionAPI ReferenceCard