---
name: "@n3wth"
slug: "n3wth"
description: "Flat, minimal, iOS-inspired design system. 49 components, hooks, and blocks installable with the shadcn CLI."
category: "Animated components"
tags: ["animation", "audio", "backgrounds", "blocks", "buttons", "cards", "design-system", "forms", "hooks", "icons", "loaders", "media", "mobile", "navigation", "overlays", "theming"]
framework: "react"
license: null
author: "n3wth"
website: "https://kit.n3wth.com"
github: "https://github.com/n3wth/n3wth"
registry: "https://kit.n3wth.com/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 49
generated_at: "2026-09-21T01:50:16.753Z"
---

# @n3wth

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

## Links

- Website: https://kit.n3wth.com
- GitHub: https://github.com/n3wth/n3wth
- Registry JSON: https://kit.n3wth.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/n3wth
- This file: https://sh4dcn.vercel.app/md/n3wth.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://kit.n3wth.com/r/registry.json
pnpm dlx shadcn@latest add https://kit.n3wth.com/r/registry.json
bunx shadcn@latest add https://kit.n3wth.com/r/registry.json
# clone the source repo
git clone https://github.com/n3wth/n3wth.git
# fetch the raw registry index
curl -s https://kit.n3wth.com/r/registry.json
```

## Components (49)

| name | type | description | install |
| --- | --- | --- | --- |
| n3wth | registry:style | Flat, minimal, iOS-inspired design system for n3wth projects. | `npx shadcn@latest add https://kit.n3wth.com/r/n3wth.json` |
| cn | registry:lib | Tailwind CSS class merge utility | `npx shadcn@latest add https://kit.n3wth.com/r/cn.json` |
| button | registry:ui | Multi-variant button with responsive sizes, loading state, and asChild support. | `npx shadcn@latest add https://kit.n3wth.com/r/button.json` |
| badge | registry:ui | Inline badge with semantic color variants (sage, coral, mint, gold). | `npx shadcn@latest add https://kit.n3wth.com/r/badge.json` |
| input | registry:ui | Text input with glass variant, icon slots, and error state. | `npx shadcn@latest add https://kit.n3wth.com/r/input.json` |
| icon | registry: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 | registry:ui | Toggle switch with controlled/uncontrolled modes and size variants. | `npx shadcn@latest add https://kit.n3wth.com/r/switch.json` |
| avatar | registry:ui | Circular avatar with image, fallback initials, and size presets. | `npx shadcn@latest add https://kit.n3wth.com/r/avatar.json` |
| separator | registry:ui | Horizontal or vertical visual separator. | `npx shadcn@latest add https://kit.n3wth.com/r/separator.json` |
| progress | registry:ui | Animated progress bar with value label and semantic color states. | `npx shadcn@latest add https://kit.n3wth.com/r/progress.json` |
| label | registry:ui | Form label with required indicator and disabled state. | `npx shadcn@latest add https://kit.n3wth.com/r/label.json` |
| textarea | registry:ui | Textarea with resize control and error state. | `npx shadcn@latest add https://kit.n3wth.com/r/textarea.json` |
| skeleton | registry:ui | Skeleton loading placeholder with text, circular, and rectangular variants. | `npx shadcn@latest add https://kit.n3wth.com/r/skeleton.json` |
| code-block | registry:ui | Lightweight syntax-highlighting code block with line numbers. | `npx shadcn@latest add https://kit.n3wth.com/r/code-block.json` |
| noise-overlay | registry:ui | SVG noise texture overlay for visual grain effect. | `npx shadcn@latest add https://kit.n3wth.com/r/noise-overlay.json` |
| scroll-indicator | registry:ui | Animated scroll-down indicator with label and position presets. | `npx shadcn@latest add https://kit.n3wth.com/r/scroll-indicator.json` |
| hamburger-icon | registry: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 | registry: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 | registry:ui | Decorative SVG shape with pattern fills and responsive sizing. | `npx shadcn@latest add https://kit.n3wth.com/r/shape.json` |
| character | registry:ui | Expressive SVG character face with expressions and accessories. | `npx shadcn@latest add https://kit.n3wth.com/r/character.json` |
| speech-bubble | registry:ui | Speech or thought bubble with directional tail. | `npx shadcn@latest add https://kit.n3wth.com/r/speech-bubble.json` |
| tooltip | registry:ui | Portal-based tooltip with auto-positioning and arrow. | `npx shadcn@latest add https://kit.n3wth.com/r/tooltip.json` |
| card | registry:ui | Card container with default, glass, and interactive variants. | `npx shadcn@latest add https://kit.n3wth.com/r/card.json` |
| nav-link | registry:ui | Navigation link with default, underline, and pill variants. | `npx shadcn@latest add https://kit.n3wth.com/r/nav-link.json` |
| command-box | registry:ui | Copyable command display box with clipboard support. | `npx shadcn@latest add https://kit.n3wth.com/r/command-box.json` |
| theme-toggle | registry:ui | Dark/light theme toggle button with sun/moon icons. | `npx shadcn@latest add https://kit.n3wth.com/r/theme-toggle.json` |
| mobile-drawer | registry:ui | Slide-in drawer for mobile navigation with focus trap. | `npx shadcn@latest add https://kit.n3wth.com/r/mobile-drawer.json` |
| error-boundary | registry:ui | React error boundary with fallback UI and retry. | `npx shadcn@latest add https://kit.n3wth.com/r/error-boundary.json` |
| composite-shape | registry:ui | Multi-layer shape compositions with preset configurations. | `npx shadcn@latest add https://kit.n3wth.com/r/composite-shape.json` |
| modal | registry:ui | Accessible modal dialog with portal, focus trap, and compound sub-components. | `npx shadcn@latest add https://kit.n3wth.com/r/modal.json` |
| tabs | registry:ui | Accessible tabs with underline and pill variants and animated indicator. | `npx shadcn@latest add https://kit.n3wth.com/r/tabs.json` |
| toast | registry:ui | Toast notification with variant styling and auto-dismiss. | `npx shadcn@latest add https://kit.n3wth.com/r/toast.json` |
| dropdown | registry:ui | Accessible dropdown select with single/multi-select and search. | `npx shadcn@latest add https://kit.n3wth.com/r/dropdown.json` |
| accordion | registry:ui | Accessible accordion with single/multiple modes and animated content. | `npx shadcn@latest add https://kit.n3wth.com/r/accordion.json` |
| nav | registry:block | Responsive navigation bar with desktop links, mobile drawer, and theme toggle. | `npx shadcn@latest add https://kit.n3wth.com/r/nav.json` |
| footer | registry:block | Site footer with link columns, social icons, and copyright. | `npx shadcn@latest add https://kit.n3wth.com/r/footer.json` |
| hero | registry:block | Hero section with badge, title, description, and CTA buttons. | `npx shadcn@latest add https://kit.n3wth.com/r/hero.json` |
| section | registry:block | Layout section wrapper with size, spacing, and container options. | `npx shadcn@latest add https://kit.n3wth.com/r/section.json` |
| use-theme | registry: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 | registry: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 | registry: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 | registry:hook | Declarative keyboard shortcut handler with modifier key support. | `npx shadcn@latest add https://kit.n3wth.com/r/use-keyboard-shortcuts.json` |
| use-toast | registry: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 | registry:hook | Animated number counter with scroll-trigger support. | `npx shadcn@latest add https://kit.n3wth.com/r/use-count-up.json` |
| use-scroll-reveal | registry:hook | Scroll-triggered entrance animations with directional options. | `npx shadcn@latest add https://kit.n3wth.com/r/use-scroll-reveal.json` |
| use-stagger-list | registry:hook | Staggered list item cascade animations. | `npx shadcn@latest add https://kit.n3wth.com/r/use-stagger-list.json` |
| use-page-transition | registry:hook | Page entrance/exit fade-and-slide animations. | `npx shadcn@latest add https://kit.n3wth.com/r/use-page-transition.json` |
| use-text-reveal | registry: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 | registry:hook | Subtle hover/press scale animations for buttons. | `npx shadcn@latest add https://kit.n3wth.com/r/use-button-pulse.json` |

## For AI agents

```text
You are adding components from @n3wth to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/n3wth.md) for the component list.
2. Fetch the machine-readable index: https://kit.n3wth.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: n3wth).
```