StudioCMS UI is designed on top of CSS variables, which makes it easy to customize the look of the components
to match your brand. You can customize the colors, typography, radii, and more. All customization is done
with a custom CSS file that you can provide to the UI integration:
astro.config.mjs
1
import{defineConfig}from'astro/config';
2
importuifrom'@studiocms/ui';
3
4
exportdefaultdefineConfig({
5
integrations:[
6
ui({
7
customCss:'./path/to/custom.css'
8
})
9
]
10
});
In that file, you can override the CSS variables to change the look of the components. If you wanted to overwrite
the primary color, it’d look like this:
custom.css
1
:root{
2
--primary-base: 00%100%;
3
--primary-hover: 00%80%;
4
--primary-active: 00%90%;
5
}
6
7
[data-theme='light']:root{
8
--primary-base: 00%0%;
9
--primary-hover: 00%20%;
10
--primary-active: 00%10%;
11
}
If you make significant changes to the colors, remember to also adjust the light theme.
Below, you will find all the CSS variables used in StudioCMS UI. Always make sure to provide them as
HSL values without commas. You can use them in your CSS like this: background-color: hsl(var(--background-base));.
Extend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown).
Read our Integrations Guide for help getting started with Astro Integrations.
importreactfrom'@astrojs/react';
importtailwindfrom'@astrojs/tailwind';
{
// Example: Add React + Tailwind support to Astro
integrations: [react(), tailwind()]
}
integrations:[
6
functionui(options?: Options): AstroIntegration
ui({
7
noInjectCSS?: boolean
Disable CSS Generation and require manual addition of the global CSS
@example
import'studiocms:ui/global-css';
noInjectCSS:true,
8
})
9
]
10
});
You can then include the CSS in your project manually. This is useful if you want to mix StudioCMS UI with other CSS frameworks, or if you are using the UI styling only for a subset of your components.
src/layouts/SUILayout.astro
1
---
2
// Using the virtual module to import the CSS file (recommended)
3
import"studiocms:ui/global-css";
4
5
// Alternatively, import the CSS file directly from the package
You can edit the colors in your own project during development using the dev toolbar. In the toolbar, you will find a
tab with the StudioCMS logo on it. Once clicked it will reveal a few color pickers and inputs you can use to adjust various
variables. You can copy your changes to your clipboard after you are done.
