Ohana Design System

What is Ohana Design System

Ohana is Uniqode's inbuilt library for using our components in marketing pages

Setup

To begin developing the design system locally, run the following from the repository's root directory:

To install all the dependencies

$ npm install or npm i

To run Storybook

$ npm run storybook

How to use the components ?

To start using components you can

• Import components from "ohana-design-system"
• Add the component in the page you want to use
• Give relevant data to the component

For example, to use breadcrumb refer the code below:

import { Breadcrumb } from 'ohana-design-system';

const breadcrumbData = [
    { label: 'Home', link: '/' },
    { label: 'QR Code generator', link: '/qr-code-generator' },
    {
        label: 'QR code on websites',
        link: '/qr-code-generator/for-website',
    },
];

const Page = () => {
    return <Breadcrumb breadcrumbData={breadcrumbData} />;
};

export default Page;