Getting Started

Gympass design-system's follows design guidelines specification, we developed a React and React Native UI library that contains a set of high quality components that defines our interfaces.

An important note is that the styled-components is a peerDependency see why, if you dont have styled-components installed you'll need to install.

Installing

In order to install our design-system just run:

yarn add @gympass/yoga
// or
npm install @gympass/yoga

Usage

An important point in using it is that your whole application must be wrapped in our ThemeProvider component:

import { ThemeProvider, Button } from '@gympass/yoga';
const App = () => (
  <ThemeProvider>
    <Button>Find an activity</Button>
  </ThemeProvider>
);

• Web
• Native

Adding Gympass font in your project

Make sure to import and use FontLoader inside ThemeProvider.

import { ThemeProvider, Button, FontLoader } from '@gympass/yoga';
const App = () => (
  <ThemeProvider>
    <FontLoader />
    <Button>Find an activity</Button>
  </ThemeProvider>
);