COMPONENT PLAYGROUND

Try the details.

Adjust a component, feel the interaction and copy the configuration. The same source you install in your application.

THE DETAILS

ComponentState

Button text

VariantSizeTrailing icon

Narrow previewDark preview

These are the public components. Tab through the preview to check focus and keyboard behaviour.

LIVE / BUTTONFull width

Your configuration.

REACT / TYPESCRIPT

import { Button } from "@/components/ui/bld8/button";

<Button variant="primary" size="md" onClick={() => save()}>
  Save changes
</Button>

Usage fragment: provide the state and callbacks shown above. Paths assume the default shadcn UI alias.

npx shadcn@latest add https://ui.bld8.dev/r/button.json