FAQ (text only)
Open the Install tab. Download core once, then one file per component.
Yes. Pass theme per instance: zinc-folio, magenta-edit, indigo-glass, warm-ledger, lime-meadow, cream-block, atelier, sky-flat, sage-wedge, ember-velvet, polar-frost, ink-line, bone-still, volt-arc, prism-scan, bubble-gloss, or cloud-loop.
Set mode="dark" or wire it to your app's dark class.
With icons
Open the Install tab. Download core once, then one file per component.
Pass theme per instance — each block can mirror a different product.
Set mode="dark" on any component or sync it to your root class.
Settings (icons, collapsed)
Update your display name, avatar, and public bio.
Choose email and push alerts for replies and mentions.
Change password, enable two-factor auth, and review sessions.
Exclusive (one open at a time)
One notebook, basic themes, export to Markdown.
Unlimited notebooks, premium themes, priority support.
Shared workspaces, roles, and admin billing.
Plain surface (no outer frame)
Borderless root — row dividers only, for stacking inside cards or windows.
Use plain inside marketing chrome to avoid double frames.
Quiet surface (muted borders)
Softest hairlines (~45% border mix) for nested marketing sections.
Pass theme per instance on each block.
Soft surface (data-muted borders)
Between quiet and default — same weight as List/Table borderTone muted (~62% mix).
Good default for FAQs inside dashboards without a heavy frame.
Default surface (normal borders)
Full border frame — use default surfaceEmphasis on settings and data panels.
We reply within one business day.
Surface chrome comparison
plain — borderless root, light row dividers
Compare outer frame and row dividers across surfaceEmphasis values.
Cycle the preview theme to confirm hairlines stay visible on every palette.
quiet — muted marketing hairlines (~45%)
Compare outer frame and row dividers across surfaceEmphasis values.
Cycle the preview theme to confirm hairlines stay visible on every palette.
soft — data-muted frame (~62%, matches List muted)
Compare outer frame and row dividers across surfaceEmphasis values.
Cycle the preview theme to confirm hairlines stay visible on every palette.
default — full --atelier-border frame
Compare outer frame and row dividers across surfaceEmphasis values.
Cycle the preview theme to confirm hairlines stay visible on every palette.
Nested in product window (quiet)
Account settings
Quiet chrome inside the window frame — avoids stacked heavy borders.
Pair with surfaceEmphasis quiet on parent cards in showcase layouts.
Single item
Orders ship in 2 to 4 business days. Returns accepted within 30 days.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| items | Optional | AccordionItem[] | — | id, title, content, icon?, defaultOpen? |
| allowMultiple | Optional | boolean | true | When false, only one section can be open at a time. |
| surfaceEmphasis | Optional | "default" | "soft" | "quiet" | "plain" | default | Border weight — default is full frame (normal); soft/quiet/plain step down hairlines for nested marketing and data panels. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation — default, none, ripple, scale, sink, lift, pulse, or glow. |