SaaS Blocks

Introduction

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.

Features

SaaS Blocks offers the following features:

120+ HTML and React components included
Included Figma File with the flexible design system
Marketing UI components
Admin & Dashboard UI components
Boilerplate and theming features in the future (planned by developer)
Starter templates included with Codesandbox template
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

Accordions
Analytics / Charts
Audio Player
Breadcrumbs
Buttons
Button Groups
Calendars
Callouts
Cards
Chat Elements
Forms
Inputs
Lists
Menu
Modals
Notifications
Pagination
Payments
Shells
Slideouts
Steps & Progress Bars
Tables
Tabs
Tags & Chips
Toasts
Top Navbars
User Elements
Wells

Marketing UI

Blog
Features
Hero
CTAs
Navbars
Social Proof
Integrations
Pricing
Steps
Footers

Pros and Cons

Pros ✅

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

Cons ⛔️

Marketing components are still being developed.
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

FAQ

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.