Skip to main content
Version: Next

Configuration

Setup

Custom Theme

Create custom file osmi.config.js (optional)

export default {
colors: {
// custom colors
},
spacing: {
// custom spacing
},
border: {
width: {
// border width
},
radius: {
// border radius
},
},
font: {
family: {
// font family
},
size: {
// font size
},
},
lineHeight: {
// line height
},
letterSpacing: {
// letter spacing
},
shadow: {
// shadows
},
};

Provider

OsmiCSX includes a <OsmiProvider /> component, which makes the OsmiCSX available to the rest of your app:

import { OsmiProvider } from "osmicsx";
import theme from "./osmi.config.js"; // your custom style file
import App from "App.js"; // your main app

return (
<OsmiProvider theme={theme}>
<App />
</OsmiProvider>
);