Card

Composable card surface (header, title, description, content, footer) with an optional hover lift and a rotating gradient border.

Team

Popular

Everything a growing product team needs to ship.

$24/ seat / month

Unlimited projects
Preview deployments
Role-based access
Priority support

Open

interactive

gradientBorder

Installation

npx shadcn@latest add @glint-ui/card

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/card.json

Usage

import { Card } from "@/components/ui/card";

<Card interactive gradientBorder>
  <CardHeader>
    <CardTitle>Pro plan</CardTitle>
    <CardDescription>For growing teams.</CardDescription>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter>...</CardFooter>
</Card>

Props

Prop	Type	Default	Description
interactive	boolean	false	Lift and deepen the shadow on hover or focus inside.
gradientBorder	boolean	false	Primary-tinted conic border that spins while hovered.
children	ReactNode	—	CardHeader, CardTitle, CardDescription, CardContent, CardFooter.
className	string	—	Extra classes for the root element.