Quill: AI analyst template
Ask your data, get answers.
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.
About the Quill template
Quill is a landing page for an AI analyst or BI copilot. The hero chat answers real questions on its own, a try-it demo lets visitors pick a prompt, and a before-and-after table, outcome metrics and case studies make the business case before pricing.
Ask your data, get answers. It is a complete ai analyst landing page for React and Tailwind CSS 4, assembled from 11 Charcoal UI sections.
Who Quill is for
- AI data analysts and BI copilots.
- Text-to-SQL and semantic layer products.
- AI agents for operations teams.
- Data platforms adding an AI assistant.
What is inside
11 sections, top to bottom:
- Navbar Announcement: Dismissible announcement bar above a nav with a Cmd+K search palette and a mobile sheet.
- Hero Chat: Split hero with an assistant conversation that streams its own answers, turn by turn.
- Logo Wall: Grid of customer wordmarks; hovering a cell slides the logo away to reveal that customer's result.
- Features AI Demo: Try-it-now block: visitors pick a prompt and watch the product stream its answer.
- Features Versus: Old way versus new way: the same tasks side by side, with a toggle that flips the whole table.
- Features Metrics: Outcome numbers that count up, each with a trend sparkline and a sourced footnote.
- Testimonials Case Study: Case studies as tabs: each customer gets a photo, a quote and three results that count up.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- FAQ Split: Heading and contact link on the left, a springy accordion on the right.
- CTA Steps: Sign-up CTA as a three-step mini wizard, so visitors arrive half onboarded.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.
How it is built
The announcement bar, chat turns, demo prompts and pricing tiers are all props. 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 Quill
npx shadcn@latest add @charcoal/quillTemplates 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 Quill for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Quill 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 Announcement: Dismissible announcement bar above a nav with a Cmd+K search palette and a mobile sheet.
- Hero Chat: Split hero with an assistant conversation that streams its own answers, turn by turn.
- Logo Wall: Grid of customer wordmarks; hovering a cell slides the logo away to reveal that customer's result.
- Features AI Demo: Try-it-now block: visitors pick a prompt and watch the product stream its answer.
- Features Versus: Old way versus new way: the same tasks side by side, with a toggle that flips the whole table.
- Features Metrics: Outcome numbers that count up, each with a trend sparkline and a sourced footnote.
- Testimonials Case Study: Case studies as tabs: each customer gets a photo, a quote and three results that count up.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- FAQ Split: Heading and contact link on the left, a springy accordion on the right.
- CTA Steps: Sign-up CTA as a three-step mini wizard, so visitors arrive half onboarded.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.