Components
Loading preview...
A responsive, animated hero component with header, floating blurred gradient backgrounds, badge support, configurable navigation and auth buttons, gradient-styled title, description, and primary/secondary CTA buttons.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/minimalimport MinimalModernHero from "@/components/ui/minimal";
export default function MinimalModernHeroDemo() {
return (
<MinimalModernHero
logo={
<div className="flex items-center gap-2">
<div
className="w-10 h-10"
style={{
background: "#00FFA3",
clipPath: "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
}}
/>
<span
className="text-2xl font-black"
style={{ color: "#000000", fontFamily: "Inter, sans-serif" }}
>
MINIMAL
</span>
</div>
}
badge="New Platform"
title="Design that speaks volumes"
subtitle="Less is more, always has been"
description="We believe in the power of simplicity. Clean lines, bold typography, and purposeful design create experiences that resonate and inspire action."
primaryButton={{
label: "Get Started Free",
onClick: () => console.log("Get Started clicked"),
}}
secondaryButton={{
label: "View Demo",
onClick: () => console.log("View Demo clicked"),
}}
stats={[
{ value: "500K+", label: "Active Users" },
{ value: "99.9%", label: "Uptime" },
{ value: "50+", label: "Countries" },
{ value: "4.9★", label: "Rating" },
]}
accentColor="#00FFA3"
/>
);
}