@infinium/mercury

Mercury

Mercury is a set of general, fluid React components. It's like mini UI kit.

Links

• Live demo
• Sandbox link

To learn how to use Mercury, read the wiki.

Installation

yarn add @infinium/mercury

or

npm install @infinium/mercury

Usage

First, import the global stylesheet:

import '@infinium/mercury/dist/style.css';

Now, just import any component as you need it.

import { Button } from '@infinium/mercury';

const App = () => (
	<Button>Click me</Button>
);

Features

• Built-in, working components by default.
• Excellent conformity to accessibility. Every component, within reason, is usable directly from the keyboard.
• Standard keyboard events are on by default. For instance, using esc to close a Modal.
• Beautiful (in our opinion) default styles, with excellent support for altering the variants, etc. of each component.
• Excellent, usable defaults

Notes

• If you need to be able to add custom styles to the components, such as passing the React-standard styles prop, you'll want to look elsewhere. Mercury is opinionated by nature, and doesn't offer much in the way of custom styles; programmatically, at least. That is, you can't pass styles to most components directly (except in the few components that accept the mods prop). You can, however, inspect the class that the component uses (all components have at least 1 accessible class) and modify it manually yourself. If you choose to do so, be careful that you don't break any behavior!

Components

All of the components are written in TypeScript. Moreover, each of the component prop types are exported individually. If you want to extract the props to an object, you can do so like:

import type { TButton } from '@infinium/mercury';

const buttonProps: TButton = {
	// ...
}

If you're not using TypeScript, you can read the wiki to learn about each component.