{"id":13449789,"url":"https://github.com/sailui/ui","last_synced_at":"2025-04-09T10:05:34.014Z","repository":{"id":45100208,"uuid":"255079573","full_name":"sailui/ui","owner":"sailui","description":"Basic UI components for Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2022-01-08T11:58:36.000Z","size":2954,"stargazers_count":245,"open_issues_count":1,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-02T08:48:33.544Z","etag":null,"topics":["tailwind","tailwindcss","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://sailui.github.io/ui","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sailui.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-12T12:39:55.000Z","updated_at":"2025-03-15T18:07:30.000Z","dependencies_parsed_at":"2022-09-02T22:33:53.455Z","dependency_job_id":null,"html_url":"https://github.com/sailui/ui","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sailui%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sailui%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sailui%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sailui%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sailui","download_url":"https://codeload.github.com/sailui/ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018060,"owners_count":21034048,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwind","tailwindcss","ui","ui-components"],"created_at":"2024-07-31T06:00:56.193Z","updated_at":"2025-04-09T10:05:33.960Z","avatar_url":"https://github.com/sailui.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","CSS","Running the update"],"sub_categories":["By Popularity"],"readme":"# Sail UI\n\n[![npm](https://img.shields.io/npm/v/sailui)](https://www.npmjs.com/package/sailui)\n[![GitHub license](https://img.shields.io/github/license/sailui/ui)](https://github.com/sailui/ui/blob/master/LICENSE.md)\n\nA collection of basic UI components built on Tailwind CSS.\n\n[Demo](https://sailui.github.io/).\n\n## Who's this for?\n\n### Serial Users\n\nIf you're already using Tailwind and you find yourself repeatedly creating\na few common component classes for every project, **Sail UI** is for you.\n\nThis package helps you with a few basic components, so that you can start\nbuilding your prototype / draft / MVP before you get down to polishing your\nfully custom design.\n\nUse `.btn`, `.card` and other classes you're familiar with to get you started and customize them later when you need to.\n\n### Newcomers\n\nIf you're moving away from another framework to Tailwind\nand you're afraid of taking the leap because you don't want to\nbuild all of those lovely components from scratch yourself,\n**Sail UI** will help you with the transition.\n\n## Installation\n\n```bash\nnpm install sailui\n```\n\nAdd `sailui` to your `tailwind.config.js` file:\n\n```js\nmodule.exports = {\n  // ...\n  plugins: [require(\"sailui\")],\n};\n```\n\n### Compatibility\n| Tailwind CSS  | Sail UI |\n| ------- | ------- |\n| v1.9.0  | v0.4.0  |\n| v2.0.0  | v0.5.0  |\n| v3.0.0  | v0.7.0  |\n\n\n## Usage\n\nStart using Sail UI component classes just like how you're used to.\n\n```html\n\u003ca href=\"/\" class=\"btn\"\u003e\u003c/a\u003e\n```\n\n### Customizing the primary color\n\nSimply add a `theme.colors.primary` key to your `tailwind.config.js` and Sail UI will use it as the default color\nfor all available components:\n\n```js\nmodule.exports = {\n  // ...\n  theme: {\n    extend: {\n      colors: {\n        primary: \"#ff6394\",\n      },\n    },\n  },\n};\n```\n\n## What's Included\n\n### Basic Components\n\nThese components are included:\n\n- [.btn](#buttons)\n- [.card](#cards)\n- [.alert](#alerts)\n- [.badge](#badges)\n- [.link](#links)\n\n#### Buttons\n\n```html\n\u003cbutton class=\"btn\"\u003eSign Up\u003c/button\u003e\n\n\u003cbutton class=\"btn btn-outline\"\u003eFind Out More\u003c/button\u003e\n```\n\n#### Cards\n\n```html\n\u003cdiv class=\"card\"\u003eLorem ipsum dolor sit amet...\u003c/div\u003e\n```\n\n#### Alerts\n\n```html\n\u003cdiv class=\"alert\"\u003e\n  \u003cstrong\u003eNormal stuff!\u003c/strong\u003e zero concerns.\n\u003c/div\u003e\n\n\u003cdiv class=\"alert alert-blue\"\u003e\n  \u003cstrong\u003eAll is clear!\u003c/strong\u003e So far so good.\n\u003c/div\u003e\n\n\u003cdiv class=\"alert alert-green\"\u003e\n  \u003cstrong\u003eFantastic!\u003c/strong\u003e You did it.\n\u003c/div\u003e\n\n\u003cdiv class=\"alert alert-yellow\"\u003e\n  \u003cstrong\u003eWatch out!\u003c/strong\u003e Things are going down south.\n\u003c/div\u003e\n\n\u003cdiv class=\"alert alert-red\"\u003e\n  \u003cstrong\u003eToo late!\u003c/strong\u003e It's hit the fan.\n\u003c/div\u003e\n```\n\n#### Badges\n\n```html\n\u003cspan class=\"badge\"\u003eDefault\u003c/span\u003e\n\n\u003cspan class=\"badge badge-light\"\u003eLight\u003c/span\u003e\n\n\u003cspan class=\"badge badge-blue\"\u003eBlue\u003c/span\u003e\n\n\u003cspan class=\"badge badge-green\"\u003eGreen\u003c/span\u003e\n\n\u003cspan class=\"badge badge-yellow\"\u003eYellow\u003c/span\u003e\n\n\u003cspan class=\"badge badge-red\"\u003eRed\u003c/span\u003e\n```\n\n#### Links\n\n```html\n\u003cspan\u003eThis is a \u003ca href=\"#\" class=\"link\"\u003elink\u003c/a\u003e\u003c/span\u003e.\n```\n\n### Forms\n\nSail UI uses the [`forms` plugin from Tailwind Labs](https://github.com/tailwindlabs/tailwindcss-forms)\nto reset form styles.\n \nOn top of the provided reset, these classes add an additional layer of styling to form elements:\n\n- [.form-input](#form-input)\n- [.form-select](#form-select)\n- [.form-radio](#form-radio)\n- [.form-checkbox](#form-checkbox)\n- [.form-textarea](#form-textarea)\n\n#### Form Input\n\n```html\n\u003clabel class=\"block\"\u003e\n  \u003cspan class=\"text-gray-700\"\u003eName\u003c/span\u003e\n  \u003cinput type=\"text\" class=\"form-input mt-1 block w-full\" /\u003e\n\u003c/label\u003e\n```\n\n#### Form Select\n\n```html\n\u003clabel class=\"block\"\u003e\n  \u003cspan class=\"text-gray-700\"\u003ePet of Choice\u003c/span\u003e\n  \u003cselect class=\"form-select mt-1 block w-full\"\u003e\n    \u003coption\u003eCat\u003c/option\u003e\n    \u003coption\u003eCatty\u003c/option\u003e\n    \u003coption\u003eKitty\u003c/option\u003e\n    \u003coption\u003eKat\u003c/option\u003e\n  \u003c/select\u003e\n\u003c/label\u003e\n```\n\n#### Form Radio\n\n```html\n\u003cdiv class=\"mt-4\"\u003e\n  \u003cspan class=\"text-gray-700\"\u003eAge Group\u003c/span\u003e\n  \u003cdiv class=\"mt-2\"\u003e\n    \u003clabel class=\"inline-flex items-center\"\u003e\n      \u003cinput type=\"radio\" class=\"form-radio\" name=\"age-group\" value=\"cat\" /\u003e\n      \u003cspan class=\"ml-2\"\u003eCat\u003c/span\u003e\n    \u003c/label\u003e\n    \u003clabel class=\"inline-flex items-center ml-6\"\u003e\n      \u003cinput type=\"radio\" class=\"form-radio\" name=\"age-group\" value=\"kitty\" /\u003e\n      \u003cspan class=\"ml-2\"\u003eKitty\u003c/span\u003e\n    \u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Form Checkbox\n\n```html\n\u003cdiv class=\"flex mt-6\"\u003e\n  \u003clabel class=\"flex items-center\"\u003e\n    \u003cinput type=\"checkbox\" class=\"form-checkbox\" /\u003e\n    \u003cspan class=\"ml-2\"\u003eI agree to your \u003cspan class=\"underline\"\u003eterms\u003c/span\u003e\u003c/span\u003e.\n  \u003c/label\u003e\n\u003c/div\u003e\n```\n\n#### Form Textarea\n\n```html\n\u003clabel class=\"block mt-6\"\u003e\n  \u003cspan class=\"text-gray-700\"\u003eNotes\u003c/span\u003e\n  \u003ctextarea class=\"form-textarea mt-1 block w-full\" rows=\"3\" placeholder=\"Write something...\"\u003e\u003c/textarea\u003e\n\u003c/label\u003e\n```\n### Container\n\nThe `mx-auto` style is automatically applied to center the default `.container` that comes out of the box with Tailwind.\n\n### Excluding components\n\nSimply pass an object with an array `exclude` in it to the registering of the plugin in your `tailwind.config.js` :\n\n```js\nmodule.exports = {\n  // ...\n  plugins: [\n    require(\"sailui\")({exclude: ['btn', 'alert']})\n  ],\n};\n```\nList of all components that can be excluded:\n\n- `alert`\n- `badge`\n- `btn`\n- `card`\n- `container`\n- `link`\n- `form` - excludes `checkbox`, `input`, `radio`, `select`, `textarea` and `@tailwindcss/forms` \n\n### Typography\n\nSensible default styles are applied to headings, paragraphs, and other elements of typography.\nThese are the covered elements:\n\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n- p\n\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsailui%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsailui%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsailui%2Fui/lists"}