Info

About NebulaKit

Styles

All component styles ship in a single stylesheet in the Core bundle. It covers Pro components too, so the Pro bundle has no stylesheet of its own. Import it once in the entry file of your application.

import '@nebula-kit/core/styles.css'

Provider

Wrap the root of your application with NebkitProvider. It sets the theme, brand color and border radius for every component inside it.

import { createRoot } from 'react-dom/client'import { NebkitProvider } from '@nebula-kit/core' import '@nebula-kit/core/styles.css' createRoot(document.getElementById('root')!).render(  <NebkitProvider theme="dark" brand="blue">    <App />  </NebkitProvider>,)

Components

Import components from the package they belong to. Core and Pro components can be used together in the same tree.

import { Button } from '@nebula-kit/core'import { Tooltip } from '@nebula-kit-private/pro' export const SaveButton = () => (  <Tooltip content="Save changes">    <Button>Save</Button>  </Tooltip>)

Bundler configuration

Vite

Vite imports CSS natively, no configuration is needed.

Webpack 5

Webpack 5 needs loaders to import the stylesheet. Skip this step if your configuration already handles CSS files.

Install the loaders

npm install --save-dev style-loader css-loader

Add the rule to webpack.config.js

module.exports = {  module: {    rules: [      {        test: /\.css$/,        use: ['style-loader', 'css-loader'],      },    ],  },}