CodeKabir UI

Card

Displays content in a contained card format with various styling options and layouts.

This is some text within a card body.

Component Setup

Create or update your card component

Copy this code to create your card component

/components/ui/card.tsx
Loading syntax highlighting...

Test Your Component

  • 1. Add the component to a test page
  • 2. Check all props and variants work as expected
  • 3. Verify responsive behavior
  • 4. Test with different content/data
  • 5. Ensure accessibility features work correctly

Sizes

This is some text within a card body.
This is some text within a card body.
This is some text within a card body.

API Reference

The Card component provides a flexible container for grouping related content and actions. It uses Radix UI's Slot primitive to enable composition through a slot pattern.

Card.Root

Main container element for the card with border and shadow styling options. Uses Radix UI's Slot primitive when asChild prop is true.

PropTypeDefaultDescription
size
"sm""md""lg"
"md"

Size of the card

border"boolean""true"

Whether to show a border around the card

shadow"boolean""true"

Whether to apply a shadow effect to the card

className"string""undefined"

Additional CSS classes

asChild"boolean""false"

When true, component will render as a child using Radix UI Slot