Skip to content
StudioCMS
UI
Docs

Modal

Countless stars scattered,
across obsidian skies,
frosty breath lingers.
  • Option 1
  • Option 2
  • Option 3
  • Option 1
  • Option 2
  • Option 3

Why install another Framework just for UI?

StudioCMS UI is an Astro-native UI library.

All the components you need, without the pain of React.

Get started Star on GitHub
Divider
Radio Group
User @username
  • Item 1
  • Item 2
  • Item 3

Modular by design

StudioCMS UI components are reusable, flexible, and composable, helping you build incredible interfaces with ease.
Sign up
FormExample.astro
---
import { Button, Card, Checkbox, Input } from '@studiocms/ui/components';
---


<Card as='form' class='form-card' fullWidth>
  <span slot='header' class='heading'>Sign up</span>
  <div class='form-inputs'>
    <Input label='Username' isRequired />
    <Input label='Password' type='password' isRequired />
    <Input label='Confirm Password' type='password' isRequired />
    <Checkbox
      color='primary'
      label='Yes, please do sell my data!'
      size='sm'
      isRequired
      defaultChecked
    />
  </div>
  <Button type='submit' slot='footer' color='primary' fullWidth>
    Sign up
  </Button>
</Card>
DropdownExample.astro
---
import { Button, Dropdown } from '@studiocms/ui/components';
---


<Dropdown
  id='dropdown-preview'
  options={[
    { label: 'View Profile', value: 'view-profile', icon: 'user' },
    { label: 'Settings', value: 'settings', icon: 'cog-6-tooth' },
    { label: 'Log out', value: 'log-out', color: 'danger', icon: 'arrow-left-start-on-rectangle' },
  ]}
  align='start'
>
  <Button color='primary'>
    Trigger Dropdown
  </Button>
</Dropdown>
<script>
  import { DropdownHelper } from "@studiocms/ui/components";


  new DropdownHelper('dropdown-preview');
</script>

Delete React?

Are you sure you want to remove React from your project? Just imagine how much harder your life could be with it!

ModalExample.astro
---
import { Button, Modal } from '@studiocms/ui/components';
---


<Modal
  id='example-modal'
  actionButton={{ label: 'Confirm', color: 'danger' }}
>
  <h3 slot="header">Delete React?</h3>
  <p>
    Are you sure you want to remove React from your project?
    Just imagine how much harder your life could be with it!
  </p>
</Modal>
<Button color='danger' id='imaginary-delete-button'>
  Trigger Modal
</Button>
<script>
  import { ModalHelper } from "@studiocms/ui/components";


  new ModalHelper('example-modal', 'imaginary-delete-button');
</script>

Part of the StudioCMS Ecosystem

Astro-first

The StudioCMS project is build for Astro with Astro and the community in mind. You can be sure that any of our projects will be focused on improving the ecosystem and giving back to developers.

Battle-tested

All resources we release as part of the StudioCMS ecosystem are battle-tested in our own creations, so you can be sure that no matter which of our projects you are using, they will work like a charm.

Community-built

StudioCMS isn't a closed-off project or organization - it is made up of Astro community members like you! Anyone can make suggestions and contribute in whichever way they like.

StudioCMS UI
MIT License © 2024 - StudioCMS