Installation

Starting Point UI is a component library built for Tailwind CSS. It provides class names for common components such as buttons, cards, form elements, dialogs, and more.

Prerequisites

A project using Tailwind CSS v4+

Install the package

npm install starting-point-ui

Import the styles

Add the import to your main CSS file:

app/globals.css

@import "tailwindcss";
@import "starting-point-ui";

Add the JavaScript (optional)

For interactive components like dialogs and dropdowns, you can include the JavaScript.

Using a CDN

Add the script tag to your HTML file:

index.html

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]"
  type="module"
></script>

Using a bundler

For client-side bundlers like Vite, you can import directly in your entry file:

main.ts

import "starting-point-ui";

SSR frameworks

If you're using a framework with server-side rendering, you may need to ensure the script only runs on the client after the DOM is ready. This is how it's loaded on this site, which is a Next.js App Router project:

components/starting-point-ui.tsx

"use client";
 
import { useEffect } from "react";
 
export function StartingPointUI() {
  useEffect(() => {
    import("starting-point-ui");
  }, []);
 
  return null;
}

Then include it in your root layout:

app/layout.tsx

import { StartingPointUI } from "@/components/starting-point-ui";
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <StartingPointUI />
      </body>
    </html>
  );
}

Font (optional)

By default the package uses Tailwind's --font-sans for body text, and --font-heading for headings (which inherits from --font-sans unless overridden). The examples on this site use Inter — to match that look, load Inter and set it as the body font:

@import url("https://fonts.bunny.net/css?family=inter:400,500,600,700");
 
@theme inline {
  --font-sans: "Inter", sans-serif;
}

Or load Inter via a <link> tag in your HTML:

<head>
  <link rel="preconnect" href="https://fonts.bunny.net" />
  <link
    href="https://fonts.bunny.net/css?family=inter:400,500,600,700"
    rel="stylesheet"
  />
</head>

To use a different font for headings, override --font-heading:

@theme inline {
  --font-heading: "Your Heading Font", serif;
}

Icons (optional)

Components automatically style SVG icons placed inside them, so you can drop in any inline SVG:

<button class="btn">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M5 12h14" />
    <path d="m12 5 7 7-7 7" />
  </svg>
  Continue
</button>

The examples on this site use icons from Lucide, but any SVG-based icon library works. Lucide ships official packages for most frameworks, as static SVGs, or as a plain script — see the Lucide guide for all the options.

You're all set

You're now ready to start using Starting Point UI in your project. Explore the components in the sidebar to see what's available. If you run into any issues, check out the Help section.