---
name: "@quill"
slug: "quill"
description: "An editorial design system for digital products — warm neutral grounds, ink-toned type, five themes and four accents, 51 blocks, WCAG 2.1 AA, and agent-ready docs (llms.txt, usage guides, Claude Code rules)."
category: "AI/chat UI"
tags: ["accessibility", "ai", "audio", "auth", "blocks", "cards", "charts", "dashboard", "design-system", "e-commerce", "editor", "forms", "icons", "marketing", "media", "navigation", "onboarding", "overlays", "payments", "tables", "theming"]
framework: "react"
license: null
author: null
website: "https://www.quilldesignsystem.com"
github: null
registry: "https://www.quilldesignsystem.com/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 58
generated_at: "2026-09-21T01:50:16.753Z"
---

# @quill

An editorial design system for digital products — warm neutral grounds, ink-toned type, five themes and four accents, 51 blocks, WCAG 2.1 AA, and agent-ready docs (llms.txt, usage guides, Claude Code rules).

## Links

- Website: https://www.quilldesignsystem.com
- Registry JSON: https://www.quilldesignsystem.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/quill
- This file: https://sh4dcn.vercel.app/md/quill.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.quilldesignsystem.com/r/registry.json
pnpm dlx shadcn@latest add https://www.quilldesignsystem.com/r/registry.json
bunx shadcn@latest add https://www.quilldesignsystem.com/r/registry.json
# fetch the raw registry index
curl -s https://www.quilldesignsystem.com/r/registry.json
```

## Components (58)

| name | type | description | install |
| --- | --- | --- | --- |
| quill | registry:base | Warm neutral grounds, moss accents, Fraunces display type, and ink-toned type. A low-contrast editorial theme for digital products. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/quill.json` |
| icon | registry:ui | The Quill icon component — Material Symbols Outlined at weight 400, shipped as a self-contained core set of 91 names covering every icon the Quill blocks use. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/icon.json` |
| tone-badge | registry:ui | Quill's uppercase tag pill for status, tiers, and labels — wraps Badge with the pigment vocabulary (moss/gold/terracotta/indigo/neutral/muted) baked in so tone… | `npx shadcn@latest add https://www.quilldesignsystem.com/r/tone-badge.json` |
| example-app-page | registry:component | An example showing how to compose an app page: the sidebar-nav shell wrapping a page-header, then stat-cards, then a data-table — the page leads with what it i… | `npx shadcn@latest add https://www.quilldesignsystem.com/r/example-app-page.json` |
| example-marketing-page | registry:component | An example showing how to compose a marketing page: navbar, hero, feature-section, pricing, testimonial and footer — one idea per section, breathing at the 96p… | `npx shadcn@latest add https://www.quilldesignsystem.com/r/example-marketing-page.json` |
| example-auth-page | registry:component | An example showing how to compose an auth page: login-split-panel alone at full viewport — one task, nothing competing with it. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/example-auth-page.json` |
| agent-rules | registry:file | Claude Code project rules so AI agents build on-brand with Quill — the theming contract, foundations, principles, icon names and the block index, generated fro… | `npx shadcn@latest add https://www.quilldesignsystem.com/r/agent-rules.json` |
| activity-feed | registry:block | A card timeline of recent events — avatar, action text, and a relative timestamp per entry. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/activity-feed.json` |
| alerts | registry:block | A vertical stack of informational, success, and destructive alerts with icons. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/alerts.json` |
| analytics-charts | registry:block | A dashboard pair — an area chart of audience growth beside a bar chart of weekly sales, each on its own card. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/analytics-charts.json` |
| announcement-banner | registry:block | Two dismissible announcement banners — an inline bordered page banner and a full-bleed primary-color variant. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/announcement-banner.json` |
| badge-on-card | registry:block | Default, secondary, and destructive badges shown together on a card surface. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/badge-on-card.json` |
| calendar-page | registry:block | A single-date calendar paired with the selected day's session list, in one studio-schedule card. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/calendar-page.json` |
| calendar-range | registry:block | A stateful two-month range calendar for booking a span of days, with clear and reserve actions. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/calendar-range.json` |
| chat | registry:block | A one-on-one messaging panel — contact header, message bubbles, and a composer input. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/chat.json` |
| checkout | registry:block | A two-column checkout — payment method picker and card form beside an order summary sidebar. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/checkout.json` |
| command-palette | registry:block | A searchable ⌘K command palette with grouped actions, recent items, and keyboard shortcuts. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/command-palette.json` |
| contact-form | registry:block | A get-in-touch card — name, email, a topic select, and a message field. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/contact-form.json` |
| cookie-consent | registry:block | A cookie consent banner offering accept, reject, and preferences actions. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/cookie-consent.json` |
| dashboard | registry:block | An app shell with sidebar navigation, a search header, and KPI stat cards. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/dashboard.json` |
| data-table | registry:block | A filterable members table with a toolbar, ToneBadge status pills, and a per-row actions menu. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/data-table.json` |
| empty-state | registry:block | A dashed-border empty state with an icon, explanatory text, and a primary action. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/empty-state.json` |
| error-404 | registry:block | A full-page 404 error state with go-back and home recovery actions. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/error-404.json` |
| faq | registry:block | A centered FAQ section — an accordion of common questions with a contact call-to-action footer. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/faq.json` |
| feature-section | registry:block | A marketing section with an editorial heading and a three-column feature grid. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/feature-section.json` |
| file-upload | registry:block | An asset-upload card with a drag-and-drop dropzone and a progress-tracked upload queue. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/file-upload.json` |
| footer | registry:block | A marketing footer with brand blurb, link columns, and legal links. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/footer.json` |
| forgot-password | registry:block | A password-reset request card — an email field, a send-link action, and a way back to sign in. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/forgot-password.json` |
| hero | registry:block | A centered marketing hero — a release badge, serif headline, supporting copy, and primary/secondary calls to action. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/hero.json` |
| invoice | registry:block | A printable invoice card — sender and recipient details, a ToneBadge payment status, a line-item table with totals, and a download action. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/invoice.json` |
| kanban | registry:block | A three-column kanban board with card counts, tagged task cards, and an add-card affordance per column. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/kanban.json` |
| list-detail | registry:block | An inbox-style split view — a selectable message list beside a detail pane with archive and delete actions. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/list-detail.json` |
| login | registry:block | The standard email-and-password sign-in card, with remember-me and a forgot-password escape hatch. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/login.json` |
| login-minimal | registry:block | The bare-minimum sign-in — no card chrome, a single email field, sign-in by one-time code. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/login-minimal.json` |
| login-oauth | registry:block | Provider-first sign-in — Google, GitHub, and Apple buttons above an email fallback. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/login-oauth.json` |
| login-split-panel | registry:block | A full-page, branded sign-in — a testimonial panel beside an email/password form with a magic-link option. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/login-split-panel.json` |
| mail-shell | registry:block | A two-pane mail client shell — a searchable message list and a reading pane with toolbar and inline reply. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/mail-shell.json` |
| navbar | registry:block | A top navigation bar with brand wordmark, a responsive link list, and sign-in / get-started actions. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/navbar.json` |
| theme-selector | registry:block | A dropdown picker for the five Quill themes and four pigment accents — sets data-theme/data-accent and persists both to localStorage. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/theme-selector.json` |
| newsletter | registry:block | A centered newsletter-signup section — an email field, subscribe action, and social proof. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/newsletter.json` |
| notifications | registry:block | A notifications card listing recent events with icons, timestamps, unread indicators, and a mark-all-read action. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/notifications.json` |
| onboarding | registry:block | A setup checklist card with a progress bar, completed and pending tasks, and start links for remaining steps. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/onboarding.json` |
| order-summary | registry:block | A checkout order-summary card — line items, a promo code field, a total, and a pay-now button. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/order-summary.json` |
| otp-verification | registry:block | A six-digit one-time-passcode entry card for verifying an email, with expiry messaging and a resend action. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/otp-verification.json` |
| page-header | registry:block | A page header with a breadcrumb trail, title and description, and duplicate/new action buttons. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/page-header.json` |
| pricing | registry:block | A three-tier pricing grid with a highlighted popular plan, feature checklists, and per-plan calls to action. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/pricing.json` |
| profile-card | registry:block | A compact, centered profile card — avatar initials, role, follower stats, and follow/message actions. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/profile-card.json` |
| search-results | registry:block | A docs search panel — query input, result count, and a linked result list with breadcrumbs and type badges. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/search-results.json` |
| settings | registry:block | A profile settings card — name fields, a bio textarea, and an email-notification toggle. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/settings.json` |
| sidebar-nav | registry:block | A collapsible icon-sidebar app shell with grouped menus, badges, a top bar, and a main area for the page — a card grid by default, or the children you pass in. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/sidebar-nav.json` |
| signup | registry:block | Standard account-creation card — name, email, password, and a link back to sign-in. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/signup.json` |
| signup-social | registry:block | Signup that leads with GitHub and Google provider buttons, falling back to an email/password form. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/signup-social.json` |
| stat-cards | registry:block | A responsive grid of KPI cards, each showing a value with a delta badge versus last month. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/stat-cards.json` |
| stats-band | registry:block | A marketing band of headline statistics separated by vertical dividers on a card background. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/stats-band.json` |
| tabs-page | registry:block | A tabbed settings page with account, notifications, and security panels. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/tabs-page.json` |
| team-section | registry:block | A marketing team grid with avatar cards showing each member's name, role, specialty badge, and email action. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/team-section.json` |
| testimonial | registry:block | A customer-quote card with a serif pull-quote, avatar initials, and attribution. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/testimonial.json` |
| wizard | registry:block | A multi-step setup card — a progress stepper, workspace fields, and back/continue navigation. | `npx shadcn@latest add https://www.quilldesignsystem.com/r/wizard.json` |

## For AI agents

```text
You are adding components from @quill to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/quill.md) for the component list.
2. Fetch the machine-readable index: https://www.quilldesignsystem.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: quill).
```