ui / layout
PREVIEW READYCard
Composable card regions with restrained borders and hierarchy.
Designed as a complete stateful module
Responsive, keyboard-ready, theme-aware, and owned by your project after installation.
INSTALL / SOURCE REGISTRY
Add Card to your project
The command adds the component source and its DesignOS base dependency.
$
pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/card.jsonregistry/default/ui/card.tsx
import * as React from "react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"
export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { return <section className={cn("dos-card", className)} {...props} /> }
export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { return <header className={cn("dos-card__header", className)} {...props} /> }
export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) { return <h3 className={cn("dos-card__title", className)} {...props} /> }
export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) { return <p className={cn("dos-card__description", className)} {...props} /> }
export function CardBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { return <div className={cn("dos-card__body", className)} {...props} /> }
export function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { return <footer className={cn("dos-card__footer", className)} {...props} /> }
Component contract
- Source-owned after installation
- Dark and light theme variables
- Keyboard and visible-focus behavior
- Reduced-motion fallback
- Responsive from 320px upward
- IBM Plex Sans + JetBrains Mono hierarchy