Atomic design system for Newth sites - flat, minimal, iOS-inspired
npm install @n3wth/uiAtomic design system for n3wth projects. Flat, minimal, iOS-inspired.
No shadows, no glowsβjust clean glassmorphism and precision typography.
Live Demo / npm package / Registry
---
This library is optimized for AI-driven development (v0, Cursor, Google AI Studio, Claude Code).
- 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.
---
``bash`
npm install @n3wth/ui
`tsx
import { Button, Card, Hero, Section } from '@n3wth/ui'
import '@n3wth/ui/styles'
export default function App() {
return (
)
}
`
---
Built on Tailwind CSS 4.
| Token | Description |
| :--- | :--- |
| Typography | font-display (Mona Sans), font-sans (Geist Sans) |.glass-card
| Glass | , .glass-pill, .glass-nav |bg
| Colors | Semantic tokens: , bg-secondary, sage, coral, gold, mint |safe-top
| Spacing | iOS-standard safe areas: , safe-bottom |
---
| Category | Components |
| :--- | :--- |
| Atoms | Button, Badge, Input, Icon, AnimatedText, NoiseOverlay, ScrollIndicator |Card
| Molecules | , CommandBox, ThemeToggle, MobileDrawer, NavLink, CompositeShape |Nav
| Organisms | , Hero, Section, Footer |
---
- 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.
---
`bashClone and install
git clone https://github.com/n3wth/ui
npm install
$3
We use a semantic patch/minor/major flow that automatically updates AI registry artifacts:
`bash
npm run release:patch
``---
MIT Β© Oliver Newth