Components
Loading preview...
Here is Button component
npx shadcn@latest add https://21st.dev/r/float_ui/button-1import React from "react";
type ButtonSize = "sm" | "default" | "md" | "lg" | "xl";
interface PrimaryButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
size?: ButtonSize;
}
const sizeClasses: Record<ButtonSize, string> = {
sm: "px-4 py-2 text-sm",
default: "px-5 py-2.5",
md: "px-6 py-3",
lg: "px-7 py-3.5",
xl: "px-8 py-4",
};
function PrimaryButton({ size = "default", children, className = "", ...props }: PrimaryButtonProps) {
return (
<button
className={`${sizeClasses[size]} text-white bg-indigo-600 rounded-lg shadow-md
duration-100 focus:shadow-none ring-offset-2 ring-indigo-600 focus:ring-2 ${className}`}
{...props}
>
{children}
</button>
);
}
// Example usage + export
export default function Demo() {
return (
<div className="flex flex-col gap-3">
<PrimaryButton size="sm">Small</PrimaryButton>
<PrimaryButton>Default</PrimaryButton>
<PrimaryButton size="md">Medium</PrimaryButton>
<PrimaryButton size="lg">Large</PrimaryButton>
<PrimaryButton size="xl">Extra Large</PrimaryButton>
</div>
);
}