Getting Started

Quick guides for design and development to get up and running

On this page

Designers: Connect Figma Library to your Document
Developers: Install JavaScript (React) library

Designers: Connect Figma Library to your Document

Ensure the Vitality Figma libraries are connected to your document. Most FIgma projects within the Magentus organization will have the library already connected. If not, you can add it manually.

Note: the design files and fonts require authentication with Magentus.

Developers: Install JavaScript (React) library

1. Start by installing the `@vitality-ds/components` library to your project.

npm install @vitality-ds/components

2.Add the `VitalityProvider` component to wrap your app

import { VitalityProvider } from ‘@vitality-ds/components’;

const App = () => {
    <VitalityProvider>
       // app
    </VitalityProvider>
};

3. Import and use Vitality components

import { Button } from ‘@vitality-ds/components’;

const Medications = () => {
    <>
        <Button>Add Medication</Button>
    </>
};

Now you're ready to go! Refer to each component's documentation page or read more about Styling Components in Code to build your own.