Skip to content

The complete layer

Layouts & Patterns

Responsive layouts, accessible native components, themes, density modes, and polished states without a build tool.

Themes and density

Set one data attribute on any wrapper. Components inherit the theme through CSS variables.

Ocean
Forest
Rose
Amber
Mono

Intrinsic layouts

These adapt to available space instead of requiring breakpoint classes.

Auto grid

Automatically fitting column
No media query required
Change --n-grid-min

Sidebar layout

Main content

The content column uses minmax(0, 1fr), so long content cannot break the layout.

Cluster, split, switcher, and reel

Project members

Eight people have access

DBAK+6
Reel item one

Horizontal scroll with snap.

Reel item two

Touch and trackpad friendly.

Reel item three

Width controlled by one variable.

Advanced forms

Complete controls with readable HTML and accessible focus states.

https://
This domain is available.
Preferences

Native components

Built on browser primitives so the framework stays lightweight.

Accordion

Does this require JavaScript?
No. It uses semantic details and summary elements.
Can I change the theme?
Yes. Apply a theme to the page or to this component alone.

Tabs

Profile settings use the same visible focus and selected states as the rest of the framework.

Native popover

Click outside or press Escape to close.

Publish new release?

This uses the browser's native dialog focus management and backdrop.

Feedback and data display

Loading, progress, empty, success, and compact data states.

Bundle size7.6 KBGzipped
CSS classes697Documented API
Documentation84%84% complete
Accessible by default

Reduced motion, forced colors, keyboard focus, high contrast, and print behavior are included.

Theme tokens generatedDone
Responsive screenshots Running
Release notesPending
Loading heading
Loading copy
Loading copy

Nothing left to review

All accessibility checks passed.

Content typography

Use one class for finished article and documentation typography.

Design note

Readable content should not need twenty utilities

The n-prose class supplies rhythm, readable line length, lists, links, media, quotations, and captions.

Nucleus keeps the underlying HTML semantic. You can still override every token without replacing the component.

Good defaults create speed. Escape hatches preserve control.
<article class="n-prose">
  <h1>A readable article</h1>
  <p>Finished typography with one class.</p>
</article>

Press K to search, or highlight the important part.

Surfaces and effects

Decoration is opt-in. The reset no longer puts a gradient on every application's body.

Raised

Border and medium shadow

Sunken

Inset working area

Gradient

Theme-aware premium emphasis

Mesh surface

Optional atmospheric depth