n3wth/ui

Atomic design system for n3wth projects. Flat, minimal, iOS-inspired.
No shadows, no glows—just clean glassmorphism and precision typography.

Live Demo / npm package / Registry

---

AI-Native Integration

This library is optimized for AI-driven development (v0, Cursor, Google AI Studio).

• v0 / Shadcn: Point v0 to this repo or use the registry.json.
• Google AI Studio: Use the native system instructions.
• Cursor: Automated context via .cursorrules.

---

Install

npm install @n3wth/ui

Quick Start

import { Button, Card, Hero, Section } from '@n3wth/ui'
import '@n3wth/ui/styles'

export default function App() {
  return (
    <Section>
      <Hero title="Hello World" subtitle="iOS-inspired design system" />
      <Card>
        <Button variant="accent">Click Me</Button>
      </Card>
    </Section>
  )
}

---

Design Tokens

Built on Tailwind CSS 4.

Token	Description
Typography	font-display (Mona Sans), font-sans (Geist Sans)
Glass	.glass-card, .glass-pill, .glass-nav
Colors	Semantic tokens: bg, bg-secondary, sage, coral, gold, mint
Spacing	iOS-standard safe areas: safe-top, safe-bottom

---

Components

Category	Components
Atoms	Button, Badge, Input, Icon, AnimatedText, NoiseOverlay, ScrollIndicator
Molecules	Card, CommandBox, ThemeToggle, MobileDrawer, NavLink, CompositeShape
Organisms	Nav, Hero, Section, Footer

---

Hooks

• useTheme — Dark/light mode with system persistence.
• useMediaQuery — Clean responsive breakpoint handling.
• useKeyboardShortcuts — Global keyboard event management.
• useScrollReveal — Entry animations for atomic elements.
• useReducedMotion — Respects user accessibility preferences.

---

Open Graph Card

Shared OG image template for n3wth sites. Use with Next.js opengraph-image.tsx:

// app/opengraph-image.tsx
import { ImageResponse } from 'next/og'
import { OGCard } from '@n3wth/ui/og'

export const runtime = 'edge'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default function Image() {
  return new ImageResponse(<OGCard title="My Site" />, size)
}

Black background, white type, n3wth mark. 1200x630, Twitter summary_large_image compatible.

---

Development

# Clone and install
git clone https://github.com/n3wth/ui
npm install

# Run the showcase/demo
npm run demo

# Build for production
npm run build

# Update AI Registry
npm run registry:build

Releasing

We use a semantic patch/minor/major flow that automatically updates AI registry artifacts:

npm run release:patch

---

License

MIT © Oliver Newth