MarkGeeRomano / aragon-ui

UI toolkit for Aragon

Aragon UI

What is it?

Aragon UI is a React library used to build user interfaces for Aragon and its related projects. It provides the components needed to build experiences that feel integrated with Aragon ecosystem, and can be used both client or server side.

Used by:

• Aragon
• Aragon apps by the core team
• aragon.org
• hack.aragon.org

Getting Started

Install it from npm:

npm install --save @aragon/ui

Aragon UI require some assets (e.g. fonts) in order to work properly. These need to be copied where they can be accessed by the library, like the public/ directory of a project using Create React App.

To copy these assets, use the copy-aragon-ui-assets command provided by Aragon UI:

npx copy-aragon-ui-assets ./public

This emplacement has to be communicated to the library using <AragonApp>, so that the assets can be accessed by the components down the tree.

import { AragonApp } from '@aragon/ui'

const App = () => (
  <AragonApp publicUrl="/aragon-ui-assets/">
    <h1>Hello Aragon UI</h1>
  </AragonApp>
)

Your project is now ready to use Aragon UI. 💫

Open https://ui.aragon.org/ for a list of the available components and how to use them.

Assets Synchronization (optional)

You may also want to add it as a step in your project scripts, so that upgrading Aragon UI can be done without having to worry about these.

"scripts": {
  "sync-assets": "copy-aragon-ui-assets ./public",
  "build": "npm run sync-assets && react-scripts build",
  "start": "npm run sync-assets && react-scripts start"
}

See copy-aragon-ui-assets -h for more information.

Build & Develop

Clone this repository, install the dependencies:

npm install

Build:

npm run build

Auto rebuild:

npm run dev

Run the devbox (to develop a component in isolation):

cd devbox
npm install
npm start

License

MIT, see LICENSE.