About
Here is Button component
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
"use client"
import { Link } from "react-aria-components"
import { buttonVariants } from "@/components/ui/button-1"
export default function ButtonLink() {
return <Link className={buttonVariants({ variant: "link" })}>Link</Link>
}

![Tag Group [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/tag-group/891/preview.png)
![Date Range Picker [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/date-range-picker/default/preview.png)
![Grid List [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/grid-list/default/preview.png)
![Switch [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/switch/1023/preview.png)
![Select [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/select/864/preview.png)
![Range Calendar [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/range-calendar/default/preview.png)

![Slider [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/slider/827/preview.png)







