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/tooltip": "^3.8.7",
"@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/tooltip": "^3.8.7",
"@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.

Fonts

Nebula uses Aspekta (opens in new window) which is an open source font family, and Inter (opens in new window) font family which is available as Google font.

Nebula uses normal (400), semi bold (600), and bold (700) font weights, both the fonts support these weights.

Make sure to add them to the application, they are available on the links provided above.

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';