@n3wth

Flat, minimal, iOS-inspired design system. 49 components, hooks, and blocks installable with the shadcn CLI.

49 components react shadcn-cli

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://kit.n3wth.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://kit.n3wth.com/r/registry.json

bun bunx shadcn@latest add https://kit.n3wth.com/r/registry.json

fetch registry curl -s https://kit.n3wth.com/r/registry.json

Components

49 total

n3wth style

Flat, minimal, iOS-inspired design system for n3wth projects.

npx shadcn@latest add https://kit.n3wth.com/r/n3wth.json

cn lib

Tailwind CSS class merge utility

npx shadcn@latest add https://kit.n3wth.com/r/cn.json

Button ui

Multi-variant button with responsive sizes, loading state, and asChild support.

npx shadcn@latest add https://kit.n3wth.com/r/button.json

Badge ui

Inline badge with semantic color variants (sage, coral, mint, gold).

npx shadcn@latest add https://kit.n3wth.com/r/badge.json

Input ui

Text input with glass variant, icon slots, and error state.

npx shadcn@latest add https://kit.n3wth.com/r/input.json

Icon ui

Icon wrapper around iconoir-react with named icon map and size presets.

npx shadcn@latest add https://kit.n3wth.com/r/icon.json

Switch ui

Toggle switch with controlled/uncontrolled modes and size variants.

npx shadcn@latest add https://kit.n3wth.com/r/switch.json

Avatar ui

Circular avatar with image, fallback initials, and size presets.

npx shadcn@latest add https://kit.n3wth.com/r/avatar.json

Separator ui

Horizontal or vertical visual separator.

npx shadcn@latest add https://kit.n3wth.com/r/separator.json

Progress ui

Animated progress bar with value label and semantic color states.

npx shadcn@latest add https://kit.n3wth.com/r/progress.json

Label ui

Form label with required indicator and disabled state.

npx shadcn@latest add https://kit.n3wth.com/r/label.json

Textarea ui

Textarea with resize control and error state.

npx shadcn@latest add https://kit.n3wth.com/r/textarea.json

Skeleton ui

Skeleton loading placeholder with text, circular, and rectangular variants.

npx shadcn@latest add https://kit.n3wth.com/r/skeleton.json

Code Block ui

Lightweight syntax-highlighting code block with line numbers.

npx shadcn@latest add https://kit.n3wth.com/r/code-block.json

Noise Overlay ui

SVG noise texture overlay for visual grain effect.

npx shadcn@latest add https://kit.n3wth.com/r/noise-overlay.json

Scroll Indicator ui

Animated scroll-down indicator with label and position presets.

npx shadcn@latest add https://kit.n3wth.com/r/scroll-indicator.json

Hamburger Icon ui

Animated hamburger-to-X SVG icon for mobile menu toggles.

npx shadcn@latest add https://kit.n3wth.com/r/hamburger-icon.json

Animated Text ui

CSS-animated text with fade-up, fade-in, slide-up, and blur-in effects.

npx shadcn@latest add https://kit.n3wth.com/r/animated-text.json

Shape ui

Decorative SVG shape with pattern fills and responsive sizing.

npx shadcn@latest add https://kit.n3wth.com/r/shape.json

Character ui

Expressive SVG character face with expressions and accessories.

npx shadcn@latest add https://kit.n3wth.com/r/character.json

Speech Bubble ui

Speech or thought bubble with directional tail.

npx shadcn@latest add https://kit.n3wth.com/r/speech-bubble.json

Tooltip ui

Portal-based tooltip with auto-positioning and arrow.

npx shadcn@latest add https://kit.n3wth.com/r/tooltip.json

Card ui

Card container with default, glass, and interactive variants.

npx shadcn@latest add https://kit.n3wth.com/r/card.json

Nav Link ui

Navigation link with default, underline, and pill variants.

npx shadcn@latest add https://kit.n3wth.com/r/nav-link.json

Command Box ui

Copyable command display box with clipboard support.

npx shadcn@latest add https://kit.n3wth.com/r/command-box.json

Theme Toggle ui

Dark/light theme toggle button with sun/moon icons.

npx shadcn@latest add https://kit.n3wth.com/r/theme-toggle.json

Mobile Drawer ui

Slide-in drawer for mobile navigation with focus trap.

npx shadcn@latest add https://kit.n3wth.com/r/mobile-drawer.json

Error Boundary ui

React error boundary with fallback UI and retry.

npx shadcn@latest add https://kit.n3wth.com/r/error-boundary.json

Composite Shape ui

Multi-layer shape compositions with preset configurations.

npx shadcn@latest add https://kit.n3wth.com/r/composite-shape.json

Modal ui

Accessible modal dialog with portal, focus trap, and compound sub-components.

npx shadcn@latest add https://kit.n3wth.com/r/modal.json

Tabs ui

Accessible tabs with underline and pill variants and animated indicator.

npx shadcn@latest add https://kit.n3wth.com/r/tabs.json

Toast ui

Toast notification with variant styling and auto-dismiss.

npx shadcn@latest add https://kit.n3wth.com/r/toast.json

Dropdown ui

Accessible dropdown select with single/multi-select and search.

npx shadcn@latest add https://kit.n3wth.com/r/dropdown.json

Accordion ui

Accessible accordion with single/multiple modes and animated content.

npx shadcn@latest add https://kit.n3wth.com/r/accordion.json

Nav block

Responsive navigation bar with desktop links, mobile drawer, and theme toggle.

npx shadcn@latest add https://kit.n3wth.com/r/nav.json

Footer block

Site footer with link columns, social icons, and copyright.

npx shadcn@latest add https://kit.n3wth.com/r/footer.json

Hero block

Hero section with badge, title, description, and CTA buttons.

npx shadcn@latest add https://kit.n3wth.com/r/hero.json

Section block

Layout section wrapper with size, spacing, and container options.

npx shadcn@latest add https://kit.n3wth.com/r/section.json

use-theme hook

Theme toggle with localStorage persistence and system preference detection.

npx shadcn@latest add https://kit.n3wth.com/r/use-theme.json

use-media-query hook

SSR-safe media query matching with breakpoint helpers.

npx shadcn@latest add https://kit.n3wth.com/r/use-media-query.json

use-reduced-motion hook

Detects prefers-reduced-motion and provides animation config defaults.

npx shadcn@latest add https://kit.n3wth.com/r/use-reduced-motion.json

use-keyboard-shortcuts hook

Declarative keyboard shortcut handler with modifier key support.

npx shadcn@latest add https://kit.n3wth.com/r/use-keyboard-shortcuts.json

use-toast hook

Toast notification system with context provider and variant helpers.

npx shadcn@latest add https://kit.n3wth.com/r/use-toast.json

use-count-up hook

Animated number counter with scroll-trigger support.

npx shadcn@latest add https://kit.n3wth.com/r/use-count-up.json

use-scroll-reveal hook

Scroll-triggered entrance animations with directional options.

npx shadcn@latest add https://kit.n3wth.com/r/use-scroll-reveal.json

use-stagger-list hook

Staggered list item cascade animations.

npx shadcn@latest add https://kit.n3wth.com/r/use-stagger-list.json

use-page-transition hook

Page entrance/exit fade-and-slide animations.

npx shadcn@latest add https://kit.n3wth.com/r/use-page-transition.json

use-text-reveal hook

Character-by-character text reveal with scroll trigger.

npx shadcn@latest add https://kit.n3wth.com/r/use-text-reveal.json

use-button-pulse hook

Subtle hover/press scale animations for buttons.

npx shadcn@latest add https://kit.n3wth.com/r/use-button-pulse.json