Start with one good block.

01 / Set the stage.

Use a React application with Tailwind CSS 4. Configure shadcn with your import aliases; its setup command walks you through your existing project. Next.js is used for this site, but the blocks have no Next.js imports.

npx shadcn@latest init

Your global stylesheet should include:

@import "tailwindcss";

The default aliases use @/components and @/lib. Follow your app’s Tailwind setup so its stylesheet is loaded and component files are scanned.

02 / Bring it in.

npx shadcn@latest add https://gear5-ui.vercel.app/r/orbit-hero.json

The registry installs the block and required helpers. Read the generated paths in the CLI output; with default aliases the block lands in components/gear5/orbit-hero.tsx.

03 / Make your first impression.

import { OrbitHero } from "@/components/gear5/orbit-hero";
export default function Hero() {
  return <OrbitHero headingLevel="h1" title={"Ideas into\nsomething real."}
    accent="#d9fc87"
    action={{ label: "See my work", href: "#work" }}
    secondaryAction={{ label: "Get in touch", href: "mailto:you@example.com" }} />;
}

Change the accent, headline, and actions. Use real section ids and your own contact address. On each component page, the source includes the complete TypeScript prop interface.

04 / Take the whole canvas.

npx shadcn@latest add https://gear5-ui.vercel.app/r/portfolio-template.json

Folio 01 installs all five blocks together. Replace the fictional name, example projects, testimonials, email, and service prices before publishing.