Governance UI Kit

Warning

This repository is deprecated and will be archived. The Governance UI Kit now lives in the aragon/app monorepo under packages/gov-ui-kit. Open issues and pull requests there. The npm package @aragon/gov-ui-kit and the Storybook are published from the monorepo, and existing installs keep working with no changes.

The Aragon Governance UI Kit is an open source and human-centric design system specifically designed for OSx-based onchain organizations. It provides a unified and easy-to-use framework for creating visually consistent and engaging interfaces, prioritizing user experience throughout the Aragon ecosystem.

NOTE: The Governance UI Kit library is currently in pre-alpha stage; breaking changes may occur.

Key Features:

• OSx-compatible: Pre-built components and patterns tailored for Aragon OSx governance workflows.
• Unified design language: Streamlined visuals and interactions for cohesive user experiences.
• Accessible & responsive: Adheres to accessibility best practices and scales well across different devices.
• Designer-friendly: Includes a comprehensive Figma library to accelerate prototyping and iteration.
• Developer-focused: Straightforward installation, theming options, and easily composable components.

Designers

Designers can access the UI Kit in Figma to explore and adapt components for their own components and use cases. This Storybook reflects the latest design tokens, styles, and components, so should be considered the "source of truth".

Open in Figma

Development Setup

To start developing with the UI Kit:

1. Use the Node.js version pinned in .nvmrc (Node >= 24.16). With nvm:

nvm install   # installs the version from .nvmrc
nvm use

2. Install pnpm (>= 10). pnpm self-manages the version pinned in packageManager in package.json, so no Corepack is needed:

npm install -g pnpm

3. Install dependencies and setup husky:

pnpm install && pnpm run setup

4. Start Storybook for component development:

pnpm storybook

5. Build the library:

pnpm build

Getting started building an application

To start building with the UI Kit, follow our Installation doc. It covers how to set up your environment and start importing components.

If you're looking to launch a custom application more quickly on OSx, check out the Governance App Template. It demonstrates how to integrate UI Kit components into a full-stack governance application, with some common governance patterns pre-built

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

The Governance UI Kit is released under the GPL-V3 License.

---

Explore  |  Help  |  Privacy  |  Terms of Service