Card - neobrutal-ui

Use Card to group related information and actions. It supplies visual structure, not navigation, selection, or heading semantics. Put real buttons and links inside it rather than making a generic container clickable.

Loading preview...

"use client";

import { useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function CardDemo() {
  const [message, setMessage] = useState("");

  return (
    <form
      className="w-full max-w-sm"
      onSubmit={(event) => {
        event.preventDefault();
        setMessage("Demo submitted locally. No sign-in request was sent.");
      }}
    >
      <Card>
        <CardHeader>
          <CardTitle>Login to your account</CardTitle>
          <CardDescription>Enter your email below to login to your account</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col gap-6">
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="m@example.com" required />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center">
                <Label htmlFor="password">Password</Label>
                <button
                  type="button"
                  className="ml-auto inline-block cursor-pointer text-sm underline-offset-4 hover:underline"
                  onClick={() => setMessage("Reset selected in this demo. No email was sent.")}
                >
                  Forgot your password?
                </button>
              </div>
              <Input id="password" type="password" required />
            </div>
          </div>
        </CardContent>
        <CardFooter className="flex-col gap-2">
          <Button type="submit" className="w-full">
            Login
          </Button>
          <Button
            type="button"
            variant="neutral"
            className="w-full"
            onClick={() =>
              setMessage("Google sign-in selected in this demo. No authentication was started.")
            }
          >
            Login with Google
          </Button>
          <div className="mt-4 text-center text-sm">
            Don&apos;t have an account?{" "}
            <button
              type="button"
              className="cursor-pointer underline underline-offset-4"
              onClick={() => setMessage("Sign-up selected in this demo. No account was created.")}
            >
              Sign up
            </button>
          </div>
          <output className="block min-h-5 text-center text-sm" aria-live="polite">
            {message}
          </output>
        </CardFooter>
      </Card>
    </form>
  );
}

#Installation

Complete the base setup, then install or copy the source:

First time? Install the shared base once.

npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/card.json

Create components/ui/card.tsx:

import * as React from "react";

import { cn } from "@/lib/utils";

function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card"
      className={cn(
        "rounded-base flex flex-col shadow-shadow border-2 gap-6 py-6 border-border bg-background text-foreground font-base",
        className,
      )}
      {...props}
    />
  );
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className,
      )}
      {...props}
    />
  );
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div data-slot="card-title" className={cn("font-heading leading-none", className)} {...props} />
  );
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div data-slot="card-description" className={cn("text-sm font-base", className)} {...props} />
  );
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
      {...props}
    />
  );
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
      {...props}
    />
  );
}

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, CardAction };

The login preview additionally uses Button, Input, and Label. Install them before copying the Code. Its feedback is local demo state; it does not authenticate an account or send email.

npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/button.json https://neobrutal-ui.andongmin.com/r/input.json https://neobrutal-ui.andongmin.com/r/label.json

#Usage

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

export default function ProjectCard() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>
          <h2>Design system</h2>
        </CardTitle>
        <CardDescription>Shared components for the product team.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>12 components are ready for review.</p>
      </CardContent>
    </Card>
  );
}

#API reference

Prop / part	Purpose	Default
`Card`	Root surface and shadow	`div`
`CardHeader`	Title, description, and optional action layout	`div`
`CardTitle` / `CardDescription`	Text styling; not heading elements	`div`
`CardAction`	Action beside header content	`div`
`CardContent` / `CardFooter`	Main content and action region	`div`
`className`	Width and layout on each part	—

#Accessibility

Put a real heading inside CardTitle when the card starts a section, using the level appropriate to the page. Name icon-only actions. Avoid nested interactive elements when adding a card-wide link. A collection of cards may use a list outside the component.