@tech-university-india/ayush-component-library

ayush-component-library

A React Component Library

Install

npm install ayush-component-library

Usage

import React, { Component } from 'react'

import { MyComponent } from 'ayush-component-library'
import 'ayush-component-library/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}

Components

Alert
Button
CustomButton
DropDownBox
Dropdown
Header
KeyValueDisplay
Loading
OTPInput
OTPRegistrationHeader
ProfileNumber
QRModal
Radio
RegisterForm
ResendOTPButton
SectionTitleDisplay
TextBox
UpdateButtons

OverRiding CSS

You can override each of the property by providing your own tailwind config like this and giving values

tailwind.config.js

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      boxShadow: {
        selected: 'var(--boxShadow-selected)',
        header: 'var(--boxShadow-header)',
        textBox: 'var(--boxShadow-textBox)',
        textBoxInset: 'var(--boxShadow-textBoxInset)',
      },
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        preFillText:'var(--color-preFillText)',
        outline: 'var(--color-outline)',
        backgroundText: 'var(--color-backgroundText)',
        delete: 'var(--color-delete)',

      },
      backgroundColor: {
        primary: 'var(--bg-primary)',
        secondary: 'var(--bg-secondary)',
        backgroundText: 'var(--bg-backgroundText)',
        submit: 'var(--bg-submit)',
        preFillText: 'var(--bg-preFillText)',
        textBox: 'var(--bg-textBox)',
        options: 'var(--bg-options)',
        deactivate: 'var(--bg-deactivate)',
        delete: 'var(--bg-delete)',
        healthRecordContainer: 'var(--bg-healthRecordContainer)',
        resend: 'var(--bg-resend)',
      },
      padding: {
        desktop: 'var(--padding-desktop)',
        tablet: 'var(--padding-tablet)',
      },
      dropShadow: {
        keyValueDisplay: 'var(--dropShadow-keyValueDisplay)',
      },
      fontFamily: {
        sans: ['Avenir', 'sans-serif']
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
      }
    }
  },
  plugins: [
    plugin(function ({ addBase, addComponents, addUtilities, theme }) {
      addComponents({
        '.th-h1': {
          fontFamily: 'Avenir',
          fontStyle: 'normal',
          fontWeight: 800,
          fontSize: '32px',
          lineHeight: '44px'
        },
        '.th-h2': {
          fontFamily: 'Avenir',
          fontStyle: 'normal',
          fontWeight: 800,
          fontSize: '28px',
          lineHeight: '44px'
        },
        '.th-body-text': {
          fontFamily: 'Avenir',
          fontStyle: 'normal',
          fontWeight: 400,
          fontSize: '16px',
          lineHeight: '22px'
        },
        '.th-small-text': {
          fontFamily: 'Avenir',
          fontStyle: 'normal',
          fontWeight: 400,
          fontSize: '12px',
          lineHeight: '16px'
        }
      })
    })
  ],
  important: true
}

index.css/app.css

:root{
  --boxShadow-selected: 0px 4px 4px rgba(0, 0, 0, 0.25);
  --color-primary: #B6EBB7;
  --bg-primary: #732872;
  --padding-desktop: 28vw;
  --dropShadow-keyValueDisplay: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

License

MIT ©