Sensel

mielsense
1

a selection of nice utils for svelte 5 (custom library + cli + motion wrapper) 🌼

sensel

          |\      _,,,---,,_
    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

🌟 Features

🎨 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

📦 Installation

Option 1: Full Library Installation

npm install @sensel/ui

npm install @sensel/motion

Option 2: CLI + Individual Components

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 user

🎨 Components

The component library is built on top of shadcn-svelte, extending it with additional features and customizations.

Available Components and Actions

Each component can be installed individually using the CLI:

sensel add <item-name>

🍊 Icons

The animated icons come from ji3sr/icons, all credits given to the original authors.

💜 Motion wrapper

This is a svelte wrapper around the motion library !

🛠️ CLI Commands

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

📝 License

Licensed under the MIT License.

🤝 Contributing

Currently not open for contributions.

🙏 Acknowledgments

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

Top categories