JSPM

  • Created
  • Published
  • Downloads 195
  • Score
    100M100P100Q86706F
  • License MIT

Opinionated yet customizable Svelte-TailwindCSS component library

Package Exports

  • stwui
  • stwui/accordion
  • stwui/actions
  • stwui/actions/click-outside
  • stwui/actions/clipboard
  • stwui/actions/floating-ui
  • stwui/actions/tooltip
  • stwui/alert
  • stwui/autocomplete
  • stwui/avatar
  • stwui/avatar-group
  • stwui/badge
  • stwui/breadcrumbs
  • stwui/button
  • stwui/button-group
  • stwui/card
  • stwui/carousel
  • stwui/checkbox
  • stwui/chip
  • stwui/currency
  • stwui/date-picker
  • stwui/divider
  • stwui/drawer
  • stwui/dropdown
  • stwui/empty
  • stwui/enums
  • stwui/enums/upload-status
  • stwui/feed
  • stwui/file-picker
  • stwui/file-preview
  • stwui/icon
  • stwui/icons
  • stwui/input
  • stwui/input-number
  • stwui/layout
  • stwui/lightbox
  • stwui/list
  • stwui/media
  • stwui/menu
  • stwui/modal
  • stwui/notification
  • stwui/package.json
  • stwui/pagination
  • stwui/plugin
  • stwui/portal
  • stwui/post
  • stwui/progress
  • stwui/radio
  • stwui/rating
  • stwui/select
  • stwui/slider
  • stwui/statistic
  • stwui/steps
  • stwui/stores
  • stwui/stores/breakpoints
  • stwui/stores/theme
  • stwui/swap
  • stwui/table
  • stwui/tabs
  • stwui/text-area
  • stwui/timeline
  • stwui/toggle
  • stwui/types
  • stwui/types/carousel-slide
  • stwui/types/date-picker-action
  • stwui/types/file-picker-preview
  • stwui/types/lightbox-action
  • stwui/types/select-option
  • stwui/types/table-column
  • stwui/types/timeline-item
  • stwui/types/tw-sizes
  • stwui/utils
  • stwui/utils/composeIconSize
  • stwui/utils/computeProgress
  • stwui/utils/computeTrendPercent
  • stwui/utils/computeTrendValue
  • stwui/utils/copyToClipboard
  • stwui/utils/crossfade
  • stwui/utils/encodeSearchParams
  • stwui/utils/formatDate
  • stwui/utils/formatFileSize
  • stwui/utils/formatNumber
  • stwui/utils/trapFocus
  • stwui/utils/twSizes

Readme

Under Development npm version Chat license

Svelte-TailwindCSS UI (STWUI) is currently in pre-release. There has been a lot work already but a lot of work still needs to be done. Most of my inspiration comes from TawilwindUI with a desire to create a component library similar to React component libraries that are less reliant on remembering class names. Contributors and collaborators 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.

Installing

  • Run npm install stwui
  • Add require('stwui/plugin') to the plugins section of your tailwind.config.cjs
  • Add './node_modules/stwui/**/*.{svelte,js,ts,html}' to the content array of your tailwind.config.cjs
module.exports = {
    content: [
        './src/**/*.{html,js,svelte,ts}',
        './node_modules/stwui/**/*.{svelte,js,ts,html}'
    ],
    plugins: [
        require('@tailwindcss/forms'),
        require('stwui/plugin')
    ]
};

How to Contribute

  • Clone the project to your local machine: git clone git@github.com: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/.

Useful Resources

Contributors

Craig Howell N00nDay https://github.com/N00nDay