Ember: AI SaaS template
An AI product site that glows.
Landing page for an AI product: ember hero, live bento, tabbed features, roll-up pricing, a quote marquee and a glowing close.
About the Ember template
Ember is a complete landing page for an AI product. It opens with a glowing ember hero, shows the product in a live bento, walks through features in tabs, prices with a billing toggle and closes with a quote marquee and a glowing call to action.
An AI product site that glows. It is a complete ai saas landing page for React and Tailwind CSS 4, assembled from 11 Charcoal UI sections.
Who Ember is for
- AI assistants, copilots and agents.
- SaaS products launching a new site.
- Developer platforms with an AI angle.
- Startups that need a full page this week.
What is inside
11 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Ember: Centred headline over drifting embers, with an announcement pill, two calls to action and a copyable install command.
- Logo Cloud: A muted marquee of customer wordmarks under a short trust line.
- Features Bento: A bento grid where every tile is a working component, not a screenshot.
- Features Tabs: Feature tabs that auto-advance with a filling progress bar, swapping a visual on the right.
- Stats Counters: Four big numbers that roll into place when they enter view.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- Testimonials Marquee: Two rows of quotes drifting in opposite directions, pausing on hover.
- FAQ Split: Heading and contact link on the left, a springy accordion on the right.
- CTA Ember: A closing band with rising embers and a shimmering call to action.
- Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.
How it is built
Every section is a Charcoal UI section you can reorder, remove or restyle. Copy, links and pricing are plain props, and the whole page follows your theme tokens.
Install Ember
npx shadcn@latest add @charcoal/emberTemplates 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 Ember for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Ember 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 Ember: Centred headline over drifting embers, with an announcement pill, two calls to action and a copyable install command.
- Logo Cloud: A muted marquee of customer wordmarks under a short trust line.
- Features Bento: A bento grid where every tile is a working component, not a screenshot.
- Features Tabs: Feature tabs that auto-advance with a filling progress bar, swapping a visual on the right.
- Stats Counters: Four big numbers that roll into place when they enter view.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- Testimonials Marquee: Two rows of quotes drifting in opposite directions, pausing on hover.
- FAQ Split: Heading and contact link on the left, a springy accordion on the right.
- CTA Ember: A closing band with rising embers and a shimmering call to action.
- Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.