Tweak a prop on the right, see the variant repaint on the left. No build step, no Storybook tab, no out-of-sync screenshots.
Button
3 variants// Define the button surfaceimport { ui } from "@beste/ui";// Variants drive the slot props.const Button = ui.primitive("button");// Default tone for the brand.Button.tone("primary");Button.size(["sm", "md", "lg"]);// Wire up keyboard focus rings.Button.focus("ring");export default Button;
Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required.