CapsuleUI

Native Web Components • Unstyled-by-design • Bring your own design system

---

Getting Started

1. Initialize global Capsule folder (templates and globals):

``bash
npx @capsuleui/core init


or choose a custom base directory


npx @capsuleui/core init --dir ./playground
`

2. Add a component (installs into @capsule/components/-):

`bash
npx @capsuleui/core add Slider --prefix ui
`

This will also:

- Inject component CSS into @capsule/global.css
- Inject component JS into @capsule/index.js

3. Run the playground (Vite):

`bash
npm run play


or


yarn play
`

Quick Preview (Playground)

- Entry HTML: playground/index.html
- Global styles: playground/@capsule/global.css
- Components entry: playground/@capsule/index.js

Open the dev server and experiment with components right away.

Project Structure

- src/@template/ — template used by capsule init
- @capsule/ — generated global folder in your project (globals + components)
- global.css — global CSS variables, resets and component imports
- components/init.js — entry point that imports all installed components
- components/-/ — individual component source
- public/ — static assets (e.g. images)
- playground/ — local demo environment

Commands

- npx @capsuleui/core init [-d, --dir

] — create @capsule folder from template
- capsule add [-p, --prefix ] [-m, --minify] — install a component
- npm run play — run Vite dev server for playground`

License

MIT