Press Quotes
As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
- Type: Social proof section
- Styles: Minimal, Light
- Licence: Charcoal UI Pro
About Press Quotes
Press Quotes turns press mentions into a small show: outlet wordmarks act as tabs, and the active outlet's quote fades in large above them, rotating on its own until someone hovers.
It is a full-width social proof section for React and Tailwind CSS 4, in a minimal and light style. Preview it at any width above, then install it with one command.
When to use Press Quotes
- Consumer brands and shops.
- Hardware launches.
- Restaurants and hotels.
- Podcasts, festivals and publishers.
How it is built
An underline slides between outlets with a shared layout animation, rotation pauses on hover and under reduced motion, and each outlet takes a type style.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Press Quotes
Press Quotes is part of 9 full templates, so you can see it in a finished page.
- Hartwell template: Let the pictures do the talking.
- Atelier template: A gallery that happens to have a checkout.
- Halo template: One product, every angle.
- Juniper template: Wood fire, small plates, booked tables.
- Off the Clock template: A home for a show and its listeners.
- Reel template: Ten days, ninety films.
- Nocturne template: A bedside device that fixes your nights.
- Tideline template: A nonprofit site that raises money.
- Nova template: Take pre-orders before you ship.
- Logo Cloud: A React logo cloud: a muted marquee of customer wordmarks
- Stats Counters: A React stats section: four big numbers that roll into place
- Stats Chart: A React growth section with stat cards beside an animated bar chart
- Logo Wall: A React customer logo grid that reveals each customer's result on hover
Install Press Quotes
npx shadcn@latest add @charcoal/press-quotesPress Quotes 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 Press Quotes 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.