Features Hover List
Services as a big type list; hovering a row floats a photo beside the cursor.
- Type: Features section
- Styles: Dark, Minimal
- Licence: Charcoal UI Pro
About Features Hover List
Features Hover List sets your services or capabilities in large type. Hovering a row floats a photo next to the cursor and dims the others, which feels editorial and keeps the page light.
It is a full-width features section for React and Tailwind CSS 4, in a dark and minimal style. Preview it at any width above, then install it with one command.
When to use Features Hover List
- Design and motion studios.
- Agencies and consultants.
- Universities listing programmes.
- Icon and asset libraries listing collections.
How it is built
Built on Hover Reveal List, with each item taking a title, meta line and image. On touch screens it behaves like a simple list.
It is composed from Hover Reveal List, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Features Hover List
Features Hover List is part of 5 full templates, so you can see it in a finished page.
- Glyph template: Four thousand icons, one style.
- Northlane template: A studio site that reads like a manifesto.
- Monograph template: A one-person portfolio that books calls.
- Parallel template: Movement is the message.
- Quadrangle template: Programmes, people and open days.
- Features Grid: A React features grid of six cards with a pointer spotlight and staggered reveal
- Features Bento: A React bento features section where every tile is a working component
- Features Alternating: A free React alternating features section: image and text rows that slide in
- Features Tabs: React feature tabs that auto-advance with a progress bar and swap visuals
- Hover Reveal List: A React hover reveal list: hovering a row floats its image beside the pointer
Install Features Hover List
npx shadcn@latest add @charcoal/features-hover-listFeatures Hover List is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Features Hover List work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.
Built from
- Hover Reveal List: A list of projects; hovering a row floats its image beside the pointer.