# Charcoal UI

> 352 motion-first React components, 112 page sections and 100 landing-page templates for Tailwind CSS 4 and Motion, distributed as a shadcn registry.

MCP server: https://charcoalui.com/mcp (Streamable HTTP). Install a free component: npx shadcn@latest add https://charcoalui.com/r/<name>.json. Install a Pro item: npx shadcn@latest add @charcoal/<name> (setup: https://charcoalui.com/docs/pro).

Pricing: 52 components and the free sections are MIT. One Charcoal UI Pro seat unlocks every Pro component, section and template for unlimited projects, monthly or as a one-time lifetime seat: https://charcoalui.com/pricing

## Docs

- [Introduction](https://charcoalui.com/docs): what Charcoal UI is and how it works
- [Installation](https://charcoalui.com/docs/installation): shadcn CLI setup for Next.js, Vite, Remix and Astro
- [Theming](https://charcoalui.com/docs/theming): the CSS variables every component uses
- [MCP server](https://charcoalui.com/docs/mcp): connect Claude Code, Cursor or any MCP client
- [Pro setup](https://charcoalui.com/docs/pro): install Pro items with an access token

Every link below has a Markdown copy at the same URL plus `.md` (props, install command and, for free items, the full source). Everything in one file: https://charcoalui.com/llms-full.txt

## Inputs

- [AI Prompt Input](https://charcoalui.com/docs/components/ai-prompt-input.md) (Pro): The composer of an AI product: a growing textarea, attachment chips that pop in, a model pill, and a send button that morphs into a stop square while the answer streams. Enter sends, Shift+Enter breaks a line.
- [Button](https://charcoalui.com/docs/components/button.md): Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
- [Calendar](https://charcoalui.com/docs/components/calendar.md) (Pro): Month grid where months slide in the direction you travel and the selection glides between days. Full arrow, Page and Enter key support.
- [Checkbox](https://charcoalui.com/docs/components/checkbox.md): The check draws itself in, the box pops, and indeterminate morphs into a dash.
- [Chip Group](https://charcoalui.com/docs/components/chip-group.md) (Pro): Selectable chips where the chosen one grows a check while the row reflows around it, single or multiple, optionally removable. Arrow keys move, Space toggles.
- [Color Picker](https://charcoalui.com/docs/components/color-picker.md) (Pro): Swatch picker where a ring glides to the selection and a check draws in, tinted to stay readable on any swatch.
- [Color Wheel](https://charcoalui.com/docs/components/color-wheel.md) (Pro): A hue ring with a draggable handle and a saturation and lightness square inside it, both keyboard adjustable, with a live swatch and hex readout. One conic gradient and two linear ones; no canvas.
- [Combobox](https://charcoalui.com/docs/components/combobox.md): Type to filter, with matches highlighted in ember and a highlight that glides between options.
- [Credit Card Input](https://charcoalui.com/docs/components/credit-card-input.md) (Pro): Card fields that format as you type, a brand badge that appears once the number reveals it, and a card preview that mirrors the digits and flips to show the CVC while you type it.
- [Curved Input](https://charcoalui.com/docs/components/curved-input.md) (Pro): A text field whose underline is a curve that sags toward the caret as you type and ripples when the field takes focus, the floating label riding the same bend.
- [Dual Range Slider](https://charcoalui.com/docs/components/dual-range-slider.md) (Pro): Two thumbs on one track for picking a range. Press anywhere and the nearer thumb comes to you.
- [Emoji Reaction](https://charcoalui.com/docs/components/emoji-reaction.md) (Pro): A reaction bar: hover the button to pop a row of emoji on staggered springs, pick one and it bursts while its count chip bounces; picking it again takes it back.
- [File Dropzone](https://charcoalui.com/docs/components/file-dropzone.md) (Pro): Drop target that lifts and bobs while files hover over it, then lists each file with a progress wash and a remove button.
- [Hold to Confirm](https://charcoalui.com/docs/components/hold-to-confirm.md) (Pro): For destructive actions: hold the button while it fills. Let go early and it springs back.
- [Input](https://charcoalui.com/docs/components/input.md): Text field with a visible label, optional icons, an error that shakes once, and a success check that draws in.
- [Knob](https://charcoalui.com/docs/components/knob.md) (Pro): Rotary dial with an ember arc. Drag up or down, scroll, or use the arrow keys.
- [Like Button](https://charcoalui.com/docs/components/like-button.md) (Pro): The heart squashes and pops, a ring and eight sparks burst out, and the count rolls.
- [Magnetic](https://charcoalui.com/docs/components/magnetic.md) (Pro): Wrap anything to make it lean toward the pointer, then spring home when the pointer leaves.
- [Morphing Search](https://charcoalui.com/docs/components/morphing-search.md) (Pro): A search icon that grows into a full field on click, with results dropping in beneath as you type and arrow keys to pick one; Escape shrinks it back to the icon.
- [Multi Select](https://charcoalui.com/docs/components/multi-select.md) (Pro): A listbox with checkable options and chips that pop in and out of the trigger: type to filter, arrows move, Space toggles, Backspace removes the last chip, with a cap and an overflow count.
- [OTP Input](https://charcoalui.com/docs/components/otp-input.md): One-time-code input with a blinking caret, digits that pop in, paste support and autofill.
- [Password Input](https://charcoalui.com/docs/components/password-input.md): A show/hide eye whose slash draws on and off, and a strength meter that fills as you meet each rule.
- [Password Strength](https://charcoalui.com/docs/components/password-strength.md) (Pro): A password field with a segmented meter that fills on springs, a strength word that swaps, and a checklist whose items check off as each rule passes.
- [PIN Pad](https://charcoalui.com/docs/components/pin-pad.md) (Pro): A numeric keypad for a PIN: dots fill as you type, keys press on a spring, a wrong PIN shakes the dots clear, a right one pulses them green. Digits can be shuffled.
- [Radio Group](https://charcoalui.com/docs/components/radio-group.md): Roving-focus radios whose dot springs in, with a shared highlight that glides between card options.
- [Range Slider](https://charcoalui.com/docs/components/range-slider.md): Six sliders that share one accessible core: drag, click, or use the arrow, Page and Home/End keys. Every variant respects reduced motion.
- [Rating](https://charcoalui.com/docs/components/rating.md) (Pro): Star rating with a hover preview. Picking a score pops the stars in a ripple from the left.
- [Scrub Input](https://charcoalui.com/docs/components/scrub-input.md) (Pro): Figma-style number field: drag the label sideways to scrub (Shift ×10, Alt ×0.1), or click in and type.
- [Search Input](https://charcoalui.com/docs/components/search-input.md): A search icon that springs open into a field. Escape clears and collapses it.
- [Segmented Control](https://charcoalui.com/docs/components/segmented-control.md): Two to five exclusive options with a pill that glides to the selection. Arrow keys move and select.
- [Select](https://charcoalui.com/docs/components/select.md): Listbox select that unfolds from its trigger with staggered options, full keyboard support and type-ahead.
- [Shimmer Button](https://charcoalui.com/docs/components/shimmer-button.md) (Pro): A charcoal pill with an ember edge that orbits the border and a sheen that sweeps across.
- [Signature Pad](https://charcoalui.com/docs/components/signature-pad.md) (Pro): A signature pad with pen-like ink: stroke width follows speed, points are smoothed with curves, and undo and clear are built in. Emits a PNG data URL.
- [Slide to Confirm](https://charcoalui.com/docs/components/slide-to-confirm.md) (Pro): Drag the knob across to confirm. The label fades as you go; Enter confirms from the keyboard.
- [Specular Button](https://charcoalui.com/docs/components/specular-button.md) (Pro): A button with a specular highlight that follows the pointer across its surface, a rounded body from an inner shadow, and a press that ripples out from the pointer.
- [Split Button](https://charcoalui.com/docs/components/split-button.md) (Pro): A primary action with a chevron that unfolds the secondary actions inline, each sliding out while the group widens on a spring; Escape or a click outside folds them back.
- [Stepper](https://charcoalui.com/docs/components/stepper.md): Number stepper whose digits roll in the direction you press. Hold a button to repeat.
- [Swipe Cards](https://charcoalui.com/docs/components/swipe-cards.md) (Pro): A stack of cards you swipe left or right: the card rotates with the drag, a stamp fades in past the threshold, and release flings it away or springs it back. Buttons, arrow keys and Undo included.
- [Switch](https://charcoalui.com/docs/components/switch.md): A spring-driven thumb that stretches while pressed, like a real toggle under your thumb.
- [Tag Input](https://charcoalui.com/docs/components/tag-input.md): Type and press Enter or comma to add chips. Backspace highlights the last chip first, then removes it on the second press.
- [Textarea](https://charcoalui.com/docs/components/textarea.md): Grows with its content on a spring, with a ring that fills toward the character limit and warms near the end.
- [Time Picker](https://charcoalui.com/docs/components/time-picker.md) (Pro): Hour, minute and period columns that scroll with inertia and snap, using native scroll-snap so touch and wheel feel right; each column is a listbox with arrow keys and type-to-jump.
- [Toggle Group](https://charcoalui.com/docs/components/toggle-group.md): Pressable toggles for formatting bars, single or multiple. Each press pops a filled pill in or out.
- [Voice Input](https://charcoalui.com/docs/components/voice-input.md) (Pro): A microphone button that expands into a live waveform while recording, drawn from the real microphone when allowed or a synthetic voice-like wave otherwise, with a timer and a cancel.
- [Wheel Picker](https://charcoalui.com/docs/components/wheel-picker.md) (Pro): iOS-style drum on native scroll-snap, so momentum and snapping come from the browser. Rows tilt away in 3D as they leave the centre.

## Navigation

- [Bottom Nav](https://charcoalui.com/docs/components/bottom-nav.md) (Pro): Mobile tab bar. The active pill slides between tabs, the icon hops, and badges sit on the icon.
- [Breadcrumb](https://charcoalui.com/docs/components/breadcrumb.md): Long trails fold their middle into “…”. Click it and the hidden crumbs unblur into place one after another.
- [Bubble Menu](https://charcoalui.com/docs/components/bubble-menu.md) (Pro): A round trigger that bursts into a column, fan or row of bubble links on staggered springs and gathers them back on close. Arrow keys move between bubbles, Escape closes.
- [Card Nav](https://charcoalui.com/docs/components/card-nav.md) (Pro): A compact top bar whose menu button expands it into a stack of cards, one per section, with the links rising in one after another.
- [Context Menu](https://charcoalui.com/docs/components/context-menu.md) (Pro): Right-click menu that opens at the pointer and stays on screen. Shift+F10 opens it from the keyboard.
- [Dock](https://charcoalui.com/docs/components/dock.md) (Pro): macOS-style dock. Icons swell with pointer distance and show a label on hover.
- [Dropdown Menu](https://charcoalui.com/docs/components/dropdown-menu.md): Menu with icons, shortcuts, checkbox items, labels and destructive actions. Items cascade in and a highlight follows you.
- [Expandable Tabs](https://charcoalui.com/docs/components/expandable-tabs.md) (Pro): Icon tabs where the active one expands to reveal its label, keeping toolbars compact.
- [Floating Nav](https://charcoalui.com/docs/components/floating-nav.md) (Pro): A pill nav that slips away while you scroll down and returns as soon as you scroll up, with a hover highlight that glides between links.
- [Flowing Menu](https://charcoalui.com/docs/components/flowing-menu.md) (Pro): Tall list links; hovering one slides a filled strip in from the side the pointer entered, carrying a marquee of its text and image, and out the side it left.
- [Line Sidebar](https://charcoalui.com/docs/components/line-sidebar.md) (Pro): A sidebar reduced to short lines that grow into labelled items when the pointer reaches the rail, with the active line in ember.
- [Magnetic Nav](https://charcoalui.com/docs/components/magnetic-nav.md) (Pro): A nav whose underline stretches from the active item toward the hovered one, spanning both, then snaps to the new item on click. Keyboard focus moves it too.
- [Mega Menu](https://charcoalui.com/docs/components/mega-menu.md) (Pro): A top nav whose items open wide panels of link columns and a featured card. One panel morphs its size between items instead of reopening, and the content crossfades.
- [Pagination](https://charcoalui.com/docs/components/pagination.md): Page numbers with smart gaps and a pill that glides to the current page.
- [Pill Nav](https://charcoalui.com/docs/components/pill-nav.md) (Pro): A pill-shaped nav where a liquid highlight glides under the hovered link and settles back on the active one, flipping the label colour beneath it.
- [Radial Menu](https://charcoalui.com/docs/components/radial-menu.md) (Pro): A pie of actions around a button. Hold the button, move toward a wedge and release to pick it in one gesture, or click to open a ring the arrow keys move around.
- [Scroll Progress](https://charcoalui.com/docs/components/scroll-progress.md) (Pro): A thin glowing ember bar that fills as you read the page or any scroll container.
- [Sidebar](https://charcoalui.com/docs/components/sidebar.md): Collapsible app sidebar: width springs between 240 and 64 px, labels fade, and an ember bar marks the active item.
- [Steps](https://charcoalui.com/docs/components/steps.md): Progress through a multi-step flow: connectors fill, finished steps draw a check, and the current one pulses ember.
- [Table of Contents](https://charcoalui.com/docs/components/table-of-contents.md) (Pro): Scroll-spy outline: an ember marker slides to the section you are reading, and links scroll smoothly.
- [Tabs](https://charcoalui.com/docs/components/tabs.md): Tabs with a gliding indicator and panels that slide in the direction you travelled.

## Overlays

- [Command Menu](https://charcoalui.com/docs/components/command-menu.md) (Pro): ⌘K palette with fuzzy filtering, grouped results, a gliding highlight and full keyboard control.
- [Dialog](https://charcoalui.com/docs/components/dialog.md): Built on the native <dialog> element for focus trapping and Escape, with a blur-and-scale entrance and exit.
- [Drawer](https://charcoalui.com/docs/components/drawer.md): Bottom sheet you can fling closed. Drag past a threshold or flick down, and it rubber-bands at the top.
- [Dynamic Island](https://charcoalui.com/docs/components/dynamic-island.md) (Pro): A black pill that morphs its size and content between states, like the iPhone's Dynamic Island.
- [Hover Card](https://charcoalui.com/docs/components/hover-card.md) (Pro): A rich preview that springs out of a link on hover or focus, and stays open while the pointer is over it.
- [Morph Dialog](https://charcoalui.com/docs/components/morph-dialog.md) (Pro): A card that grows into a dialog: the shell, artwork and title morph between the two, then fold back on close.
- [Notification Stack](https://charcoalui.com/docs/components/notification-stack.md) (Pro): iOS-style grouped notifications: a fanned stack that unfolds into a list. Swipe one away when expanded.
- [Popover](https://charcoalui.com/docs/components/popover.md): Anchored panel that scales from its trigger. Closes on outside click and Escape, and returns focus.
- [Sheet](https://charcoalui.com/docs/components/sheet.md): Side panel on the native <dialog> element. It slides in from either edge, and you can fling it back to close.
- [Staggered Menu](https://charcoalui.com/docs/components/staggered-menu.md) (Pro): A full-height menu that arrives in layers: coloured panels sweep in one after another, then the menu, then oversized numbered links rise in with a stagger. Escape closes and focus returns.
- [Toast](https://charcoalui.com/docs/components/toast.md): Stacked toasts that fan out on hover, swipe away horizontally, and pause their timers while you read.
- [Tooltip](https://charcoalui.com/docs/components/tooltip.md): Springs out of its trigger. After the first one opens, neighbours open instantly, so scanning a toolbar feels quick.
- [Tour Spotlight](https://charcoalui.com/docs/components/tour-spotlight.md) (Pro): An onboarding tour that cuts a spotlight out of a dim overlay around the current target and morphs the hole and its card from step to step. Arrow keys and Enter advance, Escape ends.
- [Undo Toast](https://charcoalui.com/docs/components/toast-undo.md) (Pro): Undo toasts with a draining ring for the time left: Undo reverses the action and the toast folds away; too late and the button shakes instead. Several stack.

## Feedback

- [Activity Pulse](https://charcoalui.com/docs/components/activity-pulse.md) (Pro): A live activity feed: new rows push in at the top with a pulse ring, timestamps tick, and the oldest rows slide out once the list is full.
- [Alert](https://charcoalui.com/docs/components/alert.md): Info, success, warning and error callouts that slide in and collapse smoothly when dismissed.
- [Audio Visualizer](https://charcoalui.com/docs/components/audio-visualizer.md) (Pro): Bars, a waveform or a ring driven by an AnalyserNode when given an audio element, or by a synthetic beat otherwise, with levels that ease down so it breathes instead of flickering.
- [Confetti](https://charcoalui.com/docs/components/confetti.md) (Pro): Tumbling ember confetti from any point, drawn on a throwaway canvas. It does nothing under reduced motion.
- [Countdown](https://charcoalui.com/docs/components/countdown.md) (Pro): Days, hours, minutes and seconds, with each digit rolling down as it ticks.
- [Empty State](https://charcoalui.com/docs/components/empty-state.md) (Pro): An empty-state panel with an illustration built from animated SVG primitives in theme tokens: an inbox stack, a magnifier, a folder or a chart that floats gently.
- [Inline Confirm](https://charcoalui.com/docs/components/inline-confirm.md) (Pro): A button that slides into a "Sure?" pair in place instead of opening a dialog, with a draining bar for the time left, Escape to back out and a spinner while the action runs.
- [Live Dot](https://charcoalui.com/docs/components/live-dot.md) (Pro): A presence dot with a pulsing halo in the four states an indicator needs: live, busy, away, offline. CSS only.
- [Loader](https://charcoalui.com/docs/components/loader.md): Four quiet loaders: dots, bars, orbit and ember pulse. Each announces itself to screen readers.
- [Progress](https://charcoalui.com/docs/components/progress.md): Linear and circular progress on a spring, with an optional indeterminate sweep.
- [Progress Ring](https://charcoalui.com/docs/components/progress-ring.md) (Pro): A ring progress with a glowing head that travels the arc, a centre value that counts along on a spring, and an indeterminate mode where a short arc chases its tail.
- [Pull to Refresh](https://charcoalui.com/docs/components/pull-to-refresh.md) (Pro): A scroll container where pulling down from the top stretches out a loader that fills with the pull; past the threshold a release triggers the refresh and the loader spins until it resolves.
- [Ripple](https://charcoalui.com/docs/components/ripple.md) (Pro): Drop it inside any relative element for a ripple that spreads from the exact point you pressed.
- [Scroll Cue](https://charcoalui.com/docs/components/scroll-cue.md) (Pro): A scroll hint: a mouse outline with a dropping wheel dot, a bouncing chevron, or a label with a falling line, fading out once the reader scrolls.
- [Skeleton](https://charcoalui.com/docs/components/skeleton.md): Placeholder blocks with a soft light sweep, plus SkeletonSwap, which cross-fades to the real content with a short blur.
- [Sparkle Badge](https://charcoalui.com/docs/components/sparkle-badge.md) (Pro): An AI badge with four-point sparkles that twinkle in at random spots and a shimmer that sweeps across now and then.
- [Status Badge](https://charcoalui.com/docs/components/status-badge.md): Badge that morphs between states: the width animates, the label cross-fades and the dot pulses while live.
- [Story Progress](https://charcoalui.com/docs/components/story-progress.md) (Pro): Segmented, auto-advancing progress like Instagram stories, with pause support.
- [Success Check](https://charcoalui.com/docs/components/success-check.md) (Pro): A spinner that resolves into a drawn check, or into a cross that shakes once.
- [Thinking Orb](https://charcoalui.com/docs/components/thinking-orb.md) (Pro): A sphere of dots that shows an AI is busy, with nine motions for nine kinds of busy: working, searching, solving, listening, connecting, composing, breathing, weaving and shaping. States morph into each other; dots can lean towards the cursor.
- [Typing Indicator](https://charcoalui.com/docs/components/typing-indicator.md) (Pro): A chat bubble that pops in with three dots rippling in a wave, and tells screen readers who is typing.
- [Upload Tray](https://charcoalui.com/docs/components/upload-tray.md) (Pro): A tray of uploads: rows slide in with spring-smoothed progress, size and speed, pause and cancel, a check that draws itself when done and a failed state with retry.

## Display

- [Accordion](https://charcoalui.com/docs/components/accordion.md): Bouncy accordion: height springs open, the chevron flips, and content fades up a beat later.
- [Activity Heatmap](https://charcoalui.com/docs/components/activity-heatmap.md) (Pro): A contribution-style heatmap: a cell per day in weekly columns, shaded in four steps of the accent, painting in column by column, with a tooltip that follows hover and the arrow keys.
- [Animated Border](https://charcoalui.com/docs/components/animated-border.md) (Pro): An ember highlight travels around the card's border. CSS only, using @property.
- [Animated List](https://charcoalui.com/docs/components/animated-list.md) (Pro): Reveals items one at a time, newest on top, like a live activity feed.
- [Area Chart](https://charcoalui.com/docs/components/area-chart.md) (Pro): An area chart whose fill rises from the baseline while the line draws in, with a comparison series behind it, a target line and a scrubbing tooltip.
- [Avatar Group](https://charcoalui.com/docs/components/avatar-group.md): Overlapping avatars that fan apart on hover, with names that spring up above each one.
- [Bar Chart](https://charcoalui.com/docs/components/bar-chart.md): Bars spring up in sequence when the chart enters view, show a value on hover, and keep a screen-reader table underneath.
- [Bento Grid](https://charcoalui.com/docs/components/bento-grid.md) (Pro): A bento grid whose cells rise in one after another; hover a cell and it lifts while the others dim a touch. Cells set their own spans and layout animation keeps the grid steady.
- [Border Beam](https://charcoalui.com/docs/components/border-beam.md) (Pro): A beam of coloured light that rides the border of any card, input or button, with a soft glow outside and an optional wash inside. Nine palettes, rotate or pulse.
- [Border Glow](https://charcoalui.com/docs/components/border-glow.md) (Pro): A glow that tracks the pointer along the border of a card, so the edge nearest the cursor lights up and slides around as you move. CSS variables carry the pointer; nothing re-renders.
- [Bounce Cards](https://charcoalui.com/docs/components/bounce-cards.md) (Pro): A fan of image cards that bounce in one after another on stiff springs; hover one and it lifts while its neighbours step aside.
- [Card Stack](https://charcoalui.com/docs/components/card-stack.md) (Pro): Swipe the top card left or right and the next one rises to meet you. Buttons do the same for keyboard users.
- [Card Swap](https://charcoalui.com/docs/components/card-swap.md) (Pro): A stack of cards in loose 3D. On each tick, or click, the front card drops out, slides to the back and the rest shuffle forward on springs.
- [Carousel](https://charcoalui.com/docs/components/carousel.md): Drag, flick, arrow-key or click the dots. Slides snap to the nearest one, side slides dim and shrink, and the active dot stretches.
- [Chroma Grid](https://charcoalui.com/docs/components/chroma-grid.md) (Pro): Image cards under a grey veil: a chromatic spotlight follows the pointer and only the cards inside it show their colour, like sweeping a torch over prints in a dark room.
- [Circular Carousel](https://charcoalui.com/docs/components/circular-carousel.md) (Pro): Cards stand on a ring in 3D and the whole ring turns: drag, scroll or arrow keys, with the card facing you scaled up and the rest dimming into depth. Release snaps to a card.
- [Circular Gallery](https://charcoalui.com/docs/components/circular-gallery.md) (Pro): Images on a curved band that reads as a wide wheel seen side-on. Drag or scroll to turn it; it keeps its momentum and eases out, looping without a seam.
- [Code Window](https://charcoalui.com/docs/components/code-window.md) (Pro): A code window with window chrome, light syntax colouring in theme tokens, line numbers and highlighted lines, that can type its code in with a blinking caret.
- [Copy Button](https://charcoalui.com/docs/components/copy-button.md): The copy icon blurs into a check that draws itself, then swaps back.
- [Cover Flow](https://charcoalui.com/docs/components/cover-flow.md) (Pro): The classic cover flow: the chosen cover faces you, the rest fan away at an angle with reflections beneath. Click, arrow keys or scroll bring another to the front on a spring.
- [Decay Card](https://charcoalui.com/docs/components/decay-card.md) (Pro): An image that melts and smears when the pointer or the page moves fast, then settles. Turbulence displaces the pixels and a blur stretched along the direction of travel makes the smear.
- [Depth Carousel](https://charcoalui.com/docs/components/depth-carousel.md) (Pro): The active card stands in front while its neighbours step back into depth, blur and shadow. Drag, scroll or arrow keys move a continuous position; release snaps.
- [Device Frame](https://charcoalui.com/docs/components/device-frame.md) (Pro): A phone, tablet or laptop mockup drawn in CSS around any content, with a notch, a 3D tilt toward the pointer and a glass glare. The screen scrolls.
- [Dome Gallery](https://charcoalui.com/docs/components/dome-gallery.md) (Pro): Images tiled over the inside of a dome with CSS 3D; drag or arrow keys turn it, and clicking a tile brings it forward full size.
- [Donut Chart](https://charcoalui.com/docs/components/donut-chart.md) (Pro): Segments draw in one after another. Hover one to thicken it and read its value in the centre.
- [Drift Wall](https://charcoalui.com/docs/components/drift-wall.md) (Pro): Rows of images drifting in alternate directions at different speeds, the whole wall parallaxing to the pointer and each tile lifting on hover. CSS does the drifting.
- [Electric Border](https://charcoalui.com/docs/components/electric-border.md) (Pro): A live electric arc runs along a card's edge: a stroked rounded rect displaced by fractal noise that is re-rolled a few times a second, over a soft glow. Pure SVG, so it fits any size without measuring.
- [Electric Logo](https://charcoalui.com/docs/components/electric-logo.md) (Pro): Electric arcs crawl around the outline of any SVG you wrap: displaced copies behind it reseed every few frames, so the edge jitters like a Jacob's ladder.
- [Expandable Card](https://charcoalui.com/docs/components/expandable-card.md) (Pro): A card that grows in place to reveal more, while its neighbours make room smoothly.
- [Feature Card](https://charcoalui.com/docs/components/feature-card.md) (Pro): A feature card for marketing pages: on hover the icon tilts and fills with the accent, a wash rises from the bottom, a visual slides up behind the copy and the link arrow nudges.
- [Flex Carousel](https://charcoalui.com/docs/components/flex-carousel.md) (Pro): A strip of image panels where the hovered or focused one grows and the others squeeze, the caption sliding up inside the open panel.
- [Flip Card](https://charcoalui.com/docs/components/flip-card.md) (Pro): A 3D card flip on a springy hinge. Click or press to flip, with optional hover-to-flip.
- [Fluid Glass](https://charcoalui.com/docs/components/fluid-glass.md) (Pro): A draggable glass lens that magnifies the content beneath it and bends it at the rim, built from a clipped, scaled copy of the children and an SVG displacement filter. Arrow keys move it too.
- [Flying Posters](https://charcoalui.com/docs/components/flying-posters.md) (Pro): Posters hang in a tunnel of 3D space and fly past the camera as you scroll, drag or wait, looping seamlessly with the nearest always drawn on top.
- [Folder](https://charcoalui.com/docs/components/folder.md) (Pro): A project folder whose front flap tips forward while the files fan up out of it.
- [Gauge](https://charcoalui.com/docs/components/gauge.md) (Pro): A dial gauge with colour bands and tick marks whose needle swings to the value on an underdamped spring, overshooting a touch, while the readout counts along.
- [Glass Icons](https://charcoalui.com/docs/components/glass-icons.md) (Pro): Icon tiles with glass depth: a coloured backplate behind a frosted front; on hover the backplate rotates away and the front tilts up.
- [Glass Surface](https://charcoalui.com/docs/components/glass-surface.md) (Pro): A liquid-glass surface: backdrop blur and tint, a refractive rim from an SVG displacement filter applied only at the edge, a specular top highlight and a thin chromatic fringe.
- [Gradual Blur](https://charcoalui.com/docs/components/gradual-blur.md) (Pro): Progressive blur along one edge of a scrolling container: stacked backdrop-filter layers, each blurrier than the last, so content melts out instead of being cut by a fade. Static and pointer-transparent.
- [Holo Card](https://charcoalui.com/docs/components/holo-card.md) (Pro): A holographic foil card: a rainbow band, a conic iridescence and a field of glints all move against the pointer, so the foil reads as printed under the surface. Tilt and glare included.
- [Image Compare](https://charcoalui.com/docs/components/image-compare.md) (Pro): Before/after split you can drag anywhere. The handle also works with the arrow keys.
- [Image Lightbox](https://charcoalui.com/docs/components/image-lightbox.md) (Pro): Thumbnails zoom into a full-screen viewer. Swipe or use the arrow keys to move between images.
- [Infinite Menu](https://charcoalui.com/docs/components/infinite-menu.md) (Pro): A grid of tiles that goes on forever in every direction: drag it with inertia, the tiles wrap, the one nearest the centre swells and names itself, and release snaps it to the middle.
- [Infinite Spiral](https://charcoalui.com/docs/components/infinite-spiral.md) (Pro): Items travel inward along a spiral, shrinking and fading toward the centre, then reappear at the outside: an endless funnel you scroll or drag through either way.
- [Lanyard](https://charcoalui.com/docs/components/lanyard.md) (Pro): A conference badge hanging from a lanyard as a 2D pendulum: a short Verlet chain for the strap, so dragging the badge swings and whips it and it settles under gravity. No physics engine, no three.js.
- [Line Chart](https://charcoalui.com/docs/components/line-chart.md) (Pro): A line chart that draws its lines in, with a crosshair that snaps to the nearest point, a tooltip listing every series and arrow keys to step through. SVG only.
- [Liquid Metal](https://charcoalui.com/docs/components/liquid-metal.md) (Pro): A ring of moving liquid metal around buttons, icons and badges: a wandering halo, a pool of reflected light, and a highlight that swings towards the cursor. Chromatic, silver and gold, plus metal text.
- [Logo Loop](https://charcoalui.com/docs/components/logo-loop.md) (Pro): A seamless logo marquee whose speed is real pixels per second, with faded edges and a hover pause. CSS does the moving; the duration comes from the measured width.
- [Magic Bento](https://charcoalui.com/docs/components/magic-bento.md) (Pro): A bento grid where a spotlight follows the pointer across every card, the border lights up where the pointer is, cards tilt toward it, stars drift up on hover and a click ripples.
- [Marquee](https://charcoalui.com/docs/components/marquee.md): CSS-only infinite marquee with faded edges. It pauses on hover and stops for reduced motion.
- [Masonry](https://charcoalui.com/docs/components/masonry.md) (Pro): A masonry grid balanced by height: each item goes into the shortest column, items rise in on first paint, and layout animation carries them to new places when the list or column count changes.
- [Morph Slider](https://charcoalui.com/docs/components/morph-slider.md) (Pro): The next image morphs in over the current one through a growing clip-path (circle, diagonal wipe or slide) while the old one scales back, with a draining progress bar and thumbnails.
- [Number Ticker](https://charcoalui.com/docs/components/number-ticker.md): Each digit rolls on its own wheel to the new number, so changes read as motion instead of a flicker.
- [Orbit](https://charcoalui.com/docs/components/orbit.md) (Pro): Icons circling a centre on CSS-only rings. Each icon counter-rotates so it stays upright.
- [Pixel Card](https://charcoalui.com/docs/components/pixel-card.md) (Pro): A card whose surface fills with shimmering pixels from the edges inward on hover and drains back out when the pointer leaves.
- [Profile Card](https://charcoalui.com/docs/components/profile-card.md) (Pro): An avatar card with name, handle, status and a contact button. It leans toward the pointer and glows where it is; the status dot carries a text label.
- [Receipt](https://charcoalui.com/docs/components/receipt.md) (Pro): A till receipt that prints itself line by line in a dot-matrix face, with a zigzag tear and a total that counts up once the last line lands.
- [Reflective Card](https://charcoalui.com/docs/components/reflective-card.md) (Pro): A brushed- or polished-metal card. The specular highlight sits under the pointer, a second reflection slides the other way as the card tilts, and the grain parallaxes beneath it.
- [Scroll Reveal](https://charcoalui.com/docs/components/scroll-reveal.md): Wrap anything to fade it in as it scrolls into view, from any direction or out of a blur. Several children stagger.
- [Sortable List](https://charcoalui.com/docs/components/sortable-list.md) (Pro): Drag to reorder with a lifted shadow, or focus the handle and use the arrow keys.
- [Sparkline](https://charcoalui.com/docs/components/sparkline.md) (Pro): An inline sparkline that draws itself in, with a soft fill, a pulsing end dot and trend colouring. Pure SVG.
- [Spotlight Card](https://charcoalui.com/docs/components/spotlight-card.md) (Pro): An ember glow follows the pointer across the card and its border.
- [Star Border](https://charcoalui.com/docs/components/star-border.md) (Pro): Two points of light chase each other around a button or card's border in opposite directions, each with a short tail and a glow. CSS only, from one registered angle.
- [Stat Card](https://charcoalui.com/docs/components/stat-card.md) (Pro): KPI card whose number counts up as it enters view, with a delta pill and a sparkline that draws itself.
- [Terminal](https://charcoalui.com/docs/components/terminal.md) (Pro): Types out commands character by character and prints their output, starting when it scrolls into view.
- [Theme Toggle](https://charcoalui.com/docs/components/theme-toggle.md): The sun eclipses into a moon, and the new theme spreads from the button as a circle.
- [Ticket Card](https://charcoalui.com/docs/components/ticket-card.md) (Pro): A ticket with a perforated stub: notched edges, a barcode drawn from the code text, and a stub that tears off along the perforation when clicked.
- [Tilt Card](https://charcoalui.com/docs/components/tilt-card.md) (Pro): Card that tilts toward the pointer in 3D with a moving glare. Lies flat for touch and reduced motion.
- [Timeline](https://charcoalui.com/docs/components/timeline.md): An ember line that draws itself as you scroll, with each entry rising into view.
- [Tweet Card](https://charcoalui.com/docs/components/tweet-card.md) (Pro): A social post card: hover lifts it, the like heart bursts and the count ticks, and mentions, tags and links are picked out in the accent.

## Text

- [ASCII Text](https://charcoalui.com/docs/components/ascii-text.md) (Pro): Text drawn as a grid of ASCII characters picked by brightness, with a wave travelling through the glyph density and a brighter patch under the pointer.
- [Circular Text](https://charcoalui.com/docs/components/circular-text.md) (Pro): Text running around a slowly turning circle, with a slot in the middle. It speeds up on hover.
- [Curved Loop](https://charcoalui.com/docs/components/curved-loop.md) (Pro): Text repeating along a curved SVG path and scrolling like a marquee. Drag it to change its speed and direction; it eases back to cruising speed when you let go.
- [Depth Text](https://charcoalui.com/docs/components/depth-text.md) (Pro): Layered 3D extruded text: stacked copies step back in perspective behind the face and the block tilts toward the pointer, so the shaded side catches the light.
- [Echo Text](https://charcoalui.com/docs/components/echo-text.md) (Pro): A heading that follows the pointer with echo copies trailing behind on softer springs and fading down the trail. The further an echo falls behind, the more it blurs.
- [Falling Text](https://charcoalui.com/docs/components/falling-text.md) (Pro): Words drop under gravity, bounce off the walls and pile up at the bottom, and can be picked up and thrown. The physics is a few lines of its own; no engine.
- [Flip Words](https://charcoalui.com/docs/components/flip-words.md) (Pro): Words flip over like a 3D board, each letter rotating a beat after the last.
- [Fold Text](https://charcoalui.com/docs/components/fold-text.md) (Pro): Each line folds down into place like a hinge, from edge-on to flat, one after another as the block scrolls into view. A small spring overshoot makes it settle like a real hinge.
- [Fuzzy Text](https://charcoalui.com/docs/components/fuzzy-text.md) (Pro): Canvas text whose edges shiver: every frame copies thin horizontal slices with a small random offset, and the jitter grows while the pointer is over it.
- [Glitch Text](https://charcoalui.com/docs/components/glitch-text.md) (Pro): Two offset colour layers tear through the text in slices, on hover or always. CSS only.
- [Gradient Text](https://charcoalui.com/docs/components/gradient-text.md): Text filled with a slowly flowing ember gradient. CSS only.
- [Highlight Text](https://charcoalui.com/docs/components/highlight-text.md) (Pro): Marks a phrase as it scrolls into view: a marker sweep, a hand-drawn underline, or a scribbled circle.
- [Kinetic Text](https://charcoalui.com/docs/components/kinetic-text.md) (Pro): Rows of repeated text run in alternating directions across a slanted block, and the whole thing speeds up with the scroll velocity of the page.
- [Letter Swap](https://charcoalui.com/docs/components/letter-swap.md) (Pro): On hover each letter rolls up and is replaced by its twin from below, in a quick stagger.
- [Line Reveal](https://charcoalui.com/docs/components/line-reveal.md) (Pro): Lines of text rise into view inside clipped masks, one after another, the reveal every agency site opens with.
- [Liquid Text](https://charcoalui.com/docs/components/liquid-text.md) (Pro): An SVG turbulence and displacement filter makes the text wobble like a liquid surface: a slow idle, a surge under the pointer.
- [Magnet Text](https://charcoalui.com/docs/components/magnet-text.md) (Pro): Each letter is pushed away from the pointer within a radius and springs back, so the word parts around your cursor like a magnet of the wrong polarity.
- [Masked Heading](https://charcoalui.com/docs/components/masked-heading.md) (Pro): Letters are a window onto an image or gradient that pans slowly behind them, and the heading wipes in from the left. Without an image it falls back to a drifting ember and foreground gradient.
- [Particle Text](https://charcoalui.com/docs/components/particle-text.md) (Pro): Text sampled into canvas particles that fly in from random positions to form the letters, then scatter from the pointer and spring back.
- [Proximity Scramble](https://charcoalui.com/docs/components/proximity-scramble.md) (Pro): Letters within reach of the pointer cycle through random glyphs, fastest at the centre, and settle back as it moves away.
- [Rotating Text](https://charcoalui.com/docs/components/rotating-text.md) (Pro): Cycles through words with a rolling letter-by-letter swap, and the container eases to each width.
- [Scramble Text](https://charcoalui.com/docs/components/scramble-text.md) (Pro): Characters cycle through glyphs before locking in, left to right.
- [Scroll Float](https://charcoalui.com/docs/components/scroll-float.md) (Pro): Characters float up and settle as the element scrolls through the viewport. Driven by scroll position, so it scrubs both ways.
- [Scroll Scale Text](https://charcoalui.com/docs/components/scroll-scale-text.md) (Pro): A heading pinned inside a tall section whose scale, letter-spacing and weight follow your scroll through it, so it grows from a whisper to a shout.
- [Scroll Text](https://charcoalui.com/docs/components/scroll-text.md) (Pro): Words light up one by one as the paragraph scrolls through the viewport.
- [Shimmer Text](https://charcoalui.com/docs/components/shimmer-text.md): A band of light sweeps across text. Good for loading or thinking states.
- [Shuffle Text](https://charcoalui.com/docs/components/shuffle-text.md) (Pro): Letters slide vertically through a column of alternative glyphs before settling on their own, left to right. A slot reel rather than a scramble: every glyph is real and moves as a piece.
- [Split Flap](https://charcoalui.com/docs/components/split-flap.md) (Pro): Airport departure board: every cell flips through the drum until it lands on its letter.
- [Stroke Text](https://charcoalui.com/docs/components/stroke-text.md) (Pro): Outlined text whose stroke draws itself in, then optionally fills. The glyphs are SVG text, so size, weight and family come from className like any other word.
- [Tech Text](https://charcoalui.com/docs/components/tech-text.md) (Pro): A monospace heading that boots in: characters type on under a scanline with a blinking block cursor, then a highlight bar scans across once. Timing has a human jitter so it never feels like a metronome.
- [Text Cursor](https://charcoalui.com/docs/components/text-cursor.md) (Pro): Copies of a word or emoji spawn along the pointer path, facing the direction of travel, then drift up and fade. Mouse only.
- [Text Explode](https://charcoalui.com/docs/components/text-explode.md) (Pro): Letters fly apart with a spin on hover or click, each on its own spring, and snap back together when the pointer leaves.
- [Text Morph](https://charcoalui.com/docs/components/text-morph.md) (Pro): Morphs between strings: letters shared by both glide to their new spots, and the rest blur in and out.
- [Text Pressure](https://charcoalui.com/docs/components/text-pressure.md) (Pro): Letters thicken as the pointer approaches, like pressing into soft type. Needs a variable font.
- [Text Reveal](https://charcoalui.com/docs/components/text-reveal.md): Words rise out of a blur one after another, when the text scrolls into view.
- [Text Spotlight](https://charcoalui.com/docs/components/text-spotlight.md) (Pro): Dim text lit by a soft circle that follows the pointer: two copies of the text, the bright one clipped by a radial mask.
- [True Focus](https://charcoalui.com/docs/components/true-focus.md) (Pro): Every word is blurred except the one in focus, framed by four corner brackets that hop from word to word on an interval. Hovering a word pulls the focus there and pauses the hop.
- [Typewriter](https://charcoalui.com/docs/components/typewriter.md): Types each word with a human rhythm, holds it, deletes it and moves on. Screen readers hear the full list once.
- [Warp Text](https://charcoalui.com/docs/components/warp-text.md) (Pro): A wave of skew and scale travels through the letters of a word, once per hover or continuously.
- [Wavy Text](https://charcoalui.com/docs/components/wavy-text.md) (Pro): Letters hop in a wave when you hover the word, or continuously with loop.

## Backgrounds

- [Acid Squares](https://charcoalui.com/docs/components/acid-squares.md) (Pro): A grid of squares that pulse, rotate and flicker through a shifting palette, in waves that spread from the pointer.
- [Aero Shards](https://charcoalui.com/docs/components/aero-shards.md) (Pro): Translucent glass shards floating at different depths, drifting and tilting on their own cycles, the field parallaxing to the pointer by depth.
- [Antigravity](https://charcoalui.com/docs/components/antigravity.md) (Pro): Motes rise as if gravity flipped, each leaving a short fading trail, and scatter away from the pointer with a push that decays as they recover. Trails are drawn by fading the canvas toward transparent, so it works on any background.
- [Aurora](https://charcoalui.com/docs/components/aurora.md) (Pro): Warm aurora bands drifting across the top of a section, fading into the page below.
- [Balatro](https://charcoalui.com/docs/components/balatro.md) (Pro): A swirling paint vortex of three colours folding into each other, with optional pixelation and a tilt toward the pointer. WebGL, written in the file.
- [Ballpit](https://charcoalui.com/docs/components/ballpit.md) (Pro): Balls drop into the box, bounce, settle into a heap and get shoved around by the pointer. A small circle-collision solver written for the file; no physics engine.
- [Caustics](https://charcoalui.com/docs/components/caustics.md) (Pro): Underwater light: interfering bright lines drifting over a dark pool floor, the way sun looks through a wave. A Charcoal original. WebGL, written in the file.
- [Color Bends](https://charcoalui.com/docs/components/color-bends.md) (Pro): Smooth bands of colour bending across the field like light through curved glass, flowing diagonally and bulging toward the pointer. WebGL, written in the file.
- [CRT Warp](https://charcoalui.com/docs/components/crt-warp.md) (Pro): A CRT screen over anything: curved glass, phosphor scanlines, a rolling band, chromatic edges and a faint flicker, with the content underneath still interactive. CSS only.
- [Dark Veil](https://charcoalui.com/docs/components/dark-veil.md) (Pro): A dark veil of folding noise with light bleeding through the creases, optional scanlines and grain. WebGL, written in the file.
- [Dither](https://charcoalui.com/docs/components/dither.md) (Pro): A drifting field of value noise quantised with a Bayer matrix into two tones, so light and shadow break into the ordered crosshatch of early screens, with a ripple from the pointer.
- [Dot Field](https://charcoalui.com/docs/components/dot-field.md) (Pro): A field of dots whose size breathes with a travelling noise wave, and that part around the pointer.
- [Dot Grid](https://charcoalui.com/docs/components/dot-grid.md): Dot grid whose dots swell and warm up near the pointer.
- [Ember Field](https://charcoalui.com/docs/components/ember-field.md) (Pro): Canvas embers drifting up from the bottom edge, flickering as they cool. The Charcoal UI signature.
- [Faulty Terminal](https://charcoalui.com/docs/components/faulty-terminal.md) (Pro): An old monitor full of glyph noise: rows scroll and flicker, bands of corruption tear across, scanlines and curved glass sit on top, and the brightness breathes.
- [Ferrofluid](https://charcoalui.com/docs/components/ferrofluid.md) (Pro): A pool of glossy black fluid that rises into spikes under a magnet that follows the pointer: a noise field thresholded against a distance field, lit with a sharp specular. WebGL, written in the file.
- [Floating Lines](https://charcoalui.com/docs/components/floating-lines.md) (Pro): Long thin lines drift across at different depths and speeds with a slow wobble, and the near layers slide in parallax with the pointer.
- [Flow Field](https://charcoalui.com/docs/components/flow-field.md) (Pro): Hundreds of particles follow a slowly shifting current, leaving silky ember trails.
- [Flux Lines](https://charcoalui.com/docs/components/flux-lines.md) (Pro): A grid of short segments that flow along a drifting noise field and swing round to face the pointer, like a compass bed under a magnet.
- [Galaxy](https://charcoalui.com/docs/components/galaxy.md) (Pro): A tilted spiral of thousands of precomputed points with a bright core and dense arms. Inner stars orbit faster than outer ones, so the arms keep winding, and the whole disc leans with the pointer.
- [Ghost Fibers](https://charcoalui.com/docs/components/ghost-fibers.md) (Pro): Faint fibre strands drift up from the bottom edge, curling as they rise and fading near the top, like smoke made of threads.
- [Gradient ASCII](https://charcoalui.com/docs/components/gradient-ascii.md) (Pro): Two soft lights drift over a dark field drawn entirely in ASCII: each cell picks a character by the brightness under it, so the gradient becomes a swimming ramp of punctuation.
- [Gradient Blinds](https://charcoalui.com/docs/components/gradient-blinds.md) (Pro): Vertical blinds over an ember-to-foreground gradient that breathe open and closed in sequence and widen around the pointer.
- [Gradient Waves](https://charcoalui.com/docs/components/gradient-waves.md) (Pro): Translucent wave bands in ember and foreground tones, each filled with a fading gradient, rolling slowly across the bottom of the box at different speeds.
- [Grain](https://charcoalui.com/docs/components/grain.md): A film-grain overlay that removes banding from gradients, with an optional jitter.
- [Grid Beams](https://charcoalui.com/docs/components/grid-beams.md) (Pro): A faint grid with ember beams of light running along its lines.
- [Grid Distortion](https://charcoalui.com/docs/components/grid-distortion.md) (Pro): An image sliced into a grid of cells that each sample the picture from a point pushed away from the pointer, so the image bulges around the cursor and relaxes back with a lag. Canvas 2D, idle when nothing moves.
- [Grid Motion](https://charcoalui.com/docs/components/grid-motion.md) (Pro): Rows of image and text tiles on a tilted plane that slide in alternating directions as the pointer crosses the section. Rows drift on their own, so it is never frozen.
- [Grid Scan](https://charcoalui.com/docs/components/grid-scan.md) (Pro): A floor grid in perspective with a light bar sweeping across it; cells light up in a checkered pattern as the bar passes and fade behind it. CSS only, so it costs almost nothing.
- [Halftone Wave](https://charcoalui.com/docs/components/halftone-wave.md) (Pro): A print-style halftone whose dots swell and shrink as interfering waves roll through.
- [Hyperspeed](https://charcoalui.com/docs/components/hyperspeed.md) (Pro): A perspective road rushing toward you with light streaks on both sides. Hold the pointer down to jump to hyperspeed.
- [Iridescence](https://charcoalui.com/docs/components/iridescence.md) (Pro): A soft thin-film sheen: layered sine fronts interfere and map to a spectral palette anchored on your base colour. Moving the pointer tilts the film so the spectrum slides.
- [Laser Flow](https://charcoalui.com/docs/components/laser-flow.md) (Pro): A laser sweeps a dark field from the top edge, bending toward the pointer, with bright packets flowing down the beam and a fog that catches its glow.
- [Letter Glitch](https://charcoalui.com/docs/components/letter-glitch.md) (Pro): A field of monospace glyphs that flicker and change colour at random, a few cells every frame, with vignettes so copy can sit over it.
- [Light Pillar](https://charcoalui.com/docs/components/light-pillar.md) (Pro): Vertical pillars of light rising from the bottom edge with soft sides, a slow flicker and faint bands drifting upward. CSS only, so it idles at no cost.
- [Light Rays](https://charcoalui.com/docs/components/light-rays.md) (Pro): Volumetric rays fanning out from one edge, swaying on slow noise and leaning toward the pointer. Rendered at a fifth of the size and upscaled, so the softness is free.
- [Light Tunnel](https://charcoalui.com/docs/components/light-tunnel.md) (Pro): Segmented rings flying out of a vanishing point with real perspective, twisting as they approach and pulsing as they pass the camera.
- [Lightfall](https://charcoalui.com/docs/components/lightfall.md) (Pro): Streaks of light falling like rain, each landing somewhere in the lower third and blooming out as it fades. Streak count scales with area.
- [Lightning](https://charcoalui.com/docs/components/lightning.md) (Pro): Branching bolts strike at random intervals, each one jittered segment by segment, with a flash and a fading afterglow.
- [Line Waves](https://charcoalui.com/docs/components/line-waves.md) (Pro): Stacked horizontal sine waves that phase-shift over time, with the amplitude swelling toward the middle line. Plain SVG paths.
- [Liquid Blob](https://charcoalui.com/docs/components/liquid-blob.md) (Pro): Three molten ember blobs merging and splitting through an SVG gooey filter.
- [Liquid Chrome](https://charcoalui.com/docs/components/liquid-chrome.md) (Pro): A mirror-metal surface that folds slowly over itself, lit by a horizon band so it reads as chrome rather than noise. The pointer pushes rings into it.
- [Liquid Ether](https://charcoalui.com/docs/components/liquid-ether.md) (Pro): Ethereal wisps drifting and curling through darkness along a divergence-free curl-noise flow, two colours mixing where they meet, and a vortex around the pointer. WebGL, written in the file.
- [Magnet Lines](https://charcoalui.com/docs/components/magnet-lines.md) (Pro): A grid of short bars that turn to point at the pointer like iron filings around a magnet, each easing toward its angle so a sweep leaves a ripple of turning bars behind it.
- [Meteors](https://charcoalui.com/docs/components/meteors.md) (Pro): Ember streaks falling diagonally across the section. CSS only.
- [Micro Slats](https://charcoalui.com/docs/components/micro-slats.md) (Pro): Thin vertical slats tilt in a travelling wave like blinds in a breeze, a tinted layer showing through as they open. CSS 3D only.
- [Molten Metal](https://charcoalui.com/docs/components/molten-metal.md) (Pro): A dark cooled crust with bright veins of heat crawling through its cracks: Voronoi edges warped by noise, pulsing, and warming around the pointer. WebGL, written in the file.
- [Nebula](https://charcoalui.com/docs/components/nebula.md) (Pro): Layered fractal clouds drifting slowly, lit from within in greys and the accent colour, with stars pricking through the thin parts. A Charcoal original. WebGL, written in the file.
- [Orb](https://charcoalui.com/docs/components/orb.md) (Pro): A glowing orb with a soft rim, a slowly turning inner swirl, a core that leans toward the pointer and a halo that brightens on hover.
- [Particle Network](https://charcoalui.com/docs/components/particle-network.md) (Pro): Drifting nodes that link up when close and gather around the pointer, lines warming to ember nearby.
- [Particles](https://charcoalui.com/docs/components/particles.md) (Pro): Soft points drifting upward at three depths, each with its own size, alpha and wobble. The field shifts with the pointer, deeper layers less, so it reads as space rather than a flat sheet.
- [Pattern Waves](https://charcoalui.com/docs/components/pattern-waves.md) (Pro): A repeating pattern of dots, dashes or crosses lifted and brightened by a wave travelling across it. Dashes lean with the slope, like reeds.
- [Pixel Blast](https://charcoalui.com/docs/components/pixel-blast.md) (Pro): Rings of grid-snapped pixels burst out of random points and fade, with cells dropping out as each ring ages. Clicking fires one where you clicked.
- [Pixel Rain](https://charcoalui.com/docs/components/pixel-rain.md) (Pro): Columns of glyphs raining down with glowing ember heads.
- [Plasma](https://charcoalui.com/docs/components/plasma.md) (Pro): The classic summed-sine plasma, folded into a two-tone palette instead of a rainbow. The pointer adds a ring source the pattern focuses on.
- [Plasma Wave](https://charcoalui.com/docs/components/plasma-wave.md) (Pro): Horizontal plasma bands roll across the box like swells, each with a bright line along its crest and a body that fades out below.
- [Prism](https://charcoalui.com/docs/components/prism.md) (Pro): A glass prism turning in a dark field, a white beam entering one face and a spectral streak sweeping the floor from the other. CSS 3D only.
- [Prismatic Burst](https://charcoalui.com/docs/components/prismatic-burst.md) (Pro): A burst of wedge rays from a point, each one a step further round the hue wheel starting at ember, turning slowly and drifting toward the pointer.
- [Radar](https://charcoalui.com/docs/components/radar.md) (Pro): A radar display: rings and crosshairs, a rotating sweep with a fading wedge behind it, and contacts that light up when the sweep crosses them and decay until the next pass.
- [Ripple Grid](https://charcoalui.com/docs/components/ripple-grid.md) (Pro): A grid of lines that ripples outward from the pointer and from periodic pulses. Each ring pushes the vertices radially, and the lines nearest a crest take the accent colour. Canvas 2D.
- [Ripple Rings](https://charcoalui.com/docs/components/ripple-rings.md) (Pro): Sonar-style rings pulsing out from a centre, for searching, live or empty states.
- [Scanner](https://charcoalui.com/docs/components/scanner.md) (Pro): A scanning line sweeps the field with a trailing glow over a faint grid, and scattered points flash as the line reaches them. CSS only.
- [Shader Gradient](https://charcoalui.com/docs/components/shader-gradient.md) (Pro): A WebGL mesh gradient: domain-warped noise folding three colours together, with film grain. Falls back to CSS without WebGL.
- [Shape Grid](https://charcoalui.com/docs/components/shape-grid.md) (Pro): A grid of small shapes that morph from one to the next in diagonal waves, each cell flipping as the wave passes and cells near the pointer flipping early.
- [Shape Waves](https://charcoalui.com/docs/components/shape-waves.md) (Pro): Rows of small circles, triangles or squares that swell and spin as a diagonal wave sweeps the grid, shrinking almost to nothing in the troughs.
- [Side Rays](https://charcoalui.com/docs/components/side-rays.md) (Pro): Thin diagonal rays entering from one side and fading before the centre, each sliding along the edge on its own slow cycle, like light through blinds.
- [Silk](https://charcoalui.com/docs/components/silk.md) (Pro): A sheet of silk: layered sine folds shaded by their slope so each fold catches light on one side, with a tint and a little film grain. WebGL, written in the file.
- [Sliced Waves](https://charcoalui.com/docs/components/sliced-waves.md) (Pro): A ribbon-shaped wave cut into vertical slices; each slice lags the last and lifts on its own cycle, so the cuts ripple through in sequence.
- [Smoke](https://charcoalui.com/docs/components/smoke.md) (Pro): Slow, blurred smoke plumes drifting over charcoal. Pure CSS transforms, so it stays cheap.
- [Starfield](https://charcoalui.com/docs/components/starfield.md) (Pro): Stars stream toward you from the centre. Press and hold to jump to warp speed.
- [Topographic](https://charcoalui.com/docs/components/topographic.md) (Pro): Slowly shifting contour lines drawn with marching squares, like a living topographic map.
- [Wave Lines](https://charcoalui.com/docs/components/wave-lines.md) (Pro): Layered sine lines drifting sideways at different speeds, with one ember line in the middle.
- [Web Threads](https://charcoalui.com/docs/components/web-threads.md) (Pro): A cobweb of threads strung between anchor points, each a curve that sags and sways and tenses toward the pointer as it passes.

## Cursor

- [Blob Cursor](https://charcoalui.com/docs/components/blob-cursor.md) (Pro): A soft follower that trails the pointer and swells over links and buttons, inverting what it covers. The real cursor stays.
- [Click Spark](https://charcoalui.com/docs/components/click-spark.md): Short lines radiate from every click and fade as they fly out. Draws only while a burst is alive.
- [Crosshair](https://charcoalui.com/docs/components/crosshair.md) (Pro): A horizontal and a vertical line span the area and follow the pointer with an x, y readout. Over a link or button the pair splits into four and snaps to the element's edges, and the readout shows its size.
- [Cursor Grid](https://charcoalui.com/docs/components/cursor-grid.md) (Pro): A grid of dots, crosses or squares behind the content. Cells near the pointer light up, grow and turn to face it, then cool down slowly after it passes.
- [Cursor Label](https://charcoalui.com/docs/components/cursor-label.md) (Pro): Elements with data-cursor="View" show that label in a pill that follows the pointer.
- [Cursor Trail](https://charcoalui.com/docs/components/cursor-trail.md) (Pro): Ember sparks fly off the pointer, drift down and cool, scoped to one area.
- [Ghost Cursor](https://charcoalui.com/docs/components/ghost-cursor.md) (Pro): A dot follows the pointer and drags a streak of fading, shrinking copies behind it, each chasing the one ahead. Fast moves smear into a motion-blur tail; the chain stops animating once it has caught up.
- [Glow Cursor](https://charcoalui.com/docs/components/glow-cursor.md) (Pro): A soft radial glow follows the pointer and flares over links and buttons. Screen blending lights up what it covers instead of tinting it.
- [Image Trail](https://charcoalui.com/docs/components/image-trail.md) (Pro): Images drop along the pointer's path, tilting slightly, then fade away.
- [Morph Cursor](https://charcoalui.com/docs/components/morph-cursor.md) (Pro): A custom cursor that morphs with what it is over: a dot in open space, a ring framing links and buttons, a text bar over copy, a soft wide circle while the mouse is held down.
- [Pixel Trail](https://charcoalui.com/docs/components/pixel-trail.md) (Pro): Square pixels light up wherever the pointer passes and fade in four discrete steps, so the trail reads as a low-resolution display rather than a blur.
- [Ribbons](https://charcoalui.com/docs/components/ribbons.md) (Pro): Silk ribbons chase the pointer on a canvas, each one lagging a little behind the last and drawn as a tapered band, so a fast sweep leaves a flowing trail that runs out when the pointer leaves.
- [Ripple Cursor](https://charcoalui.com/docs/components/ripple-cursor.md) (Pro): Click anywhere in the container and rings expand from the point, one after another, then fade.
- [Splash Cursor](https://charcoalui.com/docs/components/splash-cursor.md) (Pro): Ink splashes on a canvas: soft blobs spawn along the pointer's path carrying its velocity, then slow, spread and fade like dye in water, and clicks burst a ring of them. Not a fluid simulation, so it idles for free.
- [Spotlight Reveal](https://charcoalui.com/docs/components/spotlight-reveal.md) (Pro): The pointer cuts a soft circle through the top layer to show the content beneath.
- [Swarm Cursor](https://charcoalui.com/docs/components/swarm-cursor.md) (Pro): A flock of small dots chases the pointer with simple boid rules (chase, cohesion, separation) and idles in a slow orbit when the pointer leaves. Each dot trails a short streak along its velocity.
- [Target Cursor](https://charcoalui.com/docs/components/target-cursor.md) (Pro): Four corner brackets spin slowly around the pointer and lock onto any hovered link or button, springing to its bounds. The spin stops while locked so the brackets sit square.

## Image

- [Dither Veil](https://charcoalui.com/docs/components/dither-veil.md) (Pro): An ordered-dither veil over the content, thinning in the classic Bayer crosshatch as the pointer approaches and clearing under it, with a little lag.
- [Halftone Reveal](https://charcoalui.com/docs/components/halftone-reveal.md) (Pro): The image sits under halftone dots sized by the darkness beneath them, a print of the picture; hovering shrinks the dots away in a wave from where the pointer entered.
- [Image Reveal](https://charcoalui.com/docs/components/image-reveal.md) (Pro): A clip-path wipe uncovers the image while it settles from a slight zoom.
- [Ken Burns](https://charcoalui.com/docs/components/ken-burns.md) (Pro): A slow, documentary-style pan and zoom that cross-fades through a set of images.
- [Orbit Images](https://charcoalui.com/docs/components/orbit-images.md) (Pro): Images orbit a centre on concentric rings, each ring at its own speed and direction. Hovering a ring pauses it and lifts the image under the pointer.
- [Parallax Image](https://charcoalui.com/docs/components/parallax-image.md) (Pro): The image drifts slower than the page inside its frame, adding depth as you scroll.
- [Pixel Swap](https://charcoalui.com/docs/components/pixel-swap.md) (Pro): Two images swap through a grid of two-sided blocks that flip over in a diagonal wave, corner to corner, and flip back when the pointer leaves.
- [Pixel Transition](https://charcoalui.com/docs/components/pixel-transition.md) (Pro): Hover or click covers the content with a grid of cells in random order, switches to the alternate content underneath, then clears the cells. Cells snap rather than fade, which is what makes it read as pixels.
- [Pixelate Reveal](https://charcoalui.com/docs/components/pixelate-reveal.md) (Pro): The image resolves from chunky pixels to full detail when it enters view. Hover to replay.
- [Ripple Distortion](https://charcoalui.com/docs/components/ripple-distortion.md) (Pro): Water over a photo: a height-field ripple simulation offsets every pixel by the local slope, so the pointer drags rings across the picture and a click drops a stone in. Canvas 2D.
- [Scroll Expand](https://charcoalui.com/docs/components/scroll-expand.md) (Pro): A pinned section whose media starts as a small centred frame and grows to fill the viewport as you scroll, with a caption that lands once it is full. The viewport is measured from the scroll container, so it also works inside a scroll box.
- [Zoom Lens](https://charcoalui.com/docs/components/zoom-lens.md) (Pro): A magnifying lens follows the pointer over a product image.

## Interactive

- [Crystalized Ball](https://charcoalui.com/docs/components/crystalized-ball.md) (Pro): A faceted glass sphere in SVG: each cut facet is lit on its own, the pointer tilts the ball and slides a glint across it, and it turns slowly on its own.
- [Cubes](https://charcoalui.com/docs/components/cubes.md) (Pro): A grid of CSS 3D cubes that tip toward the pointer and ripple outward from wherever you click. Every cube is a button, so the ripple works from the keyboard too.
- [Draggable Cards](https://charcoalui.com/docs/components/draggable-cards.md) (Pro): Polaroids scattered on a table. Drag one and it lifts to the top.
- [Elastic Mesh](https://charcoalui.com/docs/components/elastic-mesh.md) (Pro): A grid of points on springs, coupled to their neighbours, so the pointer dents the mesh and the dent rings outward and settles.
- [Glare Hover](https://charcoalui.com/docs/components/glare-hover.md) (Pro): A diagonal band of light sweeps across whatever you wrap when the pointer arrives. The band is a translated layer, so nothing underneath repaints.
- [Gooey](https://charcoalui.com/docs/components/gooey.md) (Pro): Liquid UI: pieces that touch melt into one another and stretch apart like goo, while text and icons stay perfectly crisp. An SVG filter plus springs, so it works with any markup.
- [Hover Reveal List](https://charcoalui.com/docs/components/hover-reveal-list.md) (Pro): A list of projects; hovering a row floats its image beside the pointer.
- [Image Accordion](https://charcoalui.com/docs/components/image-accordion.md) (Pro): Image panels side by side; the hovered or focused one expands and reveals its caption.
- [Meta Balls](https://charcoalui.com/docs/components/meta-balls.md) (Pro): Blobby balls drift around a box and melt together where they meet; one follows the pointer. A real metaball field summed on a low-resolution canvas, so the merge is smooth and the colour follows the theme.
- [Pixel Grid](https://charcoalui.com/docs/components/pixel-grid.md) (Pro): Square cells light up ember under the pointer and fade out slowly behind it.
- [Shape Blur](https://charcoalui.com/docs/components/shape-blur.md) (Pro): A blurred shape lives behind your content and trails the mouse on a spring, swelling while it moves and settling when it stops. Mouse only; it rests in the centre under reduced motion.
- [Stack Cards](https://charcoalui.com/docs/components/stack-cards.md) (Pro): Cards pin as you scroll and stack on top of each other, the ones underneath shrinking back.
- [Sticker Peel](https://charcoalui.com/docs/components/sticker-peel.md) (Pro): Any child becomes a sticker: a corner lifts on hover to show a lighter underside with a real fold shadow, and it can be dragged around its parent. The flap is the content itself mirrored across the fold line, so it works at any size.
- [Strands](https://charcoalui.com/docs/components/strands.md) (Pro): Hair-like strands rooted along the bottom edge sway in a slow breeze and bend away from the pointer. Verlet chains on a canvas, so they keep their length and spring back naturally.
- [Velocity Marquee](https://charcoalui.com/docs/components/velocity-marquee.md) (Pro): Big text drifting sideways that speeds up with your scroll and flips direction when you scroll back.

## Transitions

- [Arrow Link](https://charcoalui.com/docs/components/arrow-link.md) (Pro): A “Learn more” link whose chevron slides right and grows a stem on hover, turning into an arrow. CSS only.
- [Banner Stack](https://charcoalui.com/docs/components/banner-stack.md) (Pro): Banners stack like a deck, three deep; hover fans them into a list and dismissing slides the next forward.
- [Card Resize](https://charcoalui.com/docs/components/card-resize.md) (Pro): A box that springs to the size of its content, so swapping what's inside never snaps.
- [Clear Input](https://charcoalui.com/docs/components/clear-input.md) (Pro): A search field whose clear button dissolves the text word by word instead of blanking it.
- [Dot Matrix](https://charcoalui.com/docs/components/dot-matrix.md) (Pro): A 4×4 dot loader with four timing patterns: wave, spiral, pulse and rain. CSS only.
- [Drop Morph](https://charcoalui.com/docs/components/drop-morph.md) (Pro): A drop zone that becomes the image you dropped, landing with a tip and a settle.
- [Error Shake](https://charcoalui.com/docs/components/error-shake.md) (Pro): A decaying head-shake for wrong input, as a wrapper or a useShake() hook.
- [Icon Swap](https://charcoalui.com/docs/components/icon-swap.md): Swaps icons with a scale-and-blur cross-fade: copy to check, play to pause, sun to moon.
- [Image Generation](https://charcoalui.com/docs/components/image-generation.md) (Pro): A dot field stirs while the model works, then each dot takes the colour beneath it until the picture resolves.
- [Morph Menu](https://charcoalui.com/docs/components/morph-menu.md) (Pro): A button that stretches into its own menu surface, then shrinks back. Arrow keys and Escape work.
- [Notification Badge](https://charcoalui.com/docs/components/notification-badge.md) (Pro): A count badge that pops in with a spring; new numbers slide in on a diagonal, and it scales away at zero.
- [Number Pop](https://charcoalui.com/docs/components/number-pop.md) (Pro): Only the digits that changed pop in from a blur, one after another, so 65.78 → 65.92 animates two characters.
- [Orbit Text](https://charcoalui.com/docs/components/orbit-text.md) (Pro): Text lit by washes of colour that circle through the letters out of phase. CSS only.
- [Organic Shimmer](https://charcoalui.com/docs/components/organic-shimmer.md) (Pro): A shimmer whose band ripples like heat haze with a glowing edge, moved by transform so it composites.
- [Page Transition](https://charcoalui.com/docs/components/page-transition.md) (Pro): Native-feeling push and pop between views: the new page slides over while the old one drifts and dims.
- [Pro Button](https://charcoalui.com/docs/components/pro-button.md) (Pro): The upgrade button: a colour band orbits the border, a glint sweeps the face and the sparkle twinkles.
- [Reasoning Stream](https://charcoalui.com/docs/components/reasoning-stream.md) (Pro): Agent reasoning trickling through a two-line window, collapsing to a summary that expands into the transcript.
- [Smoke Dissolve](https://charcoalui.com/docs/components/smoke-dissolve.md) (Pro): Delete with ceremony: an image shreds into grains that drift away on a breeze, greying into smoke.
- [Spinner Check](https://charcoalui.com/docs/components/spinner-check.md) (Pro): A spinner that closes into a ring and draws a check, or a cross on error. One glyph for any async action.
- [Streaming Text](https://charcoalui.com/docs/components/streaming-text.md) (Pro): Model output that resolves word by word through a soft blur; works with a growing string from a stream.
- [Text Swap](https://charcoalui.com/docs/components/text-swap.md): Swaps one label for another with a short rise and blur while the width eases to fit: Pay → Processing… → Paid.
- [Thinking States](https://charcoalui.com/docs/components/thinking-states.md) (Pro): An agent's status line: the current step shimmers, then rises away as the next one arrives.
- [Tilt Open Image](https://charcoalui.com/docs/components/tilt-open-image.md) (Pro): A thumbnail that opens full screen as if lifted off the page, tilting in 3D on the way and settling flat.

## Sections

- [Hero App](https://charcoalui.com/sections/hero-app.md) (Hero, Pro): Mobile app hero: a phone with live UI, floating notification cards and store buttons.
- [Hero Before After](https://charcoalui.com/sections/hero-before-after.md) (Hero, Pro): Photo tool hero where visitors drag a divider to compare the raw shot with the enhanced one.
- [Hero Chat](https://charcoalui.com/sections/hero-chat.md) (Hero, Pro): Split hero with an assistant conversation that streams its own answers, turn by turn.
- [Hero Dashboard](https://charcoalui.com/sections/hero-dashboard.md) (Hero, Pro): A browser-framed dashboard that tilts up flat as you scroll, under a centred headline.
- [Hero Diff](https://charcoalui.com/sections/hero-diff.md) (Hero, Pro): Dev tool hero: a pull request diff that a reviewer bot flags, comments on and merges.
- [Hero Editorial](https://charcoalui.com/sections/hero-editorial.md) (Hero, Pro): A newspaper front page as a hero: masthead, serif headline, drop-cap columns and a captioned photo.
- [Hero Ember](https://charcoalui.com/sections/hero-ember.md) (Hero, Pro): Centred headline over drifting embers, with an announcement pill, two calls to action and a copyable install command.
- [Hero Event](https://charcoalui.com/sections/hero-event.md) (Hero, Pro): Conference hero with a split-flap board of cities and dates, a live countdown and the speaker line-up.
- [Hero Film](https://charcoalui.com/sections/hero-film.md) (Hero, Pro): Cinematic hero with slow Ken Burns stills, film grain, a play control and chapter markers.
- [Hero Gallery](https://charcoalui.com/sections/hero-gallery.md) (Hero, Pro): Agency hero: an oversized headline with a highlighted phrase over two counter-scrolling rows of work.
- [Hero Landscape](https://charcoalui.com/sections/hero-landscape.md) (Hero, Pro): A full-bleed dusk landscape behind an AI prompt: a beam lights the box while it thinks, a liquid-metal send button and a thinking orb.
- [Hero Local](https://charcoalui.com/sections/hero-local.md) (Hero, Pro): Local business hero with open-now status, rating, address and a quick table booking card.
- [Hero Manifesto](https://charcoalui.com/sections/hero-manifesto.md) (Hero, Pro): Full-height serif manifesto: lines rise in turn, numbered principles and a hand-drawn signature.
- [Hero Rotating](https://charcoalui.com/sections/hero-rotating.md) (Hero, Pro): A headline whose last word rolls through options, an email capture and avatar social proof.
- [Hero Search](https://charcoalui.com/sections/hero-search.md) (Hero, Pro): Marketplace hero built around one big search box with typed example queries and category chips.
- [Hero Showcase](https://charcoalui.com/sections/hero-showcase.md) (Hero, Pro): Words rise out of a blur above a tilting product shot, with a logo marquee underneath.
- [Hero Spec](https://charcoalui.com/sections/hero-spec.md) (Hero, Pro): Hardware launch hero: a CSS-drawn product with spec callouts on leader lines and a finish picker.
- [Hero Split](https://charcoalui.com/sections/hero-split.md) (Hero, Pro): Copy on the left, a live product window on the right with a stat card and a chart that draw themselves in.
- [Hero Statement](https://charcoalui.com/sections/hero-scroll-text.md) (Hero, Pro): A single statement that lights up word by word as you scroll, with a spinning scroll badge.
- [Hero Terminal](https://charcoalui.com/sections/hero-terminal.md) (Hero, Pro): Developer-tool hero: beams on a grid, and a terminal that types your install and dev commands.
- [Hero Waitlist](https://charcoalui.com/sections/hero-waitlist.md) (Hero, Pro): Launch waitlist with a countdown, sonar rings and an email form that confirms in place.
- [Features AI Demo](https://charcoalui.com/sections/features-ai-demo.md) (Features, Pro): Try-it-now block: visitors pick a prompt and watch the product stream its answer.
- [Features Alternating](https://charcoalui.com/sections/features-alternating.md) (Features): Alternating image and text rows that slide in from opposite sides as you scroll.
- [Features Bento](https://charcoalui.com/sections/features-bento.md) (Features, Pro): A bento grid where every tile is a working component, not a screenshot.
- [Features Grid](https://charcoalui.com/sections/features-grid.md) (Features, Pro): Six feature cards with an ember spotlight that follows the pointer, revealed in a stagger.
- [Features Hover List](https://charcoalui.com/sections/features-hover-list.md) (Features, Pro): Services as a big type list; hovering a row floats a photo beside the cursor.
- [Features Integrations](https://charcoalui.com/sections/features-integrations.md) (Features, Pro): Searchable integrations directory with category filters, monogram tiles and a request link.
- [Features Keyboard](https://charcoalui.com/sections/features-keyboard.md) (Features, Pro): A drawn keyboard that presses each shortcut in turn, for keyboard-first products.
- [Features Metrics](https://charcoalui.com/sections/features-metrics.md) (Features, Pro): Outcome numbers that count up, each with a trend sparkline and a sourced footnote.
- [Features Orbit](https://charcoalui.com/sections/features-orbit.md) (Features, Pro): Integrations section: icons orbit your logo next to a checklist of what connects.
- [Features Roadmap](https://charcoalui.com/sections/features-roadmap.md) (Features, Pro): Public roadmap in Now, Next and Later columns with upvotes that re-sort the cards.
- [Features Security](https://charcoalui.com/sections/features-security.md) (Features, Pro): Trust section with certification seals, the controls behind them and a live uptime gauge.
- [Features Steps](https://charcoalui.com/sections/features-steps.md) (Features, Pro): Numbered how-it-works steps joined by a line that draws itself as the section scrolls in.
- [Features Sticky Scroll](https://charcoalui.com/sections/features-sticky.md) (Features, Pro): A sticky list on the left lights up the step you are reading while visuals scroll past on the right.
- [Features Tabs](https://charcoalui.com/sections/features-tabs.md) (Features, Pro): Feature tabs that auto-advance with a filling progress bar, swapping a visual on the right.
- [Features Versus](https://charcoalui.com/sections/features-versus.md) (Features, Pro): Old way versus new way: the same tasks side by side, with a toggle that flips the whole table.
- [Features Vertical Tabs](https://charcoalui.com/sections/features-vertical-tabs.md) (Features, Pro): Vertical feature list that advances on its own, with a progress bar and a crossfading photo.
- [Pricing Calculator](https://charcoalui.com/sections/pricing-calculator.md) (Pricing, Pro): Usage calculator: drag seats and volume, toggle add-ons and watch an itemised monthly total update.
- [Pricing Comparison](https://charcoalui.com/sections/pricing-comparison.md) (Pricing, Pro): A full feature comparison table with a sticky plan header.
- [Pricing Credits](https://charcoalui.com/sections/pricing-credits.md) (Pricing, Pro): Credit packs for AI products with bonus credits and a live readout of what each pack buys.
- [Pricing Donation](https://charcoalui.com/sections/pricing-donation.md) (Pricing, Pro): Pay-what-you-want block where each preset amount says what it pays for, with a goal bar.
- [Pricing Enterprise](https://charcoalui.com/sections/pricing-enterprise.md) (Pricing, Pro): Self-serve plan beside an enterprise card with the sales form built in, so big buyers never leave.
- [Pricing Lifetime](https://charcoalui.com/sections/pricing-lifetime.md) (Pricing, Pro): Lifetime deal card with a strike-through price, seats-claimed bar, end timer and refund promise.
- [Pricing Single](https://charcoalui.com/sections/pricing-single.md) (Pricing): One honest plan: a big price, everything included, and a guarantee.
- [Pricing Tiers](https://charcoalui.com/sections/pricing-tiers.md) (Pricing, Pro): Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- [Pricing Usage](https://charcoalui.com/sections/pricing-usage.md) (Pricing, Pro): Usage-based pricing: drag the slider and the monthly estimate rolls to match.
- [Testimonials Case Study](https://charcoalui.com/sections/testimonials-case-study.md) (Testimonials, Pro): Case studies as tabs: each customer gets a photo, a quote and three results that count up.
- [Testimonials Letter](https://charcoalui.com/sections/testimonials-letter.md) (Testimonials, Pro): A customer's thank-you letter on lined paper with a serif body, a P.S. and a self-drawing signature.
- [Testimonials Marquee](https://charcoalui.com/sections/testimonials-marquee.md) (Testimonials, Pro): Two rows of quotes drifting in opposite directions, pausing on hover.
- [Testimonials Rating](https://charcoalui.com/sections/testimonials-rating.md) (Testimonials, Pro): Store-style review summary with an average, a star histogram that filters, and verified reviews.
- [Testimonials Spotlight](https://charcoalui.com/sections/testimonials-spotlight.md) (Testimonials, Pro): One large quote at a time, with avatar buttons to switch between voices.
- [Testimonials Tweets](https://charcoalui.com/sections/testimonials-tweets.md) (Testimonials, Pro): Masonry wall of social posts that fades out at the bottom into a read-more button.
- [Testimonials Video](https://charcoalui.com/sections/testimonials-video.md) (Testimonials, Pro): Video testimonial cards that expand on play with captions and a running progress bar.
- [Testimonials Wall](https://charcoalui.com/sections/testimonials-wall.md) (Testimonials, Pro): A masonry wall of quotes with ratings, revealed as you scroll.
- [Awards](https://charcoalui.com/sections/awards.md) (Social proof, Pro): SVG laurels around each award, with the rank, the prize, who gave it and the year.
- [Logo Cloud](https://charcoalui.com/sections/logo-cloud.md) (Social proof, Pro): A muted marquee of customer wordmarks under a short trust line.
- [Logo Wall](https://charcoalui.com/sections/logo-wall.md) (Social proof, Pro): Grid of customer wordmarks; hovering a cell slides the logo away to reveal that customer's result.
- [Press Quotes](https://charcoalui.com/sections/press-quotes.md) (Social proof, Pro): As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
- [Stats Chart](https://charcoalui.com/sections/stats-chart.md) (Social proof, Pro): Growth story: stat cards beside an animated bar chart.
- [Stats Counters](https://charcoalui.com/sections/stats-counters.md) (Social proof, Pro): Four big numbers that roll into place when they enter view.
- [Stats Live](https://charcoalui.com/sections/stats-live.md) (Social proof, Pro): Dotted world map with live pings, a running counter and a feed of what just happened where.
- [CTA Countdown](https://charcoalui.com/sections/cta-countdown.md) (CTA, Pro): Limited-time offer band with a promo code, a live countdown and a shimmering button.
- [CTA Download](https://charcoalui.com/sections/cta-download.md) (CTA, Pro): App download card with store buttons and a QR code for desktop visitors.
- [CTA Ember](https://charcoalui.com/sections/cta-ember.md) (CTA, Pro): A closing band with rising embers and a shimmering call to action.
- [CTA Landscape](https://charcoalui.com/sections/cta-landscape.md) (CTA, Pro): A moonlit photo card with a silver metal headline and a liquid-metal button.
- [CTA Marquee](https://charcoalui.com/sections/cta-marquee.md) (CTA, Pro): Giant scroll-reactive marquee type with a round let's-talk button on top, for studios.
- [CTA Newsletter](https://charcoalui.com/sections/cta-newsletter.md) (CTA, Pro): Newsletter signup that validates inline and confirms with a drawn check.
- [CTA Steps](https://charcoalui.com/sections/cta-steps.md) (CTA, Pro): Sign-up CTA as a three-step mini wizard, so visitors arrive half onboarded.
- [CTA Terminal](https://charcoalui.com/sections/cta-terminal.md) (CTA, Pro): Developer CTA with a copyable install command beside a terminal that runs it.
- [CTA Ticket](https://charcoalui.com/sections/cta-ticket.md) (CTA, Pro): RSVP block where visitors tear a ticket along its perforation to claim a seat.
- [FAQ Chat](https://charcoalui.com/sections/faq-chat.md) (FAQ, Pro): FAQ as a support chat: tap a question and a teammate types the answer back.
- [FAQ Grid](https://charcoalui.com/sections/faq-grid.md) (FAQ, Pro): Questions laid out in a grid with a contact card, for short answers.
- [FAQ Search](https://charcoalui.com/sections/faq-search.md) (FAQ, Pro): Help-centre FAQ with instant search, highlighted matches and topic chips.
- [FAQ Split](https://charcoalui.com/sections/faq-split.md) (FAQ): Heading and contact link on the left, a springy accordion on the right.
- [FAQ Support](https://charcoalui.com/sections/faq-support.md) (FAQ, Pro): FAQ accordion beside a sticky support card with the team, live status and reply time.
- [Team Careers](https://charcoalui.com/sections/team-careers.md) (Team, Pro): Open roles board with team filters, a remote-only toggle, posted salaries and perks.
- [Team Founders](https://charcoalui.com/sections/team-founders.md) (Team, Pro): Founders' story with an editorial serif headline, who started it and a timeline of milestones.
- [Team Grid](https://charcoalui.com/sections/team-grid.md) (Team, Pro): Remote team grid: big initials over a duotone photo of each person's city, with bios on hover.
- [Team Values](https://charcoalui.com/sections/team-values.md) (Team, Pro): Company values as huge numbered rows that open to show what each one means in practice.
- [Contact Booking](https://charcoalui.com/sections/contact-booking.md) (Contact, Pro): Book-a-demo block: pick a day, pick a slot and confirm without leaving the page.
- [Contact Form](https://charcoalui.com/sections/contact-form.md) (Contact, Pro): Contact form with topic pills, inline validation and a success state, beside your details.
- [Contact Offices](https://charcoalui.com/sections/contact-offices.md) (Contact, Pro): Office cards with each city's local time and whether the studio is open right now.
- [Contact Support](https://charcoalui.com/sections/contact-support.md) (Contact, Pro): Support hub with every channel's live status and reply time, plus a system status strip.
- [Blog Featured](https://charcoalui.com/sections/blog-featured.md) (Content, Pro): Magazine front with a serif lead story, a column of more stories and a numbered most-read list.
- [Blog Grid](https://charcoalui.com/sections/blog-grid.md) (Content, Pro): Blog index where the newest post runs wide, the rest sit in a grid and tag chips filter them.
- [Changelog](https://charcoalui.com/sections/changelog.md) (Content, Pro): Changelog with sticky version dates, release notes, screenshots and New, Improved and Fixed filters.
- [Newsletter Issues](https://charcoalui.com/sections/newsletter-issues.md) (Content, Pro): Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
- [Resources Library](https://charcoalui.com/sections/resources-library.md) (Content, Pro): Resource library with type tabs and search across guides, webinars, templates and reports.
- [Gallery Accordion](https://charcoalui.com/sections/gallery-accordion.md) (Gallery, Pro): Destinations as an image accordion: hover a slim panel and it opens wide with its details.
- [Gallery Filmstrip](https://charcoalui.com/sections/gallery-filmstrip.md) (Gallery, Pro): A strip of 35mm film with sprocket holes and frame numbers, plus a large view of the chosen frame.
- [Gallery Masonry](https://charcoalui.com/sections/gallery-masonry.md) (Gallery, Pro): Photo gallery with tag filters over a masonry grid and a dialog for the full-size image.
- [Gallery Work Index](https://charcoalui.com/sections/gallery-work-index.md) (Gallery, Pro): Agency work index as a table, with a preview image that follows the cursor over each row.
- [Commerce Bundle](https://charcoalui.com/sections/commerce-bundle.md) (Commerce, Pro): Build-a-box bundle with drawn coffee bags and a progress bar that unlocks bigger discounts.
- [Listings Stays](https://charcoalui.com/sections/listings-stays.md) (Commerce, Pro): Rental listings beside a stylised map where hovering a card lifts its price pin, and back again.
- [Menu Restaurant](https://charcoalui.com/sections/menu-restaurant.md) (Commerce, Pro): Printed-menu section with serif dishes, dotted price leaders, dietary tags and course tabs.
- [Product Detail](https://charcoalui.com/sections/product-detail.md) (Commerce, Pro): Product page for an art print: thumbnails, live frame preview, size pricing, quantity and add to bag.
- [Product Grid](https://charcoalui.com/sections/product-grid.md) (Commerce, Pro): Shop grid with category chips, sorting, wishlist hearts and a quick-add button that fills the bag.
- [Event Schedule](https://charcoalui.com/sections/event-schedule.md) (Events, Pro): Conference agenda with day tabs, track filters and bookmarks that build your own schedule.
- [Event Speakers](https://charcoalui.com/sections/event-speakers.md) (Events, Pro): Speaker line-up as a big name list; the focused speaker's duotone card and talk appear alongside.
- [Event Tickets](https://charcoalui.com/sections/event-tickets.md) (Events, Pro): Ticket tiers with sold-out bars and quantity steppers, totalled into one checkout bar.
- [Music Album](https://charcoalui.com/sections/music-album.md) (Media, Pro): Album release: a sleeve whose vinyl slides out and spins while a track plays, beside the tracklist.
- [Podcast Episodes](https://charcoalui.com/sections/podcast-episodes.md) (Media, Pro): Podcast block with show art, an episode list and a player with a live visualiser and scrubber.
- [Video Library](https://charcoalui.com/sections/video-library.md) (Media, Pro): Course video library with continue-watching bars, level filters and hover-to-play thumbnails.
- [Navbar Announcement](https://charcoalui.com/sections/navbar-announcement.md) (Navbar, Pro): Dismissible announcement bar above a nav with a Cmd+K search palette and a mobile sheet.
- [Navbar Centered](https://charcoalui.com/sections/navbar-centered.md) (Navbar, Pro): Editorial shop nav with a big centred serif wordmark that shrinks on scroll and a bag count.
- [Navbar Floating](https://charcoalui.com/sections/navbar-floating.md) (Navbar, Pro): A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- [Navbar Mega Menu](https://charcoalui.com/sections/navbar-mega.md) (Navbar, Pro): A full-width bar with a mega menu that unfolds on hover or focus.
- [Footer Columns](https://charcoalui.com/sections/footer-columns.md) (Footer): Brand, four link columns, a newsletter field and a bottom bar.
- [Footer Contact](https://charcoalui.com/sections/footer-contact.md) (Footer, Pro): Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.
- [Footer Minimal](https://charcoalui.com/sections/footer-minimal.md) (Footer): One quiet row: brand, a few links and the year.
- [Footer Newsletter](https://charcoalui.com/sections/footer-newsletter.md) (Footer, Pro): Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.
- [Footer Wordmark](https://charcoalui.com/sections/footer-wordmark.md) (Footer, Pro): An enormous wordmark that rises into view, under a short row of links.

## Templates

- [Aperture template](https://charcoalui.com/templates/aperture.md) (Pro): Product analytics: For analytics and data products: a dashboard hero, growth charts, outcome metrics, a public voting roadmap, usage pricing, a quote wall and a newsletter footer.
- [Archive template](https://charcoalui.com/templates/archive.md) (Pro): Research library: For research libraries, knowledge hubs and resource centres: a search hero, a typed resource library, a blog grid, a newsletter archive and a sitemap footer.
- [Ashfall template](https://charcoalui.com/templates/ashfall.md) (Pro): Creative agency: An agency or studio site: gallery hero, alternating case studies, numbers, one big testimonial and a giant wordmark footer.
- [Atelier template](https://charcoalui.com/templates/atelier.md) (Pro): Art print shop: For print shops and galleries: a centred editorial nav with bag count, a gallery hero, a filterable product grid, a full product page with frame preview, reviews, press and a newsletter footer.
- [Backstage template](https://charcoalui.com/templates/backstage.md) (Pro): Membership site: For creators with paid memberships: a cinematic hero, a members-only video library, membership tiers, a fan wall and a chat FAQ.
- [Breathe template](https://charcoalui.com/templates/breathe.md) (Pro): Meditation app: For meditation and mental wellbeing apps: a serif manifesto hero, auto-advancing practice tabs, a member's letter, one simple plan, FAQs and an app download card.
- [Brightside template](https://charcoalui.com/templates/brightside.md) (Pro): Dental clinic: For clinics and practices: a split hero, online booking, the clinicians, first-visit steps, patient reviews, an FAQ with live help and location cards.
- [Cadence template](https://charcoalui.com/templates/cadence.md) (Pro): Scheduling: For scheduling and booking products: split hero, a working booking demo, steps, integrations, pricing, a quote marquee, FAQs and a wizard signup.
- [Campfire template](https://charcoalui.com/templates/campfire.md) (Pro): Community app: For chat, forum and social apps: a split hero, a public voting roadmap, a social wall, a changelog, tiers and a newsletter footer.
- [Canopy template](https://charcoalui.com/templates/canopy.md) (Pro): Insurance: For insurance and regulated products: a split hero, a before-and-after of claims, plan tiers, reviews, an FAQ with live help and a support hub.
- [Carebridge template](https://charcoalui.com/templates/carebridge.md) (Pro): Telehealth: For telehealth and clinic networks: a find-a-doctor search hero, visit steps, appointment booking, clinicians, reviews and an FAQ with live support.
- [Cinder template](https://charcoalui.com/templates/cinder.md) (Pro): Fintech: For finance and analytics products: a dashboard hero that tilts flat, growth stats, a comparison table and a confident close.
- [Cohort template](https://charcoalui.com/templates/cohort.md) (Pro): Creator course: For creator-led courses and paid communities: a split hero, a lesson library, a social wall, a lifetime price, FAQs and a newsletter archive.
- [Commons template](https://charcoalui.com/templates/commons.md) (Pro): Community platform: For community platforms: a rotating hero, a live member map, integrations, a social wall, tiers, FAQs and a glowing CTA.
- [Copyhouse template](https://charcoalui.com/templates/copyhouse.md) (Pro): Copywriter: For freelance writers and consultants: an editorial hero, a before-and-after of real copy, a client letter, one simple package, FAQs and a booking calendar.
- [Crew template](https://charcoalui.com/templates/crew.md) (Pro): Careers site: For company careers and culture pages: a manifesto hero, the founders' story, values that open up, the team, an open roles board and office cards.
- [Darkroom template](https://charcoalui.com/templates/darkroom.md) (Pro): Online course: For online courses and creators: a cinematic hero, a video library with progress bars, tiers, video testimonials, the instructor's story, FAQs and a countdown enrolment offer.
- [Dropline template](https://charcoalui.com/templates/dropline.md) (Pro): Limited drop: For streetwear, sneaker and merch drops: a city-by-city countdown hero, a promo countdown, the drop grid, a social wall and FAQs about queues and limits.
- [Ember template](https://charcoalui.com/templates/ember.md) (Pro): AI SaaS: Landing page for an AI product: ember hero, live bento, tabbed features, roll-up pricing, a quote marquee and a glowing close.
- [Fade template](https://charcoalui.com/templates/fade.md) (Pro): Barbershop: For barbers, salons and appointment businesses: a split hero, a price list styled as a menu, a booking calendar, the team, reviews and a contact footer.
- [Fernhouse template](https://charcoalui.com/templates/fernhouse.md) (Pro): Plant shop: For plant, flower and lifestyle shops: an editorial shop nav, a gallery hero, a product grid, alternating care stories, store-style reviews, a newsletter archive and a big footer.
- [Fieldnotes template](https://charcoalui.com/templates/fieldnotes.md) (Pro): Online magazine: For magazines and editorial sites: an editorial front-page hero, a lead story with most-read, a filterable story grid, contributors, a newsletter archive and a big footer.
- [Fieldwork template](https://charcoalui.com/templates/fieldwork.md) (Pro): Dev agency: For software and product agencies: a split hero, process steps, a work index, case studies with numbers, engagement pricing, FAQs and a marquee CTA.
- [Fixwell template](https://charcoalui.com/templates/fixwell.md) (Pro): Home services: For local service marketplaces: a big search hero with typed examples, booking steps, trust counters, store-style reviews, a searchable help centre and an app download card.
- [Flint template](https://charcoalui.com/templates/flint.md) (Pro): Waitlist: A one-screen waitlist with a countdown, then just enough proof and answers to earn the signup.
- [Forkcamp template](https://charcoalui.com/templates/forkcamp.md) (Pro): Coding bootcamp: For bootcamps and career programmes: a terminal hero, curriculum steps, hiring counters, alumni case studies, payment options, cohort dates and searchable FAQs.
- [Foundry template](https://charcoalui.com/templates/foundry.md) (Pro): Branding agency: For branding and creative agencies: a gallery hero, alternating case studies, award laurels, a duotone team grid, one big testimonial, a contact form and a wordmark footer.
- [Frequency template](https://charcoalui.com/templates/frequency.md) (Pro): Internet radio: For radio stations and audio communities: a live listener map, show episodes with a player, a featured album, listener donations and a newsletter footer.
- [Gather template](https://charcoalui.com/templates/gather.md) (Pro): Meetup group: For meetups and local groups: a countdown hero, the season's schedule, last meetup's photos, a tearable RSVP ticket, a chat FAQ and a contact footer.
- [Glyph template](https://charcoalui.com/templates/glyph.md) (Pro): Icon library: For icon sets, fonts and design assets: a search-first hero, a big hover list of collections, a lifetime licence deal, a social wall and simple FAQs.
- [Groove template](https://charcoalui.com/templates/groove.md) (Pro): Record club: For music, vinyl and media subscriptions: an album hero with a spinning record, a pick-your-records bundle, membership tiers, reviews and a chat FAQ.
- [Halcyon template](https://charcoalui.com/templates/halcyon.md) (Pro): AI support: For AI customer support tools: a chat hero answering real tickets, support stats, integrations, a support-channel hub, usage pricing, a review summary and an FAQ with live help.
- [Halden template](https://charcoalui.com/templates/halden.md) (Pro): Musician: For bands and artists: a film-still hero, the new album with a spinning record, tour dates by leg, a tour-photo filmstrip, a ticket CTA and a contact footer.
- [Halo template](https://charcoalui.com/templates/halo.md) (Pro): Hardware launch: For consumer hardware: a drawn-product spec hero with finish picker, auto-advancing feature tabs, reviews, press, award laurels, FAQs and a pre-order countdown.
- [Harbor template](https://charcoalui.com/templates/harbor.md) (Pro): Payroll: For payroll and HR software: a split hero, setup steps, a before-and-after, a per-employee calculator, case studies, demo booking and a corporate footer.
- [Hartwell template](https://charcoalui.com/templates/hartwell.md) (Pro): Photographer: For photographers: a cinematic film-still hero, a contact-sheet filmstrip, a filterable masonry portfolio, press quotes, a contact form and a studio footer with local time.
- [Hearth template](https://charcoalui.com/templates/hearth.md) (Pro): Mobile app: App launch page with a live phone hero, orbiting integrations, reviews, a download card and FAQs.
- [Hexwork template](https://charcoalui.com/templates/hexwork.md) (Pro): Open source: For open-source projects: announcement nav, an ember hero with an install command, GitHub numbers, a versus table, a developer wall, sponsor tiers and a changelog.
- [Hive template](https://charcoalui.com/templates/hive.md) (Pro): Coworking space: For coworking and shared spaces: a photo hero with desk booking, a space accordion, membership tiers, member events, location cards, FAQs and a contact footer.
- [Juniper template](https://charcoalui.com/templates/juniper.md) (Pro): Restaurant: For restaurants and bars: a photo hero with open-now status and table booking, a printed menu with course tabs, a room accordion, reviews, press and a footer with live local time.
- [Keyhaven template](https://charcoalui.com/templates/keyhaven.md) (Pro): Estate agent: For estate agents and property firms: a home-search hero, neighbourhood accordion, agent team grid, market counters, a valuation contact form and a big footer.
- [Keystone template](https://charcoalui.com/templates/keystone.md) (Pro): Auth API: For APIs and SDKs: a terminal hero, three integration steps, security seals, tiers, FAQs and a copyable install command.
- [Kickstart template](https://charcoalui.com/templates/kickstart.md) (Pro): Crowdfunding: For hardware and product crowdfunding: a spec hero, pledge tiers with a funding bar, a production roadmap, backer video stories, FAQs and a newsletter footer.
- [Kiln template](https://charcoalui.com/templates/kiln.md) (Pro): Developer tool: For CLIs, SDKs and APIs: a typing terminal hero, a sticky walkthrough, usage pricing and a quiet footer.
- [Kindred template](https://charcoalui.com/templates/kindred.md) (Pro): Therapy platform: For therapy and counselling services: a split hero, matching steps, therapists, session pricing, an FAQ with live support, a client's letter and a calm footer.
- [Kinfolk template](https://charcoalui.com/templates/kinfolk.md) (Pro): Bakery & café: For bakeries, cafés and small chains: a photo hero with pre-ordering, a printed menu, a customer's letter, shop cards with live opening status and a contact footer.
- [Lane template](https://charcoalui.com/templates/lane.md) (Pro): AI code review: For dev tools that act on code: a live pull-request diff hero, logos, install steps, security controls, tiers, a developer social wall and a copy-the-command close.
- [Lattice template](https://charcoalui.com/templates/lattice.md) (Pro): AI image studio: For generative image and video tools: a prompt hero over a photo, a live generation demo, a filterable masonry of outputs, credit packs, a social wall and a limited-time offer.
- [Launch Night template](https://charcoalui.com/templates/launchnight.md) (Pro): Meetup event: For one-off events and meetups: a split-flap countdown hero, a tearable RSVP ticket, speakers, a run-of-show schedule and a chat-style FAQ.
- [Ledger template](https://charcoalui.com/templates/ledger.md) (Pro): Accounting: For accounting and finance software: a front-page editorial hero, a logo wall with results, a before-and-after month-end, trust controls, a usage calculator, a customer's letter and searchable FAQs.
- [Lingo template](https://charcoalui.com/templates/lingo.md) (Pro): Language app: For learning apps: a live phone hero, auto-advancing lesson tabs, app store reviews, tiers, a chat FAQ and a download card.
- [Lotus template](https://charcoalui.com/templates/lotus.md) (Pro): Yoga studio: For yoga and pilates studios: a photo hero with class booking, a weekly timetable, teachers, class-pack pricing, reviews, studio cards and a calm footer.
- [Lumi template](https://charcoalui.com/templates/lumi.md) (Pro): Photo app: For creative apps sold direct: a before-and-after hero, setup steps, a social wall, a lifetime licence, FAQs and a download CTA.
- [Manifest template](https://charcoalui.com/templates/manifest.md) (Pro): Product Hunt launch: For launch-day pages: an ember hero with copyable command, award laurels, a social wall, a lifetime deal with seat counter, FAQs and a signup wizard.
- [Marginalia template](https://charcoalui.com/templates/marginalia.md) (Pro): Bookshop: For bookshops and publishers: a magazine-style front of staff picks, a shop grid, author events with bookmarks, a newsletter archive, branch cards and a contact footer.
- [Meridian template](https://charcoalui.com/templates/meridian.md) (Pro): CRM: For CRMs and sales tools: a split hero with proof points, logos, auto-advancing feature tabs, a keyboard shortcut showcase, counters, tiered pricing and a quote wall.
- [Monograph template](https://charcoalui.com/templates/monograph.md) (Pro): Designer portfolio: For independent designers and consultants: a serif manifesto hero, a work index, services, a client letter and a booking calendar so leads can schedule an intro call.
- [Nocturne template](https://charcoalui.com/templates/nocturne.md) (Pro): Sleep device: For health hardware and wearables: a drawn-product spec hero, outcome metrics, owner reviews, press, one plan with the device, FAQs and a newsletter footer.
- [Northlane template](https://charcoalui.com/templates/northlane.md) (Pro): Design studio: For small design studios: a full-screen serif manifesto, a cursor-follow work index, services as a hover list, a logo wall, a client's letter, a giant marquee CTA and a contact footer.
- [Northlight template](https://charcoalui.com/templates/northlight.md) (Pro): Film studio: For film and video production studios: a full-bleed showreel hero, project accordion, award laurels, expanding video testimonials, the crew and a giant marquee CTA.
- [Nourish template](https://charcoalui.com/templates/nourish.md) (Pro): Nutrition coaching: For coaching and nutrition programmes: a split hero, a week's meal plan as a menu, coaching tiers, video stories, a chat FAQ and a signup wizard.
- [Nova template](https://charcoalui.com/templates/nova.md) (Pro): Pre-order: For hardware pre-orders: a drawn-product spec hero, projected metrics, press, a pre-order countdown, FAQs and a minimal footer.
- [Off the Clock template](https://charcoalui.com/templates/offclock.md) (Pro): Podcast: For podcasts and audio shows: a rotating-word hero, episodes with a working player, a listener wall, a newsletter archive and press quotes.
- [Paperclip template](https://charcoalui.com/templates/paperclip.md) (Pro): Invoicing: For invoicing and freelancer tools: a rotating hero, steps, a lifetime licence offer, a social wall, a chat FAQ and a bright CTA.
- [Parallel template](https://charcoalui.com/templates/parallel.md) (Pro): Motion studio: For motion and 3D studios: a scroll-lit statement hero, a masonry reel, services on hover, a logo wall, studio values and a giant marquee with a wordmark footer.
- [Patchnote template](https://charcoalui.com/templates/patchnote.md) (Pro): Changelog tool: For changelog and announcement tools: a rotating hero, a live changelog demo, integrations, a single plan, a quote marquee, FAQs and a newsletter close.
- [Patron template](https://charcoalui.com/templates/patron.md) (Pro): Creator support: For creators, writers and open projects funded by supporters: a manifesto hero, a support block with impact tiers, a voting roadmap, the team, a supporter's letter and FAQs.
- [Payline template](https://charcoalui.com/templates/payline.md) (Pro): Payments API: For payment and fintech APIs: a terminal hero, a live payments map, integrations, usage pricing, a quote wall, searchable FAQs and a CLI close.
- [Pilot template](https://charcoalui.com/templates/pilot.md) (Pro): App beta: For app betas and early access: a live phone hero, feature tabs, a three-step beta signup, FAQs and a quiet footer.
- [Plinth template](https://charcoalui.com/templates/plinth.md) (Pro): Architecture firm: For architecture and interior practices: an editorial front-page hero, a project accordion, the founders' story with a timeline, awards and studio cards with live local time.
- [Pocket template](https://charcoalui.com/templates/pocket.md) (Pro): App Store launch: For consumer app launches: a live phone hero, three-step onboarding, award laurels, App Store reviews, a download card and a minimal footer.
- [Quadrangle template](https://charcoalui.com/templates/quadrangle.md) (Pro): University: For universities, colleges and schools: an editorial front-page hero, programmes as a hover list, faculty, open-day schedule, campus tour booking, searchable FAQs and a newsletter footer.
- [Quill template](https://charcoalui.com/templates/quill.md) (Pro): AI analyst: For AI analytics and BI products: a self-answering chat hero, a try-it demo, before-and-after table, outcome metrics, case studies and a three-step signup.
- [Reel template](https://charcoalui.com/templates/reel.md) (Pro): Film festival: For festivals and cinemas: a cinematic hero, programme accordion, a screening schedule by day, pass tiers with sell-out bars, press and a box-office footer.
- [Relaunch template](https://charcoalui.com/templates/relaunch.md) (Pro): Version 2 launch: For major version launches: an announcement bar, rotating hero, the release changelog, a v1-versus-v2 table, a social wall, tiers and a glowing CTA.
- [Relay template](https://charcoalui.com/templates/relay.md) (Pro): Team ops: For workflow and ops tools: rotating-word hero, a flip-the-table before and after, three setup steps, an integrations directory, a calculator and searchable FAQs.
- [Roastery template](https://charcoalui.com/templates/roastery.md) (Pro): Coffee subscription: For subscription boxes and consumables: a shop nav, split hero, a build-your-own bundle with tiered discounts, steps, reviews, FAQs and a countdown offer.
- [Rota template](https://charcoalui.com/templates/rota.md) (Pro): Healthcare SaaS: For healthcare software: a split hero, the founders' clinical story, setup steps, compliance controls, case studies, enterprise pricing with a sales form and FAQs.
- [Runway template](https://charcoalui.com/templates/runway.md) (Pro): Deploy platform: For hosting and deploy platforms: announcement nav, a typing terminal hero, performance metrics, a live world map of deploys, usage pricing, a changelog and a CLI close.
- [Sable template](https://charcoalui.com/templates/sable.md) (Pro): Security platform: For B2B security and infrastructure: a mega-menu nav, dashboard hero, logo wall with results, trust controls, a live threat map, an enterprise contact card and demo booking.
- [Seedling template](https://charcoalui.com/templates/seedling.md) (Pro): Crowdfunding: For fundraising and charity campaigns: a prompt-style hero, a donation block with impact per amount, counters, video stories, FAQs and a landscape CTA.
- [Sentinel template](https://charcoalui.com/templates/sentinel.md) (Pro): Observability: For monitoring and incident tools: dashboard hero, a live incident map, integrations, a public roadmap, usage pricing, case studies and a support hub.
- [Signal template](https://charcoalui.com/templates/signal.md) (Pro): Conference: For conferences and summits: a split-flap city board with countdown, sponsors, a big-type speaker line-up, an agenda you can bookmark, ticket tiers, last year's photos and FAQs.
- [Sprout template](https://charcoalui.com/templates/sprout.md) (Pro): Kids' coding: For children's classes and edtech: a rotating hero, steps, class tiers, video stories from parents, FAQs and a three-step signup.
- [Stealth template](https://charcoalui.com/templates/stealth.md) (Pro): Stealth waitlist: For stealth-mode startups: a countdown waitlist hero, a teaser roadmap people can vote on, the founders' story and a chat-style FAQ.
- [Steep template](https://charcoalui.com/templates/steep.md) (Pro): Tea shop: For specialty food and drink shops: a showcase hero, a product grid, a versus table against supermarket bags, a social wall, a build-a-box bundle and FAQs.
- [Stillwater template](https://charcoalui.com/templates/stillwater.md) (Pro): Day spa: For spas and wellness studios: a photo hero with treatment booking, a treatment menu, room accordion, therapists, reviews and a calm contact footer.
- [Summit template](https://charcoalui.com/templates/summit.md) (Pro): Climbing gym: For gyms and studios: a cinematic hero, membership tiers, a class timetable with bookmarks, coach cards, video testimonials, FAQs and a contact footer.
- [Tally template](https://charcoalui.com/templates/tally.md) (Pro): Spend management: For corporate cards and spend tools: a dashboard hero, auto-advancing feature tabs, a live payments map, tiers, case studies, FAQs and a signup wizard.
- [Terminus template](https://charcoalui.com/templates/terminus.md) (Pro): Terminal app: For desktop dev apps and CLIs: a terminal hero, a keyboard shortcut showcase, tabbed features, a lifetime licence, a developer wall and a chat-style FAQ.
- [Tessera template](https://charcoalui.com/templates/tessera.md) (Pro): AI meeting notes: For AI assistants and note-takers: a rotating hero, a live summarise demo, setup steps, a security section, video testimonials, tiers and a three-step signup.
- [The Margin template](https://charcoalui.com/templates/margin.md) (Pro): Newsletter: For newsletters and paid publications: subscribe-first landing with an issue archive, a magazine front of recent pieces, a reader wall, paid tiers and FAQs.
- [Tideline template](https://charcoalui.com/templates/tideline.md) (Pro): Nonprofit: For charities and nonprofits: a film hero, impact-per-amount donations, counters, the founders' story, press, a newsletter archive and a big footer.
- [Tidepool template](https://charcoalui.com/templates/tidepool.md) (Pro): Managed database: For databases and backend services: an ember hero with a copyable command, a live bento, security controls, a usage calculator, a quote wall, searchable FAQs and a CLI close.
- [Timberline template](https://charcoalui.com/templates/timberline.md) (Pro): Cabin rentals: For rentals and stays: a prompt-style search hero over a landscape, listings beside a map, a destination accordion, reviews, FAQs and a landscape CTA.
- [Townhall template](https://charcoalui.com/templates/townhall.md) (Pro): Webinar series: For webinar series and virtual events: a split hero, the session schedule, speakers, a three-step registration wizard, FAQs and a corporate footer.
- [Trailhead template](https://charcoalui.com/templates/trailhead.md) (Pro): Outdoor club: For outdoor clubs and adventure companies: a film hero, a route accordion, a weekend hike schedule, membership tiers, guides and a contact footer.
- [Tutorly template](https://charcoalui.com/templates/tutorly.md) (Pro): Tutoring marketplace: For tutoring and lesson marketplaces: a subject search hero, steps, tutor cards, reviews, an hours calculator, FAQs and a big footer.
- [Vault template](https://charcoalui.com/templates/vault.md) (Pro): Savings app: For consumer finance apps: a phone hero, outcome metrics, security controls, reviews, a single plan, FAQs and an app download card.
- [Vellum template](https://charcoalui.com/templates/vellum.md) (Pro): Team wiki: For wikis, docs and knowledge tools: an announcement bar, a search-first hero, a keyboard showcase, before and after, a social wall, tiers, a changelog and a newsletter close.

Pro items need a Pro seat (https://charcoalui.com/pricing) and install as @charcoal/<name> through a registry configured with the key: https://charcoalui.com/docs/pro