@studiocms/ui

Accessibility

@studiocms/ui has not yet been audited for accessibility. You can track our progress in our accessibility issue tracker ⤴ on GitHub.

@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.

npm

npx astro add @studiocms/ui

yarn

yarn astro add @studiocms/ui

pnpm

pnpm 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.

npm

npm i @studiocms/ui

yarn

yarn add @studiocms/ui

pnpm

pnpm add @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.

npm

npx astro add tailwind

yarn

yarn astro add tailwind

pnpm

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

// ...
---