Sizing
Compact through large scales adjust the complete component system consistently.
Configure and use it
This is the smallest useful starting point. Copy it into the indicated application file or run it from the project root, then adjust the documented values for your product.
<Button size="sm">Compact action</Button>
<Input size="lg" label="Search" />What changes after this
Control size and application density remain consistent without shrinking accessible touch targets.
Component size
Use xs, sm, default, md, lg, or xl when a component needs an explicit scale. Related controls should use the same size within one task.
Interface density
Compact, default, comfortable, and large adjust the system globally. Choose density from audience and task complexity rather than viewport alone.
Responsive composition
Let containers, grids, columns, navigation, and sections adapt layout. Avoid shrinking touch targets to force desktop arrangements onto mobile.
Override deliberately
Use tokens for application-wide spacing changes and component props for local intent. Measure dense tables and large marketing layouts separately.
Verify the result
Type-check the application, inspect the resolved package and styles, and build the production artifact. Test the page at a narrow viewport, with keyboard navigation, and in both color modes before shipping.
bunx wrnexus typecheck .
bunx wrnexus inspect packages .
bunx wrnexus inspect styles .
bunx wrnexus build .Expected result
The commands exit successfully, the build reports the installed UI components and active theme, and the rendered page remains usable before and after hydration.