3D Press Button
Button with 3D pressed effect on click using box-shadow and translateY with no JavaScript.
404 page
404 page snippet with a live demo, copyable CSS, and implementation prompt.
500 error page
500 error page snippet with a live demo, copyable CSS, and implementation prompt.
CSS accordion
details/summary styled accordion, no JS.
Action list
Action list snippet with a live demo, copyable CSS, and implementation prompt.
Activity feed
Activity feed snippet with a live demo, copyable CSS, and implementation prompt.
Animated button
Button with multi-stage hover animation: background sweep, icon shift, and shadow lift. Pure CSS transitions, no JavaScript.
ARIA Attribute Styling
Style elements based on ARIA attributes using CSS attribute selectors — disabled, expanded, selected states without extra classes.
Avatar stack
Overlapping circular avatars using negative margins and z-index stacking.
Avatar
Style user avatars with CSS border-radius, object-fit, and size variants for profile pictures and user icons.
Badge/status indicator
Small colored badge dots and status indicators for online, away, busy, and offline states. Semantic, accessible, oklch-powered.
Basic card
A versatile card component with image, title, description, and hover lift effect. The foundation of any card-based UI.
Blog post card
A CSS blog post card with gradient image placeholder, meta line, title, excerpt, and read-more link. Pure CSS, no JavaScript.
Breadcrumb trail
Breadcrumb trail snippet with a live demo, copyable CSS, and implementation prompt.
Breadcrumb navigation
A breadcrumb navigation with CSS flexbox and pseudo-element separators.
Button Group
A horizontal group of connected buttons sharing borders — built with flexbox and border-radius overrides.
Button with badge
A button with a notification badge count positioned top-right using CSS absolute positioning. No JavaScript required.
Card skeleton loading state
Shimmer loading skeleton for cards using CSS animations.
Chip/tag
Compact chip/tag component with optional close button. Ideal for filters, categories, and selected items.
Coming soon page
Coming soon page snippet with a live demo, copyable CSS, and implementation prompt.
CSS-only toggle
Checkbox-driven toggle switch with no JavaScript.
Custom checkbox
A styled checkbox using appearance: none with custom check mark, smooth transition, and accessible focus ring.
Custom radio
Custom-styled radio buttons with animated selection dot. Uses appearance: none and pseudo-elements, fully keyboard-accessible.
data-* Toggle Styling
Style elements by their data-* attribute values using CSS — tabs, toggles, and state machines without JavaScript classes.
Decorative border
Create a decorative multi-layer border using outline + outline-offset and box-shadow to add visual depth to cards and buttons without extra markup.
Destructive Button
A danger/destructive action button in red oklch() tones — for delete, remove, or irreversible actions.
Dialog modal
A native HTML dialog element with styled backdrop, centered content, and smooth open animation. Accessible by default.
Disabled button
CSS for disabled button states using :disabled and aria-disabled. Reduced opacity, cursor: not-allowed, and no hover effects. Accessible by default.
Double border
Create double border effects on cards and containers using outline-offset, box-shadow, or border-style: double.
Download card
A file download card with icon, filename, size, tags, and a primary download button. Use it for releases, assets, and resources pages.
Dropdown menu
A CSS dropdown menu using :hover and :focus-within. Smooth reveal animation, keyboard accessible, no JavaScript required.
Empty inbox
Empty inbox snippet with a live demo, copyable CSS, and implementation prompt.
Event card
Event card snippet with a live demo, copyable CSS, and implementation prompt.
Expandable card
Card that expands to reveal additional content using the details/summary HTML elements. Smooth height transition, no JavaScript.
External Link Icon
Auto-append an external link icon to any anchor with href starting with http using CSS attribute selectors — no JavaScript required.
Fallback UI pattern
Use @supports to progressively enhance components — show a solid fallback for older browsers while unlocking advanced CSS features for modern ones.
Feature card
A CSS feature card grid with icon, heading, and description. Three columns, card backgrounds, border-radius, and padding. Copy and go.
File upload
A styled file upload dropzone with dashed border, hover accent, and hidden input. Built with a label wrapping a hidden file input — no JavaScript.
Floating Action Button
Circular FAB with position:fixed, drop shadow, and hover scale effect.
Floating label
A CSS floating label input that animates from placeholder position to the top-left on focus or when filled. No JavaScript.
Focus ring
Style accessible focus rings using :focus-visible, outline-offset, and oklch() for keyboard navigation indicators.
Ghost button
A transparent button with border outline that fills on hover. All states covered: hover, focus-visible, active, disabled.
Gradient Button
Button with CSS gradient background using oklch() colors, with smooth hover shift.
Hamburger menu
CSS-only hamburger toggle that morphs into an X. Three bars animate to a close icon using transforms, no JavaScript required.
:has() dropdown
Style a parent when a child is open using :has().
Horizontal Card
Card layout where image/media sits on the left and content on the right using CSS Grid.
Icon button
A square button with a centered icon. Accessible with aria-label, complete state coverage, keyboard-friendly.
Icon-only button
Accessible icon-only button with visible focus ring, tooltip on hover, and proper ARIA labeling. Pure CSS, no JavaScript.
Image card
Build responsive image cards with CSS grid, aspect-ratio, and object-fit for consistent media display.
Image overlay card
A card with a gradient overlay on an image — title and text overlaid at the bottom using CSS absolute positioning. No JavaScript required.
Styled text input
A polished text input with focus-visible state, placeholder, and oklch colors.
Interactive card (click area)
Make entire cards clickable using CSS ::after pseudo-element stretching with accessible link semantics.
Job listing card
Job listing card snippet with a live demo, copyable CSS, and implementation prompt.
Key-value list
Key-value list snippet with a live demo, copyable CSS, and implementation prompt.
Language-based styling
Use the :lang() pseudo-class to adapt typography, quotes, and direction per language. Pure CSS internationalization. Copy and go.
Large button
A large button style with generous padding and bigger font-size for hero sections and primary calls-to-action. Copy-ready CSS.
Loading Button
A button with a CSS spinner that appears during loading state, using animation and pseudo-elements only.
Maintenance page
Maintenance page snippet with a live demo, copyable CSS, and implementation prompt.
Meter
Meter snippet with a live demo, copyable CSS, and implementation prompt.
Native select
A fully styled native <select> element with appearance: none, custom SVG arrow, oklch border, and keyboard focus ring. No JavaScript.
No connection
No connection snippet with a live demo, copyable CSS, and implementation prompt.
No results
No results snippet with a live demo, copyable CSS, and implementation prompt.
Notched corner
Cut notched corners on UI elements using CSS clip-path polygon for a modern geometric look.
Notification card
Notification card snippet with a live demo, copyable CSS, and implementation prompt.
Notification list
Notification list snippet with a live demo, copyable CSS, and implementation prompt.
Outline Button
Ghost/outline button with visible border and transparent background, with hover fill effect.
outline-offset focus ring
A focus ring with a visible gap between the element and the ring, using outline combined with outline-offset for clean keyboard navigation styling.
Overflow Scroll Container
A scrollable container with overflow: auto, custom scrollbar styling, and scroll-shadow fade edges.
Parent highlight on child focus
Highlight a parent container when any child receives focus using :has(:focus-visible). No JavaScript needed.
Pill Button
Button with fully rounded corners (border-radius: 9999px) in various sizes and styles.
Pill shape
Create pill-shaped UI elements like tags and badges using border-radius: 9999px for perfectly rounded ends.
Popover
Native HTML popover with CSS styling — positioned tooltip-style content that dismisses on outside click. No JavaScript needed.
Pricing card
A pricing tier card with a highlighted popular option using scale transform and oklch accent colors.
Primary button
Production-ready primary button with hover, focus, active, and disabled states.
Product card
E-commerce product card with image, title, price, rating stars, and add-to-cart button. Responsive, accessible, pure CSS layout.
Profile card
A centered profile card with circular avatar, name, role, and social links row. Pure CSS, dark-mode ready.
Progress bar
A styled progress element with animated fill using pseudo-elements and an accent-color fallback.
Range slider
A styled CSS range input with custom track and thumb. Uses appearance: none with webkit and moz vendor prefixes. No JavaScript.
Recipe card
Recipe card snippet with a live demo, copyable CSS, and implementation prompt.
Rounded corners
Apply consistent rounded corners to UI elements using border-radius with CSS custom properties.
Search input
A styled search input with magnifying glass icon and animated focus ring. Clean, accessible, dark-mode ready.
Secondary Button
Secondary button style with subtle background and muted text, the perfect complement to a primary CTA.
Section separator/divider
Style section dividers and separators using CSS borders, pseudo-elements, and oklch() accent colors.
Shimmer/skeleton
Skeleton loading placeholder with animated shimmer gradient. Shows content shape while data loads, pure CSS animation.
Skeleton card
Build loading skeleton placeholder cards with CSS shimmer animation using linear-gradient and keyframes.
Small button
A compact small button style with reduced padding and font-size. Copy-ready CSS for primary, secondary, and ghost variants at a smaller scale.
Split Button
A split button with a primary action and a dropdown arrow — two clickable zones separated by a vertical divider.
Stat row
Stat row snippet with a live demo, copyable CSS, and implementation prompt.
Stat/metric card
Dashboard stat card showing a large number, label, and trend indicator. Responsive, accessible, pure CSS with oklch() colors.
Step indicator
Step indicator snippet with a live demo, copyable CSS, and implementation prompt.
Switch / toggle
An iOS-style toggle switch built with a hidden checkbox and CSS. Smooth thumb animation, accessible, zero JavaScript.
Tag cloud / chip group
A flex-wrap tag cloud with consistent chip styling using oklch colors.
Testimonial card
Customer testimonial card with avatar, quote, name, and role. Quotation marks via ::before pseudo-element, pure CSS.
Textarea
Styled textarea with focus ring, character count hint, and auto-resize behavior. Dark-mode ready, accessible, pure CSS.
Timeline
Vertical timeline with connected dots and alternating content cards. Pure CSS using border and pseudo-elements.
Toast notification
A fixed-position notification that slides in from the bottom-right with auto-dismiss animation. Pure CSS keyframes.
Toggle button
A CSS-only toggle switch using a hidden checkbox and label. Smooth sliding knob transition with no JavaScript required.
Anchor-positioned tooltip
CSS Anchor Positioning tooltip — tethered via anchor-name / anchor().
CSS tooltip
A pure CSS tooltip using ::after and attr() that appears on hover with a smooth transition.
Top navigation bar
Responsive top nav with logo, links, and sticky positioning.
Tree view
Tree view snippet with a live demo, copyable CSS, and implementation prompt.
Type-Based Input Styling
Style HTML inputs differently by type using CSS attribute selectors for text, email, password, and number fields.
Under construction
Under construction snippet with a live demo, copyable CSS, and implementation prompt.
Validation states
CSS form validation states using :valid, :invalid, and :user-invalid pseudo-classes. Green and red oklch borders with transitions. No JavaScript.
Video card
A responsive video preview card with aspect-ratio thumbnail, play overlay, and metadata row. Pure CSS—use it for feeds, tutorials, and playlists.
Alert banner
Four semantic alert variants — info, success, warning, and error — built with CSS custom properties and oklch() colors. No JavaScript required.
CSS accordion
A smooth expanding accordion built with the HTML details/summary elements — no JavaScript, fully accessible, animated with CSS transitions.