Design Tokens for Mesh have just been released!
Skip to content

Components

The components are the building-blocks of all nib experiences.

Working with components

Our components are distributed individually via npm. This allows us to increment package versions only for the components that have been updated.

Each component fully encapsulates its markup, styling and functionality.

Installation

bash
npm install @nib-components/button @nib-components/heading @nib-components/copy

Usage

jsx
import {PrimaryButton} from '@nib-components/button';
import Heading from '@nib-components/heading';
import Copy from '@nib-components/copy';
const Page = props => (
<main>
<Heading size={1}>Hello world</Heading>
<Copy>Lorem ipsum dolor sit amet, consectetuer elit.</Copy>
<PrimaryButton>Continue</PrimaryButton>
</main>
);
export default Page;

Note: These npm packages are private and you will need to be a member of our npm orgs to access them. Request access

Component status

For a complete list of Mesh components and their implementation status across a variety of formats, see the Component status page.