awesome-gcl v1.1.0

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',
    },
  }
}