GuideComponents

Component Usage Overview

How to reuse Nexus patterns, locate examples, and decide whether a change belongs to a page or the design system.

8 min readComponentsUpdated for Nexus 0.1
On this page 4

What you will learn

  • Locate a visual example.
  • Reuse patterns consistently.
  • Choose local versus shared changes.

Examples are source code

The /components, /forms, /tables, /charts, and /extensions routes are live pattern galleries. Their implementations live in components and can be extracted or adapted for your feature.

text
/components
/forms
/tables
/charts
/extensions

Reuse before inventing

Match an existing surface, spacing scale, status color, button, field, or dialog before adding a new visual language. This keeps later product work faster and reduces dark-mode defects.

  • Semantic tokens
  • Existing states
  • Keyboard interaction
  • Responsive behavior
  • Loading and errors

Local or global

If only one feature needs a layout, add a feature class in app/template.css. If every use of a primitive must change, update app/globals.css and follow the design-system release workflow.