# NudaUI — Animations without the baggage

> Copy-paste CSS & JS animations that work everywhere. Zero dependencies, zero npm installs, zero build steps. Framework-agnostic UI components for React, Vue, Svelte, Astro, Laravel, Django, Rails and plain HTML.

Copy it. Paste it. Ship it. NudaUI is a collection of 1503 framework-agnostic animations across 81 categories — pure HTML, CSS, and a sprinkle of vanilla JS. No build step. No config. Works with Laravel, Django, Rails, Go, or a plain `.html` file.

## At a glance

| | |
| --- | --- |
| Components | 1503 |
| Categories | 81 |
| Dependencies | none |
| Install step | none — copy and paste |
| Licence | MIT (component code) |
| Gallery | https://nudaui.dev/components |
| JSON API | https://nudaui.dev/openapi.json |

## Six principles. One tiny library.

### Typically under 1kb.

Single-file snippets with no runtime. Drop them in and forget the bundle size conversation.

### Works everywhere HTML works.

React, Vue, Svelte, Astro, Blade, Jinja, plain HTML. If it renders markup, it runs NudaUI.

### Respects the user.

Semantic HTML, ARIA attributes and prefers-reduced-motion shipped by default, not added later.

### Code you can actually debug.

No transpiled blobs, no minified monsters. The source is the same code you paste.

### Your design system, your rules.

Tokens, not themes. Restyle anything with CSS variables — we don't ship a brand for you.

### Easing curves, not defaults.

Every animation is hand-tuned. No bouncing for the sake of bouncing. No motion for motion's sake.

## Three steps. No install wizard.

1. **Find the animation you actually need.** A curated gallery — not 400 variations of the same spinner. Preview, tweak speed, compare side by side.
2. **Grab the snippet. That's the whole install.** One file, zero imports, one click. What you copy is what you ship. No hidden peer deps, no build configuration.
3. **Paste into any stack that renders HTML.** Next, Nuxt, Laravel, Django, a <script> tag on a static page — it doesn't matter. It works on the first try.

## We have opinions.

### Framework lock-in is a tax on your time.

Every animation library ties you to React, Vue, or whatever's trending. Switch frameworks? Rewrite everything. NudaUI animations are just HTML and CSS — they outlive your framework choices.

### 200kb for a loading spinner is insane.

Most animation libraries ship entire runtime engines. Our components are typically under 1kb each. No JavaScript runtime. No bundle size anxiety. Just CSS keyframes that browsers already know how to optimize.

### Backend developers deserve nice things too.

If you write Go, PHP, Python, or Rust — you've been left out of the animation conversation. Server-rendered templates don't need React. Blade, Jinja, ERB can all use NudaUI with zero configuration.

### Accessible from day one, not as an afterthought.

Every component ships with ARIA attributes, prefers-reduced-motion support, and semantic HTML. Accessibility isn't a feature — it's the baseline.

## The catalog, at a glance (81 categories)

- [Loaders](https://nudaui.dev/components#section-loaders) — Loading state animations — pulse dots, orbits, ripples, bars, waves. Used while async work is in flight to signal progress without committing to a percentage. (23 components)
- [Spinners](https://nudaui.dev/components#section-spinners) — Pure-CSS spinner variants — ring, dual ring, conic, segmented, gradient. Lightweight indeterminate progress for buttons, dialogs, and inline contexts. (22 components)
- [Progress](https://nudaui.dev/components#section-progress) — Determinate progress indicators — linear, radial, segmented, striped, gradient fill. Use when you can express completion as a percentage. (18 components)
- [Skeletons](https://nudaui.dev/components#section-skeletons) — Skeleton placeholders and shimmer loaders — generic blocks plus domain-specific shapes (message, card, list row, table, comment, feed, article, dashboard). Reserve layout while data loads to kill layout shift and avoid empty white screens. (24 components)
- [Text Effects](https://nudaui.dev/components#section-text-effects) — Typography-driven animations — scramble, typewriter, letter reveal, gradient sweep, glitch. Hero headlines, on-scroll reveals, marketing copy. (18 components)
- [Buttons](https://nudaui.dev/components#section-buttons) — Animated button states — magnetic hover, liquid morph, border beam, ripple, shine. Conversion-focused micro-interactions for CTAs. (23 components)
- [Toggles & Inputs](https://nudaui.dev/components#section-toggles-inputs) — Switches, checkboxes, radios, OTP fields. Stateful form controls with morphing transitions between on/off and indeterminate states. (18 components)
- [Cards & Hover](https://nudaui.dev/components#section-cards-hover) — Card hover behaviors — 3D tilt, glow, lift, flip, traced borders. Drop-in patterns for product grids, feature cards, link cards. (18 components)
- [Indicators](https://nudaui.dev/components#section-indicators) — Status, presence, and signal indicators — pulse dots, live badges, status rings, signal bars. For uptime, online state, real-time data. (18 components)
- [Micro-interactions](https://nudaui.dev/components#section-micro-interactions) — Tiny, purposeful animations — like burst, copy-check, pulse badge, shake on error. The small details that make an interface feel responsive. (18 components)
- [Backgrounds](https://nudaui.dev/components#section-backgrounds) — Animated background fills — aurora, mesh gradients, grid pulse, noise grain, gradient flow. Hero backdrops without WebGL or video tags. (18 components)
- [Borders & Outlines](https://nudaui.dev/components#section-borders-outlines) — Animated borders and outlines — traced borders, dashed flow, glow rings, gradient beams. Highlight CTAs, focus states, premium tiers. (18 components)
- [Avatars](https://nudaui.dev/components#section-avatars) — User avatar treatments — status rings, presence dots, stacked groups, shimmer placeholders. Inline user identity at any size. (20 components)
- [Badges & Tags](https://nudaui.dev/components#section-badges-tags) — Display-only pill labels and status tags — New, Beta, count, gradient, animated pulse. Read-only chips for versioning, feature flags, and taxonomy. For a text input that lets users add/remove their own tags, see Tags & Chips Input. (18 components)
- [Navigation](https://nudaui.dev/components#section-navigation) — Top-nav and inline nav patterns — underline slide, pill indicator, animated tabs, dropdown reveal. Pointer-driven navigation primitives. (21 components)
- [Dropdowns & Menus](https://nudaui.dev/components#section-dropdowns-menus) — Dropdown and menu UI — fade/scale/slide menus, context menu, profile menu, split button, mega menu, nested submenu, styled select, checkbox menu, searchable and action menus. Accessible, framework-agnostic open/close patterns. (18 components)
- [Breadcrumbs](https://nudaui.dev/components#section-breadcrumbs) — Breadcrumb trails — chevron, slash, pill, arrow, collapsed, icon, gradient, numbered-step, underline, and glass styles. Hierarchical navigation that orients users and feeds breadcrumb rich results. (18 components)
- [Pagination](https://nudaui.dev/components#section-pagination) — Pagination controls — classic numbered, rounded, minimal pager, dots, load-more, compact with ellipsis, jump-to-page, progress, arrows, and underline. For paging lists, tables, search results, and carousels. (18 components)
- [Toasts & Alerts](https://nudaui.dev/components#section-notifications) — Toasts, banners, snackbars, and inline alerts — transient, auto-dismissing system messages that slide in and out. For a persistent inbox of past notifications, see Notification Center. (20 components)
- [Tooltips](https://nudaui.dev/components#section-tooltips) — Hover and focus tooltips — arrow, fade, slide, glass effect. Contextual help that appears on demand and disappears cleanly. (18 components)
- [Dividers](https://nudaui.dev/components#section-dividers) — Animated separators — gradient lines, pulsing dots, drawn waves and zigzags, sparkle. Section breaks with personality. (18 components)
- [Cursors](https://nudaui.dev/components#section-cursors) — Custom cursor effects — dot follower, magnetic snap, trail, mix-blend. Pointer-driven enhancements for marketing sites and portfolios. (20 components)
- [Countdowns](https://nudaui.dev/components#section-countdowns) — Time-bound counters — flip cards, digit roll, rings, segmented displays. For launches, deadlines, sales, and scheduled events. (18 components)
- [Scroll Effects](https://nudaui.dev/components#section-scroll-effects) — Scroll-driven animations — fade in, parallax layers, reveal on intersect, top-of-page progress bar. Built on IntersectionObserver and CSS scroll-timeline. (18 components)
- [3D Effects](https://nudaui.dev/components#section-three-d) — 3D transforms in pure CSS — card flip, perspective hover, depth layering, cube. No WebGL, no Three.js — just transform-style: preserve-3d. (8 components)
- [Modals & Overlays](https://nudaui.dev/components#section-modals-overlays) — Modal dialogs, overlays, and drawers — scale in, slide, backdrop blur, side drawer. Focus-trapping shells with motion that telegraphs intent. (18 components)
- [Accordions & Tabs](https://nudaui.dev/components#section-accordions-tabs) — Disclosure widgets — chevron rotate, plus-minus morph, animated tab transitions, stacked accordion. Progressive disclosure done right. (18 components)
- [Marquees & Tickers](https://nudaui.dev/components#section-marquees) — Infinite scrolling tickers — linear, pause-on-hover, vertical, gradient-masked edges. Logo clouds, news bars, social proof reels. (20 components)
- [Empty States](https://nudaui.dev/components#section-empty-states) — Empty state illustrations — empty box, inbox, search, ghost, pulse. The screens users see before there's anything to see, designed to delight. (18 components)
- [Charts](https://nudaui.dev/components#section-charts) — Lightweight CSS-driven charts — bar, line, donut, sparkline, gauge, heatmap, area, pie, KPI. For dashboards that don't justify a charting library. (23 components)
- [Glassmorphism](https://nudaui.dev/components#section-glassmorphism) — Copy-paste UI animations and components. (21 components)
- [Particles & Effects](https://nudaui.dev/components#section-particles) — Decorative particle systems — confetti, sparkles, fireflies, snow, rain, fireworks, bubbles, stars, comet. Celebratory and ambient effects. (18 components)
- [Animated Gradients](https://nudaui.dev/components#section-gradient-animations) — Copy-paste UI animations and components. (18 components)
- [Noise & Grain](https://nudaui.dev/components#section-noise-grain) — Copy-paste UI animations and components. (20 components)
- [Scroll-Driven](https://nudaui.dev/components#section-scroll-driven) — Copy-paste UI animations and components. (18 components)
- [View Transitions](https://nudaui.dev/components#section-view-transitions) — Copy-paste UI animations and components. (20 components)
- [CSS-Only Interactions](https://nudaui.dev/components#section-css-only-interactions) — Copy-paste UI animations and components. (18 components)
- [Glitch & Distortion](https://nudaui.dev/components#section-glitch-distortion) — Copy-paste UI animations and components. (18 components)
- [Neon & Glow](https://nudaui.dev/components#section-neon-glow) — Copy-paste UI animations and components. (18 components)
- [Morphing Shapes](https://nudaui.dev/components#section-morphing-shapes) — Copy-paste UI animations and components. (18 components)
- [Confetti & Celebration](https://nudaui.dev/components#section-confetti-celebration) — Copy-paste UI animations and components. (18 components)
- [Animated Icons](https://nudaui.dev/components#section-animated-icons) — Copy-paste UI animations and components. (18 components)
- [Weather & Ambient](https://nudaui.dev/components#section-weather-ambient) — Copy-paste UI animations and components. (20 components)
- [Stats & Counters](https://nudaui.dev/components#section-stats-counters) — Stat blocks and counters — count up, trend cards, score rings, streak displays, achievement unlocks. Numbers worth animating. (18 components)
- [Form States](https://nudaui.dev/components#section-form-states) — Form interaction states — float labels, expanding search, password strength, OTP, validation, shake, range, step indicator, async submit. (18 components)
- [Image Effects](https://nudaui.dev/components#section-image-effects) — Image-level animations — hover zoom, Ken Burns, blur to focus, color drain, mask reveal, tilt, scan line, glitch, lightbox, frame reveal. (18 components)
- [AI / Chat UI](https://nudaui.dev/components#section-ai-chat) — AI and chat UI primitives — streaming dots, streaming text, chat bubbles, thinking shimmer, prompt composer, citations, token counter, model selector. (20 components)
- [Drag & Drop](https://nudaui.dev/components#section-drag-drop) — Drag and drop interactions — drop zones, file cards, sortable lists, drop indicators, trash zones, drag previews, multi-file uploads, reorder grids. (18 components)
- [Command Palette](https://nudaui.dev/components#section-command-palette) — Command palette UIs — Cmd-K trigger, spotlight, result items, group headers, no-results state, recent items, footer hints, match highlight. (18 components)
- [Theme Toggle](https://nudaui.dev/components#section-theme-toggle) — Light/dark theme switchers — sun-moon morph, switch, circle reveal, three-state, color schemes, dropdown, system indicator. (18 components)
- [Hero Sections](https://nudaui.dev/components#section-hero-sections) — Above-the-fold hero patterns — centered, split, mesh gradient, word reveal, stat row, avatar stack, floating cards, newsletter, scroll indicator. (18 components)
- [Pricing Tables](https://nudaui.dev/components#section-pricing) — Pricing table animations — card hover, popular tier highlight, billing toggle, price morph, feature list, savings badge, comparison rows, discount countdowns. (18 components)
- [Video Player UI](https://nudaui.dev/components#section-video-player) — Custom video player UI — play-pause morph, scrubber, volume, buffer indicator, big play button, controls reveal, speed selector, captions toggle. (18 components)
- [Onboarding & Coachmarks](https://nudaui.dev/components#section-onboarding) — Onboarding and coachmark patterns — spotlight, tour tooltip, step counter, welcome modal, feature pulse, coach arrow, skip button, confetti finale, checklist. (18 components)
- [Code & Terminal](https://nudaui.dev/components#section-code-terminal) — Code and terminal UI — terminal cursor, typing code, copy button, file tree, tab bar, syntax reveal, error squiggle, run button, command output, diff highlight. (18 components)
- [Footers](https://nudaui.dev/components#section-footers) — Site footer patterns — minimal, newsletter signup, mega grid, aurora glow, status pill, sticky cookie bar, marquee, big brand mark, social stack, back-to-top. (18 components)
- [Login & Auth](https://nudaui.dev/components#section-auth) — Login, sign-up, and auth-flow components — sign-in card with float labels, OAuth buttons, OTP input, password reveal, magic link, strength meter, biometric prompt, verify email, loading button. (18 components)
- [Calendars & Date Pickers](https://nudaui.dev/components#section-calendars) — Calendar and date-picker primitives — mini calendar, date range, popover trigger, time wheel, activity heatmap, month switcher, event pill, day timeline, countdown pill, schedule card. (21 components)
- [Sidebars & Docks](https://nudaui.dev/components#section-sidebars) — Sidebars, rails, and docks — collapsible sidebar, macOS-style dock, drawer slide, FAB action menu, vertical rail, workspace switcher, file tree, mobile bottom nav, hover-reveal, glass floating. (18 components)
- [Steppers & Wizards](https://nudaui.dev/components#section-steppers) — Multi-step flows and wizards — linear stepper, vertical stepper, progress wizard, numbered, onboarding carousel, wizard tabs, SVG trace connector, card slide, done step, step pill indicator. (18 components)
- [Search & Autocomplete](https://nudaui.dev/components#section-search-autocomplete) — Search inputs and autocomplete primitives — expanding search, autocomplete dropdown, match highlight, recent searches, voice search, search loading, no-results state, Cmd-K trigger, clearable input, filter chips, type-ahead, async shimmer, spotlight modal, sticky search header, staggered results, search history pills. (18 components)
- [Sliders & Ranges](https://nudaui.dev/components#section-sliders-ranges) — Slider and range controls — single-value, dual-handle range, value bubble, vertical, stepped with ticks, animated gradient fill, histogram range, snap-to-step, hue picker, rotary knob, brightness slider, price range, slider + number input, drag-active thumb halo, curve preview, frequency bars. (18 components)
- [Audio & Waveforms](https://nudaui.dev/components#section-audio-waveforms) — Audio player UI and waveform visualizers — equalizer bars, voice activity meter, soundwave pulse, waveform scrubber, vinyl record spin, mic recording, circular visualizer, now-playing card, amplitude rings, play/pause morph, mute toggle, loop indicator, spectrum analyzer, track progress with waveform, audio buffering. (18 components)
- [Color Pickers](https://nudaui.dev/components#section-color-pickers) — Color selection primitives for design tools, theme builders and dashboards — swatch grid, gradient picker, hue ring, eye-dropper trigger, hex input, palette generator, recents, contrast pair with AA/AAA badges, color chip with copy, saturation/lightness sliders. (18 components)
- [Galleries & Carousels](https://nudaui.dev/components#section-galleries-carousels) — Image gallery and carousel patterns — horizontal carousel with dots, swipe indicator, lightbox open, thumbnail strip, masonry hover lift, 3D image fan, before/after comparison slider, polaroid stack, hover zoom with caption reveal, filter morph tabs. (18 components)
- [Maps & Locations](https://nudaui.dev/components#section-maps-locations) — Map and location UI — pin drop bounce, marker pulse, route trace, distance line with chip, geo-locating spinner, cluster expand, popup card, location search with use-my-location, compass needle, mini-map with viewport. (18 components)
- [Watch Faces & Clocks](https://nudaui.dev/components#section-watch-faces) — Clock and watch face designs — analog clock, digital readout, flip clock, pomodoro ring, stopwatch, world clock card, alarm bells, countdown ring, Swiss railway, military 24h, weather clock, day/night, sand hourglass, word clock, pulse heart, binary clock, sundial. (18 components)
- [Quotes & Testimonials](https://nudaui.dev/components#section-quotes-testimonials) — Customer testimonial and pull-quote patterns — pull quote, testimonial card, star rating card, signature reveal, logo + quote strip, video testimonial, rating distribution, marquee testimonials, carousel, before/after, gradient border quote, animated stars, verified customer, masonry grid, spotlight quote, stat quote, floating card, inline quote link. (18 components)
- [Comments & Reactions](https://nudaui.dev/components#section-comments-reactions) — Comment thread and reaction UI — comment thread, nested reply, emoji picker, emoji burst, like button heart, dislike thumb, share, reply input expand, mentions chip, reaction count badge, reaction bar, comment skeleton, pinned comment, highlighted reply, reaction stack, thumbs up counter, quote reply, emoji hover preview. (18 components)
- [Profile Headers](https://nudaui.dev/components#section-profile-headers) — User profile header patterns — bio card, banner + avatar, stat row, social links bar, edit profile button, level XP ring, verified checkmark, status presence, follow button toggle, follower count tick-up, pronouns pill, compact profile pill, skeleton loader, hero profile, member since badge, achievements strip, hover card, bio reveal. (18 components)
- [Settings & Preferences](https://nudaui.dev/components#section-settings-preferences) — Settings and preferences UI — preference row toggle, settings card group, theme selector, notification preferences, account section, danger zone, save indicator, search settings input, two-column setting, accessibility section, connected apps, plan tier card, email verification, language picker, time zone picker, privacy row, sound preferences, reset to defaults. (18 components)
- [File Upload](https://nudaui.dev/components#section-file-upload) — File upload lifecycle UI — drop zone idle and active states, file list item, upload progress bar, file type icons, image thumbnail preview, error state, multi-file count pill, file size pill, success checkmark, cancel upload, total progress, validation error, click-to-browse, paste hint, upload queue, file replaced, empty state. (18 components)
- [Tags & Chips Input](https://nudaui.dev/components#section-multi-chips) — Interactive tag/chip INPUT — users type to add chips and click to remove them: chip input add, remove animation, autocomplete dropdown, max-count, multi-select combobox, removable filter chips, drag reorder, validation. For read-only display badges, see Badges & Tags. (18 components)
- [Mobile Patterns](https://nudaui.dev/components#section-mobile-patterns) — Mobile-first interaction patterns — bottom sheet, pull-to-refresh, swipe-to-delete, action sheet, segmented control, mobile tab bar, FAB, ripple touch, momentum scroll, swipe card, status bar, top toast, long-press menu, drawer hamburger, pull-down search, mobile modal, onboarding dots, pinch-to-zoom hint. (23 components)
- [Notification Center](https://nudaui.dev/components#section-notification-center) — Persistent notification inbox — the panel of past notifications behind a bell icon: notification item, inbox header with count, time-group separator, filter tabs, swipe-to-dismiss, inbox-zero empty state, bulk actions, mention, bell with badge. For transient pop-up toasts, see Toasts & Alerts. (18 components)
- [Tables & Data Grids](https://nudaui.dev/components#section-tables-data-grids) — Tables and data grids — striped, sortable and sticky headers, selectable and expandable rows, status pills, dense layouts, inline-edit cells, toolbars, footer totals, empty and loading states. Pure CSS, framework-agnostic. (18 components)
- [KPI & Dashboard Widgets](https://nudaui.dev/components#section-kpi-widgets) — KPI and dashboard widgets — stat cards with trend deltas, sparklines, progress rings, big-number tiles, goal bars, donut and gauge metrics, live counters, uptime tiles. Drop-in dashboard building blocks. (18 components)
- [Timelines](https://nudaui.dev/components#section-timelines) — Timelines — vertical, horizontal, alternating, activity feeds, roadmaps, git-commit style, numbered milestones, animated draw-in lines. For histories, changelogs, processes, and event sequences. (18 components)
- [Cookie & Consent](https://nudaui.dev/components#section-cookie-consent) — Cookie and consent UI — bottom bars, corner cards, centered modals, slide-up banners, granular toggle panels, accept/reject and GDPR settings. Privacy notices that don't wreck the page. (18 components)
- [Error & 404 Pages](https://nudaui.dev/components#section-error-pages) — Error and 404 pages — centered 404, 500 server error, glitch text, maintenance mode, offline state, empty-search, access-denied 403, retry cards. Friendly dead-ends that keep users oriented. (18 components)
- [Social Share](https://nudaui.dev/components#section-social-share) — Social share UI — horizontal rows, floating bars, copy-link pills, share counts, popover menus, native-style sheets, QR cards, like/share/bookmark bars. Inline-SVG glyphs, no external scripts. (18 components)

## Questions, honestly answered

### Is NudaUI really dependency-free?

Yes. Components are pure HTML and CSS, with a tiny sprinkle of vanilla JS only when a component genuinely needs interactivity. You'll never see peerDependencies, a runtime engine, or a mandatory bundler step.

### Can I use it with React / Vue / Svelte / Astro?

Any framework that renders markup. The snippets are plain JSX-safe HTML — no component bindings, no framework-specific imports. If you can paste a <div>, you can paste a NudaUI animation.

### What about backend templating engines?

Blade, Jinja, ERB, Twig, Razor, Go templates — all fine. That's the whole point. The markup is the product, and markup is universal.

### How do I theme it to match my design system?

Components read CSS custom properties for color, radius, and timing. Override the variables at :root (or on any parent) and the animations inherit your tokens automatically. No build step, no Tailwind config fork.

### Do the animations respect prefers-reduced-motion?

Every component. Motion-heavy animations gracefully downgrade to a static or near-static state when the user has requested reduced motion. Accessibility is a requirement, not a config flag.

### Is it free? What's the catch?

Free, open source, MIT. No accounts, no usage tracking, no pro tier locked behind a paywall. If you ship with NudaUI, a link back is appreciated — never required.

## Where to go next

- [Component gallery](https://nudaui.dev/components) — live previews and snippets for all 1503 components
- [Developer portal](https://nudaui.dev/developers) — the JSON API, no key required
- [Agent instructions](https://nudaui.dev/agent-instructions.md) — when to use NudaUI, and when not to
- [llms.txt](https://nudaui.dev/llms.txt) — grounding index for language models
- [About](https://nudaui.dev/about) · [Contact](https://nudaui.dev/contact) · [Changelog](https://nudaui.dev/changelog) · [Terms](https://nudaui.dev/terms) · [Privacy](https://nudaui.dev/privacy)

---

Canonical HTML version: https://nudaui.dev