Tailark Pro

Getting Started

Tailark Pro is a comprehensive Shadcn UI kit designed to help you build and scale beautiful marketing websites.

Registry Setup

Use the shadcn CLI to generate your API key and configure the registry.

1

Generate API key

Go to the Dashboard and click on the "Generate API Key" button and copy the key.

2

Add API key to your `.env.local` or `.env

3

Add Tailark Pro namespace

Add the following code to your `components.json` file:

4

Start using Tailark Pro

Now you can start installing Tailark Pro blocks and pages with ease.

Important Security Notes:

  • Never commit your API key to version control
  • Keep your .env.local file in .gitignore
  • Store your key securely in environment variables
  • Manage your API keys from the Dashboard

MCP Server

The shadcn MCP Server allows AI assistants to browse, search, and install components from registries using natural language. Once you've configured the Tailark Pro registry in your components.json, you can use prompts like:

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

Quick Setup

Run the following command in your project to configure the MCP server for your AI assistant:

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

For detailed setup instructions and configuration options, see the shadcn MCP documentation.

Theme Setup

Tailark components support both light and dark modes out of the box. Follow these steps to set up theming in your app.

1

Add CSS Variables

Copy and paste the following theme variables into your global CSS file:

2

Dark mode support

Install the next-themes package to add theme switching to your website.

3

Create a provider component

Create a theme provider component to wrap your application and enable theme switching:

4

Use in your root layout

Add the ThemeProvider component to your root layout file.

5

Add a theme toggle

Create a toggle component to let users switch between light, dark themes.

Need Help?

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