get started
Usage
v.1.0.0 | SaturnLearn how to use Kubit Web Components in your project.
QuickStart
After installing the package, add the Kubit theme provider. This is needed to be done only once in your application.
KubitProvider has the default theme already set up.
import { KubitProvider } from '@kubit-ui-web/react-components';
12345
const App = () => { <KubitProvider> <Route /> </KubitProvider>; };
Later, we will show how to add custom themes.
Now, you are ready to go:
12345
import { Button } from '@kubit-ui-web/react-components'; const Route = () => { <Button variant="DEFAULT">Click me!</Button>; };
Theming
Kubit Web Components have a default theme that you can customize to fit your visual design's project.
If you are using Kubit Web Components in a React project, you need to wrap your app with the ThemeProvider component.
12345678910
import { ThemeProvider, KUBIT_STYLES } from '@kubit-ui-web/react-components'; const CUSTOM_STYLES = { ...KUBIT_STYLES, colors: { ...KUBIT_STYLES.colors, primary: '#ff0000', }, };
More information about theming can be found here.