@matteoaliano/forest-web

Status: 1.0.0 — public API frozen. See API freeze. Additions land in 1.x patches; removals or renames require a 2.0 major bump.

Forest Design System — marketing & landing-page components. Radix + shadcn primitives and ready-made conversion-focused blocks, styled with Tailwind v4 and the Alkemy+ token set (charcoal + red accent, Aeonik / Aeonik Mono / Alkemy BETA).

Sibling of @matteoaliano/forest-ui (MUI-based product UI). Use forest-web for marketing pages, forest-ui for authenticated app UI — don't mix.

Install

npm install @matteoaliano/forest-web

Quick start

// app entry (e.g. app/layout.tsx, main.tsx, _app.tsx)
import "@matteoaliano/forest-web/styles.css";
import "@matteoaliano/forest-web/fonts/aeonik/aeonik.css";
import "@matteoaliano/forest-web/fonts/aeonik-mono/aeonik-mono.css";
import "@matteoaliano/forest-web/fonts/alkemy-beta/alkemy-beta.css";

import { Navbar, Hero, LogoCloud, Features, CTA, Footer } from "@matteoaliano/forest-web";

export default function Home() {
  return (
    <>
      <Hero
        eyebrow="New — AI routing"
        title="Ship personalized pages in minutes."
        subtitle="Forest assembles on-brand landing pages from your tokens and copy."
        actions={[
          { label: "Start free",  href: "/signup" },
          { label: "Book a demo", href: "/demo", variant: "outline" },
        ]}
      />
      {/* ... */}
    </>
  );
}

No provider component needed — tokens live as CSS custom properties on :root.

See the installation guide for framework-specific recipes (Next.js App Router, Pages Router, Vite, Remix, Astro), Tailwind v4 interop, and troubleshooting.

What's in the box

Primitives — Button, Badge, Card family, Sheet, Dialog, AlertDialog, Drawer, Popover, Tooltip, HoverCard, DropdownMenu, ContextMenu, Menubar, Toaster (sonner), Tabs, NavigationMenu, Breadcrumb, Pagination, Collapsible, Container, Section, Select, Checkbox, RadioGroup, Switch, Slider, Toggle, InputOTP, Field, Form, Command, Combobox, Calendar, DatePicker, DateRangePicker, Alert, AspectRatio, ScrollArea, Separator, Skeleton, Progress, Resizable, Table family, DataTable (TanStack), Carousel (embla), Chart family (recharts), Accordion, Avatar, Input, Textarea, Label, ShaderBackground + shader presets, cn, tv, tokens, useTheme, useToggleTheme, ForestWebProvider.

Blocks — Navbar, Hero, LogoCloud, Features, BentoGrid, HowItWorks, Stats, Testimonials, Comparator, Integrations, FAQ, CTA, ContactForm, ContactInfo, ContactSplit, Footer, Pricing, CommandMenu, BookingForm, AnnouncementBar, TestimonialCarousel, CookieBanner, ThemeToggle.

Sub-paths — /print (one-page document blocks), /linkedin (slide/post/carousel blocks), /backgrounds (decorative shader backgrounds), /logo (Forest Logo SVGs), /icons (full lucide-react re-export wall).

Full API reference: skills/forest-web/references/components.md. Locked surface: docs/superpowers/api-freeze.md. Consumer migration guide: docs/migration/v1.0-consumer-checklist.md.

Claude Code skill

This package ships a skill for Claude Code that enforces correct imports, block composition, and conversion-focused landing-page structure.

npx forest-web

Copies the skill into .claude/skills/forest-web/. Safe to commit — teammates get the same rules.

Optional auto-sync on install:

{
  "scripts": {
    "postinstall": "forest-web"
  }
}

Landing page playbook

The skill includes a conversion-focused playbook covering the 5-second test, canonical section order, hero/CTA/social-proof rules, and a pre-ship checklist.

Peer dependencies

• react ^18 or ^19
• react-dom ^18 or ^19
• tailwindcss ^4 — optional, only if you extend with your own utilities
• react-hook-form ^7.54 — optional, only needed if you use the <Form> surface

Scripts (this repo)

• npm run build — bundle the package + compile styles.css
• npm run test — run Vitest suite
• npm run storybook — interactive component playground (port 6007)
• npm run size — verify each sub-path is within its bundle-size budget

License

MIT