Install
The Base package is the design system as code: the token file, the motion foundation and the atoms on these pages. Every Firefly site installs it once, before any section. Sections are installed the same way, one command each, from their pages.
Step 1 · shadcn config
Run inside the site folder, once.
curl -fsSL https://firefly-ui-library.vercel.app/components.json -o components.jsonStep 2 · the Base
npx shadcn@latest add https://firefly-ui-library.vercel.app/r/firefly-base.jsonThen add @import "./firefly.css"; under the Tailwind import in app/globals.css, load Inter and IBM Plex Mono with next/font (variables --font-inter and --font-plex-mono) and put <MotionScript /> in the root layout’s head.
What it installs
Version 1.1.
| File | What it is |
|---|---|
| app/firefly.css | Design tokens (@theme), base layer, reveal rules and keyframes. Edit the values for a client palette, keep the names. |
| components/ui/motion-script.tsx | Head script that adds html.motion-ok when JS runs and motion is allowed (3s failsafe). |
| components/ui/reveal.tsx | <Reveal> container: fades and rises every data-reveal child, staggered. |
| components/ui/reveal-attr.ts | The reveal attribute object, safe to spread in Server Components. |
| components/ui/parallax.tsx | <Parallax> scroll drift for large visuals (exit / through modes). |
| components/ui/art-scale.tsx | <ArtScale /> sets --art-scale so a 1440px composition scales on wide screens. |
| components/ui/button.tsx | <Button> pill: primary / secondary (+ on-dark), sizes sm 36 · md 40 · lg 44. |
| components/ui/icon-button.tsx | <IconButton> round icon button + chevron, play and pause icons. |
| components/ui/segmented.tsx | <Segmented> switch tabs with a sliding white indicator. |
| components/ui/pagination-dots.tsx | <PaginationDots> dots with a sliding active line. |
| components/ui/hero-cta.tsx | <HeroCta> primary + secondary pair for heroes and closing CTAs. |
| components/ui/nav-link.tsx | <NavLink> 14px pill links with the grey hover fill, navIconButtonClassesFor, <BurgerIcon>. |
| components/ui/brand-mark.tsx | <FireflyMark> default brand for the navigations (currentColor). |
| components/ui/two-tone.tsx | <TwoTone> headline helper: primary first half, grey second half. |
| components/ui/placeholder.tsx | <Placeholder> hatched stand-in for any image or mockup. |
Changelog
| Version | Date | Notes |
|---|---|---|
| 1.0 | 2026-10-16 | First release, distilled from the Startupmap build and the Firefly Web Guide Book. |
| 1.2 | 2026-10-19 | NavLink atom + surface-hover token: 14px pill links with a grey hover fill for the 64px navigation bar (ElevenLabs reference). |
| 1.1 | 2026-10-19 | Button set rebuilt 1:1 from the ElevenLabs reference: regular weight, 36 / 40 / 44px sizes, colour-shift hover, white secondary with a half-pixel ring + soft shadow. New IconButton, Segmented and PaginationDots atoms; new tokens for hover fills, pressed layer, pagination and --shadow-button. |
The full specimen sheet of the Base renders at Firefly Base.