Are the ai2 Accent hover cards free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Accent hover cards

Five accent hover cards: border, glow, ring, top bar and fill. Each is self-contained (no radix), sized, driven by a token accent color, and opens on hover or keyboard focus.

Hover cardAccent

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/hover-card-accent

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/hover-card-accent.tsx

"use client"

import type * as React from "react"
import { Droplet, Focus, PanelTop, Sparkles, SquareDashed } from "lucide-react"
import { useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Accent hover-card family: 5 decorative hover cards in a token accent color. Each
   export is a complete hover card and SELF-CONTAINED (no radix, no portal): a
   trigger + a card positioned below it, opened on hover/focus with CSS. The opening
   mechanism is group-hover / group-focus-within (the same as the essentials shell);
   gated on useReducedMotion(), reduced motion drops the slide + transition and the
   card appears instantly. Color comes ONLY from tokens; transparency ONLY via
   color-mix(in oklab, var(--color-x) N%, transparent). The accent color is the
   primary token; the variants apply the accent to a DIFFERENT part of the card: a
   pronounced border, a glow box-shadow, a double-ring box-shadow, a top strip, a
   soft fill. Size = card width. trigger = the trigger, children = the card
   content. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const cardWidth: Record<StyledSize, string> = {
  sm: "w-56",
  md: "w-64",
  lg: "w-72",
  xl: "w-80",
}

/* The card's static (always valid) classes: position, hidden initial state, becoming visible and opaque on hover or focus. */
const cardBase =
  "invisible absolute left-1/2 top-full z-20 mt-2 -translate-x-1/2 rounded-xl p-4 text-left opacity-0 shadow-lg group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100"

/* Motion layer: a slight slide plus a transition. Dropped entirely under reduced motion. */
const cardMotion =
  "translate-y-1 transition-[opacity,transform] duration-(--motion-base) ease-(--motion-ease) group-hover:translate-y-0 group-focus-within:translate-y-0 motion-reduce:transition-none"

const triggerBase =
  "inline-flex items-center gap-1.5 rounded-md font-medium text-primary underline-offset-4 outline-none hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

interface Props {
  size?: StyledSize
  trigger?: React.ReactNode
  children?: React.ReactNode
  className?: string
}

type CoreProps = Props & {
  /** Kartin cerceve / box-shadow / dolgu aksan siniflari. */
  panelClassName?: string
  /** The decorative layer added inside the card (a top accent strip and so on). */
  accent?: React.ReactNode
  /** Baslik satiri ikonu. */
  icon: React.ReactNode
  /** Baslik metni. */
  label: string
  /** children verilmezse gosterilen govde metni. */
  body: string
}

/* Shared shell: trigger plus an accent card positioned below. */
function AccentHoverCard({
  size = "md",
  trigger,
  children,
  className,
  panelClassName,
  accent,
  icon,
  label,
  body,
}: CoreProps) {
  const reduce = useReducedMotion()
  const fallback = (
    <button type="button" className={triggerBase}>
      {icon}
      Hover me
    </button>
  )
  return (
    <span data-slot="styled-hover-card" className="group relative inline-flex">
      {trigger ?? fallback}
      <span
        role="dialog"
        className={cn(
          cardBase,
          reduce ? null : cardMotion,
          cardWidth[size],
          "block border border-border bg-popover text-popover-foreground",
          panelClassName,
          className
        )}
      >
        {accent}
        <span className="flex items-center gap-2 text-sm font-semibold text-foreground">
          <span
            aria-hidden="true"
            className="flex text-primary [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"
          >
            {icon}
          </span>
          {label}
        </span>
        <span className="mt-1.5 block text-sm text-muted-foreground">
          {children ?? body}
        </span>
      </span>
    </span>
  )
}

/* BorderHoverCard: a pronounced token border. A thick (2px) frame in the primary
   token color instead of a thin (1px) border. */
export function BorderHoverCard(props: Props) {
  return (
    <AccentHoverCard
      icon={<SquareDashed />}
      label="Bordered"
      body="A prominent token border frames the card on hover."
      panelClassName="border-2 border-[color-mix(in_oklab,var(--color-primary)_55%,transparent)]"
      {...props}
    />
  )
}

/* GlowHoverCard: kart etrafinda genis, dusuk yogunluklu primary token glow. */
export function GlowHoverCard(props: Props) {
  return (
    <AccentHoverCard
      icon={<Sparkles />}
      label="Glow"
      body="A soft token glow radiates from behind the card."
      panelClassName="border-[color-mix(in_oklab,var(--color-primary)_35%,transparent)] shadow-[0_0_30px_color-mix(in_oklab,var(--color-primary)_28%,transparent),0_0_0_1px_color-mix(in_oklab,var(--color-primary)_20%,transparent)]"
      {...props}
    />
  )
}

/* RingHoverCard: cift halka. Border + iki azalan yogunlukta primary token box-shadow
   cizgisi (color-mix ile). */
export function RingHoverCard(props: Props) {
  return (
    <AccentHoverCard
      icon={<Focus />}
      label="Ring"
      body="A token ring wraps the card with a soft outer halo."
      panelClassName="border-[color-mix(in_oklab,var(--color-primary)_40%,transparent)] shadow-[0_0_0_1px_color-mix(in_oklab,var(--color-primary)_45%,transparent),0_0_0_4px_color-mix(in_oklab,var(--color-primary)_18%,transparent)]"
      {...props}
    />
  )
}

/* TopBarHoverCard: a full-width primary token accent strip above the card (h-1). overflow-hidden clips the strip's top corners to match the card. */
export function TopBarHoverCard(props: Props) {
  return (
    <AccentHoverCard
      icon={<PanelTop />}
      label="Top bar"
      body="A token accent strip runs across the top edge of the card."
      panelClassName="overflow-hidden"
      accent={
        <span
          aria-hidden="true"
          className="pointer-events-none absolute inset-x-0 top-0 h-1 bg-primary"
        />
      }
      {...props}
    />
  )
}

/* FillHoverCard: the card surface is a light primary token soft fill (mixed over
   popover with color-mix), plus a thin accent border. */
export function FillHoverCard(props: Props) {
  return (
    <AccentHoverCard
      icon={<Droplet />}
      label="Fill"
      body="The card surface carries a faint token fill."
      panelClassName="border-[color-mix(in_oklab,var(--color-primary)_30%,transparent)] bg-[color-mix(in_oklab,var(--color-primary)_6%,var(--color-popover))]"
      {...props}
    />
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Border

A prominent token border framing the card.

Glow

A soft primary-token glow behind the card.

Ring

A double ring: border plus an outer token halo.

Top bar

A token accent strip across the top edge.

Fill

A faint token fill on the card surface.

ai2 Accent hover cards: 5 styled variations on the token system

The ai2 Accent hover cards are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around cards that open on hover with token accent treatments on the surface. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: the cards fade and rise on token CSS transitions when the trigger is hovered or focused. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the transitions are disabled and the card appears instantly.

What is in the ai2 Accent hover cards?

5 exports in one file: Border, Glow, Ring, Top bar and Fill. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: the cards fade and rise on token CSS transitions when the trigger is hovered or focused.
Reduced-motion aware: Under prefers-reduced-motion, the transitions are disabled and the card appears instantly.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Accent hover cards sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.