Yami UI

Displays a card with header, content, and footer. Optional glow prop adds a rotating conic border (always or hover).

Create project

Deploy your new project in one click.

Frame content with hairline borders.

Installation

Add the card component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/card.json

Usage

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

<Card className="w-72">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one click.</CardDescription>
  </CardHeader>
  <CardContent>Frame content with hairline borders.</CardContent>
  <CardFooter className="gap-2">
    <Button variant="outline" className="flex-1">Cancel</Button>
    <Button className="flex-1">Deploy</Button>
  </CardFooter>
</Card>

Examples

With action

CardHeader + CardAction

Notifications

You have 3 unread messages.

Card actions sit in the top-right of the header.

Code

import { SettingsIcon } from "lucide-react"

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

<Card className="w-72">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
    <CardAction>
      <Button variant="ghost" size="icon-sm" aria-label="Settings">
        <SettingsIcon />
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>Card actions sit in the top-right of the header.</CardContent>
</Card>

Content only

No header or footer

A card can be just a bordered content surface.

Code

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

<Card className="w-72">
  <CardContent>
    A card can be just a bordered content surface.
  </CardContent>
</Card>

Glow always

Rotating conic border glow, always visible

Selected plan

Pro tier with priority support.

glow="always" keeps the Yami glow ring visible.

Code

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

<Card glow="always" className="w-72">
  <CardHeader>
    <CardTitle>Selected plan</CardTitle>
    <CardDescription>Pro tier with priority support.</CardDescription>
  </CardHeader>
  <CardContent className="text-muted-foreground">
    glow=&quot;always&quot; keeps the Yami glow ring visible.
  </CardContent>
</Card>

Glow on hover

Conic border glow appears on pointer hover

Hover me

glow="hover" reveals the ring on hover.

Code

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

<Card glow="hover" className="w-72 cursor-default">
  <CardHeader>
    <CardTitle>Hover me</CardTitle>
  </CardHeader>
  <CardContent className="text-muted-foreground">
    glow=&quot;hover&quot; reveals the ring on hover.
  </CardContent>
</Card>