Basic UI components for Tailwind CSS.
Alternatives To Ui
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
13 hours ago13mitPHP
Admin panel, form builder and table builder for Laravel. Built with the TALL stack. Designed for humans.
Tailwindcss Forms3,14852921 days ago46September 02, 20222mitHTML
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
15 hours ago14otherTypeScript
Open Source Experience Management Solution
Flowbite Svelte96312a day ago291November 14, 202273mitSvelte
Official Svelte components built for Flowbite and Tailwind CSS
Tall Forms64112 months ago120March 11, 20225mitPHP
Laravel Livewire (TALL-stack) form generator with realtime validation, file uploads, array fields, blade form input components and more.
23 days ago7mitJavaScript
Vue form components with server-side validation in mind
Laravel Form Components264
4 days ago70October 20, 2022mitPHP
Form components built for Tailwind & Livewire.
a year ago11January 08, 2022mitJavaScript
Basic UI components for Tailwind CSS.
Instagram Clone68
11 days ago17TypeScript
Instagram 2.0 with REACT.JS! (Next.js, TypeScript, NextAuth.js v4.17.0, Tailwind CSS, Firebase v9, Framer Motion, Image Uploading, Google Authentication,, Instagram Profile)
Laravel Casts5712 years ago137September 15, 202021mitPHP
Form builder for Laravel.
Alternatives To Ui
Select To Compare

Alternative Project Comparisons

Sail UI

npm GitHub license

A collection of basic UI components built on Tailwind CSS.


Who's this for?

Serial Users

If you're already using Tailwind and you find yourself repeatedly creating a few common component classes for every project, Sail UI is for you.

This package helps you with a few basic components, so that you can start building your prototype / draft / MVP before you get down to polishing your fully custom design.

Use .btn, .card and other classes you're familiar with to get you started and customize them later when you need to.


If you're moving away from another framework to Tailwind and you're afraid of taking the leap because you don't want to build all of those lovely components from scratch yourself, Sail UI will help you with the transition.


npm install sailui

Add sailui to your tailwind.config.js file:

module.exports = {
  // ...
  plugins: [require("sailui")],


Tailwind CSS Sail UI
v1.9.0 v0.4.0
v2.0.0 v0.5.0
v3.0.0 v0.7.0


Start using Sail UI component classes just like how you're used to.

<a href="/" class="btn"></a>

Customizing the primary color

Simply add a theme.colors.primary key to your tailwind.config.js and Sail UI will use it as the default color for all available components:

module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: "#ff6394",

What's Included

Basic Components

These components are included:


<button class="btn">Sign Up</button>

<button class="btn btn-outline">Find Out More</button>


<div class="card">Lorem ipsum dolor sit amet...</div>


<div class="alert">
  <strong>Normal stuff!</strong> zero concerns.

<div class="alert alert-blue">
  <strong>All is clear!</strong> So far so good.

<div class="alert alert-green">
  <strong>Fantastic!</strong> You did it.

<div class="alert alert-yellow">
  <strong>Watch out!</strong> Things are going down south.

<div class="alert alert-red">
  <strong>Too late!</strong> It's hit the fan.


<span class="badge">Default</span>

<span class="badge badge-light">Light</span>

<span class="badge badge-blue">Blue</span>

<span class="badge badge-green">Green</span>

<span class="badge badge-yellow">Yellow</span>

<span class="badge badge-red">Red</span>


<span>This is a <a href="#" class="link">link</a></span>.


Sail UI uses the forms plugin from Tailwind Labs to reset form styles.

On top of the provided reset, these classes add an additional layer of styling to form elements:

Form Input

<label class="block">
  <span class="text-gray-700">Name</span>
  <input type="text" class="form-input mt-1 block w-full" />

Form Select

<label class="block">
  <span class="text-gray-700">Pet of Choice</span>
  <select class="form-select mt-1 block w-full">

Form Radio

<div class="mt-4">
  <span class="text-gray-700">Age Group</span>
  <div class="mt-2">
    <label class="inline-flex items-center">
      <input type="radio" class="form-radio" name="age-group" value="cat" />
      <span class="ml-2">Cat</span>
    <label class="inline-flex items-center ml-6">
      <input type="radio" class="form-radio" name="age-group" value="kitty" />
      <span class="ml-2">Kitty</span>

Form Checkbox

<div class="flex mt-6">
  <label class="flex items-center">
    <input type="checkbox" class="form-checkbox" />
    <span class="ml-2">I agree to your <span class="underline">terms</span></span>.

Form Textarea

<label class="block mt-6">
  <span class="text-gray-700">Notes</span>
  <textarea class="form-textarea mt-1 block w-full" rows="3" placeholder="Write something..."></textarea>


The mx-auto style is automatically applied to center the default .container that comes out of the box with Tailwind.

Excluding components

Simply pass an object with an array exclude in it to the registering of the plugin in your tailwind.config.js :

module.exports = {
  // ...
  plugins: [
    require("sailui")({exclude: ['btn', 'alert']})

List of all components that can be excluded:

  • alert
  • badge
  • btn
  • card
  • container
  • link
  • form - excludes checkbox, input, radio, select, textarea and @tailwindcss/forms


Sensible default styles are applied to headings, paragraphs, and other elements of typography. These are the covered elements:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • p


The MIT License (MIT). Please see License File for more information.

Popular Form Projects
Popular Tailwindcss Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.