Guide

In-depth documentation for Tailark Pro — registry configuration, path aliases, monorepos, theme setup, and more. Tailark Pro is a Shadcn UI registry of marketing blocks, full pages, and supporting files designed to help you build and scale beautiful marketing websites.

New here? Start with Quick Setup to connect your project in a few steps, then return here for details.

Requirements

Before installing from Tailark Pro, make sure your project meets the following:

A Next.js app using the App Router
shadcn/ui initialized with a components.json file
A Tailark Pro API key from your Dashboard

Initialize shadcn/ui

If you do not have shadcn/ui set up yet, run the init command in your project root. This creates components.json and adds the default path aliases for components, utilities, UI primitives, lib, and hooks.

bash

components.json

The components.json file is the entry point for the shadcn CLI in your project. It tells the CLI where to install files, which Tailwind and style settings to use, and which registries you can install from.

Tailark Pro registry items declare install targets such as @app/(marketing)/layout.tsx, @types/post.ts, and @content/legal/terms-of-service.mdx. The CLI resolves those paths using the aliases map in your components.json.

A minimal Tailark Pro-ready configuration looks like this:

components.json

Configure path aliases

Registry items install files relative to alias keys in components.json. Running npx shadcn@latest init adds components, utils, ui, lib, and hooks by default.

For Tailark Pages, you must also define app, types, and content so routes, shared types, and MDX content land in the correct directories.

components.json

Note

Match these paths to your project structure. If your app directory lives elsewhere, point app at that folder. The alias values must align with the paths in your tsconfig.json.

Your project should expose the directories those aliases map to:

project structure

Monorepo

The shadcn CLI understands monorepo layouts and installs components, dependencies, and registry dependencies to the correct workspace paths. It also fixes imports across workspace boundaries. This works with Tailark Pro blocks and pages when each workspace has a properly configured components.json.

See the shadcn monorepo docs for the full CLI reference.

Getting started

To scaffold a new monorepo with shadcn/ui, run init with the --monorepo flag. This creates workspaces such as apps/web and packages/ui with Turborepo.

bash

After adding the @tailark-pro registry and TAILARK_API_KEY to your app workspace, install Tailark items from the app path — not the repo root.

bash

The CLI detects the item type and installs files to the right workspace. UI primitives and shared components typically land in packages/ui. Page routes, layouts, blocks, types, and content files install into apps/web when your app aliases point there.

File structure

A typical monorepo layout for Tailark Pro looks like this:

monorepo structure

Requirements

Every workspace needs a components.json. The CLI uses it to decide where files go and how imports are rewritten.
Define aliases per workspace. The app workspace needs app, types, and content for Tailark Pages. Point ui and utils at the shared UI package.
Register @tailark-pro in the app workspace components.json (with API key headers). You can mirror the same registry entry in packages/ui if you install blocks from that directory.
Keep style, iconLibrary, and baseColor aligned across workspaces.
For Tailwind CSS v4, leave tailwind.config empty in components.json.

Example components.json files for a web + ui setup:

apps/web/components.json

packages/ui/components.json

Importing components

Import shared UI from the workspace package:

apps/web/components/example.tsx

Note

package.json#imports works for package-local aliases inside a workspace. For cross-workspace paths such as @workspace/ui/components, keep explicit aliases in components.json — the CLI uses them to route Tailark registry files across workspace boundaries.

Add the @tailark-pro registry

Tailark Pro is a private registry. Authenticate with an API key stored in your environment, then register the namespace in components.json.

Generate an API key

Open the Dashboard and click Generate API Key. Copy the key — you will not be able to view it again.

Add the API key to your environment

Store the key in .env.local (or your deployment environment). The shadcn CLI reads TAILARK_API_KEY when resolving registry requests.

.env.local

Register the namespace

Add the @tailark-pro registry under registries in components.json. The {name} placeholder is replaced by the item name when the CLI fetches a registry item.

components.json

Important Security Notes

Never commit your API key to version control
Keep .env.local in .gitignore
Store keys in environment variables on deploy
Revoke and rotate keys from the Dashboard if exposed

Install items

Once your registry and aliases are configured, install blocks and pages with the shadcn CLI using the @tailark-pro namespace.

Install a block

Blocks are individual marketing sections — heroes, features, pricing, footers, and more.

bash

The first command installs a single block. The second installs a page layout from the libre pages collection. Page items may install many files across app, components, types, and content — which is why the extra aliases matter.

Note

Commands above follow your selected package manager from the site toolbar. You can run the same commands with npx, pnpm dlx, yarn, or bunx.

Test your setup

After configuring the registry, confirm the CLI can discover and install items.

List items

List available items in the Tailark Pro namespace.

bash

Search items

Search the registry by query.

bash

View an item

Inspect a registry item before installing it.

bash

Add an item

Run add from the project where you want files written.

bash

See the shadcn namespaced registries docs for more on how namespaces and URL templates work.

Theme setup

Tailark components support light and dark modes. Add the theme tokens to your global CSS, then wire up a provider and optional toggle.

Add CSS variables

Copy the theme variables into your global CSS file (for example app/globals.css):

global.css

Dark mode support

Install next-themes to enable theme switching.

bash

Create a provider component:

components/theme-provider.tsx

Wrap your root layout with the provider:

app/layout.tsx

Add a theme toggle

Optional toggle for switching between light and dark themes (press T when focused outside inputs):

components/theme-toggle.tsx

MCP Server

The shadcn MCP Server lets AI assistants browse, search, and install registry items with natural language. After configuring @tailark-pro in components.json, you can prompt your assistant with requests like:

Add the hero-section-1 component from @tailark-pro
Build a landing page using components from @tailark-pro

Quick setup

Run the following in your project to configure the MCP server:

bash

Replace cursor with your client: claude, vscode, codex, or opencode.

For full configuration options, see the shadcn MCP documentation.

Guidelines

Tips for a smooth install experience with Tailark Pro:

Define app, types, and content aliases before installing page kits — missing aliases cause files to land in the wrong place or fail to install.
Run npx shadcn@latest view @tailark-pro/{name} to preview dependencies and file targets before adding large page bundles.
Keep TAILARK_API_KEY out of source control; use .env.local locally and secrets in production.
Apply the theme CSS variables so blocks render with the intended Tailark design tokens.

Need help?

If you have questions or run into issues, reach out on X / Twitter or Email.