Hover Edge: React Glow component

Hover edge accent: a thin rose and amber line on any edge of a positioned parent, as used on cascade Card examples. It appears on parent hover or keyboard focus, can mark a selected item, and honors reduced motion.

pnpm dlx shadcn add @01orbital/hover-edge

File

import type { ComponentProps } from "react"
import { cn } from "cn"

const EDGES = {
  top: "inset-x-0 top-0 h-0.5",
  bottom: "inset-x-0 bottom-0 h-0.5",
  left: "inset-y-0 left-0 w-0.5",
  right: "inset-y-0 right-0 w-0.5",
} as const

// React hoists one copy of this stylesheet for every instance.
const INTERACTION_CSS = `@media(hover:hover){:hover>.orbital-hover-edge{opacity:1}}:focus-visible>.orbital-hover-edge,:has(:is(a,button,summary,[role=button]):focus-visible)>.orbital-hover-edge,.orbital-hover-edge[data-active]{opacity:1}`

/**
 * A two-pixel rose–amber edge, fading out at both ends. Place as
 * a direct child of a positioned element: it appears when that parent is
 * hovered, has keyboard focus, or holds a link or button with keyboard focus.
 * Focus in a form field inside the parent leaves it off. No hover group or
 * event handlers are required. Reduced motion removes the opacity transition.
 * The line is decorative, ignores the pointer and uses a span root so it can
 * sit inside buttons and links as well as larger containers.
 */
function HoverEdge({
  edge = "bottom",
  active = false,
  className,
  style,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** The edge carrying the line. Defaults to `bottom`. */
  edge?: keyof typeof EDGES
  /** Keep the line visible, for example on a selected item. Defaults to false. */
  active?: boolean
}) {
  const direction =
    edge === "left" || edge === "right" ? "to bottom" : "to right"
  return (
    <>
      <style href="01orbital-hover-edge" precedence="default">
        {INTERACTION_CSS}
      </style>
      <span
        aria-hidden="true"
        data-slot="hover-edge"
        data-edge={edge}
        data-active={active || undefined}
        className={cn(
          "orbital-hover-edge pointer-events-none absolute opacity-0 transition-opacity duration-400 motion-reduce:transition-none",
          EDGES[edge],
          className
        )}
        style={{
          background: `linear-gradient(${direction}, transparent, oklch(0.65 0.1 350) 20%, oklch(0.62 0.13 60) 50%, oklch(0.45 0.12 40) 80%, transparent)`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}

export { HoverEdge }

import { HoverEdge } from "@/components/glow/hover-edge"
import { Button } from "@/components/ui/button"

export default function HoverEdgeDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <Button
        variant="outline"
        size="lg"
        className="relative overflow-hidden rounded-md"
      >
        Hover or focus
        <HoverEdge />
      </Button>
      <Button
        variant="outline"
        size="lg"
        className="relative overflow-hidden rounded-md"
      >
        A selected item
        <HoverEdge edge="top" active />
      </Button>
    </div>
  )
}

The example also uses button. Install it too:

pnpm dlx shadcn add @01orbital/button

npx shadcn add @01orbital/button

yarn shadcn add @01orbital/button

bunx --bun shadcn add @01orbital/button

Usage

import { HoverEdge } from "@/components/glow/hover-edge"
import { Button } from "@/components/ui/button"

export default function HoverEdgeDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      <Button
        variant="outline"
        size="lg"
        className="relative overflow-hidden rounded-md"
      >
        Hover or focus
        <HoverEdge />
      </Button>
      <Button
        variant="outline"
        size="lg"
        className="relative overflow-hidden rounded-md"
      >
        A selected item
        <HoverEdge edge="top" active />
      </Button>
    </div>
  )
}

Examples

New

hover-edge-buttons

Buttons

Example of the Hover Edge: two outline buttons on a dark panel, one lit along the bottom and one along the top on hover or keyboard focus.

pnpm dlx shadcn add @01orbital/hover-edge-buttons

npx shadcn add @01orbital/hover-edge-buttons

yarn shadcn add @01orbital/hover-edge-buttons

bunx --bun shadcn add @01orbital/hover-edge-buttons

File

import { cn } from "cn"

import { HoverEdge } from "@/components/glow/hover-edge"
import { buttonVariants } from "@/components/ui/button"

// The copy: change text here, not in the markup.
const COPY = {
  primary: { label: "Back to the workbench", href: "#" },
  secondary: { label: "Explore the collection", href: "#" },
} as const

/** Two outline buttons on a panel, each with a HoverEdge line that lights on hover or focus: one along the bottom, one along the top. */
export default function HoverEdgeButtons() {
  return (
    <div className="flex w-full max-w-lg flex-wrap items-center justify-center gap-5 rounded-[10px] border border-border bg-background p-8 text-sm text-foreground">
      <a
        href={COPY.primary.href}
        data-slot="button"
        className={cn(
          buttonVariants({ variant: "outline", size: "lg" }),
          "relative overflow-hidden"
        )}
      >
        {COPY.primary.label}
        <HoverEdge />
      </a>
      <a
        href={COPY.secondary.href}
        data-slot="button"
        className={cn(
          buttonVariants({ variant: "outline", size: "lg" }),
          "relative overflow-hidden"
        )}
      >
        {COPY.secondary.label}
        <HoverEdge edge="top" />
      </a>
    </div>
  )
}

import type { ComponentProps } from "react"
import { cn } from "cn"

const EDGES = {
  top: "inset-x-0 top-0 h-0.5",
  bottom: "inset-x-0 bottom-0 h-0.5",
  left: "inset-y-0 left-0 w-0.5",
  right: "inset-y-0 right-0 w-0.5",
} as const

// React hoists one copy of this stylesheet for every instance.
const INTERACTION_CSS = `@media(hover:hover){:hover>.orbital-hover-edge{opacity:1}}:focus-visible>.orbital-hover-edge,:has(:is(a,button,summary,[role=button]):focus-visible)>.orbital-hover-edge,.orbital-hover-edge[data-active]{opacity:1}`

/**
 * A two-pixel rose–amber edge, fading out at both ends. Place as
 * a direct child of a positioned element: it appears when that parent is
 * hovered, has keyboard focus, or holds a link or button with keyboard focus.
 * Focus in a form field inside the parent leaves it off. No hover group or
 * event handlers are required. Reduced motion removes the opacity transition.
 * The line is decorative, ignores the pointer and uses a span root so it can
 * sit inside buttons and links as well as larger containers.
 */
function HoverEdge({
  edge = "bottom",
  active = false,
  className,
  style,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** The edge carrying the line. Defaults to `bottom`. */
  edge?: keyof typeof EDGES
  /** Keep the line visible, for example on a selected item. Defaults to false. */
  active?: boolean
}) {
  const direction =
    edge === "left" || edge === "right" ? "to bottom" : "to right"
  return (
    <>
      <style href="01orbital-hover-edge" precedence="default">
        {INTERACTION_CSS}
      </style>
      <span
        aria-hidden="true"
        data-slot="hover-edge"
        data-edge={edge}
        data-active={active || undefined}
        className={cn(
          "orbital-hover-edge pointer-events-none absolute opacity-0 transition-opacity duration-400 motion-reduce:transition-none",
          EDGES[edge],
          className
        )}
        style={{
          background: `linear-gradient(${direction}, transparent, oklch(0.65 0.1 350) 20%, oklch(0.62 0.13 60) 50%, oklch(0.45 0.12 40) 80%, transparent)`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}

export { HoverEdge }

New

hover-edge-tabs

Tabs

Example of the Hover Edge: a row of tabs where the line follows the pointer and stays lit under the selected tab, a quiet active indicator for navigation.

pnpm dlx shadcn add @01orbital/hover-edge-tabs

npx shadcn add @01orbital/hover-edge-tabs

yarn shadcn add @01orbital/hover-edge-tabs

bunx --bun shadcn add @01orbital/hover-edge-tabs

File

"use client"

import { useState } from "react"

import { HoverEdge } from "@/components/glow/hover-edge"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

// The copy: change text here, not in the markup.
const TABS = ["Overview", "Editions", "Archive"] as const
const COPY = {
  label: "Collection view",
  status: "A line holds the selected place.",
} as const

/** A row of tab buttons on a panel: the HoverEdge line lights under the pointer and stays lit under the selected tab. */
export default function HoverEdgeTabs() {
  const [tab, setTab] = useState<(typeof TABS)[number]>(TABS[0])
  return (
    <div className="w-full max-w-lg rounded-[10px] border border-border bg-background px-7 py-10 text-sm text-foreground">
      <ToggleGroup
        aria-label={COPY.label}
        value={[tab]}
        onValueChange={(next) => {
          if (next[0]) setTab(next[0] as (typeof TABS)[number])
        }}
        className="w-full justify-start border-b border-border"
      >
        {TABS.map((item) => (
          <ToggleGroupItem
            key={item}
            value={item}
            className="relative h-12 rounded-none px-3 text-muted-foreground aria-pressed:bg-muted aria-pressed:text-foreground"
          >
            {item}
            <HoverEdge active={tab === item} />
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
      <p role="status" className="mt-6 text-xs/snug text-muted-foreground">
        {tab} / {COPY.status}
      </p>
    </div>
  )
}

import type { ComponentProps } from "react"
import { cn } from "cn"

const EDGES = {
  top: "inset-x-0 top-0 h-0.5",
  bottom: "inset-x-0 bottom-0 h-0.5",
  left: "inset-y-0 left-0 w-0.5",
  right: "inset-y-0 right-0 w-0.5",
} as const

// React hoists one copy of this stylesheet for every instance.
const INTERACTION_CSS = `@media(hover:hover){:hover>.orbital-hover-edge{opacity:1}}:focus-visible>.orbital-hover-edge,:has(:is(a,button,summary,[role=button]):focus-visible)>.orbital-hover-edge,.orbital-hover-edge[data-active]{opacity:1}`

/**
 * A two-pixel rose–amber edge, fading out at both ends. Place as
 * a direct child of a positioned element: it appears when that parent is
 * hovered, has keyboard focus, or holds a link or button with keyboard focus.
 * Focus in a form field inside the parent leaves it off. No hover group or
 * event handlers are required. Reduced motion removes the opacity transition.
 * The line is decorative, ignores the pointer and uses a span root so it can
 * sit inside buttons and links as well as larger containers.
 */
function HoverEdge({
  edge = "bottom",
  active = false,
  className,
  style,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** The edge carrying the line. Defaults to `bottom`. */
  edge?: keyof typeof EDGES
  /** Keep the line visible, for example on a selected item. Defaults to false. */
  active?: boolean
}) {
  const direction =
    edge === "left" || edge === "right" ? "to bottom" : "to right"
  return (
    <>
      <style href="01orbital-hover-edge" precedence="default">
        {INTERACTION_CSS}
      </style>
      <span
        aria-hidden="true"
        data-slot="hover-edge"
        data-edge={edge}
        data-active={active || undefined}
        className={cn(
          "orbital-hover-edge pointer-events-none absolute opacity-0 transition-opacity duration-400 motion-reduce:transition-none",
          EDGES[edge],
          className
        )}
        style={{
          background: `linear-gradient(${direction}, transparent, oklch(0.65 0.1 350) 20%, oklch(0.62 0.13 60) 50%, oklch(0.45 0.12 40) 80%, transparent)`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}

export { HoverEdge }

New

hover-edge-field

Field

Example of the Hover Edge: a text input whose underline lights on hover and while the field has keyboard focus, a focus treatment for forms.

pnpm dlx shadcn add @01orbital/hover-edge-field

npx shadcn add @01orbital/hover-edge-field

yarn shadcn add @01orbital/hover-edge-field

bunx --bun shadcn add @01orbital/hover-edge-field

File

import { HoverEdge } from "@/components/glow/hover-edge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

// The copy: change text here, not in the markup.
const COPY = {
  label: "A note to yourself",
  placeholder: "Something worth keeping…",
  note: "The line also appears when a child has keyboard focus.",
} as const

/** A text field on a panel: the HoverEdge line under the input lights on hover and while the input has keyboard focus. */
export default function HoverEdgeField() {
  return (
    <div className="w-full max-w-lg rounded-[10px] border border-border bg-background px-8 py-10 text-sm text-foreground">
      <Label htmlFor="hover-edge-note" className="mb-3 block">
        {COPY.label}
      </Label>
      <div className="relative rounded-md">
        <Input
          id="hover-edge-note"
          placeholder={COPY.placeholder}
          className="h-12"
        />
        <HoverEdge />
      </div>
      <p className="mt-6 text-xs/snug text-muted-foreground">{COPY.note}</p>
    </div>
  )
}

import type { ComponentProps } from "react"
import { cn } from "cn"

const EDGES = {
  top: "inset-x-0 top-0 h-0.5",
  bottom: "inset-x-0 bottom-0 h-0.5",
  left: "inset-y-0 left-0 w-0.5",
  right: "inset-y-0 right-0 w-0.5",
} as const

// React hoists one copy of this stylesheet for every instance.
const INTERACTION_CSS = `@media(hover:hover){:hover>.orbital-hover-edge{opacity:1}}:focus-visible>.orbital-hover-edge,:has(:is(a,button,summary,[role=button]):focus-visible)>.orbital-hover-edge,.orbital-hover-edge[data-active]{opacity:1}`

/**
 * A two-pixel rose–amber edge, fading out at both ends. Place as
 * a direct child of a positioned element: it appears when that parent is
 * hovered, has keyboard focus, or holds a link or button with keyboard focus.
 * Focus in a form field inside the parent leaves it off. No hover group or
 * event handlers are required. Reduced motion removes the opacity transition.
 * The line is decorative, ignores the pointer and uses a span root so it can
 * sit inside buttons and links as well as larger containers.
 */
function HoverEdge({
  edge = "bottom",
  active = false,
  className,
  style,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** The edge carrying the line. Defaults to `bottom`. */
  edge?: keyof typeof EDGES
  /** Keep the line visible, for example on a selected item. Defaults to false. */
  active?: boolean
}) {
  const direction =
    edge === "left" || edge === "right" ? "to bottom" : "to right"
  return (
    <>
      <style href="01orbital-hover-edge" precedence="default">
        {INTERACTION_CSS}
      </style>
      <span
        aria-hidden="true"
        data-slot="hover-edge"
        data-edge={edge}
        data-active={active || undefined}
        className={cn(
          "orbital-hover-edge pointer-events-none absolute opacity-0 transition-opacity duration-400 motion-reduce:transition-none",
          EDGES[edge],
          className
        )}
        style={{
          background: `linear-gradient(${direction}, transparent, oklch(0.65 0.1 350) 20%, oklch(0.62 0.13 60) 50%, oklch(0.45 0.12 40) 80%, transparent)`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}

export { HoverEdge }

API reference

A two-pixel rose–amber edge, fading out at both ends. Place as a direct child of a positioned element: it appears when that parent is hovered, has keyboard focus, or holds a link or button with keyboard focus. Focus in a form field inside the parent leaves it off. No hover group or event handlers are required. Reduced motion removes the opacity transition. The line is decorative, ignores the pointer and uses a span root so it can sit inside buttons and links as well as larger containers.

Prop

Type

It also accepts the HTML attributes of the element it renders.

Hover Edge

Usage

Examples

New

Buttons

New

Tabs

New

Field

API reference

Dependencies

Arc

Backlight Bloom

Concentric Rings

Edge Scrim

Glow Glass

Glow Line

Hover Edge

UsageCopy Anchor Link

ExamplesCopy Anchor Link

ButtonsNew

TabsNew

FieldNew

API referenceCopy Anchor Link

DependenciesCopy Anchor Link

More GlowCopy Anchor Link

Arc

Backlight Bloom

Concentric Rings

Edge Scrim

Glow Glass

Glow Line

Usage

Examples

New

New

New

API reference

Dependencies

More Glow