UI Snippets Library — 442+ Free HTML, CSS & JavaScript Components

When you're building a frontend, you keep writing the same things. A hamburger navigation. A pricing card. A skeleton loader. A toast notification. A floating label form. The patterns are the same every time — the markup you've typed before, the CSS rules you already know, the JavaScript you've copied from your last project. The only thing that changes is the colors and the copy.

The UI Snippets Library solves this. It's a free, browser-based collection of 442+ production-ready HTML, CSS, and JavaScript components. Every snippet loads instantly in a split-pane editor. Edit the HTML, CSS, or JS live — the preview updates as you type. Export as a standalone HTML file, a React JSX component, or a React + Tailwind CSS component with utility classes replacing the CSS. No install, no npm, no build step.

What makes this different from a component library is that these aren't React components wrapped in a framework. Every snippet is raw HTML, plain CSS, and vanilla JavaScript. Paste it anywhere. Adapt it to any project. You own the code — there's no external dependency to update, no peer dependency conflict, no version lock-in.

Navigation snippets include an animated hamburger menu with smooth open/close toggle, a tab bar with sliding active indicator, a breadcrumb with CSS-generated separators, a dropdown menu with scale+opacity animation, a multi-step progress stepper with forward/back navigation, and a scroll progress bar that fills as you read. The command palette is fully keyboard-navigable — arrow keys, Enter to run, Escape to close, Cmd+K to open — with fuzzy search and grouped results.

Card snippets go beyond the standard profile card. The 3D flip card uses CSS preserve-3d and backface-visibility to reveal a back face on click. The music player card has a working progress bar, play/pause toggle, vinyl spin animation, next/prev track switching, and a volume slider. The gradient border card uses an animated conic gradient pseudo-element border with a glow. The stats card animates numbers from zero using IntersectionObserver — the count starts when the card enters the viewport.

Button snippets include the magnetic button (the cursor physically pulls the button toward it using mouse position math), neon glow buttons in four colors (cyan, pink, green, purple — built purely with CSS box-shadow and text-shadow), a confetti burst button that launches particle physics on click, a loading button that cycles through idle/loading/success states, and a ripple button that creates a Material-style click ripple from the exact mouse position.

Form snippets solve the components that take the most time to get right. The OTP/PIN input auto-advances focus, handles paste, supports backspace, and validates on submit. The file dropzone handles drag-and-drop and file-input click with live file list, file type color coding, and remove buttons. The star rating has hover previews, click-to-set, and label display. The range slider includes three independent instances with live value display. The floating label uses only CSS — no JavaScript — with :placeholder-shown and :focus selectors.

Layout snippets demonstrate modern CSS techniques: the bento grid uses named grid-column: span areas, the split hero uses a two-column grid with a dark terminal-style right panel, the pricing toggle animates between monthly and annual prices with a CSS easing transition, the vertical timeline uses a ::before gradient line with absolute-positioned node dots and pulse animation, and the kanban board uses the HTML5 drag-and-drop API with column count updates.

Animation snippets cover the effects that define modern UI: an aurora background with four floating CSS-animated gradient orbs using mix-blend-mode: screen, a spotlight effect that follows the mouse using a radial-gradient hole, a text scramble effect that decodes random characters into the final string frame by frame, a typewriter that cycles through an array of words with erase and retype, a 3D card tilt that calculates rotation angles from mouse position relative to the card center, a reveal-on-scroll using IntersectionObserver, a shimmer skeleton loader, a count-up animation with easing, a gradient text animation using background-clip: text, a marquee with CSS mask-based edge fade, and a dark mode toggle with a smooth knob transition and color-scheme-aware swatches.

Gallery search and category filters. The main library view is a searchable, filterable grid of all 442+ snippets with live iframe previews. Type in the search box to filter by name, or click a category pill (All, Navigation, Cards, Buttons, Forms, Layouts, Animations) to narrow the view. Pagination loads 9 snippets at a time with a "Load more" button.

Five export formats. Once you have edited a snippet to your liking, export it in the format that fits your project. The HTML button downloads a self-contained .html file ready to open in any browser. The JSX button downloads a React component with the CSS injected via a <style> tag. The Tailwind button converts the CSS to Tailwind utility classes (with arbitrary value fallbacks for custom sizes and colours) and downloads a component with no style tag — ready to drop into any Tailwind project. The Vue button exports a Vue 3 single-file component (.vue) — HTML event attributes are converted to Vue @event directives, JavaScript is wrapped in onMounted() from the Composition API, and the file is structured with <template>, <script setup>, and <style scoped> blocks. The Angular button exports a standalone Angular component (.component.ts) — inline event attributes are converted to Angular (event) bindings, JavaScript is placed inside ngAfterViewInit(), and the component uses the modern standalone API with CommonModule imported. Drop it into any Angular 14+ or Nuxt-style project without a module declaration.

Test every export before you download. Click Test Exports to open a split view: the generated code on one side, a live rendered preview on the other, with tabs for HTML, Tailwind, React, React + Tailwind, Vue, and Angular. Switch tabs to see the same snippet running as a real React component, a Vue 3 SFC, an Angular standalone component, or a Tailwind build — each rendered in a sandboxed iframe with the CDN libraries loaded. A built-in console surfaces any runtime errors, so you can confirm the converted component actually mounts and works before you ever download the file.

Saved snippets gallery and GitHub Gist sync. Unlike a static snippet library, this tool lets you save your own snippets — with any name you choose — to your browser's IndexedDB. Click the Saved tab to see your saved snippets as a full gallery grid with live previews and a search bar, identical to the library view. Edit any built-in snippet (or start from scratch), click "Save as", give it a name, and it's stored permanently in your browser. To back up across devices, connect a GitHub personal access token with gist scope. Your saved snippets sync to a private GitHub Gist — auto-syncing every 3 minutes while the tab is open and on every save. Restore from Gist on any device by entering your token and Gist ID.

All code runs locally in your browser. Nothing is uploaded to any server. The preview is a sandboxed <iframe> using srcdoc. Your saved snippets live in IndexedDB. Your GitHub token is stored only in localStorage — it never leaves your browser except to communicate with the GitHub API directly.