Data & feedback@neumorphism-ui/card

Card

A layout component composed from Header, Title, Description, Action, Content, and Footer. The root is a div by default, so choose headings and interactive elements that match the content semantics.

@neumorphism-ui/card

Registry JSON

Preview

Market overview

See today's watchlist movement at a glance.

Live

₩72,400+2.41%

Inset surface

Use recessed depth for supporting information.

Installation

npx shadcn@latest add @neumorphism-ui/card

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/card

Import

import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

Example

<Card variant="raised">
  <CardHeader>
    <CardTitle>Team workspace</CardTitle>
    <CardDescription>Collaborate with shared tokens.</CardDescription>
    <CardAction>
      <Button size="sm">Open</Button>
    </CardAction>
  </CardHeader>
  <CardContent>8 members are participating.</CardContent>
  <CardFooter>Last updated just now</CardFooter>
</Card>

API Reference

Component	Prop	Type	Default	Description
`Card`	`variant`	`"raised" \| "soft" \| "inset" \| "flat"`	`"raised"`	Selects the surface depth and border treatment.
`Card`	`children`required	`React.ReactNode`	`—`	Arranges the composable Card subcomponents.
`CardAction`	`children`	`React.ReactNode`	`—`	An action or status area on the right side of the Header.
`CardTitle`	`children`required	`React.ReactNode`	`—`	The Card heading, rendered as h3 by default.