Button

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @framecn/button
Copy

Usage

Copyimport { Button } from "@/components/framecn/button";

Copy<Button label="Continue" state="idle" />

Installing button also pulls in spinner via registry dependencies.

Smooth transitions

The docs preview animates hover → press → loading → success via useButtonTransition. Pass the resolved style to Button:

Copyimport { Button } from "@/components/framecn/button";
import { useButtonTransition } from "@/components/framecn/use-button-transition";
 
const style = useButtonTransition(
  [
    { at: 12, state: "hover" },
    { at: 30, state: "press" },
    { at: 48, state: "loading", duration: 6 },
    { at: 96, state: "success", duration: 16 },
  ],
  { variant: "default", primary: "#171717" }
);
 
<Button label="Continue" style={style} />;

Forward variant and primary into the hook when using style so the interpolated background tracks those props.

style takes precedence over state when both are provided.

Button heights follow the official shadcn baseline: 32px (sm), 36px (default), and 40px (lg). Theme colors and loading/success icons inherit the UI provider, including during transitions.

API Reference

Button