Setup

Assuming you have a basic React project set up, start by simply installing VCC UI via NPM. (if not, check out the examples or the web-starter-kit)

npm install vcc-ui --save

In order to use any component, you need to wrap your application (top-level render method) with two components:

• StyleProvider: This is the underlying CSS engine that will automatically inline the CSS required to render a page.
• ThemePicker: This will render the components according to a given theme.

Right now, vcc-ui is shipped with the light and dark theme variants.

Basic Usage Example

import React from 'react';
import ReactDOM from 'react-dom';
import { StyleProvider, ThemePicker } from 'vcc-ui';
import App from './app';

ReactDOM.render(
  <StyleProvider>
    <ThemePicker variant="light">
      <App />
    </ThemePicker>
  </StyleProvider>,
  document.getElementById('root')
);

Now you can start using the components in your app:

import React from 'react';
import { Block, Button } from 'vcc-ui';

export default function App() {
  return (
    <Block extend={{ padding: 20 }}>
      <Button>Click me!</Button>
    </Block>
  );
}

Server Side Rendering

We've designed the components to be able to initially render on the server (SSR) as well as the client.

Depending on what framework you use, the approach will slightly differ. Check out the examples to get an idea how this can is achieved with different frameworks.