Components

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

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

Usage

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.