SaaSBlocks

https://saasblocks-tdg1-prd.fly.dev/docs
Admin
SaaSBlocks is a comprehensive UI component library and design system providing pre-built screens,...
Tokens:376,736
Snippets:477
Trust Score:5.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install SaaS Blocks and Tailwind Plugins

Source: https://saasblocks-tdg1-prd.fly.dev/docs/getting-started

Installs the SaaS Blocks Tailwind plugin along with other recommended plugins like @tailwindcss/typography, @tailwindcss/forms, @tailwindcss/line-clamp, and tailwind-children using Yarn.

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

--------------------------------

### Team Pricing Plan Button

Source: https://saasblocks-tdg1-prd.fly.dev/docs/components/pricing

Renders a 'Get Started' button for the 'Team' pricing plan. It features a primary color background and border, with hover effects for an accent color. An ArrowRightIcon is included.

```html
<button
            type="button"
            className="mt-6 inline-flex w-full cursor-pointer items-center justify-center rounded-xl border-2 border-primary bg-primary px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:border-primary-accent hover:bg-primary-accent focus:outline-none focus:ring-2 focus:ring-orange-400/80 focus:ring-offset-0 disabled:opacity-30 disabled:hover:border-primary disabled:hover:bg-primary disabled:hover:text-white dark:focus:ring-white/80"
          >
            Get Started
            <ArrowRightIcon className="ml-2 h-5 w-5" />
          </button>
```

--------------------------------

### Default Pricing Plan Button

Source: https://saasblocks-tdg1-prd.fly.dev/docs/components/pricing

Renders a 'Get Started' button for the default pricing plan. It includes styling for a muted border, transparent background, and hover effects. An ArrowRightIcon is appended for visual indication.

```html
<button
            type="button"
            className="mt-6 inline-flex w-full cursor-pointer items-center justify-center rounded-xl border-2 border-muted-3 bg-transparent px-4 py-2.5 text-sm font-semibold  text-text shadow-sm hover:text-heading focus:text-heading focus:outline-none focus:ring-2 focus:ring-orange-400/80 focus:ring-offset-0 disabled:opacity-30 disabled:hover:text-text dark:focus:ring-white/80"
          >
            Get Started
            <ArrowRightIcon className="ml-2 h-5 w-5" />
          </button>
```

--------------------------------

### Configure Tailwind CSS with SaaS Blocks

Source: https://saasblocks-tdg1-prd.fly.dev/docs/getting-started

Configures the tailwind.config.js file to include SaaS Blocks and other plugins. It extends the default theme with the Inter font and specifies content files for Tailwind to scan.

```javascript
// @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"),
  ],
};

```

--------------------------------

### Basic Pagination Example

Source: https://saasblocks-tdg1-prd.fly.dev/docs/components/paginations

A fundamental example of a pagination component, likely using HTML for structure, CSS for styling, and JavaScript for interactivity. This component allows users to navigate through pages of content.

```html
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>
```

```css
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  padding: .5rem .75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
}
```

```javascript
document.querySelectorAll('.page-link').forEach(link => {
  link.addEventListener('click', (event) => {
    event.preventDefault();
    // Add logic here to handle page navigation
    console.log('Navigating to page:', link.textContent);
  });
});
```

--------------------------------

### Callouts Component Usage

Source: https://saasblocks-tdg1-prd.fly.dev/docs/components/callout

Demonstrates the basic structure and usage of the Callouts component. This is a foundational example for integrating callouts into your project.

```html
<div class="callout">
  <div class="callout-header">
    <h4>Callout Title</h4>
  </div>
  <div class="callout-body">
    <p>This is the main content of the callout. It can include text, links, or other relevant information.</p>
  </div>
  <div class="callout-footer">
    <button class="btn btn-primary">Action Button</button>
  </div>
</div>
```

--------------------------------

### Drawer Component - App Components

Source: https://saasblocks-tdg1-prd.fly.dev/docs/components/drawer

Provides documentation and examples for the Drawer component within the App Components section. This component is likely used for side navigation or contextual information panels.

```html
<!-- Example of a Drawer component -->
<div class="drawer">
  <div class="drawer-content">
    <!-- Drawer content goes here -->
  </div>
</div>
```

--------------------------------

### HTML + Vite.js Starter

Source: https://saasblocks-tdg1-prd.fly.dev/docs/starters

A starter template for projects using plain HTML with Vite.js for a fast development experience. This is suitable for projects that do not require a framework like React or Vue.

```bash
npm create vite@latest your-project-name --template html
```

--------------------------------

### Next.js + TypeScript Starter

Source: https://saasblocks-tdg1-prd.fly.dev/docs/starters

A starter template for building projects with Next.js and TypeScript. This template is ideal for leveraging the power of React with a strong type-safe foundation.

```bash
npx create-next-app@latest --ts --example https://github.com/saasblocks/starter-nextjs-typescript your-project-name
```

--------------------------------

### Centered Large Text CTA in React

Source: https://saasblocks-tdg1-prd.fly.dev/docs/components/ctas

A React component for a centered Call to Action (CTA) with large, impactful text. It includes a headline, descriptive paragraph, a link with an arrow icon, an avatar with a testimonial, and a primary 'Get started' button. This component is suitable for highlighting key features or encouraging user sign-ups.

```javascript
import { ArrowRightIcon } from "@heroicons/react/outline";
import { StarIcon } from "@heroicons/react/solid";

export default function Page() {
  return (
    <section className="p-8 md:py-20">
      <div className="mx-auto flex max-w-5xl flex-col items-center text-center md:px-4">
        <h2 className="text-4xl font-semibold text-heading md:text-5xl">
          Notes Done Right
        </h2>

        <p className="mt-8 text-2xl font-semibold text-heading md:text-3xl">
          Taking notes shouldn't be difficult. That's why we made it easy. With
          NoteBliss, the UI gets out of the way of your writing. But, when you
          need to make your notes shine, the intuitive interface allows for easy
          media importing like{" "}
          <span className="bg-gradient-to-r text-gradient gradient-lime">
            images
          </span>
          ,{" "}
          <span className="bg-gradient-to-r text-gradient gradient-peach">
            video
          </span>
          ,{" "}
          <span className="bg-gradient-to-r text-gradient gradient-sky">
            audio
          </span>{" "}
          and even{" "}
          <span className="bg-gradient-to-r text-gradient gradient-peach">
            3D experiences
          </span>
          .
        </p>

        <a
          href="#"
          className="mt-12 flex items-center space-x-4 text-xl font-medium md:text-2xl"
        >
          <span className="bg-gradient-to-r text-gradient gradient-dusk">
            Explore NoteBliss Interface
          </span>
          <ArrowRightIcon className="h-6 w-6 text-[#fca5a5] dark:text-[#fda4af]" />
        </a>

        <div className="mt-12 flex items-center space-x-6">
          <img
            src="/assets/avatars/pasquale-blanco.png"
            alt="avatar"
            className="h-16 w-16 rounded-full"
          />
          <p className="text-lg font-medium text-heading">
            “Possibly the best app I've ever used!”
          </p>
        </div>

        <a
          href="#"
          className="mt-12 inline-flex cursor-pointer items-center justify-center rounded-xl border-2 border-primary bg-primary px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:border-primary-accent hover:bg-primary-accent focus:outline-none focus:ring-2 focus:ring-orange-400/80 focus:ring-offset-0 disabled:opacity-30 disabled:hover:border-primary disabled:hover:bg-primary disabled:hover:text-white dark:focus:ring-white/80"
        >
          Get started for free
          <ArrowRightIcon className="ml-2 h-5 w-5" />
        </a>
      </div>
    </section>
  );
}
```

--------------------------------

### Install Tailwind SaaS Blocks Plugin

Source: https://saasblocks-tdg1-prd.fly.dev/docs/changelog

This snippet shows how to install the `tailwind-saasblocks` plugin from npm, which provides gradients and components for Tailwind CSS projects.

```bash
npm install tailwind-saasblocks
```

--------------------------------

### React Blog Page Navigation and Header

Source: https://saasblocks-tdg1-prd.fly.dev/docs/templates/penta

This React component renders a blog page's navigation bar and header section. It includes links for use cases, product, about, sign in, and sign up, along with a mobile menu button. The header displays a 'Resources' category, a main title 'Level up your startup', and a descriptive paragraph. It utilizes Heroicons for icons and is styled using Tailwind CSS classes.

```jsx
import {
  MenuAlt3Icon,
  ArrowCircleRightIcon,
  ArrowRightIcon,
} from "@heroicons/react/outline";

export default function Page() {
  return (
    <div className="overflow-hidden px-6">
      <div className="mx-auto mt-7 w-full max-w-6xl lg:mt-14">
        {/* Nav */}
        <nav className="relative z-20 flex shrink-0 items-center space-x-2">
          <a href="#">
            <img
              src="https://res.cloudinary.com/dbbfbpsc2/image/upload/v1664089637/saasblocks-tdg1/assets/logos/penta_full.png"
              alt="penta logo"
              className="h-8 lg:h-12"
            />
          </a>

          <div className="flex-1"></div>

          <div className="hidden space-x-18 lg:flex">
            <a
              href="#"
              className="text-lg hover:text-heading focus:text-heading"
            >
              Use cases
            </a>
            <a
              href="#"
              className="text-lg hover:text-heading focus:text-heading"
            >
              Product
            </a>
            <a
              href="#"
              className="text-lg hover:text-heading focus:text-heading"
            >
              About
            </a>
            <a
              href="#"
              className="text-lg hover:text-heading focus:text-heading"
            >
              Sign in
            </a>
            <a
              href="#"
              className="text-lg hover:text-heading focus:text-heading"
            >
              Sign up
            </a>
          </div>

          <div className="lg:hidden">
            <button className="inline-flex cursor-pointer items-center justify-center rounded-xl border-none border-transparent bg-transparent p-2.5 font-semibold text-text hover:bg-heading/5 hover:text-heading focus:bg-heading/5 focus:outline-none focus:ring-2 focus:ring-heading/80 focus:ring-offset-0 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-text">
              <MenuAlt3Icon className="h-6 w-6" />
            </button>
          </div>
        </nav>

        <main className="mt-14 lg:mt-24">
          {/* Header section */}
          <header className="relative text-center">
            <div className="relative z-10">
              <div className="text-sm font-semibold uppercase tracking-tight text-[#ff7b60]">
                Resources
              </div>
              <h1 className="font-display relative z-10 mt-6 text-4xl font-bold leading-tight tracking-tight text-heading lg:text-7xl">
                Level up your startup
              </h1>
              <p className="mx-auto mt-6 max-w-lg text-lg">
                Resources to help startups grow their ideas into products used
                by millions
              </p>
            </div>

            {/* Deco - Circle SVG */}
            <svg
              viewBox="0 0 200 200"
              fill="url(#deco_circle_342_59077)"
              xmlns="http://www.w3.org/2000/svg"
              className="absolute -top-6 -right-28 h-56 w-56 -rotate-45 mix-blend-overlay lg:-right-4 lg:top-0 lg:h-96 lg:w-96"
            >
              <g>
                <path d="M199.885 104.839C199.961 103.235 200 101.622 200 100C200 98.3776 199.961 96.7647 199.885 95.1613L0.114982 95.1613C0.0387475 96.7647 0 98.3776 0 100C0 101.622 0.0387475 103.235 0.114982 104.839L199.885 104.839Z" />
                <path d="M199 114.194L0.999559 114.194C1.46547 117.473 2.09079 120.702 2.867 123.871L197.133 123.871C197.909 120.702 198.535 117.473 199 114.194Z" />
                <path d="M194.348 133.226H5.65241C6.81767 136.535 8.15209 139.764 9.64529 142.903H190.355C191.848 139.764 193.182 136.535 194.348 133.226Z" />
                <path d="M185.276 152.258H14.7244C16.7893 155.621 19.0477 158.851 21.4837 161.935H178.516C180.952 158.851 183.211 155.621 185.276 152.258Z" />
                <path d="M170.126 171.29H29.8737C33.4321 174.791 37.2518 178.028 41.3004 180.968H158.7C162.748 178.028 166.568 174.791 170.126 171.29Z" />
                <path d="M142.971 190.323H57.029C70.0473 196.527 84.6182 200 100 200C115.382 200 129.953 196.527 142.971 190.323Z" />
                <path d="M0.999559 85.8064L199 85.8064C198.535 82.5268 197.909 79.2981 197.133 76.129L2.867 76.129C2.09079 79.2981 1.46547 82.5268 0.999559 85.8064Z" />
                <path d="M5.65241 66.7742L194.348 66.7742C193.182 63.4652 191.848 60.2359 190.355 57.0968L9.64529 57.0968C8.15209 60.2359 6.81767 63.4652 5.65241 66.7742Z" />
                <path d="M14.7244 47.7419L185.276 47.7419C183.211 44.3794 180.952 41.1486 178.516 38.0645L21.4837 38.0645C19.0477 41.1486 16.7893 44.3794 14.7244 47.7419Z" />
                <path d="M29.8737 28.7097L170.126 28.7097C166.568 25.2089 162.748 21.9723 158.7 19.0323L41.3004 19.0323C37.2518 21.9723 33.4321 25.2089 29.8737 28.7097Z" />
              </g>
            </svg>
          </header>
        </main>
      </div>
    </div>
  );
}
```

--------------------------------

### Form Validation Example - JavaScript

Source: https://saasblocks-tdg1-prd.fly.dev/docs/components/form

A basic JavaScript example demonstrating how to validate form inputs before submission. This typically involves checking required fields and input formats.

```javascript
const form = document.getElementById('myForm');
const username = document.getElementById('username');

form.addEventListener('submit', function(event) {
  if (username.value === '') {
    alert('Username is required!');
    event.preventDefault();
  }
});
```

--------------------------------

### Radio Button Component - HTML

Source: https://saasblocks-tdg1-prd.fly.dev/docs/components/form

Provides an example of radio button inputs, used for selecting a single option from a group.

```html
<div class="radio-group">
  <input type="radio" id="option1" name="choice" value="option1">
  <label for="option1">Option 1</label>

  <input type="radio" id="option2" name="choice" value="option2">
  <label for="option2">Option 2</label>
</div>
```

--------------------------------

### Configure MRR Chart Options

Source: https://saasblocks-tdg1-prd.fly.dev/docs/screens/dashboard

Sets the display options for the MRR chart, specifically configuring the Y-axis to start at 0 with a step size of 5000 and hiding the legend.

```javascript
export const mrrChartOptions = {
  scales: {
    y: {
      min: 0,
      ticks: { stepSize: 5000 },
    },
  },
  plugins: { legend: { display: false } },
};
```

--------------------------------

### Settings Page Header and Tab Group Initialization

Source: https://saasblocks-tdg1-prd.fly.dev/docs/screens/settings

Sets up the main header for the settings page and initializes a vertical Tab.Group component from a UI library. It includes a default selected tab index and applies specific styling for layout.

```jsx
              <div className="mt-6">
                <header>
                  <h1 className="text-3xl font-semibold text-heading">
                    Settings
                  </h1>
                </header>

                <Tab.Group
                  as="div"
                  defaultIndex={1}
                  vertical
                  className="mt-4 flex flex-col md:mt-8 md:flex-row md:space-x-4 md:divide-x md:divide-layer-3"
                >
                  <div>
                    <div className="mb-6 block md:mb-0 md:hidden">
                      <label
                        htmlFor="category"
                        className="sr-only block text-sm font-semibold text-heading"
                      >
                        Settings Category
                      </label>
                      <select
                        id="category"
                        defaultValue="Integrations"
                        className="block w-full rounded-xl border-2 border-muted-3 bg-transparent py-2 pl-3 pr-7 font-medium text-text focus:border-primary disabled:opacity-30 sm:text-sm"
                      >
                        <option>Home</option>
                        <option>Integrations</option>
                        <option>Documents</option>
                        <option>Timeline</option>
                      </select>
                    </div>

                    <Tab.List className="hidden flex-col items-start space-y-4 md:flex">
                      {settingsTabs.map((tab) => (
                        <Tab key={tab} as={Fragment}>
                          {({ selected }) => (
                            <button
                              className={`${selected ? "border-secondary bg-secondary text-white shadow-sm hover:border-secondary-accent hover:bg-secondary-accent focus:ring-2 focus:ring-orange-400/80 focus:ring-offset-0 disabled:hover:border-secondary disabled:hover:bg-secondary disabled:hover:text-white dark:focus:ring-white/80" : "border-transparent bg-transparent text-text hover:bg-heading/5 hover:text-heading focus:bg-heading/5 focus:ring-2 focus:ring-heading/80 focus:ring-offset-0 disabled:hover:bg-transparent disabled:hover:text-text"} inline-flex cursor-pointer items-center justify-center rounded-xl border-2 px-2 py-1 text-sm font-semibold focus:outline-none disabled:opacity-30`}
                            >
                              {tab}
                            </button>
                          )}
                        </Tab>
                      ))}
                    </Tab.List>
                  </div>

                  <Tab.Panels className="flex-1">
                    <Tab.Panel>
                      <div className="md:px-8">
                        <h2 className="text-xl font-semibold text-heading">
                          Home
                        </h2>
                      </div>
                    </Tab.Panel>
                    <Tab.Panel>
                      <div className="md:px-8">
                        <h2 className="text-xl font-semibold text-heading">
                          Integrations
                        </h2>
                      </div>

                      <Tab.Group as="div" className="mt-4">
                        <Tab.List className="flex md:px-8">
                          {integrationTabs.map((tab) => (
                            <Tab key={tab} as={Fragment}>
                              {({ selected }) => (
                                <button
                                  className={`${selected ? "border-b-primary text-heading" : "border-transparent text-text"} border-b-2 py-2 px-4 text-sm font-semibold focus:bg-layer-2 focus:outline-none`}
                                >
                                  {tab}
                                </button>
                              )}
                            </Tab>
                          ))}
                        </Tab.List>
```

--------------------------------

### Configure Net Revenue Chart Options

Source: https://saasblocks-tdg1-prd.fly.dev/docs/screens/dashboard

Sets the display options for the Net Revenue chart, configuring the Y-axis to start at 0 with a step size of 50000 and hiding the legend.

```javascript
export const netRevenueChartOptions = {
  scales: {
    y: {
      min: 0,
      ticks: { stepSize: 50000 },
    },
  },
  plugins: { legend: { display: false } },
};
```

--------------------------------

### Tables Component Usage

Source: https://saasblocks-tdg1-prd.fly.dev/docs/components/table

This snippet demonstrates the basic structure and usage of the Tables component. It outlines the necessary HTML markup to render a table with standard features.

```html
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Drawer Component - Marketing Components

Source: https://saasblocks-tdg1-prd.fly.dev/docs/components/drawer

Details the usage of the Drawer component in the Marketing Components section, potentially for features like promotional pop-ups or additional information on landing pages.

```html
<!-- Example of a Drawer component in marketing -->
<div class="drawer marketing-drawer">
  <div class="drawer-content">
    <!-- Marketing-specific drawer content -->
  </div>
</div>
```
Tokens:
Raw