Aha Design System - React

Usage no npm install needed!

<script type="module">
  import ahauiReact from 'https://cdn.skypack.dev/@ahaui/react';


Aha logo

Aha Design System - React

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

Report bug · Request feature


CI npm bundle size npm version dependencies Status peerDependencies Status devDependency Status

Quick start


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


import '@ahaui/css/dist/index.min.css';
import React from 'react';
import { Button } from '@ahaui/react';

function Example() {
  const onButtonClick = () => {

  return (
      Click me!

Aha! Just simple as that!



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',


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.