About
Enhanced shadcn/ui button
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Button to your project and fits it to your theme.
Code
How Button is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Button } from "@/components/ui/button";
function Component() {
return (
<Button variant="outline">
Messages
<span className="-me-1 ms-3 inline-flex h-5 max-h-full items-center rounded border border-border px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground">
18
</span>
</Button>
);
}
export { Component };






![Calendar [React Day Picker]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991983843.png)







