Aha Design System - React

Collection of React Components for building web applications.
Explore Aha docs »

Report bug · Request feature

Status

Quick start

Installation

You have to install both @ahaui/react and @ahaui/css

# With npm
npm install @ahaui/react @ahaui/css
# Or with yarn
yarn add @ahaui/react @ahaui/css

Usage

import'@ahaui/css/dist/index.min.css';importReactfrom'react';import{Button}from'@ahaui/react';functionExample(){constonButtonClick=()=>{alert('Aha!');};return(<ButtononClick={onButtonClick}>
Click me!
</Button>);}

Aha! Just simple as that!

Customization

Plugins

You can customize specific Aha React Components via plugins!

For now, to provide your custom assets to Logo, Avatar, EmptyState, you can use AssetPlugin.

import{AssetPlugin,Plugins,Logo}from'@ahaui/react';constLogoAssetsPlugin=newAssetPlugin({prefix: 'logo',assets: {mylogo: require('./assets/images/logo/my-logo.svg').default,foobar: 'https://foo.bar/image.jpg',}});Plugins.loadPlugin(LogoAssetsPlugin);functionExample(){return(<Logoname="mylogo"/>);}

Various types of plugin will be developed in the future, stay tune!

Plugins could also be published standalone as a npm package (follow the template here).

Custom CSS

Further instruction could be found in here.

Copyright and License

Code and documentation copyright 2020 the Got It, Inc. Code released under the Apache-2.0 License.