Adding New Blocks

Our templates are designed to work seamlessly with blocks from our Shadcn Blocks library. Here’s how to add new blocks to your template.

Finding Blocks

1. Visit Shadcnblocks.com
2. Browse through available blocks
3. Click on a block to view its details and preview
4. Click “Copy Code” to get the block’s code

Adding a Block

1. Create a New Component

Create a new file in the sections directory:

src/components/sections/your-block.tsx

2. Paste and Customize

Paste the copied code into your new file

3. Customize the Block

Modify the block to match your needs:

export function YourBlock() {
  return (
    <section className="py-24 bg-background">
      {/* Customize content */}
      <div className="container">
        <h2 className="text-3xl font-bold">Your Custom Heading</h2>
        {/* Add your modifications */}
      </div>
    </section>
  )
}

Using the Block

Import and use your block in any page:

app/page.tsx

import { YourBlock } from "@/components/sections/your-block"

export default function Page() {
  return (
    <main>
      <YourBlock />
    </main>
  )
}