Solibee: A Brand New UI Component Collection for SolidJS
SolidJS is a cutting-edge frontend framework that is incredibly popular with developers and rapidly carving out its place alongside mainstays like React, Angular, Vue & Svelte. However, because Solid is relatively new on the scene, anyone who wants to spin up a new project in SolidJS (or migrate an existing project) will find that much of the vast ecosystem of tooling that exists for other frameworks doesn’t yet exist for Solid.
Enter: 🍯 💻 🐝 Solibee! 🐝 💻 🍯
The Solution
In response to this issue, the team behind Solibee decided to take on the challenge. We’ve designed a suite of ready-to-use, open-source UI components that are specifically designed for SolidJS and able to be integrated into your project today.
They’ve been thoroughly tested with industry-standard testing tools, and are styled with TailwindCSS, allowing our components to be quickly and seamlessly customized to fit the needs of any project.
Our goal is to expand the suite of options currently available to the existing community of SolidJS developers. Like all open-source projects, Solibee wouldn’t exist without the work of many incredible developers and their projects (with a special shoutout to the absolutely fabulous corvu.dev and its developers!) We envision that users will use our project alongside existing libraries, and hope that others will in turn take inspiration from our work and continue to build up the Solid community.
Now let’s get into it!
Why Not a Library?
Traditional component libraries, the type you import all at once from npm, have been a mainstay for years. They’re simple, straightforward, and yet… the bloat, am I right???
It’s far too common that you need just a few components for your project, but to do that you find yourself adding a huge library to your dependencies, ballooning your lightweight app with components you’ll never use. At the same time, customizing those components takes time and energy that would be better spent elsewhere.
These libraries are still extremely useful in many projects, but our aim is towards something a bit different. Solibee offers a solution in which you’re able to only import the code you need and nothing more. And when you need to customize it, it’s right there with your other components, letting you shape it into exactly what you need and/or place it alongside any components you’ve already written yourself.
Styling is accomplished by harnessing the power of Tailwind, a versatile CSS framework that enables developers to “build any design, directly in your markup.” TailwindCSS is simple, fast, and scalable, which makes it a popular choice for modern web development, and allows for Solibee to deliver to you a single, clean file with everything you need and nothing that you don’t.
How To Use Solibee
- Head on over to our website at solibee.dev.
- Click on “Get Started” and choose any of our ready-to-go components to add to your project.
- Choose your installation type!
- “Automatic Installation” will let you quickly import a component directly into your project via the CLI
- “Manual Installation” takes you step by step through configuring Tailwind and then copy/pasting the component code wherever you’d like it.
- If you’ve chosen to use the CLI, find the “solibee” folder in the root directory of your project with any and all components ready to be implemented!
For additional information, please take a look at our project on GitHub or npm. You can also find plenty of details on our website solibee.dev.
Lastly, please be a contributor! We welcome developers to contribute to Solibee, which is (and will always be) open-source. We would love to see new features, new components, better accessibility (especially for our components currently in beta), and anything else you’d like to build with us. Come join the hive! 🐝😇
The Team
For more info on the Solibee team, or to get in touch with us directly, find us here!
