Interactive showcase of CSS capabilities from fundamentals to cutting-edge features. Built with Next.js and shadcn/ui — a quick reference for checking CSS details and implementation patterns.
Live: https://thomasjbutler.github.io/css-showcase/
A comprehensive CSS learning resource with 30+ pages of live demos, interactive playgrounds, and real code examples. Everything from basic selectors to modern features like container queries, the :has() selector, scroll-driven animations, and colour spaces. Also built as a practice project for the shadcn/ui component framework.
- Flexbox and Grid with interactive controls
- Flexbox design patterns
- CSS layout techniques (positioned, absolute, relative)
- Responsive design and media queries
- Gradients (linear, radial, conic) with interactive builder
- Gradient composition patterns
- Transitions and keyframe animations
- Filters and blend modes with interactive playground
- Dark/light mode with system preference detection
- Interactive playgrounds
- Global search (Cmd/Ctrl + K)
- Collapsible code snippets with syntax highlighting
- Copy-to-clipboard for all code examples
- Fully responsive mobile-first design
- WCAG AA compliant accessibility
- Framework: Next.js 16 with React 19
- UI Components: shadcn/ui (Radix UI primitives)
- Styling: Tailwind CSS 4 + CSS Modules for page-specific demos
- Syntax Highlighting: Shiki
- Animations: Motion (Framer Motion)
- Theming: next-themes with CSS custom properties
- Fonts: Nunito Sans, Nunito, JetBrains Mono
- Chrome/Edge 106+
- Firefox 110+
- Safari 16+
Pull requests welcome. For major changes, open an issue first.
MIT License — use anything you want from this project.
Built by Thomas Butler