Blocks

Pre-built React components you can install into your Next.js project with a single command. Each block is a self-contained .tsx file that lands in your components/garagem/ directory.

How to install a block

npx shadcn@latest add https://sdk.garagem.site/r/<block-name>.json

This copies the block's source into your project, installs its npm dependencies, and adds any required shadcn primitives (like card or button). You own the code — customize freely.

Available Blocks

Contact Form

Lead capture form that submits to the Garagem CRM. Supports Meta Pixel and TikTok Pixel event tracking.

Install
npx shadcn@latest add https://sdk.garagem.site/r/contact-form.json

Dependencies

lucide-react

shadcn primitives (auto-installed)

buttoninputtextarea

Files installed

  • components/garagem/contact-form.tsx

Listing Card

Compact property card with cover image, price, location and key features. Drop-in card for grids and carousels.

Install
npx shadcn@latest add https://sdk.garagem.site/r/listing-card.json

Dependencies

@garagem-ai/site-sdklucide-react

shadcn primitives (auto-installed)

badgecard

Files installed

  • components/garagem/listing-card.tsx

Listing Grid

Responsive grid of property cards powered by the Garagem SDK. Supports filtering by city, neighborhood, business type, and pagination.

Install
npx shadcn@latest add https://sdk.garagem.site/r/listing-grid.json

Dependencies

@garagem-ai/site-sdklucide-react

shadcn primitives (auto-installed)

badgecard

Files installed

  • components/garagem/listing-grid.tsx
  • components/garagem/listing-card.tsx