Getting Started

To bootstrap a new project quickly, you can use one of our official SaaS Blocks starters.

SaaS Blocks is built on top of Tailwind CSS. We use a few extra plugins and add a few design tokens on top of the default Tailwind config. This is a short guide to help you set up your project with SaaS Blocks.

This assumes you already have a project with Tailwind installed and configured.

Installation

Install SaaS Blocks Tailwind plugin and a few other recommended plugins:

yarn add -D tailwind-saasblocks @tailwindcss/typography @tailwindcss/forms @tailwindcss/line-clamp tailwind-children

Tailwind config

// @filename tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // TODO: Add your own content files here
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/line-clamp"),
    require("tailwind-children"),
    require("tailwind-saasblocks"),
  ],
};

And that's about it. You're ready to start building your next project with SaaS Blocks UI.