Examples

Introduction

An open-source component library for Tailwind CSS. Inspired by shadcn/ui, Starting Point UI gives you the same beautiful design system without locking you into a framework. React, Vue, Angular, Django, Laravel, Rails, plain HTML - if it runs Tailwind, it works.

What is Starting Point UI?

Tailwind CSS is great for styling, but it doesn't include pre-built components or JavaScript for interactive elements. Starting Point UI provides both - a complete set of components like buttons, cards, form elements, dialogs, and more, along with optional JavaScript for interactive components. Everything is built as Tailwind utilities, so you style and customize components the same way you already work with Tailwind. Add classes like btn, card, or input and you're done.

It works with any web stack, regardless of framework. The JavaScript uses event delegation, so interactive components work automatically whether elements are rendered on page load or added dynamically later. Starting Point UI is designed to be the first thing you install in any new project - regardless of what you're building, the components are always the same, so you can start every project from the same familiar foundation.

Features

  • Framework-agnostic - works with any web stack that supports Tailwind
  • Easy to use - add classes like btn, card, or input and you're done
  • Accessible - built with WAI-ARIA patterns, keyboard navigation, and focus management
  • Dark mode - works out of the box with Tailwind's dark mode
  • Themeable - easy to customize and make your own, follows the same theming principles as shadcn/ui
  • Lightweight - just CSS and a small JavaScript module for interactive components
  • Clean markup - readable class names, no class soup

FAQ

How is this different from shadcn/ui?

shadcn/ui is a collection of copy-paste components built for React. Starting Point UI is an installable npm package that works with any framework. The styling and theming follow the same conventions, so if you're familiar with shadcn/ui you'll feel right at home.

Do I need React to use this?

No. Starting Point UI works with any web stack that supports Tailwind CSS. The JavaScript is vanilla and uses event delegation, so it works with any rendering model.

Do I need to install JavaScript?

The JavaScript is optional. If you only need static components like buttons, cards, and badges, the CSS is all you need. JavaScript is only required for interactive components like dialogs, dropdowns, and tabs.

Can I customize it to match my brand?

Yes, it's easy to customize. Starting Point UI uses CSS variables for colors, radius, fonts, and spacing, so you can quickly adjust everything to match your brand. Check out the Theming guide to learn more.

What version of Tailwind CSS do I need?

Starting Point UI requires Tailwind CSS v4 or later.

Ready to get started? Head over to the Installation guide.