41 free dark mode components

A dark, focused hero with an inline email capture form and avatar social proof, ready for pre-launch waitlists.

A dark hero with animated aurora light beams, a shimmering sweep across the primary CTA, and dual-direction logo marquees beneath the fold.

Centered, full-screen marketing hero with a colour-accent headline word, supporting copy, and dual primary/secondary CTA buttons. Dark-mode ready and dependency-free.

Two-column hero on a dark background with a headline, paragraph, and two buttons beside a gradient media panel. Responsive column stack on mobile.

Animated hero with a shimmering animated-gradient badge and an aurora gradient-text headline over an ambient radial glow. Self-contained CSS animations, dependency-free, respects prefers-reduced-motion.

Landing hero with a responsive nav (React mobile toggle), gradient-accent heading, dual CTAs, and a full-height gradient side panel. Dark-mode ready.

A responsive icon grid that presents six product capabilities as scannable cards, each with an inline SVG icon, title and short description.

A bento-style grid mixing one large hero cell, a tall stat cell and several compact cards to give features a clear visual hierarchy.

A feature layout that pairs each capability with a headline metric, so every claim is anchored to a measurable result.

A two-column grid of bordered feature cards, each pairing an outlined icon with a title and supporting copy. Clean, enterprise-leaning layout with full dark-mode support.

A three-column feature section with heading and intro, plus blue-outlined cards that each carry an icon, description, and a circular arrow call-to-action. Fully theme-aware.

A centered heading over a three-column feature list, each row leading with a rounded icon badge and a 'Learn More' link. Classic marketing feature block, ported with added dark variants.

The Magic UI bento pattern: a mixed-span grid of cards where the icon shrinks and the description lifts on hover to reveal a call-to-action. Self-contained (no framer-motion, no icon libs), pure CSS group-hover, with a glow background and full dark styling.

A full-bleed dark call-to-action banner with a live status badge, subtle grid backdrop and a primary plus secondary button pair to drive discovery calls.

A full-bleed dark call-to-action banner with a rotating aurora gradient, floating orbs and a shine-on-hover button, with staggered blur-in text that reveals on scroll.

A dark call-to-action band framed by two infinite scrolling tag ribbons with a continuously flowing animated-gradient button and staggered centre content.

A dark pill button with a continuous conic-gradient light shimmer sweeping around its border.

A dark stat band where 3D-tilt cards stagger into view with count-up figures over an animated gradient mesh, finished by an infinite marquee ticker of highlight chips that pauses on hover.

A marketing site header with a logo, inline nav links, login/register buttons, and a working hamburger toggle that reveals a stacked mobile menu below the md breakpoint. Fully keyboard/ARIA accessible with light and dark variants.

An accessible underline-style tab switcher with a bottom-border active indicator and a live content panel. State-driven with proper role=tablist/tab/tabpanel and aria-selected wiring, styled for light and dark modes.

A split-button control with a chevron trigger that opens a divided action menu, including a destructive delete item. Closes on outside-click and Escape, with a rotating chevron and full ARIA menu roles for both light and dark themes.

A dark footer pairing four compact link columns with an oversized gradient brand wordmark and a live status indicator.

A grid where each image scales up under a dark gradient overlay revealing a title and a view button on hover.

A dark image grid that a cursor-following spotlight reveals.

A dark gradient overlay with a title fades in over the image on hover.

A dark, glassy card accordion.

Switches that embed sun and moon style icons inside the track to signal the two states at a glance. They suit toggles with an obvious visual pairing, such as light and dark mode, where the icon shifts as the knob slides across.

An animated light and dark theme toggle that transitions between the two modes rather than snapping. Drop it in a header or settings menu to let people switch appearance, with the sun-to-moon motion confirming which theme is now in effect.

This dark-themed sidebar provides ready-made navigation for dashboards and admin panels that run on a darker surface. Reach for it when your app already leans dark, as the deep background and muted contrast reduce glare during long working sessions.

Video player modal designed to open media in a focused overlay, sitting within the modals category. It is handy for trailers, tutorials or product clips, presenting the video centre-stage against a darkened background.

Gradient conic ring spinner that sweeps a colour gradient around a rotating ring while content loads. Use it when a plain grey spinner looks flat, the conic gradient gives the loader a modern, vivid edge that stands out against dark or light backgrounds.

Neon text effect that renders headings with a glowing, illuminated-sign look. Use it for hero titles or dark-themed banners where a bright, luminous accent suits the mood. The glow layers around each character to mimic a lit neon tube.

This is a dark-themed call-to-action section built for high contrast against a lighter page. Drop it in near the foot of a marketing page when you want the final prompt to stand out, its deep background making the headline and button feel prominent.

Dark-themed footer that arranges links into columns against a deep background. It anchors a page cleanly and suits sites with a dark palette or a bold closing section, grouping navigation across several tidy columns.

A dark-themed newsletter section built on a deep background with light text and a contrasting subscribe button. It fits sites with darker palettes or a section you want to feel weightier, letting the sign-up sit comfortably against surrounding dark content.

Cursor spotlight background that follows the pointer with a soft pool of light over a dark surface. It adds an interactive, focused feel to hero areas and feature sections, the spotlight tracking the cursor to gently highlight whatever sits beneath it.

Canvas starfield background that scatters drifting points of light like a night sky. Choose it for dark, immersive hero sections on space, tech, or launch themes, the stars rendered on a canvas so the field animates smoothly behind your content.

A spotlight cursor effect that follows the pointer with a soft masked glow, dimming everything around it. Use it on dark landing pages or hero sections to draw the eye and add atmosphere, with the illuminated circle tracking movement in real time.

This custom cursor uses mix-blend-mode so its colour inverts against whatever sits beneath it. It suits bold, high-contrast portfolios where a plain arrow feels flat, staying legible over both light and dark sections as it moves across the page.

A contribution-style heatmap that arranges values into a grid of colour-graded cells. Use it to reveal activity or intensity patterns across days and weeks, much like a commit calendar. Darker cells signal higher values so clusters stand out immediately.

A shade and tint scale generator for the colour-pickers category. Feed it a base colour and it produces the full ramp of darker shades and lighter tints, handy for building a consistent palette from a single brand hue.