Components
Card

Card

A container component that displays content in a compact and organized way.

Usage

Team Members

Add new members to your organisation.
import { Stack } from 'styled-system/jsx'
import { Button } from '~/components/ui/button'
import * as Card from '~/components/ui/card'
import { FormLabel } from '~/components/ui/form-label'
import { Input } from '~/components/ui/input'

export const Demo = (props: Card.RootProps) => {
  return (
    <Card.Root width="sm" {...props}>
      <Card.Header>
        <Card.Title>Team Members</Card.Title>
        <Card.Description>Add new members to your organisation.</Card.Description>
      </Card.Header>
      <Card.Body>
        <Stack gap="4">
          <Stack gap="1.5">
            <FormLabel htmlFor="name">Name</FormLabel>
            <Input id="name" placeholder="Name" />
          </Stack>
          <Stack gap="1.5">
            <FormLabel htmlFor="email">Email</FormLabel>
            <Input id="email" type="email" placeholder="Email" />
          </Stack>
        </Stack>
      </Card.Body>
      <Card.Footer gap="3">
        <Button variant="outline">Cancel</Button>
        <Button>Invite</Button>
      </Card.Footer>
    </Card.Root>
  )
}

Installation

1

Add Component

Insert code snippet into your project. Update import paths as needed.

import { ark } from '@ark-ui/react/factory'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { card } from 'styled-system/recipes'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(card)

export const Root = withProvider(styled(ark.div), 'root')
export const Body = withContext(styled(ark.div), 'body')
export const Description = withContext(styled(ark.div), 'description')
export const Footer = withContext(styled(ark.div), 'footer')
export const Header = withContext(styled(ark.div), 'header')
export const Title = withContext(styled(ark.h3), 'title')

export interface RootProps extends ComponentProps<typeof Root> {}
export interface BodyProps extends ComponentProps<typeof Body> {}
export interface DescriptionProps extends ComponentProps<typeof Description> {}
export interface FooterProps extends ComponentProps<typeof Footer> {}
export interface HeaderProps extends ComponentProps<typeof Header> {}
export interface TitleProps extends ComponentProps<typeof Title> {}
2

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

import { defineSlotRecipe } from '@pandacss/dev'

export const card = defineSlotRecipe({
  className: 'card',
  slots: ['root', 'header', 'body', 'footer', 'title', 'description'],
  base: {
    root: {
      bg: 'bg.default',
      borderRadius: 'l3',
      boxShadow: 'lg',
      display: 'flex',
      flexDirection: 'column',
      overflow: 'hidden',
      position: 'relative',
    },
    header: {
      display: 'flex',
      flexDirection: 'column',
      gap: '1',
      p: '6',
    },
    body: {
      display: 'flex',
      flex: '1',
      flexDirection: 'column',
      pb: '6',
      px: '6',
    },
    footer: {
      display: 'flex',
      justifyContent: 'flex-end',
      pb: '6',
      pt: '2',
      px: '6',
    },
    title: {
      color: 'fg.default',
      textStyle: 'lg',
      fontWeight: 'semibold',
    },
    description: {
      color: 'fg.muted',
      textStyle: 'sm',
    },
  },
})

Previous

Button

On this page