AACCELDesign system

Design system

Overview All components All blocks Page previews

Pages

Homepage About Academics Admissions News & events

Blocks

School highlights Pardot form Site header Announcement bar Hero Page hero Events Mission / story Split feature Program mosaic News FAQ Staff grid Enrollment CTA CTA banner Site footer

Actions

Button Button group Toggle Toggle group

Forms

Input Textarea Select Native select Combobox Checkbox Radio group Switch Slider Field Label Input group Input OTP Calendar Form example

Feedback

Alert Badge Progress Spinner Skeleton Empty Toast

Overlays

Dialog Alert dialog Sheet Drawer Popover Tooltip Hover card Dropdown menu Context menu Command Menubar

Navigation

Tabs Accordion Collapsible Breadcrumb Pagination Navigation menu

Data display

Card Table Avatar Separator Aspect ratio Carousel Scroll area Resizable Item Kbd Chart

Actions

Toggle

A two-state button.

import {…} from "@/components/ui/toggle"

Variants

Button group Toggle group