n3wth/ui design system

Built in three layers

1. Sites

   Content and product logic.

2. @n3wth/ui

   Shared theme and page components.

3. Astryx

   External primitives and interactions.

Choose the right entry point

These paths describe the current workspace. Check a published package’s exports before using them outside this repository.

Compose a page once

This site uses the same navigation, page header, sections and footer as the rest of the family. Start from those components and add your content.

import {
  N3wthProvider, SiteNavigation, SiteContainer,
  PageHeader, SiteSection, SiteHeading, SiteText, SiteFooter,
} from '@n3wth/ui/site'
import '@n3wth/ui/site.css'
​
export function App() {
  return <N3wthProvider mode="dark">
    <SiteNavigation brand={<a href="/">My site</a>}
      links={<a href="#work">Work</a>} />
    <SiteContainer as="main" className="n3wth-site-main">
      <PageHeader title="A useful idea" description="What it helps people do." />
      <SiteSection id="work">
        <SiteHeading>How it works</SiteHeading>
        <SiteText>Your content goes here.</SiteText>
      </SiteSection>
    </SiteContainer>
    <SiteFooter />
  </N3wthProvider>
}

Astryx behavior, shared brand

This control is imported from the primitives facade. Its click state belongs to this page; its control implementation comes from Astryx and its appearance uses the Newth theme.

import { Button } from '@n3wth/ui/primitives'
​
<Button onClick={() => setCount(value => value + 1)}>
  Try the primitive
</Button>

Make the change where it belongs

• A new idea or route: change the site. Keep navigation links and product state there.
• A font, spacing or page pattern: change UI, then check every consuming site.
• A control’s keyboard behavior: use the Astryx primitive. Keep compatibility mapping in UI, rather than duplicating the behavior in an app.