Card

Foundational card container for content groupings and composed UI.

Default Card

Standard card with border and background.

Card content goes here.

Glass Card

Frosted glass with backdrop blur.

Overlays gradients and images beautifully.

Installation

npx shadcn@latest add @gameone/card

Registry dependencies: gameone-utils

Usage

Import

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

Example

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
</Card>

Examples

Default

Default Card

Standard card with border and background.

Card content goes here.

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

export function CardDefault() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Default Card</CardTitle>
        <CardDescription>Standard card with border and background.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
    </Card>
  )
}

Glass

Frosted glass card with backdrop blur for overlaying images or gradients.

Glass Card

Frosted glass with backdrop blur.

Overlays gradients and images beautifully.

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

export function CardGlass() {
  return (
    <Card variant="glass">
      <CardHeader>
        <CardTitle>Glass Card</CardTitle>
        <CardDescription>Frosted glass with backdrop blur.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Overlays gradients and images beautifully.</p>
      </CardContent>
    </Card>
  )
}

Badge Alert