Skip to content
StudioCMS
UI
Docs

@studiocms/ui

v0.3.2 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 { defineConfig } from 'astro/config';
import ui from '@studiocms/ui';


export default defineConfig({
  integrations: [
    ui()
  ]
});

Importing Components

'Read the “', Importing Components, '” 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 />

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';


// ...
---