Building headless eCommerce storefronts with React is far from the easiest task in the world. Building a full-fledged storefront usually means spending a lot of time reinventing the wheel and creating your own components from scratch. Buttons, hero banners, product cards, variant selectors, cart content tables and more, are part of every storefront out there, and yet we’ve all spent countless hours building them yet again for each new project.
Introducing the Trellis React Component Library — a lightweight, Tailwind-powered React component library for eCommerce storefronts. Our goal with the React Component Library is to empower developers by giving them the tools to build awesome eCommerce experiences faster.
Here are a few reasons why you should give this a try.
Why should I use the Trellis React Component Library?
1. It works out of the box with the best stack in the world (not up for debate)
- Tailwind CSS — A set of classes that allow you to never write custom CSS ever again. Throw our components into an existing Tailwind project, and they’ll use your theme’s colors, fonts, margin values and more automatically.
- NextJS — the most popular Server-Side Rendering framework for React. We built our components to be 100% compatible with SSR, meaning you can use them with NextJS if your heart desires.
- Storybook — the gold standard for component library development. Use our storybook instance to preview our components, read the built-in documentation and see how your own set of props would look in real life.
2. ADA Compliance
This is a major priority for us and is essential to building for the web. Recently, the US Department of Justice released a guideline on accessibility on the web. While it doesn’t adopt WCAG in its entirety, what is particularly insightful in the DOJ’s guidance statement are the examples of website accessibility barriers it does specifically list:
- Poor color contrast
- Use of color alone to give information
- Lack of text alternatives (“alt text”) on images
- No captions on videos
- Inaccessible online forms
- Mouse-only navigation (lack of keyboard navigation)
These examples are noteworthy because now that the DOJ has specifically identified them as barriers, if left unaddressed, they could trigger legal action, citing a violation of the ADA. As a result, the examples provided should become a minimum priority for any business or organization operating a website.
3. Open-source with a permissive license
@trelliscommerce/react-components is licensed under the MIT License, meaning you can use our components commercially, as well as modify them to fit your own needs. Feel free to contribute to our repository if the library is missing components that you’d like added, or if you would like to make improvements to existing components. We also encourage people to fork the library and make their own versions, although we would appreciate credit being given in your README.
4. Lower your tech debt risk and keep your team focused
Using the Trellis React Component library is as simple as running npm i @trelliscommerce/react-components. By using our components and keeping the library up-to-date, you benefit from our developers making your life easier and saving your team precious hours.
The library is regularly updated to add new features, bug fixes and reduce technical debt. Your team doesn’t have to worry about maintaining the components — they can focus on shipping features.
Currently Offered
