CARD

Surface container with header, content, and footer sections.

PREVIEW

REACTOR CORE

●ONLINE

Power generation subsystem alpha

Output: 1.21 GW · Temp: 847°C · Efficiency: 94%

INSTALLATION

BASH

npx shadcn@latest add @scificn/card

USAGE

TSX

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@scificn/ui'

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>MODULE ALPHA</CardTitle>
        <CardDescription>System subsection</CardDescription>
      </CardHeader>
      <CardContent>Content goes here.</CardContent>
      <CardFooter>Footer actions</CardFooter>
    </Card>
  )
}

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
Card	HTMLDivElement	—	Root card container.
CardHeader	HTMLDivElement	—	Top section with title and description.
CardTitle	HTMLHeadingElement	—	Card heading text.
CardDescription	HTMLParagraphElement	—	Subtitle or descriptive text.
CardContent	HTMLDivElement	—	Main body content area.
CardFooter	HTMLDivElement	—	Bottom action area.