Skip to content
StudioCMS
UI
Docs

@studiocms/ui

v0.4.17 GitHub npm Changelog

@studiocms/ui is the UI library that we use to build StudioCMS. The library is agnostic, meaning that you can use it in your own Astro projects!

To get started, add the integration to your project.

Terminal window
npx astro add @studiocms/ui
Using @studiocms/ui with Astro 4

StudioCMS UI can be used in Astro 5 without any additional configuration. As for Astro v4, @studiocms/ui requires version v4.5.0 or higher, with the experimental.directRenderScript flag turned on.

Manual Installation

'Read the “', Manual Installation, '” section'

Install the @studiocms/ui package with your preferred package manager.

Terminal window
npm i @studiocms/ui

Import and use the @studiocms/ui integration in your Astro config.

astro.config.mjs
import { 
function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never>(config: AstroUserConfig<TLocales, TDriver>): AstroUserConfig<TLocales, TDriver>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig } from 'astro/config';
import 
function ui(options?: Options): AstroIntegration
The Astro integration for StudioCMS UI.
@see ― https://ui.studiocms.dev
@param ― options - The options for the integration.
@returns ― The Astro integration object.
ui from '@studiocms/ui';


export default 
defineConfig<never, never>(config: AstroUserConfig<never, never>): AstroUserConfig<never, never>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig({
  
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never>.integrations?: (false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined)[]
@name ― integrations
@description 
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.


import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
{
  // Example: Add React + Tailwind support to Astro
  integrations: [react(), tailwind()]
}
integrations: [
    
function ui(options?: Options): AstroIntegration
The Astro integration for StudioCMS UI.
@see ― https://ui.studiocms.dev
@param ― options - The options for the integration.
@returns ― The Astro integration object.
ui()
  ]
});

Importing Components

'Read the “', Importing Components, '” section'

Primary Bundled Export

'Read the “', Primary Bundled Export, '” section'

All components in this library are exported from @studiocms/ui/components. You can import and use the components like this:

ButtonExample.astro
---
import { Button } from 'studiocms:ui/components';
---


<Button />

Tree-Shakeable Imports

'Read the “', Tree-Shakeable Imports, '” section'

You can also import components individually to reduce bundle size. For example, to import the Button component:

ButtonExample.astro
---
import { Button } from 'studiocms:ui/components/button';
---


<Button />

Using @studiocms/ui with Tailwind

'Read the “', Using @studiocms/ui with Tailwind, '” section'

If you haven’t already, add Astro’s Tailwind integration to your project.

Terminal window
npx astro add tailwind

Disable Tailwind’s preflight ⤴ styles with applyBaseStyles: false.

astro.config.mjs
import { defineConfig } from 'astro/config';
import ui from '@studiocms/ui';


export default defineConfig({
  integrations: [
    ui(),
    tailwind({ applyBaseStyles: false })
  ]
});

Create a CSS file for Tailwind’s base styles. For example src/styles/tailwind.css.

src/styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Import this CSS file in any layout or page that uses Tailwind.

src/layouts/Base.astro
---
import '../styles/tailwind.css';


// ...
---