Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sailboatui/sailboatui
Sailboat UI is a modern UI component library for Tailwind CSS
https://github.com/sailboatui/sailboatui
css html responsive tailwind-css tailwindcss ui ui-components
Last synced: 23 days ago
JSON representation
Sailboat UI is a modern UI component library for Tailwind CSS
- Host: GitHub
- URL: https://github.com/sailboatui/sailboatui
- Owner: sailboatui
- License: mit
- Created: 2022-09-24T02:39:51.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-01T13:58:20.000Z (6 months ago)
- Last Synced: 2024-05-20T19:22:27.884Z (6 months ago)
- Topics: css, html, responsive, tailwind-css, tailwindcss, ui, ui-components
- Language: HTML
- Homepage: https://sailboatui.com
- Size: 669 KB
- Stars: 1,168
- Watchers: 7
- Forks: 35
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - sailboatui/sailboatui - Sailboat UI is a modern UI component library for Tailwind CSS (HTML)
README
Sailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open-source Tailwind CSS components, and make it easy to build your products.
## Documentation
For the full documentation, visit [sailboatui.com](https://sailboatui.com/).
## Meet our sponsors
| [MagickPen](https://magickpen.com/)| [OpenL](https://openl.io/)| [magickimg](https://magickimg.com/)|
| --- | ------ | ------|
| 
| 
| 
|
| AI Writing Assistant, powered by ChatGPT | Amazing Translator, powered by AI | Boost Your images Powered by AI |
## Components
Avatar
Badge
Button
Card
Dropdown
Input
Notification
Pagination
View All
## Installation
```bash
npm install -D tailwindcss
```
Sailboat UI is a modern UI component library for Tailwind CSS, you just need to install Tailwind CSS and configure it. Learn [how to install Tailwind CSS](https://tailwindcss.com/docs/installation).
## Configuration
You need to add this to your `tailwind.config.js` file.
```js
// tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
// Set font family
fontFamily: {
sans: ["Inter", ...defaultTheme.fontFamily.sans],
},
// Set theme colors (Required config!)
colors: {
primary: colors.blue,
secondary: colors.slate,
},
},
},
// Add plugins
plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};
```
More configuration options are available in the [Sailboat UI Quick Start](https://sailboatui.com/docs/getting-started/quick-start/).
## Development
Sailboat UI is an open-source project that you can contribute to on [GitHub](https://github.com/sailboatui/sailboatui). If you appreciate the project, please consider giving it a star to show your support. Thank you.
1. You need [Hugo](https://gohugo.io/) to run the development server. If you have [Homebrew](https://brew.sh/) you can do the following:
```bash
brew install hugo
```
2. Clone the repository and install the dependencies.
Run the development server.
```bash
npm run dev
```
4. Open [http://localhost:1313/](http://localhost:1313/) in your browser.
- `npm run dev`: Run the dev server.
- `npm run build`: Build the static site.