123 replies

Building a design system?

Hi Guys,
I'm taking first steps to build a design system... would love your advice before i go too deep.

I'm using tailwind-styled-components: https://github.com/MathiasGilson/tailwind-styled-component

For my first component, i created a Button, and used it, like so:

src/designsys/Button.tsx

src/designsys/Button.tsx

import tw from "tailwind-styled-components";

const Button = tw.div`
  flex 
  w-48
  items-center
  rounded-full
  bg-white/10
  px-4
  py-2
  font-semibold
  text-white
  no-underline
  transition
  hover:bg-white/20
`;

export default Button;

import tw from "tailwind-styled-components";

const Button = tw.div`
  flex 
  w-48
  items-center
  rounded-full
  bg-white/10
  px-4
  py-2
  font-semibold
  text-white
  no-underline
  transition
  hover:bg-white/20
`;

export default Button;

I then use it in my google login button:

import React from "react";
import { FaGoogle } from "react-icons/fa";
import { signIn } from "next-auth/react";
import Button from "src/designsys/Button";

type ButtonProps = {
  prompt?: string;
  provider?: "google" | "gmail";
};

const GoogleLoginButton: React.FC<ButtonProps> = ({
  prompt = "Login with Google",
  provider = "google",
}) => {
  return (
    <Button onClick={() => signIn(provider)}>
      <span>
        <FaGoogle />
      </span>
      &nbsp;&nbsp;
      {prompt}
    </Button>
  );
};

export default GoogleLoginButton;

import React from "react";
import { FaGoogle } from "react-icons/fa";
import { signIn } from "next-auth/react";
import Button from "src/designsys/Button";

type ButtonProps = {
  prompt?: string;
  provider?: "google" | "gmail";
};

const GoogleLoginButton: React.FC<ButtonProps> = ({
  prompt = "Login with Google",
  provider = "google",
}) => {
  return (
    <Button onClick={() => signIn(provider)}>
      <span>
        <FaGoogle />
      </span>
      &nbsp;&nbsp;
      {prompt}
    </Button>
  );
};

export default GoogleLoginButton;

It's simple and working nicely. Does anyone have any comments on how to do this better? Thanks!

GitHub

GitHub - MathiasGilson/Tailwind-Styled-Component: Create Tailwind C...

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering - GitHub - MathiasGilson/Tailwind-Styled-Component: Create Tailwind CS...

TTC

Theo's Typesafe Cult•4y ago•

123 replies

fotoflo

Building a design system?

src/designsys/Button.tsx

src/designsys/Button.tsx

import tw from "tailwind-styled-components";

const Button = tw.div`
  flex 
  w-48
  items-center
  rounded-full
  bg-white/10
  px-4
  py-2
  font-semibold
  text-white
  no-underline
  transition
  hover:bg-white/20
`;

export default Button;

import tw from "tailwind-styled-components";

const Button = tw.div`
  flex 
  w-48
  items-center
  rounded-full
  bg-white/10
  px-4
  py-2
  font-semibold
  text-white
  no-underline
  transition
  hover:bg-white/20
`;

export default Button;

I then use it in my google login button:

import React from "react";
import { FaGoogle } from "react-icons/fa";
import { signIn } from "next-auth/react";
import Button from "src/designsys/Button";

type ButtonProps = {
  prompt?: string;
  provider?: "google" | "gmail";
};

const GoogleLoginButton: React.FC<ButtonProps> = ({
  prompt = "Login with Google",
  provider = "google",
}) => {
  return (
    <Button onClick={() => signIn(provider)}>
      <span>
        <FaGoogle />
      </span>
      &nbsp;&nbsp;
      {prompt}
    </Button>
  );
};

export default GoogleLoginButton;

import React from "react";
import { FaGoogle } from "react-icons/fa";
import { signIn } from "next-auth/react";
import Button from "src/designsys/Button";

type ButtonProps = {
  prompt?: string;
  provider?: "google" | "gmail";
};

const GoogleLoginButton: React.FC<ButtonProps> = ({
  prompt = "Login with Google",
  provider = "google",
}) => {
  return (
    <Button onClick={() => signIn(provider)}>
      <span>
        <FaGoogle />
      </span>
      &nbsp;&nbsp;
      {prompt}
    </Button>
  );
};

export default GoogleLoginButton;

It's simple and working nicely. Does anyone have any comments on how to do this better? Thanks!

GitHub

GitHub - MathiasGilson/Tailwind-Styled-Component: Create Tailwind C...

Building a design system?

Building a design system?

Similar Threads

Similar Threads

Similar Threads