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/starting-point-ui@0.7.0"
  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)

The examples on this site use Inter as the font. If you want the same look and feel, you can add it to your project. Here's an example using a CDN:

<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>

Or load it directly in your CSS:

@import url("https://fonts.bunny.net/css?family=inter:400,500,600,700");

Then set it as the default font:

@theme inline {
  --font-sans: "Inter", sans-serif;
}

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.