Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sailui/ui

Basic UI components for Tailwind CSS.
https://github.com/sailui/ui

tailwind tailwindcss ui ui-components

Last synced: 7 days ago
JSON representation

Basic UI components for Tailwind CSS.

Awesome Lists containing this project

README 

        
# Sail UI



[![npm](https://img.shields.io/npm/v/sailui)](https://www.npmjs.com/package/sailui)

[![GitHub license](https://img.shields.io/github/license/sailui/ui)](https://github.com/sailui/ui/blob/master/LICENSE.md)



A collection of basic UI components built on Tailwind CSS.



[Demo](https://sailui.github.io/).



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



```bash

npm install sailui

```



Add `sailui` to your `tailwind.config.js` file:



```js

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.



```html



```



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



```js

module.exports = {

  // ...

  theme: {

    extend: {

      colors: {

        primary: "#ff6394",

      },

    },

  },

};

```



## What's Included



### Basic Components



These components are included:



- [.btn](#buttons)

- [.card](#cards)

- [.alert](#alerts)

- [.badge](#badges)

- [.link](#links)



#### Buttons



```html

Sign Up



Find Out More

```



#### Cards



```html

Lorem ipsum dolor sit amet...


```



#### Alerts



```html



  Normal stuff! zero concerns.






  All is clear! So far so good.






  Fantastic! You did it.






  Watch out! Things are going down south.






  Too late! It's hit the fan.



```



#### Badges



```html

Default



Light



Blue



Green



Yellow



Red

```



#### Links



```html

This is a link.

```



### Forms



Sail UI uses the [`forms` plugin from Tailwind Labs](https://github.com/tailwindlabs/tailwindcss-forms)

to reset form styles.

 

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



- [.form-input](#form-input)

- [.form-select](#form-select)

- [.form-radio](#form-radio)

- [.form-checkbox](#form-checkbox)

- [.form-textarea](#form-textarea)



#### Form Input



```html



  Name

  



```



#### Form Select



```html



  Pet of Choice

  

    Cat

    Catty

    Kitty

    Kat

  



```



#### Form Radio



```html



  Age Group

  


    

      

      Cat

    

    

      

      Kitty

    

  




```



#### Form Checkbox



```html



  

    

    I agree to your terms.

  



```



#### Form Textarea



```html



  Notes

  



```

### 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` :



```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](LICENSE.md) for more information.