Feature 1

Heroes 117

About

Basic Feature block with heading, description and buttons on left and image on right.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Feature 1 to your project and fits it to your theme.

Code

How Feature 1 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Feature1 } from "@/components/ui/feature-1";

const DemoOne = () => {
  return (
    <Feature1   
      title="Blocks built with Shadcn & Tailwind"
      description="Hundreds of finely crafted components built with React, Tailwind and Shadcn UI. Developers can copy and paste these blocks directly into their project."
      imageSrc="https://cdn.21st.dev/assets/mirror/9f/9fb9487617e0903ab5bb8012f11530f61a39e4f1f19f169a87a367887fdaeecb.svg"
      imageAlt="placeholder hero"
      buttonPrimary={{
        label: "Get Started",
        href: "https://shadcnblocks.com"
      }}
      buttonSecondary={{
        label: "Learn More",
        href: "https://shadcnblocks.com"
      }}
    />
  );
};

export { DemoOne };