Atoms - UI Component Library

Overview

This React + TypeScript component library provides a collection of reusable UI components styled with TailwindCSS. Each component is designed to be flexible, customizable and responsive. The library integrates with Storybook for easy component previews and usage examples.

Features

• Resuable React Components: Pre-built components for common UI needs such as buttons, inputs, modals, etc.
• TypeScript Support: Provides type safety and better developer experience.
• TailwindCSS Styling: Uses utility-first CSS classes for responsive and easily customizable components.
• Storybook Integration: Visual documentation to explore components interactively.

Installation

To use this component library in your project, first install it via npm or yarn:

# Using npm
npm install @playo/atoms

# Using yarn
yarn add @playo/atoms

Setup TailwindCSS

If you don't already have TailwindCSS setup in your project, install it following the official TailwindCSS guide. Then add the library's components to your TailwindCSS config to ensure utility classes are applied correctly.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    screens: {
      sm: "640px",
      tab: "768px",
      laptop: "1024px",
      desktop: "1280px",
      monitor: "1440px"
    },

    extend: {
      colors: {
        page: "#F1F3F2",
        outline: "#E3E8E6",
        text_primary: "#3b4540",

        primary: "#00B562",
        on_primary: "#FFFFFF",
        primary_container: "#CCF0E0",
        on_primary_container: "#1ABC72",

        secondary: "#243742",
        on_secondary: "#FFFFFF",
        secondary_container: "#D3D7D9",
        on_secondary_container: "#20323B",

        tertiary: "#FFC400",
        on_tertiary: "#191400",
        tertiary_container: "#FFF3CC",
        on_tertiary_container: "#E6B000",

        error: "#BA1B1B",
        on_error: "#FFFFFF",
        error_container: "#F1D1D1",
        on_error_container: "#A71818",

        backgroud: "#E3E8E6",
        on_background_primary: "#3B4540",
        on_background_secondary: "#758A80",
        on_background_tertiary: "#F1F3F2",

        surface: "#FFFFFF",
        on_surface_primary: "#3B4540",
        on_surface_secondary: "#758A80",
        on_surface_tertiary: "#F1F3F2",

        beginner: "#BAF1A1",
        amateur: "#43D8C9",
        intermediate: "#F3C623",
        advanced: "#F3C623",
        professional: "#FF9D76",

        assist1: "#EED8FE",
        assist2: "#E1FFA3",
        assist3: "#FFF9DB",
        assist4: "#C5FCEB",
        assist5: "#B2EDFF"
      },
      boxShadow: {
        DEFAULT: "0px 2px 4px 0px rgba(241, 243, 242, 1)",
        default: "0px 4px 12px 0px rgba(241, 243, 242, 1)",
        card: "0px 8px 20px 0px rgba(241, 243, 242, 1)",
        button: "0px 4px 0px 0px rgba(0, 145, 78, 1)",
        button_secondary: "0px 4px 0px 0px rgba(214, 220, 217, 1)"
      },
      fontSize: {
        40: "2.5rem",
        32: "2rem",
        24: "1.5rem",
        20: "1.25rem",
        16: "1rem",
        14: "0.875rem",
        12: "0.75rem"
      },
      height: {
        13: "52px",
        nav: "88px",
        navMobile: "72px"
      },
      width: {
        13: "52px"
      },
      padding: {
        13: "52px"
      },
      lineHeight: {
        "3/2": "1.5"
      },
      letterSpacing: {
        "10": "0.1rem"
      },
      animation: {
        fadeIn: "fadeIn 2s ease-in forwards",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" }
        },
      },
      variants: {
        animation: ["motion-safe"],
        extend: {}
      }
    }
  },
  plugins: [],
}

Usage Example

Once installed, import components into your project and start using them, Here's an example of how to use a Button component from the library:

import { Button } from '@playo/atoms';

const MyComponent = () => (
  <Button variant="primary" size="lg">
    Click Me
  </Button>
);

export default MyComponent;

Props and Customization

Each component comes with customizable props and TailwindCSS styling. You can adjust component behavior and appearance by passing different props.

Example: Button Component Props

• Variant: Defines the button's color scheme (e.g. primary, secondary).
• size: Defines the button size (sm, md, lg).
• children: Content to be displayed inside the button.

<Button variant="secondary" size="sm">Small Button</Button>

Storybook for Component Exploration

Storybook is integrated for interactive components documentation. You can view all the components and their variations by visiting Atoms - Component Library Exploration, allowing you to preview and interact with components in real-time.