Context.dev design system
Install
# Run from your project rootnpx -y github:anwarlemu/context-dev-brand-cli#releaseComponent library
Use these components for Context.dev pages and interfaces. Each entry includes a preview, usage notes, an example, and source code.
Buttons, forms, menus, and other controls, with site and product variants.
Product23
Dashboard navigation, page layouts, cards, charts, and panels.
Site31
Headers, heroes, sections, and footers for Context.dev marketing pages.
Page layouts composed from the library components.
Visuals66
Dot fields, glyphs, diagrams, and animations.
Colors, typography, spacing, radii, shadows, and motion for site and product interfaces.
Agent workflow
When building or changing a Context.dev page, use this library as the design reference.
- 1Choose componentsFind the components or page block for the task. Read their usage notes and examples before writing the interface.
- 2Use the tokensBuild with the existing components and tokens. Follow the product or site reference for layout, spacing, type, and interaction.
- 3Check the pageRun the token check, test the interactions, and review the page at desktop and phone sizes against the reference.
terminal
npx context-ds listnpx context-ds look src/app/new-page/page.tsxnpx context-ds add page card buttonnpx context-ds check --changednpx context-ds review http://localhost:3000/new-page --anyBuild a page
Choose a component or page block, then follow its usage notes.