Building a Component Library based on Tailwind CSS with Figma and Storybook

My plan was to find an existing CSS component library based on Tailwind that did not have its own library built in Figma and create one from scratch.

The purpose of this project was to get hands-on experience in building a component library for a design system from initial design to implementation with code. I was to end up with a React app using Storybook and styled components.

Eventually I want to build another library but instead use Radix-UI Primitives.

Define tokens in Figma using variables

I decided to create a component library for Daisy-UI which is a Tailwind plugin and theme that is very simple and has an extensive list of pre-built themes

Fortunately for me, someone had already started to create a Figma project for Daisy-UI but only got as far as setting up the variables for Tailwind tokens and an initial theme. I wanted to eventually share this with the Figma community so I planned on contributing to this project.

Figma variables as Tailwind tokens

The primitives to build from

Daisy-UI Theme

Semantic variables aliasing the primitives

Building the first component

I created the button component with interactions for all its different states, sizes, and types.

Setup React & Installation of Storybook

• Create a New Project

  npm create vite@latest my-design-system -- --template react

• Install Styled-Components

  Do this before installing Storybook so that when the Storybook theme addon is added, it will detect styled-components and configure itself accordingly.

  npm install styled-components

• Install Storybook

  npx sb init

• Install the Storybook Theme add-on

  npx storybook@latest add @storybook/addon-themes

  Storybook has great documentation on adding support for themes, follow the rest of the steps here How to setup styled-components and Storybook

  As part of the process, you will be asked to point to a file containing your themes

Creating the Themes for Storybook

Here is your centralized location for your design tokens and themes that match the variables used in Figma.

• If there is a way to sync the variables in Figma with the token file in Storybook that would be awesome, if someone knows how to do this, let me know!

Create the Button in Storybook

You have the variables, you have the Figma file, and Figma DevMode so it is now a simple process of recreating the button in Storybook. Here is some sample code for reference.

import React from "react";
import styled, { css } from "styled-components";

export const TYPES = {
  DEFAULT: "default",
  NEUTRAL: "neutral",
  PRIMARY: "primary",
  SECONDARY: "secondary",
  ACCENT: "accent",
  GHOST: "ghost",
  LINK: "link",
};

export const SIZES = {
  NORMAL: "normal",
  LARGE: "large",
  SMALL: "small",
  TINY: "tiny",
};

interface WrapperProps {
  $type: (typeof TYPES)[keyof typeof TYPES];
  $size: (typeof SIZES)[keyof typeof SIZES];
}

export interface ButtonProps extends WrapperProps {
  children: string;
  onClick: () => void;
}

const StyledButton = styled.button<WrapperProps>`
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  height: 3rem;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
  min-height: 3rem;
  line-height: 1em;
  gap: 0.5rem;
  font-weight: 400;
  text-decoration-line: none;
  text-transform: uppercase;
  background-color: ${({ theme }) => theme.color.base200};
  border-radius: ${({ theme }) => theme.borders.roundedLg};
  color: ${({ theme }) => theme.color.baseContent};
  cursor: pointer;
  font-size: 0.875rem;

  &:hover {
    background-color: ${({ theme }) => theme.color.base300};
  }

  ${(props) =>
    props.$type === TYPES.PRIMARY &&
    css`
      // Here you can override the styles used for the primary button
      // Duplicate this for the other types
    `}
`;

const Button = ({ children, $type, $size, ...props }: ButtonProps) => {
  return (
    <StyledButton $type={$type} $size={$size} {...props}>
      {children}
    </StyledButton>
  );
};

export default Button;

What’s Next?

Document Components in Storybook

• Add Stories: For each component you create, add a corresponding Storybook story. This serves as both documentation and a visual test case.
• Variants: Show different variants of your component in separate stories (e.g., different button sizes or states).

Implement more Themes

• Ensure your components respond correctly to theme changes.
• Showcase different themes in Storybook stories.

Review Accessibility

• Start with a Figma plugin like Stark
• Use tools like axe-core or the Accessibility tab in the browser developer tools to verify accessibility.
• Using axe-core with a Storybook Testing add-on is something I plan on implementing eventually.

Gather Feedback

• Share your Storybook with designers, developers, and other stakeholders to gather feedback.
• Make iterative improvements based on the feedback received.

Continuous Integration

• Use tools like Chromatic with Storybook to capture UI changes over time and ensure visual consistency as you evolve your design system.
• Integrate with your CI process to automatically publish and track changes in your components.

Publish & Distribute

• If the design system is meant to be used across multiple projects, consider packaging it as an npm package.
• Publish your Storybook to a static hosting service or use tools like Vercel or Netlify. This makes it accessible to everyone in your team.

Maintain & Update

• Continuously gather feedback, track usage, and ensure your design system evolves with the needs of your projects.

By following these steps, you'll have a robust design system built on Tailwind primitives, fully documented, and showcased using Storybook, ensuring a cohesive and consistent UI experience across all your projects.