🦄 Unicorn React

Unicorn Design System is an open source design system built at UNICEF New Zealand. We've built it with web components and stencil to ensure it works between frameworks.

Getting Started

This package is a thin React layer for our web components. Each component is only responsible for passing React data & events down to the underlying element.

If you're not using React, check out the core library.

Unicorn requires a global stylesheet to be loaded (for global typography and color vars,) documentation for this is a work in progress. For now, please make sure it's loaded.

To install the library:

npm install @unicorndesign/core @unicorndesign/react

As of version 1.1, you no longer need to load Unicorn yourself, components are defined when you import them from this package.

However, you will still need to define a theme and global styles:

import '@unicorndesign/core/theming/prebuilt/default.css';

// OR
<link rel="stylesheet" href="https://unpkg.com/@unicorndesign/[email protected]/theming/prebuilt/default.css">

Polyfills are not included by default, but the legacy loader exposes an applyPolyfills method:

import { applyPolyfills } from '@unicorndesign/core/loader';

// Optional, depending on your browser targets 
await applyPolyfills();

Done! You're ready to use Unicorn.

import React from 'react';
import { UniButton } from '@unicorndesign/react/UniButton';

export default () => (
  <UniButton icon>🦄</UniButton>
);

Development notes

If you npm link this package into another app, you will encounter react hook errors, because your app's react is a separate instance to the one this uses. The fix:

# Link the react here to the target's react. This is
# roughly how it would behave as a peer-dependency
npm link ~/consumer-app/node_modules/react
npm link ~/consumer-app/node_modules/react-dom