@matteoaliano/forest-web

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, Card, Sheet, Accordion, Avatar, Input, Textarea, Label, cn

Blocks — Navbar, Hero, LogoCloud, Features, BentoGrid, HowItWorks, Stats, Testimonials, Comparator, Integrations, FAQ, CTA, ContactForm, ContactInfo, ContactSplit, Footer

Full API reference: skills/forest-web/references/components.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

License

MIT