Tailwind CSS Component Library
Starting Point UI is a free, open-source Tailwind CSS component library that works with any web stack, no React required. You get beautiful, accessible components as simple semantic classes, with a small vanilla JavaScript module driving the interactive ones. It covers everything from buttons and forms to dialogs, dropdowns, sidebars, and chat UI.
An example
A profile dropdown with an account header, grouped shortcuts, and a nested submenu. The classes handle the design, the data attributes wire up the behavior, and the ARIA roles, keyboard navigation, and focus management come built in. Copy the code and it works.
<button
type="button"
id="profile-dropdown-trigger"
class="avatar size-9 shadow-xs"
aria-label="Open user menu"
>
<img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">LN</span>
</button>
<div
class="dropdown w-60"
data-sp-toggle="#profile-dropdown-trigger"
data-sp-placement="bottom-end"
>
<div class="item item-xs px-2 py-1.5">
<div class="item-media">
<span class="avatar"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">LN</span></span
>
</div>
<div class="item-content">
<div class="item-title">Leila Navarro</div>
<div class="item-description">[email protected]</div>
</div>
</div>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle></svg
>Profile<span class="dropdown-shortcut">⇧⌘P</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line></svg
>Billing<span class="dropdown-shortcut">⌘B</span></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
></path>
<circle cx="12" cy="12" r="3"></circle></svg
>Settings<span class="dropdown-shortcut">⌘,</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg
>Team</button
><button class="dropdown-item" type="button" id="profile-dropdown-invite">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line></svg
>Invite members<svg
class="ms-auto rtl:rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<path d="M12 17h.01"></path></svg
>Support
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item dropdown-item-destructive" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
<path d="m16 17 5-5-5-5"></path>
<path d="M21 12H9"></path></svg
>Log out<span class="dropdown-shortcut">⇧⌘Q</span>
</button>
</div>
<div
class="dropdown dropdown-sub w-44"
data-sp-toggle="#profile-dropdown-invite"
data-sp-mode="hover"
data-sp-placement="right-start"
>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg
>Email</button
><button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
></path></svg
>Message
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 12h8"></path>
<path d="M12 8v8"></path></svg
>More...
</button>
</div>Why Starting Point UI?
- Works everywhere: React, Vue, Angular, Laravel, Rails, Django, or plain HTML. If it runs Tailwind, it works.
- Easy to use: add classes like
btn,card, orinputand you're done. - Accessible: WAI-ARIA patterns, keyboard navigation, and focus management built in. Every example ships accessible markup you can copy as is.
- Themeable: colors, radius, and fonts are CSS variables, with dark mode out of the box. See Customization.
- Lightweight: just CSS and an optional JavaScript module.
- Clean markup: readable class names, no class soup.
Inspired by shadcn/ui
If you came looking for a shadcn/ui alternative that doesn't require React, you came to the right place. The design system is shadcn/ui's, so a btn, a card, or a dialog looks and behaves like its React counterpart, and existing shadcn/ui themes drop straight in unchanged.
Starting Point UI could not exist without shadcn/ui and these other open source projects. Much of what you find here, from the design system to the way the JavaScript is structured, comes from using them, studying their source code, and learning from the people behind them. Be sure to check them out.
Ready to get started? Head over to the Installation guide.