Installation

Getting started takes two steps: install the package and import the styles. All you need is a project running Tailwind CSS v4 or later. The JavaScript, fonts, and icons below are optional.

Install the package

npm install starting-point-ui

Import the styles

Add the import to your main CSS file, after Tailwind:

app/globals.css

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

That's it: every component class is now available in your markup.

Add the JavaScript (optional)

Interactive components like dialogs, dropdowns, and tabs need the JavaScript module. Static components work without it.

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, import it in your entry file:

main.ts

import "starting-point-ui";

SSR frameworks

In a server-rendered framework, make sure the script runs on the client after the DOM is ready. This is how this site loads it, as 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)

The components render in your project's font through Tailwind's --font-sans token. The examples on this site use Inter, and to match that look, load Inter and set it as the 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>

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

Explore the components in the sidebar to see what's available, or head to the Customization guide to make the theme your own. If you run into any issues, check out the Help section.