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

972

Tailwind CSS Blocks - Free & Premium

Tailwind CSS blocks for marketing, application UI, ecommerce, and blog layouts. Explore reusable sections, dashboards, forms, tables, and modals you can preview, copy, and adapt.

Marketing

Tailwind CSS marketing blocks for landing pages and websites, including hero sections, announcements, marquees, feature sections, pricing, testimonials, FAQs, contact pages, and footers.

Data Display

Tailwind CSS data display blocks for dashboards and analytics apps, including charts, KPI cards, tables, activity feeds, maps, and description lists.

UI Components

Tailwind CSS UI component blocks for buttons, menus, selects, badges, progress bars, popovers, snippets, and reusable interface elements.

Forms

Tailwind CSS form blocks for billing, filters, uploads, radio groups, switches, and data-entry flows across dashboards, SaaS apps, and checkout pages.

Authentication

Tailwind CSS authentication blocks for sign in, sign up, password reset, email verification, onboarding, and account access flows.

Ecommerce

Tailwind CSS ecommerce blocks for online stores, including product grids, product pages, checkout flows, payment screens, order details, and galleries.

Communication

Tailwind CSS communication blocks for chat, inbox, messaging, voice and video calls, contacts, and conversation interfaces.

Productivity

Tailwind CSS productivity blocks for calendars, scheduling, kanban boards, task management, planning views, and workflow apps.

Blog & Articles

Tailwind CSS blog and article blocks for editorial layouts, post pages, content sections, company blogs, magazines, and publishing sites.

Application Pages

Tailwind CSS application page blocks for SaaS products and admin dashboards, including profiles, settings, AI screens, account summaries, and workspace pages.

Billing & Payments

Tailwind CSS billing and payments blocks for invoices, subscription plans, payment methods, billing dialogs, and transaction detail flows across SaaS and finance products.

Feedback & States

Tailwind CSS feedback and state blocks for empty states, notifications, banners, success messages, reviews, action cards, and product feedback.

Search & Command Palettes

Tailwind CSS search and command palette blocks for search results, quick actions, and keyboard-first interaction flows.

Tailwind CSS navigation and layout blocks for dashboards and SaaS apps, including headers, navbars, sidebars, title bars, footers, and application shell layouts.

Simple pricing

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?

Tailwind CSS Blocks FAQs

What are Tailwind CSS blocks?

Tailwind CSS blocks are ready-made interface sections and page patterns, such as hero sections, forms, tables, dashboards, modals, ecommerce layouts, and application screens.

Are Preline blocks free to use?

Preline UI includes 200+ free Tailwind CSS blocks you can preview, copy, and use in your projects. Premium blocks are available with Preline Pro.

Do blocks support responsive layouts and themes?

Yes. Blocks are designed with responsive Tailwind CSS utilities and Preline UI theme classes, including dark mode, so you can preview how sections behave across screen sizes and color modes.

Can I use blocks with React, Vue, Laravel, Rails, or Django?

Yes. Preline UI blocks are HTML, Tailwind CSS, and JavaScript patterns that you can adapt into any stack where Tailwind CSS and browser JavaScript can run. They don't ship as framework-specific source files for React, Vue.js, or similar frameworks by default.

To help with integration, Preline includes framework guides for common setups, so you can bring the blocks into your project while keeping the source flexible and framework-agnostic.

How are blocks different from components and templates?

Blocks are composed UI sections and page patterns. Components are smaller building blocks, while templates are complete multi-page demos.

Can I customize blocks for production projects?

Yes. You can copy and customize block markup, Tailwind CSS classes, colors, spacing, content, and interaction patterns to match your product. Blocks are meant to be adapted into real layouts rather than used only as fixed examples.