npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sailui

v0.7.0

Published

Basic UI components for Tailwind CSS.

Downloads

53

Readme

Sail UI

npm GitHub license

A collection of basic UI components built on Tailwind CSS.

Demo.

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.

Newcomers

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.

Installation

npm install sailui

Add sailui to your tailwind.config.js file:

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

Compatibility

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

Usage

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:

Buttons

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

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

Cards

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

Alerts

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

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

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

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

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

Badges

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

Links

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

Forms

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" />
</label>

Form Select

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

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>
    <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>
    </label>
  </div>
</div>

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>.
  </label>
</div>

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

Container

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

Typography

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

License

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