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';
import React from 'react';
import { Button } from '@ahaui/react';

function Example() {
  const onButtonClick = () => {
    alert('Aha!');
  };

  return (
    <Button
      onClick={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';

const LogoAssetsPlugin = new AssetPlugin({
  prefix: 'logo',
  assets: {
    mylogo: require('./assets/images/logo/my-logo.svg').default,
    foobar: 'https://foo.bar/image.jpg',
  }
});

Plugins.loadPlugin(LogoAssetsPlugin);

function Example() {
  return (
    <Logo name="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.