Studio agency

1. 1.

   Open your existing React project

   Use React 19+, TypeScript/TSX, and a working Tailwind CSS 4 build. Keep the project's existing router, dependencies, and global stylesheet.

2. 2.

   Check components.json before installing

   Reuse an existing components.json. Its aliases.components must resolve in TypeScript and the bundler, and tailwind.css must point to the stylesheet your app loads. Do not reinitialize an already configured project.

   Only if components.json is missing; run inside the existing app and follow its framework setup.

   npx shadcn@latest init

   Copy first-time setup command
3. 3.

   Include the installed sources in Tailwind

   Keep the host's standard shadcn theme variables, Tailwind @theme mappings, and base border styles loaded (background, foreground, border, sidebar, and chart tokens). Ensure Tailwind scans the actual installed components directory. Restricted source(none), ignored paths, and monorepos may need an @source path relative to the stylesheet. For theme='dark', use a class-based dark variant in the host CSS.

4. 4.

   Import through your configured components alias

   The @components/ entry is a registry target placeholder, not a JavaScript import. Replace the example's @/components prefix with components.json aliases.components, verify the file printed by the CLI, and mount it in an existing host route.

/* Example: src/styles.css */
/* Add only if this directory is outside your existing scan scope. */
@source "./components/uiblocks";

/* Required for the recipe theme="dark" class switch. */
@custom-variant dark (&:where(.dark, .dark *));

Setup references: shadcn configuration · Tailwind source scanning · Dark mode

mode, brand, brandMark, brandHref, availability, navigation

Controlled by default: no sample projects, claims or testimonials. The host owns real brand and destinations. Local default navigation targets existing section IDs; explicit mode="demo" opts into labelled fictional Foundry content.

hero, primaryAction, secondaryAction, facts, clientIntro, clients

Supply the actual positioning, primary links, facts and approved client names. Pass null to either hero action to hide it. Empty arrays stay empty in demo mode.

workHeading, work, servicesHeading, services, servicesNote

Real projects support an optional host href, a local native detail disclosure, image {src,alt,width,height}, disciplines/year/outcome. Missing images preserve a visible placeholder; no customer picture is fabricated. Services support verified prices/durations/deliverables and optional approved proof.

studioHeading, studioParagraphs, studioFacts, testimonialEyebrow, testimonial

Host-owned studio story, verified figures and approved quote. Set testimonial=null to suppress the fictional demo quote.

contact, contactDetails, onContact

Controlled mode only: set contact.href to a real host destination, or provide onContact. The handler may return a promise and must explicitly return {status:"sent",message?}; pending, rejection, missing confirmation and retry are represented. No handler/href leaves the action disabled. Demo mode always disables the contact business action, labels it as local/no-send and never invokes onContact, even if supplied; section anchors and case disclosures remain available.

footerDescription, footerColumns, legalText, legalLink, theme, className

Set footer content and genuine legal/host links. Theme inherits the host dark class by default; its optional local toggle changes only the recipe wrapper. Explicit light/dark props lock the recipe theme. Scoped CSS and system fonts do not change the host theme or stylesheet.