HomeComponentsPrism Border

Signature / Molecule • Prism Border

Signature / Molecule

Prism Border

Animated rainbow refraction border using a shifting linear gradient.

pnpm dlx @glinui/cli@latest add prism-border

MK

Maya Kovacs

Staff designer, Platform

48
Projects: 1.2k
Reviews: 36d
Streak

Installation$

Install from

pnpm dlx @glinui/cli@latest add prism-border

Prefer the package?

Usage$

Wrap any content with PrismBorder to add an animated rainbow refraction border. Uses CSS mask compositing for the hollow border effect.

A moving spectrum border frames a profile card. The border is the star, the card inside is a regular glinr card.

Examples$

Variants$

glinr is the default, plain is the flat shadcn look, solid is a neutral tonal face and glass is opt-in. Glass needs a backdrop, so the set below sits on a vivid one.

glinr

Crisp on any stage.

Learn more

plain

Crisp on any stage.

Learn more

solid

Crisp on any stage.

Learn more

glass

Opt-in. Needs a backdrop.

Learn more

import { PrismBorder, Card } from "@glinui/ui"


// Omit variant to follow the ambient style (glinr by default).
export function PrismBorderVariants() {
return (
  <>
    <PrismBorder borderWidth={2}>
<Card variant="glinr" className="rounded-[inherit]">
      ...
      </Card>
</PrismBorder>
    <PrismBorder borderWidth={2}>
<Card variant="plain" className="rounded-[inherit]">
      ...
      </Card>
</PrismBorder>
    <PrismBorder borderWidth={2}>
<Card variant="solid" className="rounded-[inherit]">
      ...
      </Card>
</PrismBorder>
    <PrismBorder borderWidth={2}>
<Card variant="glass" className="rounded-[inherit]">
      ...
      </Card>
</PrismBorder>
  </>
)
}

Colors$

Pass colors to restrict the spectrum to token colors.

accent

The effect color follows the tone token.

Learn more

success

The effect color follows the tone token.

Learn more

warning

The effect color follows the tone token.

Learn more

danger

The effect color follows the tone token.

Learn more

info

The effect color follows the tone token.

Learn more

import { PrismBorder, Card } from "@glinui/ui"


export function PrismBorderTones() {
return (
  <PrismBorder borderWidth={2} colors={["var(--tone-success)", "var(--color-accent)", "var(--tone-success)"]>
<Card className="rounded-[inherit]">
    ...
    </Card>
</PrismBorder>
)
}

In a layout$

A pricing row where the highlighted plan wears the prism border.

StarterBilled monthly

$0/ seat

Unlimited projects
Priority support
Audit log export

ProBilled monthly

$24/ seat

Unlimited projects
Priority support
Audit log export

TeamBilled monthly

$60/ seat

Unlimited projects
Priority support
Audit log export

// A pricing row where the highlighted plan wears the prism border.
import { PrismBorder, Card } from "@glinui/ui"


export function PrismBorderLayout() {
return (
  <section className="grid gap-4 sm:grid-cols-3">
    ...
  </section>
)
}

Accessibility$

The animated border element is aria-hidden="true", invisible to assistive technologies.
Content inside the border wrapper remains fully accessible.

Reduced Motion$

The gradient animation is paused via motion-reduce:[animation:none]. A static gradient border remains visible.

API Reference$

Prop	Type	Required	Default	Description
`borderRadius`	`string`	No	`"0.75rem"`	Border radius
`borderWidth`	`number`	No	`2`	Border width in px
`colors`	`string[]`	No	`["#f43f5e", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#6366f1", "#a855f7", "#f43f5e"]`	Custom gradient colors
`duration`	`number`	No	`3`	Animation duration in seconds

Source$

import { PrismBorder } from "@glinui/ui"

packages/ui/src/components/prism-border.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/prism-border.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

PrismBorderProps

`PrismBorderProps`

Prop	Type	Required	Default	Description
`borderRadius`	`string`	No	`"0.75rem"`	Border radius
`borderWidth`	`number`	No	`2`	Border width in px
`colors`	`string[]`	No	`["#f43f5e", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#6366f1", "#a855f7", "#f43f5e"]`	Custom gradient colors
`duration`	`number`	No	`3`	Animation duration in seconds