Update v5.0 - Preline MCP, AI Prompts, Animated Icons and more. Visit Changelog

........ Github
Figma X (Twitter)
Preline UI

Preline UI for AI agents

Connect AI agents to Preline components, blocks, docs, and framework guidance so they can fetch real Tailwind CSS UI directly in the editor.

MCP guide Get started

Built for the agents you already code with

How the MCP flow works

Prompt once, then let your agent search Preline, fetch the right UI, and wire it into your project.

  1. 1. Prompt

    “Add a pricing section with monthly/yearly toggle.”

  2. 2. Fetch

    The agent finds the best Preline match, then MCP returns its exact markup, scripts, and setup notes.

  3. 3. Integrate

    Your agent adapts the result to your files, theme, and dark-mode setup.

Extend, restyle, and refine UI without drifting

Start with your default UI, extend it with Preline advanced components, then apply or generate a theme without breaking the design system.

  1. Start with your default UI

    Use your existing interface as the baseline, preserving its structure, content, and behavior.

    Default flight search interface in light mode

  2. Extend with advanced components

    Adopt Preline selects, date pickers, input numbers, and other advanced components without rebuilding the page.

    Flight search interface extended with advanced Preline components in light mode

  3. Apply or generate a theme

    Use Preline skills to apply any ready-made theme or generate your own while keeping the entire interface in sync.

    Flight search interface with a custom Preline theme in light mode

From request to real UI source

MCP handles the lookup across components, blocks, JavaScript APIs, and framework guidance, keeping output grounded in real source.

components_list

Lists component sections and exact component IDs inside one section.

single_component

Returns the code for one ready-to-integrate component.

blocks_categories

Lists the block hierarchy so the agent can choose the right content area.

blocks_in_category

Lists the exact block IDs inside one category before code is fetched.

single_block

Returns a complete block page with all its components.

component_documentation

Provides JavaScript API details, options, methods, and events for interactive plugins.

framework_documentation

Returns integration documentation for React, Next.js, Vue, Laravel, Rails, Django, and more.

preline_init

An MCP prompt for Preline tool usage, call order, integration, and code placement.

MCP guide Get started

Built with Preline MCP

Explore complete UI demos assembled from real Preline components and blocks. Every demo is available in the download package.

Team chat demo built with Preline MCP in light mode

AI-made UI

  • Guesses component structure from the prompt.
  • Can miss data attributes, scripts, and states.
  • Often needs cleanup to match your system.

Preline MCP

  • Fetches real Preline components and examples.
  • Includes markup, Tailwind classes, and JS hooks.
  • Keeps prompts aligned with Preline patterns.

MCP tools

7

ready to call

Ready to discover, fetch, document, and integrate Preline UI.

Components

640+

ready to use

Searchable Tailwind CSS components across Preline categories.

Blocks

972

ready to reference

Complete screens, sections, and layouts agents can learn from.

Start with Preline, not from scratch

Compare plain AI output, manual copy-paste components, and Preline MCP for prompt-driven UI work.

AI-made UI

  • Prompt-to-UI from a plain request
  • No official Preline components, required classes, or JS hooks
  • No component and block search by intent
  • Approximate UI that often needs cleanup

Manual copy-paste

  • No prompt-to-UI from a plain request
  • Official snippets copied from docs
  • Includes required classes, data attributes, and JS
  • No agent-ready workflow in your editor

Preline MCP

  • Prompt-to-UI from a plain request
  • Fetched official Preline components, blocks, and docs
  • Includes markup, Tailwind classes, and JS hooks
  • Agent-led output with Preline code and context

Connect your agent

Connect Preline MCP to the coding agent you already use, then add Preline UI Agent Skills for reliable, reusable workflows.

Cursor

Connect Preline UI MCP to Cursor CLI and desktop, then add reusable Agent Skills.

Claude

Connect Preline MCP to Claude Code or Claude Desktop, then add skills for stronger workflows.

Codex

Use .codex/skills/ to make Preline workflows available in Codex.

Visual Studio Code

Connect Preline MCP to VS Code agent mode, then add portable Agent Skills.

OpenCode

Use .opencode/skills/ for project-level OpenCode setup.

Kimi Code CLI

Connect Preline MCP to Kimi Code CLI and add shared Agent Skills.

Devin

Add Preline skills to .agents/skills/ for Devin workspaces.

GitHub Copilot

Connect Preline MCP to Copilot CLI or VS Code, then add shared Agent Skills.

Zed

Connect Preline MCP to the Zed Agent and add project or global Agent Skills.

Gemini CLI, Antigravity

Connect Preline UI MCP to Gemini CLI and Google Antigravity, then add shared Agent Skills.

Kiro

Connect Preline MCP to Kiro CLI or Kiro IDE, then add workspace skills.

TRAE

Connect Preline UI MCP to TRAE IDE, then add reusable project or global Skills.

View all setup guides

Preline Pro Pricing

Get lifetime access to downloadable Preline Pro blocks, templates, AI Prompts, and animated icons for unlimited Tailwind CSS projects, with free future updates. Preline MCP launch access is included through January 1, 2027.

Open Source

Free

Free access to the open-source library for unlimited projects and developers.

Free access, no account required
  • Unlimited Projects
  • Unlimited Developers
  • Lifetime access
  • Free Updates
  • AI Prompts New
  • Access to all free 640+ components
  • Access to 189 Blocks
  • Download 5 premium templates with 5 main pages
  • Free Figma Design System
  • Community Support
  • Re-Distribution

Pro

$249

Perfect for Solo Developers with unlimited personal and commercial projects.

Get Pro access
  • Unlimited Projects
  • Single Developer
  • Lifetime access
  • Free Updates
  • AI Prompts New
  • Access to all free 640+ components
  • Access to all 780+ Blocks
  • Download all 21 premium templates with 207 pages
  • Free Figma Design System
  • 35 Animated Icons New
  • General Support
  • No Re-Distribution
  • Preline MCP New Included free through January 1, 2027

Team

$459

Ideal for small to medium teams for any number of commercial projects.

Get Team access
  • Unlimited Projects
  • Up to 15 Developers
  • Lifetime access
  • Free Updates
  • AI Prompts New
  • Access to all free 640+ components
  • Access to all 780+ Blocks
  • Download all 21 premium templates with 207 pages
  • Free Figma Design System
  • 35 Animated Icons New
  • General Support
  • No Re-Distribution
  • Preline MCP New Included free through January 1, 2027

Enterprise

Custom

Built for Re-Distribution, perfect for teams and projects of all sizes.

  • Single Project
  • Unlimited Developers
  • Lifetime access
  • Free Updates
  • AI Prompts New
  • Access to all free 640+ components
  • Access to all 780+ Blocks
  • Download all 21 premium templates with 207 pages
  • Free Figma Design System
  • 35 Animated Icons New
  • SLA & Priority Support
  • Re-Distribution
  • Preline MCP New Included with Enterprise deployment

Standard local taxes and VAT may apply, following the laws of your country.

Have pricing or license questions?

Preline MCP FAQs

What is Preline MCP?

Preline MCP connects your coding agent directly to Preline UI. Your request guides the agent, which searches the catalog, fetches ready-to-integrate HTML, CSS, and JavaScript, and adds the result to your project.

Read the MCP guide

What can MCP fetch?

It can discover and return individual components, complete blocks, interactive plugin APIs, and framework guidance for stacks including React, Next.js, Vue, Laravel, Rails, and Django.

How is it different from AI Prompt?

AI Prompt gives you block-specific instructions to copy into an AI tool. Preline MCP is a live connection that lets supported agents search and fetch the source and documentation they need while working.

Learn about AI Prompt

Which coding agents can use it?

Preline MCP works with coding agents that support MCP connections. Preline Agent Skills also provide guided workflows for Claude, Cursor, Codex, Devin, Gemini CLI, Kiro, OpenCode, and Trae.

Does my project need Preline UI installed?

The fetched markup uses Tailwind CSS and Preline behavior, so Preline UI and any required dependencies should be available in the target project. Your coding agent can handle missing setup during integration.

Can it adapt to my existing project?

Yes. Your agent can place fetched source into your files and adapt it to your framework, theme, dark mode, and application structure while preserving the required Preline markup and interactions.

Still have questions?