CSS Showcase · Library
All demos
36 interactive demos, grouped by category. Every page has a device switcher, per-device design patterns, a CSS snippet and a shareable link.
Layout
- Device SwitcherMorph a skeleton app between desktop, iPad and mobile with container queries.
- Flexbox PlaygroundInteractive Flexbox playground for direction, alignment, wrap and gap.
- CSS Grid PlaygroundGrid templates and auto-placement presets with gap and track controls.
- CardsContent, media and stat card layouts that reflow per device.
- ContainersPage shells, max-width wrappers and fluid padding scales.
- DividersHorizontal, vertical and labelled separators.
Forms
- Login ScreensCentered, half/half and hero-overlay sign-in layouts per device.
- Checkboxes & Multi-SelectCheckbox lists, select-all with indeterminate state, toggles.
- Select Dropdowns & Multi-SelectSingle select plus chip-based multi-select in sheets and popovers.
- Radio ButtonsClassic lists, segmented controls and selectable cards.
- Sliders & Range InputsVolume, stepped rating and dual-thumb range inputs.
- Date PickersPopover, inline and bottom-sheet calendars with range selection.
- Text InputsText fields with labels, hints, icons and error states.
- TextareasAuto-growing and fixed multi-line inputs with counters.
- ButtonsVariants, sizes, icon buttons and loading states.
- Switches & TogglesToggles and switch rows for settings screens.
- Search InputsSearch fields with suggestions, clearing and filters.
- Form ValidationInline, summary and on-blur validation messaging.