Dev Setup

Get set up using Nebula in your app.

Installation

Start by making sure you have an npm token from the @kaluza-platform npm org.

yarn add @kaluza-platform/nebulayarn add @kaluza-platform/nebula

Or if you prefer:

npm install --save @kaluza-platform/nebulanpm install --save @kaluza-platform/nebula

You'll also need to ensure the following peerDependencies are installed:

"@internationalized/date": "^3.8.1",
"@react-aria/button": "^3.13.1",
"@react-aria/calendar": "^3.8.1",
"@react-aria/datepicker": "^3.14.3",
"@react-aria/dialog": "^3.5.25",
"@react-aria/focus": "^3.20.3",
"@react-aria/i18n": "^3.12.9",
"@react-aria/overlays": "^3.27.1",
"@react-aria/utils": "^3.29.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-stately": "^3.38.0",
"styled-components": "^5.2.0""@internationalized/date": "^3.8.1",
"@react-aria/button": "^3.13.1",
"@react-aria/calendar": "^3.8.1",
"@react-aria/datepicker": "^3.14.3",
"@react-aria/dialog": "^3.5.25",
"@react-aria/focus": "^3.20.3",
"@react-aria/i18n": "^3.12.9",
"@react-aria/overlays": "^3.27.1",
"@react-aria/utils": "^3.29.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-stately": "^3.38.0",
"styled-components": "^5.2.0"

Theming

Nebula uses styled-components (opens in new window) and it is necessary to provide a theme which you can import from @kaluza-platform/nebula.

This can be done using styled-component's <ThemeProvider> at the root of the app.

import { ThemeProvider } from 'styled-components';
import { theme } from '@kaluza-platform/nebula';

<ThemeProvider theme={theme}>
  <MyApp />
</ThemeProvider>;import { ThemeProvider } from 'styled-components';
import { theme } from '@kaluza-platform/nebula';

<ThemeProvider theme={theme}>
  <MyApp />
</ThemeProvider>;

See Theming for more information.

OverlayProvider

Some Nebula components make use of React Aria (opens in new window) . The OverlayProvider context provider is required by some components to ensure proper support for screenreaders.

import { OverlayProvider } from '@react-aria/overlays';

const MyApp = () => <OverlayProvider>Welcome to my app!</OverlayProvider>import { OverlayProvider } from '@react-aria/overlays';

const MyApp = () => <OverlayProvider>Welcome to my app!</OverlayProvider>

Using the components

import { PrimaryCTAButton } from '@kaluza-platform/nebula';

const Example = () => (
  <PrimaryCTAButton onClick={() => alert('Yippee!')}>
    I ❤ Design Systems
  </PrimaryCTAButton>
);import { PrimaryCTAButton } from '@kaluza-platform/nebula';

const Example = () => (
  <PrimaryCTAButton onClick={() => alert('Yippee!')}>
    I ❤ Design Systems
  </PrimaryCTAButton>
);

CSS Reset

The design system components rely on global styles to provide a CSS reset (opens in new window)

We export one of these which uses sensible defaults and can be found here:

// Webpack will need a css-loader to import this.
import '@kaluza-platform/nebula/dist/reset.css';// Webpack will need a css-loader to import this.
import '@kaluza-platform/nebula/dist/reset.css';