Developer product landing example

Readme

Product contract

The catalog records the package contract for identity, accessibility, motion, and release.

This page states the package purpose, shows installation commands, pairs feature claims with examples, and includes a complete product surface before the closing actions.

Choose an entry path

01 / Install

Terminalshell
npm install github:wu-hongjun/vvver-design-system#vX.Y.Z

app.tsxtsx
1
2
import { Button, Section } from "vvver-design-system";
import "vvver-design-system/styles.css";

Terminalshell
1
2
npx tsc --noEmit
npm run build

02 / Feature matrix

Feature claims and examples

Source shipped

Consumers compile the same component source inspected in the repository.

Token contract

Ink, paper, hairlines, spacing, and motion curves stay explicit.

Keyboard operation

Interactive patterns publish a visible focus path and expected key model.

Motion limits

Direct feedback uses the defined duration and easing tokens, with a complete still state.

Responsive source order

Layouts collapse without hiding content or rearranging the reading path.

Inherited theme tokens

Current color and paired tokens reverse the full interface without redrawing assets.

Catalog coverage

Each public primitive has a live example and prop reference.

Release checks

A release requires types, static output, browser checks, and a source tag.

Component composition

Large product surfaces stay assemblies of small, legible primitives.

03 / Framework

Host setup examples

app/page.tsxtsx
1
2
3
4
5
import { Button } from "vvver-design-system";

export default function Page() {
  return <Button href="/work">View work</Button>;
}

src/App.tsxtsx
1
2
3
4
5
import { Section } from "vvver-design-system";

export function App() {
  return <Section>Product surface</Section>;
}

src/pages/index.astroastro
1
2
3
4
---
import { ThemeSwitch } from "vvver-design-system";
---
<ThemeSwitch client:load />

04 / Activity

Build and adapter events

Two registers list build and host-adapter events. Each has a pause control; reduced motion presents one complete row.

BuildStep 05Export static catalogReviewStep 04Check keyboard pathsMotionStep 03Check reduced stateReleaseStep 02Prepare source tagDocsStep 01Update component example

Next.jsHost 01Compile package sourceViteHost 02Index Tailwind source pathAstroHost 03Mount React islandRemixHost 04Render component on server

05 / Product viewport

Release console specimen

Release consoleWorkspace / main

Inspect

Candidate

Example

Public surface

185 exports

Families

Page examples

Themes

TypeScriptRequired01

Production buildRequired02

Browser checksRequired03

Reduced motionRequired04

Source branch main · static sample · no remote actions

Product recipe

Developer product page structure

Order the page as split introduction, feature matrix, activity lists, and product frame.

Review the source Inspect the surface