Components
Loading preview...
The BoltNewBadge is a responsive UI component that displays the official Bolt.new badge on your application. It ensures proper attribution and visibility for projects built with Bolt.new, following community and branding guidelines. Props: position - Controls badge placement (4 corner options) variant - Badge appearance with auto-detection capability size - Three responsive size options className - Custom styling support
@jamesjara
npx shadcn@latest add https://21st.dev/r/jamesjara/bolt-new-badgeimport { BoltNewBadge } from "@/components/ui/bolt-new-badge";
const DemoAuto = () => {
return <BoltNewBadge
position="bottom-left"
variant="auto"
size="medium"
/>;
};
const DemoText = () => {
return <BoltNewBadge
position="bottom-left"
variant="text"
size="medium"
/>;
};
const DemoDark = () => {
return <BoltNewBadge
position="bottom-left"
variant="dark"
size="medium"
/>;
};
const DemoLigth = () => {
return <BoltNewBadge
position="bottom-left"
variant="ligth"
size="medium"
/>;
};
export { DemoAuto, DemoText, DemoDark, DemoLigth };