Neumorphism UI

Card

Use Card to group a self-contained summary, settings section, or piece of content with its actions.

Preview

Market summary and inset detail

Compare a raised market card with a live badge and details button against an inset card containing a portfolio progress indicator.

Market overview

See today's watchlist movement at a glance.

Live
₩72,400+2.41%

Inset surface

Use recessed depth for supporting information.

x

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/card

Install the shared base once, then add components and their dependencies with the CLI.

Market summary and inset detail

npx shadcn@latest add @neumorphism-ui/badge @neumorphism-ui/button @neumorphism-ui/card @neumorphism-ui/progress
Registry JSON

Usage

Build the heading with CardHeader, CardTitle, and CardDescription. Place the main information in CardContent and supporting actions or metadata in CardAction or CardFooter.

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function Example() {
  return (
    <Card>
      <CardHeader><CardTitle>Team workspace</CardTitle></CardHeader>
      <CardContent>Invite your team and start a project.</CardContent>
    </Card>
  );
}

API Reference

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.

ComponentPropTypeDefaultDescription
Cardvariant"raised" | "accent" | "soft" | "inset" | "flat""raised"Selects the surface depth and border treatment.
CardchildrenrequiredReact.ReactNode—Arranges the composable Card subcomponents.
CardActionchildrenReact.ReactNode—An action or status area on the right side of the Header.
CardTitlechildrenrequiredReact.ReactNode—The Card heading, rendered as h3 by default.

Accessibility

  • 01

    Card is a div and does not automatically add a landmark or article role.

  • 02

    If h3 does not fit the page heading hierarchy, use an appropriate heading element instead of CardTitle.

  • 03

    When making the entire Card clickable, avoid nesting other buttons or links inside it.