awesome-gcl's Introduction

Awesome GCL

Foundation React UI components for shipping new projects faster

Installation

npm i awesome-gcl

Getting started with Awesome GCL

React:

import { Button } from 'awesome-gcl'

Next js:

'use client'
import { Button } from 'awesome-gcl'

Remix:

// remix.config.js
export default {
  ...,
  serverDependenciesToBundle: [
    /awesome-gcl/
  ]
}

// app/routes/route.tsx
import { Button } from 'awesome-gcl'

Components directory

Button
Icon Button
Text Button
Checkbox
Figure
Input
Modal
Select
Select Multi
Switch
Table
Toast List
User

Customize a component

Add new css rules or overwrite the existing ones

As GCL build its components with Tailwind CSS, it gets easier to custom the styles by simply passing custom css classes to the additional classes object available.

Custom classes

.modal-wrapper {
  z-index: 999;
}

.modal-dialog {
  background-color: beige;
}

Component

<Modal
  isOpen={true}
  additionalClasses={{
    wrapper: [
      'modal-wrapper'
    ],
    dialog: [
      'modal-dialog'
    ]
  }}
>
</Modal>

Library color set

let colors = {
  white: {
    100: '#FFFFFF',
    72: '#FFFFFFB8',
    40: '#FFFFFF66',
  },
  grayscale: {
    100: '#202532',
    80: '#50545E',
    60: '#838791',
    40: '#BEC0C5',
    10: '#D9DADD',
    5: '#EAEAEB',
    0: '#F2F2F3',
  },
  primary: {
    100: '#2648A4',
    50: '#2C5DE5',
    20: '#91ADFA',
    10: '#BFD0FD',
    5: '#D7E1FE',
    0: '#EEF3FF',
  },
  support: {
    success: {
      100: '#086343',
      50: '#008556',
      5: '#D6F3E2',
    },
    warning: {
      100: '#A64F21',
      50: '#E86825',
      5: '#FFE1BE',
    },
    alert: {
      100: '#9F1B1F',
      50: '#DE1C22',
      5: '#FFD6D7',
    },
  }
}