|\ _,,,---,,_
ZZZzz /,`.-'``' -. ;-;;,_
|,4- ) )-,_. ,\ ( `'-'
'---''(_/--' `-'\_) sensel
A beautiful, accessible component/action library for Svelte 5, with a powerful CLI for seamless integration.
Note
Documentation available soon at: Not available yet
- 🎨 Beautiful, customizable components
- ♿ Accessibility-first design
- 🚀 Svelte 5 ready
- 🛠️ Powerful CLI for component management
- 🎯 Type-safe with TypeScript
- 🎭 Style variants with tailwind-variants
- 🎨 Tailwind CSS styling
- 🍊 Animated icons imporation via cli
- 💜 Motion.dev wrapper
npm install @sensel/uinpm install @sensel/motion- Initialize a new project:
npx @sensel/cli init my-project
cd my-project
npm install- Add components as needed:
npx @sensel/cli add button
npx @sensel/cli add card
npx @sensel/cli icon user- Remove components/actions/icons when not needed:
npx @sensel/cli remove button
npx @sensel/cli remove pixelate
npx @sensel/cli remove userThe component library is built on top of shadcn-svelte, extending it with additional features and customizations.
Each component can be installed individually using the CLI:
sensel add <item-name>The animated icons come from ji3sr/icons, all credits given to the original authors.
This is a svelte wrapper around the motion library !
| Command | Description |
|---|---|
npx @sensel/cli init <project-name> |
Initialize a new project using the template |
npx @sensel/cli add <item-name> |
Add a component/action to your project |
npx @sensel/cli icon <icon-name> |
Add an icon to your project |
npx @sensel/cli remove <item-name/icon-name> |
Remove a component from your project |
Licensed under the MIT License.
Currently not open for contributions.
This project builds upon shadcn-svelte for its base components.
This project uses ji3sr/icons for all its animated icons.
This project provides a wrapper around the awsome motion library.
Made with 🖤 by miel