Choose best approach to implement all or part of Gitcoin Design System

[chibie]

User Story:

As a Developer I want to utilize reusable components that match Gitcoin Design System So that I can be more productive and implement user interfaces quicker

Product & Design Links:

https://www.figma.com/file/DtATlHJin3Ifty1EWwMGGj/Gitcoin-Tailwind-UI

Tech Details:

We want to implement the Gitcoin Design System in our project and are considering two CSS-in-JS frameworks: Tailwind-Styled-Components and Chakra UI. We will compare both approaches to identify the strengths and weaknesses of each.

Example Code for Tailwind-Styled-Components:

import tw from 'tailwind-styled-components';

type ButtonProps = {
  $variant?: "solid" | "outline";
};

const Button = tw.button`
  px-4 py-2 rounded-lg font-bold text-white 
  ${(props: ButtonProps) => props.$variant === 'primary' ? 'bg-blue-500 hover:bg-blue-600' : 'bg-gray-500 hover:bg-gray-600'}
`;

export default function App() {
  return (
    <div>
      <Button $variant="primary">Click me</Button>
      <Button $variant="secondary">Click me too</Button>
    </div>
  );
}

The above example allows us to continue using Tailwind classes.

Example Code for Chakra UI:

import { Button } from "@chakra-ui/react"

export default function App() {
  return (
    <div>
      <Button colorScheme="blue" size="md" variant={variant}>
        Click me
      </Button>
      <Button colorScheme="gray" size="md" variant={variant}>
        Click me too
      </Button>
    </div>
  );
}

Open Questions:

Notes/Assumptions:

[nutrina]

I think this is a great initiative.

What my expectation from this would be to have a clear guide (basically some samples, ready for copy & paste) for the most common UI components:

• how to create buttons?
  • primary, secondary, etc ...
  • buttons with icons
• how to create modals
• how to create cards
• how to create toasta, notifications, etc ...
• forms
• ....

Right now, it is not clear which library to look into when we build new stuff? Is it chakra, or tailwind? Having some re-usable components would definitely be an advantage. But most important for me is a guide with some example, where I can look into whenever I need something

[tim-schultz]

This is a great idea!