Card

Panel component with adjustable cyberpunk intensity. Features scan lines, corner accents, and holographic variants at higher intensity levels.

npx shadcn@latest add https://ui.farstar-studio.com/r/card.json

Preview

Subtle

Minimal styling

Clean, rounded design.

Medium

Cyberpunk hints

Corner accents, glow.

Full

Complete cyberpunk

Scan lines, intense glow.

Variants

variant

Default

Holographic

Terminal

intensity

Subtle

Medium

Full

glowColor

Primary

Cyan

Magenta

Green

Orange

Props

PropTypeDefaultDescription
variant"default" | "holographic" | "terminal""default"The visual style of the card
intensity"subtle" | "medium" | "full""subtle"Cyberpunk visual intensity level
animatedbooleantrueEnable/disable animations (respects prefers-reduced-motion)
glowColor"primary" | "cyan" | "magenta" | "green" | "orange""primary"The color of the card's glow effect

Usage

Basic Card

tsx
1import {
2  Card,
3  CardHeader,
4  CardTitle,
5  CardDescription,
6  CardContent,
7  CardFooter,
8} from "@/registry/zero/ui/card"
9import { Button } from "@/registry/zero/ui/button"
10 
11export function Example() {
12  return (
13    <Card>
14      <CardHeader>
15        <CardTitle>System Status</CardTitle>
16        <CardDescription>
17          All systems operational
18        </CardDescription>
19      </CardHeader>
20      <CardContent>
21        <p>Content goes here...</p>
22      </CardContent>
23      <CardFooter>
24        <Button>Action</Button>
25      </CardFooter>
26    </Card>
27  )
28}

Intensity Levels

tsx
1import { Card, CardContent } from "@/registry/zero/ui/card"
2 
3export function Example() {
4  return (
5    <div className="grid gap-4 md:grid-cols-3">
6      <Card intensity="subtle">
7        <CardContent>Subtle</CardContent>
8      </Card>
9      <Card intensity="medium">
10        <CardContent>Medium</CardContent>
11      </Card>
12      <Card intensity="full">
13        <CardContent>Full</CardContent>
14      </Card>
15    </div>
16  )
17}

Holographic Card

tsx
1import { Card, CardContent } from "@/registry/zero/ui/card"
2 
3export function Example() {
4  return (
5    <Card variant="holographic" intensity="full">
6      <CardContent>
7        Holographic shimmer effect
8      </CardContent>
9    </Card>
10  )
11}