Wave Design System

Welcome to the Design System of FREE NOW. Thanks for stopping by! This is the place where you find the latest components and essentials, that enable you to rapidly build your product.


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

npm i @freenow/wave


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 () => (
<Text>FREE NOW Design System</Text>

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.