StudioCMS UI is an Astro-native UI library.
All the components you need, without the pain of React.
---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>
---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>
---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>
The StudioCMS project is built 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.
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.
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.