Svelte-TailwindCSS UI (stwui) is an opinionated, customizable component library for Svelte and TailwindCSS. Inspired by Tailwind UI, it aims for a component API you compose with props instead of memorizing class names. A live showcase of all 49 components is at stwui.vercel.app.
stwui is stable and feature-complete for Svelte 4 + TailwindCSS, with 49 components. It grew to 450+ stars and is still installed from npm regularly.
It is no longer under active development and has not been migrated to Svelte 5, but it remains usable as-is for Svelte 4 projects. Issues and pull requests are still welcome.
A showcase can be found at https://stwui.vercel.app/. Documentation is still forthcoming but you can at least see the components being used.
- Run
npm install stwui - Add
require('stwui/plugin')to thepluginssection of yourtailwind.config.cjs - Add
'./node_modules/stwui/**/*.{svelte,js,ts,html}'to thecontentarray of yourtailwind.config.cjs
module.exports = {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/stwui/**/*.{svelte,js,ts,html}'
],
plugins: [
require('@tailwindcss/forms'),
require('stwui/plugin')
]
};
- Clone the project to your local machine:
git clone [email protected]:N00nDay/stwui.git MY-PROJECT-NAME && cd MY-PROJECT-NAME - Install dependancies with
npm install - Start your dev server with
npm run dev - Make changes, and submit your pull request.
📖 The docs are included in this repo which is itself a SvelteKit app. You'll find the pages for each component within src/routes/.
Craig Howell N00nDay https://github.com/N00nDay
