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.
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
// @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.