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 OutlineButtonProps 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 OutlineButton({
size = "default",
children,
className = "",
...props
}: OutlineButtonProps) {
return (
<button
className={`${sizeClasses[size]} text-gray-700 border rounded-lg duration-100 hover:border-indigo-600 active:shadow-lg ${className}`}
{...props}
>
{children}
</button>
);
}
// Example usage + export in one file
export default function Demo() {
return (
<div className="flex flex-col gap-3">
<OutlineButton size="sm">Small</OutlineButton>
<OutlineButton>Default</OutlineButton>
<OutlineButton size="md">Medium</OutlineButton>
<OutlineButton size="lg">Large</OutlineButton>
<OutlineButton size="xl">Extra Large</OutlineButton>
</div>
);
}