UI/UX

MicroKit collects copy-ready interactions—animated buttons, tabs, inputs and hover effects—with React or CSS and Tailwind variants. Each component is copied separately in JavaScript or TypeScript, with no package to install; 26 of the 54 have no dependencies, while 28 use lucide-react.

The code is MIT-licensed, and Tailwind variants are designed for versions 3 and 4. In the Next.js App Router, most components work in server components; those using state, refs or event handlers need « use client ».

UI SFX groups 78 interface events into 12 sonic styles, so teams can compare how the same feedback feels without changing what it means. The library includes 72 one-shots and six loops, with interactive previews that place sounds in product flows.

Install it with npm install uisfx; its TypeScript API plays sounds and lets callers stop a loop when the associated state ends. Audio files use the CC0 license, while the runtime is MIT-licensed—a clear split that supports reuse in web and native projects alike.

next-themes applies the theme as the page loads, respects the system preference, and syncs the choice across tabs. Its ThemeProvider works with both the App Router and pages/, while a hook lets components switch themes or handle multiple variants.

One architectural detail matters: the browser-stored theme is unavailable during server rendering. UI that depends on useTheme should wait until the client component mounts to avoid hydration errors. The library also updates the <html> attribute—suppressHydrationWarning is recommended—and remains independent of the CSS solution in use.

All UtilityCSS brings together free and paid Tailwind CSS resources, organized by type, use case, and technology. Its listings include copy-paste components, templates, Next.js starters, and color-management tools, several of which support Tailwind CSS v4’s OKLCH formats.

Filters help narrow the catalog to building blocks for a project, but the directory alone does not guarantee their quality or accessibility. The page advises checking those details with each resource.

Fontastic Space compares Google Fonts side by side, with anatomy overlays, OpenType metrics, and compatibility scores. Its Playfair Display + DM Sans example compares x-height, cap height, and string width, then provides CSS rules ready to reuse.

The scores draw on several typographic analysis frameworks, but remain a guide: the tool also lets you inspect the visual result in a paragraph or banner before choosing a pairing.

React Bits 2.0 announces 216 animated components: 104 have been rebuilt or redesigned, and more than 20 have dropped extra dependencies. Demos add presets and click interactions, while Background Studio, Shape Magic, and Texture Lab have been rebuilt to tune effects live and export the results.

The update also refreshes the documentation and landing page, which is reported to use about five times less JavaScript. The catalog supports expressive interface prototyping; the range of animations still makes it worth assessing their runtime and dependency costs before integrating them into a product.

React Aria v1.22.0 introduces the Sheet component, a swipeable overlay leveraging native browser scroll gestures for smooth, touch-friendly transitions—well suited for mobile trays and notifications. This release also brings Turbopack support for locale optimization, improved handling of interactive widgets like the virtual keyboard, and various fixes for collections, ComboBox, and forms.

Navbar Gallery offers a curated selection of navigation bars from a wide range of websites, including static navbars, dropdowns, mega menus, sidebars, search bars, and announcement banners. Each example is browsable by type and links to the original site, making it easy to compare concrete navigation patterns for interface design. This resource helps designers quickly find relevant navigation solutions without sifting through generic galleries.

Footer Design offers a curated gallery of website footers from diverse projects, sortable by style and type. This resource lets you quickly browse concrete examples for inspiration when designing or updating interfaces. It features typographic, illustrated, grid-based and animated approaches, making it a practical UI/UX reference.

Supahero offers a curated collection of website hero sections showcasing diverse and visually engaging header designs. Each entry highlights different styles, animations, and layouts, making it a practical resource for interface inspiration or design research. While advanced filters are missing, the fast browsing experience lets users quickly explore a wide range of real-world examples.

3dicons.co offers over 1,400 open-source 3D icons, free to use without attribution for personal or commercial projects. The platform lets you customize color, angle, and download icons individually or in bulk, with themed collections and Figma integration. Its CC0 license makes it easy to incorporate these assets into any application or design system.

This documentation lists over 190 ready-to-use visual components for integrating WebGPU effects into React, Vue, Svelte, Solid, and plain JavaScript. The components span a wide range: textures, shapes, materials, filters, distortions, transitions, blurs, adjustments, and interactive effects, each with a concrete description of its rendering and parameters. A resource to quickly enrich an interface with advanced visual effects without writing low-level shaders.

Prompt Motion is a gallery of motion videos accompanied by the prompts and skills used to create them with Claude Opus 5.5. Examples can be browsed by type, from product UI and charts to kinetic typography and particles, then adapted to a project as a starting point for AI-assisted motion design.

Shadcn Admin Kit provides open-source blocks for building internal tools, dashboards, and B2B apps with React. It preconfigures data tables, forms, authentication, search, and internationalization, with advanced capabilities such as generated CRUD screens, permissions, bulk actions, and undo.

Penpot is an open-source design and prototyping platform connecting design, code, and AI workflows. It supports responsive interfaces, shared components and design tokens, and open formats such as CSS, HTML, SVG, and JSON to help bridge mockups and implementation.

Transitions Pro offers more than 43 production-ready transitions for React, TypeScript, and Next.js apps. Copyable examples come with agent skills and tools for creating or reviewing motion, helping teams build a consistent interaction system instead of isolated animations.