@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.
npx astro add @studiocms/ui
yarn astro add @studiocms/ui
pnpm astro add @studiocms/ui
@studiocms/ui
with Astro 4StudioCMS 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.
Install the @studiocms/ui
package with your preferred package manager.
npm i @studiocms/ui
yarn add @studiocms/ui
pnpm add @studiocms/ui
Import and use the @studiocms/ui
integration in your Astro config.
import { defineConfig } from 'astro/config';import ui from '@studiocms/ui';
export default defineConfig({ integrations: [ ui() ]});
All components in this library are exported from @studiocms/ui/components
. You can import and use the components like this:
---import { Button } from 'studiocms:ui/components';---
<Button />
@studiocms/ui
with TailwindIf you haven’t already, add Astro’s Tailwind integration to your project.
npx astro add tailwind
yarn astro add tailwind
pnpm astro add tailwind
Disable Tailwind’s preflight ⤴ styles with applyBaseStyles: false
.
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
.
@tailwind base;@tailwind components;@tailwind utilities;
Import this CSS file in any layout or page that uses Tailwind.
---import '../styles/tailwind.css';
// ...---