SaaS Blocks


120+ React and HTML UI components pre-built with Tailwind CSS

SaaS Blocks Image 1
Details About SaaS Blocks
Key points:
  • Tailwind CSS v3.0+
  • Copy & Paste
  • Figma design file
  • Install via npm


120+ Tailwind CSS React and HTML component libraries to build modern websites. Get ahead with well-documented SaaS Blocks with included Figma design file, and light & dark mode features.


SaaS Blocks offers the following features:

  1. 120+ HTML and React components included
  2. Included Figma File with the flexible design system
  3. Marketing UI components
  4. Admin & Dashboard UI components
  5. Boilerplate and theming features in the future (planned by developer)
  6. Starter templates included with Codesandbox template
  7. Installation option with Tailwind plugin via yarn add

Included Components

SaaS Blocks include everything from forms, tables, and navigation menu components to more complex elements like chat elements and slideouts.

Application UI

  1. Accordions
  2. Analytics / Charts
  3. Audio Player
  4. Breadcrumbs
  5. Buttons
  6. Button Groups
  7. Calendars
  8. Callouts
  9. Cards
  10. Chat Elements
  11. Forms
  12. Inputs
  13. Lists
  14. Menu
  15. Modals
  16. Notifications
  17. Pagination
  18. Payments
  19. Shells
  20. Slideouts
  21. Steps & Progress Bars
  22. Tables
  23. Tabs
  24. Tags & Chips
  25. Toasts
  26. Top Navbars
  27. User Elements
  28. Wells

Marketing UI

  1. Blog
  2. Features
  3. Hero
  4. CTAs
  5. Navbars
  6. Social Proof
  7. Integrations
  8. Pricing
  9. Steps
  10. Footers

Pros and Cons

Pros ✅

  1. Pre-built admin UI screens
  2. Sample code previews of components
  3. Comes with Figma design system
  4. You can request additional components.

Cons ⛔️

  1. Marketing components are still being developed.
  2. Some HTML versions of application UI components are not available for one-click copy.

Who is SaaS Blocks for?

SaaS Blocks provide an ideal base for developers seeking easy ways to develop React-based web applications and landing pages on top of Tailwind CSS. It offers a unique starting point for sweetening their development workflows.

What do people say?

As a full stack dev who’s frontend skills are ... limited - this is great.

Simon Barker


What's included?

You get access to React application components and the Figma design file that you can share with your team. The marketing components are sold separately (unless purchased as a package - not yet available).

Why do I need a license key?

The license key proves your purchase and allows you to log in to the customer-only portal where you can easily access all of the components, preview, copy and paste with ease. You'll also be able to see all of the page views.

Can I join your slack channel and help you shape this product?

Absolutely! Come and tell us what you'd like to see and we'll create it!

What if I don't like the product?

Get a full refund within 2 weeks.

Do you have a roadmap of planned components?

Not specifically, but you can get custom components just by joining Slack and asking for them (customers only).

What is the license on this product (permitted use)?

You may use the product for personal, client or business needs. The only things we prohibit are reselling of SaaS Blocks and creating your own template systems that are then used to create a paid product (for example: creating a template system that you then sell).

Are you planning on adding anything besides a React version (HTML / Vue etc..) ?

The will most likely be HTML versions of each component eventually, but we currently do not have any plans for anything other than React JS.

Featured Tailwind Components

Discover the most popular Tailwind CSS ui components and elements. Browse top-notch Tailwind components to enhance your development process.

Preline UI HOT

Open-source set of prebuilt UI components based on the utility-first Tailwind CSS.