Atoms
Building blocks including Button, Badge, Input, Icon, AnimatedText, HamburgerIcon, NoiseOverlay, and ScrollIndicator. Each atom is designed to be minimal and composable.
@n3wth/ui - Flat, Minimal Design System
About
@n3wth/ui is an atomic design system for React applications. Built with a flat, minimal, iOS-inspired aesthetic, it provides components with no shadows or glows - just clean glass morphism effects.
Components
The design system follows atomic design principles with three levels of components:
Molecules
Functional UI patterns combining atoms: Card, NavLink, CommandBox, ThemeToggle, MobileDrawer, and ErrorBoundary. These handle common interaction patterns.
Organisms
Complex components for page-level structure: Nav, Hero, Section, and Footer. These provide consistent layouts across applications.
Features
- React 18+ and React 19 compatible
- TypeScript with full type definitions
- Tailwind CSS v4 preset included
- Dark and light theme support
- Respects user motion preferences
- GSAP animation hooks (optional)
Installation
Install via npm: npm install @n3wth/ui
Import components: import { Button, Card, Nav } from '@n3wth/ui'