N3wth

Overview

n3wth/ui is the design system Oliver Newth uses across his n3wth sites, described as flat, minimal and iOS-inspired: no shadows or glows, just glassmorphism and precise typography. It is a shared React component library with theme tokens, typography, native controls and page compositions, so each app owns its content and routes while the visual foundation lives in one package.

The library is built on Tailwind CSS 4 and is published on npm as @n3wth/ui, with a registry.json for installing through the shadcn CLI or pointing v0 at it. The repository also ships Cursor rules and Google AI Studio system instructions for AI-assisted development.

Features

• Atoms: Button, Badge, Input, Icon, AnimatedText, NoiseOverlay and ScrollIndicator.
• Molecules: Card, CommandBox, ThemeToggle, MobileDrawer, NavLink and CompositeShape.
• Organisms: Nav, Hero, Section and Footer for full page layouts.
• Hooks: useTheme, useMediaQuery, useKeyboardShortcuts, useScrollReveal and useReducedMotion.
• Design tokens: Mona Sans and Geist Sans typography, glass utilities, semantic colors (sage, coral, gold, mint) and iOS-style safe-area spacing.
• OG image card: A shared 1200x630 Open Graph template for Next.js opengraph-image.tsx.
• Light and dark themes: Theme foundations owned by the package.

Tech stack

• React 18 or 19, Tailwind CSS 4, TypeScript, Mona Sans, Geist Sans

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @n3wth/component-name