Finity-UI

Finity-UI

FinityUI is an open source components library built on Tailwind CSS and based on Finity Design System by Polygon.

Inspiration

Design standard in Web3 is scattered all over the place. UX is a very challenging topic in web3. FinityUI tries to solve this and standardize good UX practices as well as enable the developers to build web3 dapps faster. Tailwind is an easy to use utility library that is easily extendable and flexible. Their variant and just in time compiler changed the game for developers.

What it does

FinityUI tries to help developers build Web3 dapps even faster with components built with the utility classes from TailwindCSS and Figma file from Finity.

To use finity, you just need to install finity-ui from npm.

Make sure that you have Node.js and Tailwind CSS installed.

Install finity-ui as a dependency using npm by running the following command:

npm i finity-ui

OR

yarn add finity-ui

How we built it

I used TSDX and Storybook to get started with making the base for building the components and UI elements. It is based on the Finity Design System by Polygon. I used the designs from the figma file and hardcoded it into TailwindCSS utility classes, with support for further customization.

Challenges

Due to time limitations I wasn't able to convert many of the components in the Finity Design system.

Accomplishments

Made a bunch of UI elements and few components like Connect wallet button, Loading spinner, Modals, Notification/Alerts, Cards etc.

What's next for Finity-UI

This is just the start to unlock the true potential of the Finity Design System. I plan to add 500+ components to the library with native React hooks with built in web3 integration, fully open-source. Add support for more frameworks. Build a community to work on the improvement of UX in Web3. Promote good UX practices. Create an NFT marketplace for UI designs, fully-loaded components, themes, UI kits, website templates.

Built With

• finity
• react
• storybook
• tailwindcss
• typescript