WelcomeBasic ConceptsGetting StartedElementsButtonDataGridIcons

Getting Started

Install xui's core components and shared peer dependencies.

yarn add @cozmos-ui/core

Style Provider

  1. Wrap the app with the Provider. See StyleProvider docs for more info.
  2. Pass the theme to the provider. See Themes docs for more info.

Next.js

// pages/_app.js
import { StyleProvider } from '@cozmos-ui/core';
import { radium } from '@cozmos-ui/themes';


export default function App({ Component, pageProps }) {
  return (
    <StyleProvider theme={radium}>
      <Component {...pageProps} />
    </StyleProvider>
  );
}

Create React App

import ReactDOM from 'react-dom';
import App from './App';
import { StyleProvider } from '@cozmos-ui/core';
import { radium } from '@cozmos-ui/themes';


ReactDOM.render(
  <StyleProvider theme={radium}>
    <App />
  </StyleProvider>,
  document.getElementById('root')
);

Initialize Color Mode(SSR)

Use the InitializeColorMode component in SSR apps to help prevent the flash of colors that can occur during rehydration.

Next.js

// pages/_document.js
import Document, { Html, Main, NextScript } from 'next/document';
import { InitializeColorMode } from '@cozmos-ui/core';


class MyDocument extends Document {
  render() {
    return (
      <Html>
        <body>
          <InitializeColorMode />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}


export default MyDocument;