@aveonline/ui-react

ui ecosystem react

The home base for Aveonline design system, ui-react provides essential design resources for our developers to use in the Aveonline-branded interfaces that they create.

Go Storybook

Before started

For usage with tailwind config, install:

npm i @tailwindcss/forms -D

Getting started

Working with all config from this library or only components availables

npm i @aveonline/ui-react

Usage with tailwind

Import things into your JS app from the @aveonline/ui-react package.

import { Button } from '@aveonline/ui-react'

tailwind.config.js

/** @type {import('tailwindcss').Config} */

const tailwindConfig = require('@aveonline/ui-react/tailwind.config.js')

tailwindConfig.content = [
  './pages/**/*.{ts,tsx}',
  './components/**/*.{ts,tsx}',
  './node_modules/@aveonline/ui-react/dist/ui-react.mjs'
]

module.exports = tailwindConfig

Usage css

Import things into your JS app from the @aveonline/ui-react package.

/* global.css or tailwind.css local */
@tailwind base;
@tailwind components;
@tailwind utilities;

// import this lines at main.ts or root
import './global.css' // Reference tailwind local
import '@aveonline/ui-react/reset.css' // Only not usage tailwind
import '@aveonline/ui-react/tokens.css' // Required
import '@aveonline/ui-react/tailwind.css' // Required
import '@aveonline/ui-react/index.css' // Required

Example usage class with tailwind

<!-- Class from library -->
<section class="bg-letter-default">
  <p class="text-letter-subdued">Hello human</p>
</section>

Resources

• Docs

Development 🚀

• See Contributing.md for more information on how to build @aveonline/ui-react from the source and contribute!