Home base for Aveonline design system - ecosystem react
npm install @aveonline/ui-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.
shell
npm i @tailwindcss/forms -D
`
Getting started
Working with all config from this library or only components availables
`shell
npm i @aveonline/ui-react
`
Usage with tailwind
Import things into your JS app from the @aveonline/ui-react package.
`ts
import { Button } from '@aveonline/ui-react'
`
tailwind.config.js
`ts
/* @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.
`css
/ global.css or tailwind.css local /
@tailwind base;
@tailwind components;
@tailwind utilities;
`
`ts
// 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
`html
Hello human
`
Resources
- Docs
Development 🚀
- See Contributing.md for more information on how to build @aveonline/ui-react` from the source and contribute!