# antuikit / BorderBeam

> BorderBeam, plus a `reverse` prop that runs the beam counterclockwise.

Docs: https://antuikit.com/docs/components/border-beam

## Install

npx antuikit@latest init
npx antuikit@latest add border-beam

## Import

import { BorderBeam } from "@/components/ui/border-beam";

## Demos

- [Basic](https://ui.antuikit.com/embed/border-beam/basic.md): Wrap a `relative` element in `BorderBeam` to send a light around its border in your primary color, once every six seconds.
- [Color](https://ui.antuikit.com/embed/border-beam/color.md): Pass `color` one CSS color, or an array of `{ color, percent }` stops from 0 to 100 for a gradient beam.
- [Size](https://ui.antuikit.com/embed/border-beam/size.md): Set `size` to change the length of the moving segment, from a short dash to a long streak.
- [Duration](https://ui.antuikit.com/embed/border-beam/duration.md): Set `duration` to the seconds one loop takes, 6 by default, from a brisk 2 to a slow 16.
- [Count](https://ui.antuikit.com/embed/border-beam/count.md): Set `count` to run several beams on one border, spaced evenly around the loop.
- [Clipped container](https://ui.antuikit.com/embed/border-beam/outset.md): Set `outset` to `0` on a container with `overflow: hidden`, so the beam draws inside the edge instead of being cut off.
- [Show on hover](https://ui.antuikit.com/embed/border-beam/hover.md): Pass `className` to style the beam itself, here hiding it until the pointer moves over the card.
- [Reverse direction](https://ui.antuikit.com/embed/border-beam/reverse.md): Set `reverse` to send the beam counterclockwise.
- [On a button](https://ui.antuikit.com/embed/border-beam/on-button.md): Wrap a Button to put the beam on it, and the beam follows its shape, round corners included.
- [Pricing table](https://ui.antuikit.com/embed/border-beam/highlight-card.md): A pricing table with a beam on the featured plan and plain cards for the other two.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/border-beam`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `BorderBeam` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.