Aperture: Product analytics template
Know what users do, and why.
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.
About the Aperture template
Aperture is for analytics and data products. A dashboard hero tilts flat on scroll, a growth chart and outcome metrics follow, a public roadmap lets visitors vote, usage pricing scales with events, and a quote wall and FAQs close.
Know what users do, and why. It is a complete product analytics landing page for React and Tailwind CSS 4, assembled from 10 Charcoal UI sections.
Who Aperture is for
- Product analytics and session replay.
- Experimentation platforms.
- Data pipelines and warehouses.
- Developer analytics.
What is inside
10 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Dashboard: A browser-framed dashboard that tilts up flat as you scroll, under a centred headline.
- Stats Chart: Growth story: stat cards beside an animated bar chart.
- Features Metrics: Outcome numbers that count up, each with a trend sparkline and a sourced footnote.
- Features Roadmap: Public roadmap in Now, Next and Later columns with upvotes that re-sort the cards.
- Pricing Usage: Usage-based pricing: drag the slider and the monthly estimate rolls to match.
- Testimonials Wall: A masonry wall of quotes with ratings, revealed as you scroll.
- FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
- CTA Ember: A closing band with rising embers and a shimmering call to action.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.
How it is built
Usage pricing takes your per-million price and free allowance. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Aperture
npx shadcn@latest add @charcoal/apertureTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Aperture for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Aperture a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Dashboard: A browser-framed dashboard that tilts up flat as you scroll, under a centred headline.
- Stats Chart: Growth story: stat cards beside an animated bar chart.
- Features Metrics: Outcome numbers that count up, each with a trend sparkline and a sourced footnote.
- Features Roadmap: Public roadmap in Now, Next and Later columns with upvotes that re-sort the cards.
- Pricing Usage: Usage-based pricing: drag the slider and the monthly estimate rolls to match.
- Testimonials Wall: A masonry wall of quotes with ratings, revealed as you scroll.
- FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
- CTA Ember: A closing band with rising embers and a shimmering call to action.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.