Wave Design System

Installation

To bring the design system into your project, install it as a package:

npm i @freenow/wave

Usage

All of our components are exported by name from @freenow/wave, so you can import them with:

import { Button, Card, Headline, Text } from '@freenow/wave';

export default () => (
    <Card>
        <Headline>Welcome</Headline>
        <Text>FREE NOW Design System</Text>
    </Card>
);

Dynamic Imports & Create React App

If you are using create-react-app for your project, you are already set up and can use the library without additional configuration. If you're configuring babel and webpack on your own, please make sure you have the dynamic imports plugin set up in your configuration.

npm install --save-dev @babel/plugin-syntax-dynamic-import

// babel.config.js
module.exports = {
    plugins: ['@babel/plugin-syntax-dynamic-import']
};

We've decided to use dynamic imports to better support tree shaking and reduce the bundle size this library will take up in your project.