Solana Component Library

React components for a Rust blockchain

Modern React Component/UI Library

Problem: Solana didn't have an effective method to create new pages on their marketing site without having it done by an engineer.
Solution: Spearheaded the development of an industry-leading component library for Solana using React, TypeScript, Tailwind, & Storybook and seamlessly integrated it into Solana’s NextJS website with Builder.io for accelerated development cycles and heightened productivity.

From buttons and icons to heroes and card decks, the library had everything necessary to quickly and efficiently create a stunning website.

The word "Solana" set in front of a stylized glass "S"

Built as an NPM package

The library is a comprehensive and modular NPM package bundled with Rollup and PostCSS using a component-centric approach for efficient style management (injecting styles at the component level).

The library enables developers to create scalable and maintainable applications, leveraging industry-standard practices

Storybook display of the Solana slider component

Strongly typed

What's the point of an NPM package if it's not strongly typed? The API for every component is strongly typed with literals and accompanied by JSDoc notations for improved intellisense and developer experience.

Proper typing and documentation are equally important as performance optimizations if you ask me.

Gradients, glows, and animations, oh my!

Solana not only leverages the cutting edge of the modern jamstack, but it stays at the forefront of current design techniques while still maintaining its top-notch performance metrics. Knowing when and how to perform animations when rending from the server is a more modern challenge.

A unique approach to Icons

I created a single Icon "molecule" that renders SVG's from a singular sprite. The sprite is created (and optimized) at build time from all SVG's in the icons directory. Being strongly typed, rendering the icon you need is as easy as <Icon id="x-close" />

Key Points

  • My responsibilities included every aspect of the SDLC from choosing the tech stack to the CI/CD pipeline and everything in between

  • Highly composable and well-documented component library

  • Solved the problem of the client not having a way to effectively build new pages

  • Optimized, tree-shakable components with injected styles for maximum modularity

Next Project