Develop ultra fast with Prismane 🎉

CSS Variables

Prismane provides a set of global CSS variables that facilitate seamless theme integration into your applications. With Prismane's global CSS variables, you can achieve consistent theming across your entire application, making it effortless to create a cohesive and personalized user experience.

How Are The CSS Variables Generated

When you provide a theme to <PrismaneProvider/>, it will automatically transpile the passed object and generate a set of CSS variables, which would then be applied to the root element.


If no theme object is passed, the base theme will be used!

For example:

const theme = {
  colors: {
    primary: {
      50: "#fafafa",
      100: "#f7f7f7",

Will be transpiled into this:

:root {
  ...other theme CSS variables
  --prismane-colors-primary-50: "#fafafa";
  --prismane-colors-primary-100: "#f7f7f7";

Using CSS Variables

Prismane's CSS variables can be used in CSS stylesheet files, as well as in components.

Inside CSS Stylesheet

// index.css

.some-component-class {
  background-color: var(--prismane-colors-primary-500);

.some-other-component-class {
  font-size: calc(var(--prismane-spacing) * 4);

Inside Components

import { Box } from "@prismane/core";

const Page = () => {
  return (
        backgroundColor: "var(--primane-colors-primary-500)",
      Hello, world

export default Page;

All CSS Variables

This is a list of all CSS variables that Prismane adds to your app:

CSS Variable NameTheme Token