Button

Pill buttons with depth, plus an optional flicker grid that follows the cursor in any colour.

Preview

Setup

Install with the shadcn CLI

$npx shadcn@latest add https://kinetikui.vercel.app/r/button.json

One command adds every file, the npm packages and any Kinetik components it builds on. Needs a components.json; the CLI offers to create one if your project has none.

Or install manually

  1. 1

    Run in your terminal:

    $npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot
  2. 2

    Copy lib/utils.ts from the Code tab. Skip if you already have cn().

  3. 3

    Copy styles/tokens.css from the Code tab and import it in your global CSS after Tailwind: @import "./styles/tokens.css";

  4. 4

    Create a components/ui/button/ folder and copy every file from the Code tab into it. Each file does one job, so you can read or change a piece without the rest.

  5. 5

    Import and render:

    Example
    import { Button } from "@/components/ui/button"

<Button>Get started</Button>

<Button variant="secondary" flicker flickerColor="#38bdf8" flickerSize={4}>
  Hover me
</Button>

API Surface

PropTypeDefaultNotes
variant"default" | "secondary" | "outline" | "ghost" | "destructive" | "link""default"Filled pill, soft pill, bordered, bare, red, or a text link.
size"sm" | "default" | "lg" | "icon""default"28, 32 or 40 px tall; icon is a 32 px circle.
flickerbooleanfalseA grid of squares flickers around the cursor while it moves over the button, then fades out.
flickerColorstringtext colourAny CSS colour for the squares, e.g. #38bdf8 or var(--brand).
flickerSizenumber3Side of each flicker square in px; the gap between squares scales with it.
asChildbooleanfalseRender your own element, e.g. a Link, with the button styles.

All other props pass straight through to the native button element, so you can set type="submit", disabled, aria-* attributes, and event handlers as needed.

Accessibility

  • Always pair icon-only buttons with aria-label
  • Disabled buttons set aria-disabled and skip pointer events, so rely on the onClick guard server-side as well
  • Focus ring follows the theme colours
  • The flicker grid is decorative (aria-hidden) and is hidden when the visitor prefers reduced motion