back to main site
Esbie Components is a custom-built component library designed to streamline the process of building front-end apps and websites for my personal projects. Instead of relying on existing libraries like MUI or Chakra UI, I wanted something that leaned into my front-end skills while adding a personalised touch.
The library includes reusable, styled components that adhere to the atomic design methodology. It serves as both a productivity booster and a creative outlet, giving me control over aesthetics and functionality without reinventing the wheel for every project.
The inspiration for Esbie Components came from my admiration for clean, functional design seen in tools like Vercel, GitHub, and OpenAI. I aimed to incorporate elements of brutalism while keeping the interface modern and approachable.
It's a nod to the leaders in tech while allowing room for my own creative expression.
Esbie Components is built with React and TypeScript, bundled using Rollup for distribution on NPM. SCSS modules are used for styling, enabling both consistency and flexibility. It supports features like reusable layouts, light and dark mode (upcoming), and custom themes.
This project gave me an opportunity to revisit front-end best practices and sharpen my skills in bundling and distributing packages. Beyond that, it's been an enjoyable creative exercise—a mix of coding and design that lets me make something uniquely mine.
Future plans include expanding the component library with additional templates and utilities, fixing import issues, and enhancing customisation options.
The library is structured around atomic design principles, with components categorised into atoms, molecules, organisms, and templates. Rollup is used for bundling, ensuring the library can be imported seamlessly into other projects. Each component is built with reusability in mind, with SCSS modules used to encapsulate styles.
A sandbox app serves as a playground for developing and testing the components in real-time.
To use Esbie Components in your own project, simply install it from NPM using the command:
`npm install esbie-component-library`
Then, import components as needed:
`import { Button, CardGallery, FullWidthSection } from 'esbie-component-library';`
You can check out the full documentation and examples on [GitHub](https://github.com/your-repo-link).