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 SolidButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
size?: ButtonSize;
}
const sizeClasses: Record<ButtonSize, string> = {
sm: "px-3 py-1.5 text-sm",
default: "px-4 py-2",
md: "px-5 py-3",
lg: "px-6 py-3.5",
xl: "px-7 py-4",
};
function SolidButton({
size = "default",
children,
className = "",
...props
}: SolidButtonProps) {
return (
<button
className={`${sizeClasses[size]} text-white bg-indigo-600 rounded-lg duration-150 hover:bg-indigo-700 active:shadow-lg ${className}`}
{...props}
>
{children}
</button>
);
}
// Example usage + export
export default function Demo() {
return (
<div className="flex flex-col gap-3">
<SolidButton size="sm">Small</SolidButton>
<SolidButton>Default</SolidButton>
<SolidButton size="md">Medium</SolidButton>
<SolidButton size="lg">Large</SolidButton>
<SolidButton size="xl">Extra Large</SolidButton>
</div>
);
}