UI Components

Lucide25.7k★

It's a fork of Feather Icons that kept going after Feather stopped updating. Drop-in packages for React, Vue, Svelte, Angular, and vanilla JS. Fully free under ISC license. Every icon, every framework package, every future update, free. No premium tier, no pro icons behind a paywall. Tree-shakeable, so you only bundle the icons you actually use. The catch: Lucide's style is minimal and outline-based. If you need filled icons, duotone variants, or a wider style range, Tabler Icons or Heroicons might be a better fit. And at 1,500+ icons, it's comprehensive but not exhaustive. Niche categories (finance, medical) have thinner coverage than Font Awesome's 30,000+ icons (though Font Awesome gates most behind their $99/year Pro tier).

naive-ui18.6k★

Naive UI is a Vue 3 component library whose theming works without touching a CSS preprocessor. More than 90 components, all treeshakable so you ship only what you import. The pitch is that the entire theme is a TypeScript object: no Less, no Sass, no CSS variables to override, no webpack loaders to configure. MIT licensed and free. Install is one npm command. Everything is written in TypeScript, so types come from the library itself rather than a separate types package, and the theme system is type-checked along with the rest of your code. Data components use virtual lists by default, which stops mattering in demos and starts mattering the moment you render a table with thousands of rows. Free with no pro tier and no paid components. That is worth calling out, because Element Plus and Ant Design Vue both build commercial offerings around the edges of their free libraries. Solo and team get the same answer here: use it. The catch is ecosystem size. Naive UI is smaller than Element Plus and Ant Design Vue, which means fewer Stack Overflow answers, fewer third-party extensions, and English documentation that trails the Chinese. The components themselves are good. You will just occasionally be the first person to hit a given problem, and you will fix it yourself.

tinymce16.3k★

TinyMCE is the rich text editor you drop into a web page so users can format text, add images, and build tables without touching HTML. It powers the editing boxes inside countless apps and CMSes, and it has been doing this job longer than most of its competitors have existed. The open source build ships the full editor plus a deep library of plugins and React, Vue, and Angular wrappers. Self-hosting is trivial: pull it from npm or a CDN, point it at a textarea, done. The real cost is the license. The open source build is GPLv2-or-later (it moved from LGPL to GPL in 2021), and GPL copyleft is a problem if you are shipping a closed-source commercial product. TinyMCE's company, Tiny, sells a commercial license specifically to escape that obligation, along with premium plugins and a hosted cloud option. For an open source app, an internal tool, or anything that can live with GPL, the free build is excellent and complete. Solo and small teams building closed products: read the license before you commit, because the GPL terms or the paid license is the actual decision here. Large teams shipping commercial software: budget for the commercial license or pick a permissively-licensed editor instead. The catch is that license boundary. The editor is great and the free version is full-featured, but GPLv2 plus a paid escape hatch means 'free' depends entirely on what you are building. If you need MIT-style freedom for a closed product without paying, look at CKEditor 5's open builds or a lighter editor like Tiptap.

assistant-ui13.1k★

Assistant-ui is a React component library for AI chat interfaces, covering the parts you would otherwise rebuild every project: streaming, auto-scroll, retries, attachments, markdown, code highlighting, voice dictation, keyboard shortcuts, and accessibility. The primitives are composable (Thread, Message, Composer, ActionBar) rather than one finished widget. MIT licensed. It now ships for React, React Native, and Ink, so the same runtime adapters drive web, mobile, and terminal chat. Start with npx assistant-ui@latest create, or init inside an existing project, then point it at a backend. It works with the Vercel AI SDK, LangGraph, LangChain, Google ADK, or any custom streaming endpoint. Generative UI is built in, so tool calls render as React components instead of JSON in the transcript. There is nothing to operate: it is a dependency in your app. Solo developers and small teams shipping an AI feature should take this. It is what you would build yourself given a spare month. The optional paid piece is assistant-cloud for thread persistence, history, and user-scoped storage. Free covers 200 monthly active users, Pro is $50/mo for 500 with $0.10 per user after that, and Enterprise is quoted. Medium teams should weigh that against a weekend of writing a threads table. The catch is customization. Past the defaults you are styling React primitives and writing your own variants, which is fine with design system experience and painful without it. Anyone expecting something to drop in and ship should look at Vercel's AI Chatbot template, more opinionated up front and harder to bend later.

milkdown12.1k★

Milkdown is a framework for embedding a WYSIWYG markdown editor into your product. Built on ProseMirror (the same engine behind Notion and Atlassian) and Remark for the markdown parsing. MIT licensed. TypeScript-native. Closest competitor is TipTap, which is built on the same ProseMirror foundation. This is a library, not an end-user app. You install it via npm, pick the adapter for your framework (React, Vue, Svelte, vanilla), and wire it into your component tree. Plugin architecture lets you add slash commands, math, diagrams, mentions, and collaborative editing through Yjs. GitHub Flavored Markdown support out of the box. The output is real markdown, not a custom format. If you are building a notes app, a CMS authoring surface, a wiki, or a comment box that needs rich text without HTML, this is the choice. Solo and team size do not matter, the cost is the integration time. The catch is that you are integrating, not installing. Budget a few days to wire up the plugins you need and another few to style it to match your design system. The plugin ecosystem is solid but smaller than TipTap's. If you need the broadest plugin library and do not mind their licensing model, TipTap is the alternative.

flowbite9.4k★

Flowbite gives Tailwind CSS the ready-made parts it never shipped with: buttons, modals, dropdowns, navbars, forms, datepickers. Basically, it plays the Bootstrap role on top of Tailwind. The core library is free and MIT licensed, with over 68 components plus free chart and datatable plugins. Setup is npm install flowbite plus a few CSS imports, built for Tailwind v4. Interactive pieces run on plain JavaScript via HTML data attributes, so Rails or a static site works fine. React, Vue, Svelte and Angular each get a separate Flowbite library. Flowbite Pro is a one-time purchase: $299 for the Developer edition, $169 for the Figma-only Designer edition, or $999 for a Developer team license covering up to 10 people. It adds 450+ premium sections, admin dashboards and Figma files. Solo: free, or $299 to buy a dashboard instead of building one. Small teams: $999 once. Larger teams: past 10 seats it's a custom quote. The catch: Pro's coded blocks are HTML and React only. Vue, Svelte and Angular Pro components are still pre-orders. Tailwind Plus closed to new customers when Tailwind Labs joined Shopify, so compare against free daisyUI or shadcn/ui. And the core repo's last release shipped in May 2026.

threeui7.2k★

ThreeUI is a catalog of WebGL and Three.js React components you drop in instead of building: shader buttons, liquid metal, globes, animated backgrounds and full landing-page scenes. From Meng To of Design+Code. The Community edition is MIT, with 50 parent components and 164 browse results, installable with npm install @designcodeio/threeui. Nothing to host. The Community repo runs the same app shell, browse grid, live controls and source tabs as the paid site; Pro and Beta components are filtered out. The sync that builds it fails closed and publishes a per-component parity report, rare honesty for open core. Pro is $199/year or $299 one-time for lifetime, both shown as launch prices against $399 and $599. That adds premium landing pages and components, plus MCP access so a coding agent can pull Pro source. Accounts can't be shared. Solo: free covers a hero effect. Small teams: Lifetime once shader work eats days. Larger teams: a license per builder. The catch: the free side has gone quiet. The public repo hasn't synced since September 1 while Pro added hundreds of designs, and open issues, including a paid upgrade that didn't apply after checkout, sit unanswered. And shaders are heavy: profile on mid-range phones.

thinking-orbs4.0k★

Thinking-orbs solves one small, specific UI problem: the moment your AI agent is working and the user is staring at a dead screen wondering if anything is happening. It's a React component library of animated dotted "orbs" with six tuned states, working, searching, solving, and the like, plus two sizes and automatic dark and light theming. The details are where it earns its keep. It respects prefers-reduced-motion, ships proper ARIA labels, and pauses the animation when it scrolls offscreen so you're not burning frames on something nobody can see. MIT licensed, drop it in, done. There's a live demo if you want to see the states before committing. Solo builders and teams both get the same thing here: a polished micro-library, free forever. Use it when you're building an agent or chat UI and want the "thinking" moment to feel intentional instead of frozen. The catch is scope. This is one loading animation, nothing more. It's popular and well made, but it's a single component with a handful of commits behind it. Treat it as a nice finishing touch, not a foundation.

hairline3.6k★

Hairline is a library of animated isometric line drawings that react to the mouse: a keyboard whose keys sink under the pointer, a vault dial that turns, a commit graph that lifts. Each is a React component or a plain function for any page, Svelte and vanilla included. More than thirty figures, MIT licensed, free, zero dependencies. Setup is npm i @lucasmarkes/hairline, or one shadcn command that also wires in your theme colors. Figures respect reduced-motion settings, render an empty box on the server so the page doesn't jump, and share one animation loop that stops when nothing moves. Theming is six CSS variables. Nothing to host. Two coding agent skills come with it: hairline-create draws a new figure from a prompt, and hairline-adopt rebuilds an SVG icon as one. Solo builders and small teams: free, and a fast way to dress up a landing page hero or empty state. Larger teams with a design system: free, but your designers will want a say. The catch: it's two weeks old and pre-1.0, with new figures in almost every release, so pin the version. It's also one fixed look. For animation your designer drew, use Rive or Lottie.

Blazorise3.5k★

Blazorise gives .NET developers 80+ UI components for Blazor apps that work across Bootstrap, Tailwind, Material, Bulma, and Fluent 2 without changing your code. DataGrid, Scheduler, Charts, forms with validation, the full enterprise component kit. The community edition is free and covers most use cases. No self-hosting involved here, it's a NuGet package you add to your Blazor project. Server-side or WebAssembly, both work. The component API is consistent across CSS frameworks, so switching from Bootstrap to Tailwind is a config change, not a rewrite. Solo developers and small teams can ship production UIs with the free community tier. Larger teams needing priority support, commercial licensing, or advanced components (some DataGrid features, Scheduler) will hit the commercial tier. That's a fair trade. The catch: you're locked into the Blazor ecosystem. If your team isn't already on .NET, Blazorise doesn't change that calculus. And the commercial tier pricing isn't published openly, which means a sales conversation for enterprise features.

markstream-vue3.1k★

Markstream renders Markdown that is still arriving, the way ChatGPT-style apps show text streaming in token by token. Normal Markdown renderers choke on half-finished input, a code fence with no closing backticks, a broken table. Markstream renders it cleanly as it streams and fixes up the formatting as more arrives. It ships separate packages for Vue and Nuxt, React and Next.js, Svelte 5, Angular, and even Vue 2, so most frontends are covered. MIT licensed and free. There is nothing to host. It is a frontend library you install with your package manager and drop a component into your app. The work is in the integration, not the ops. It handles the hard parts of streaming UIs: virtual windowing so long chats stay fast, progressive Mermaid diagrams and KaTeX math that render as the syntax completes, and Monaco editor hooks for live code blocks. Safe HTML rendering is configurable. The feature surface is wide, so expect to read the docs for the pieces you actually need. For anyone building an AI chat or assistant UI, this solves a real and annoying problem and costs nothing. Solo, small team, or large, the calculus is the same: install it, free. The catch: it is a rendering library, not a chat framework. You still wire up your own streaming transport, state, and backend. Markstream only paints what arrives.

ui2.6k★

Franken UI is a component library built on UIkit's design language but implemented as Tailwind CSS classes. It gives you a different aesthetic while staying in the Tailwind ecosystem. MIT license, TypeScript. Components include modals, dropdowns, tabs, accordions, sliders, navigation bars, and more. The design is clean and slightly more opinionated than shadcn/ui, closer to a cohesive design system than a collection of primitives. Fully free. No paid tier, no premium components. Install and use. The appeal is differentiation. If you've seen enough apps that look identical because they all use shadcn/ui with the same default theme, Franken UI gives you a distinct look without leaving Tailwind. The UIkit design language has its own personality. The catch: the community is small ( vs shadcn's 80K+). Fewer examples online, fewer Stack Overflow answers, fewer templates. If you hit a problem, you're reading source code, not searching for solutions. And the component library is less comprehensive than shadcn/ui; check that the components you need exist before committing. For production apps where you want maximum community support, shadcn/ui is safer. For projects where looking different matters, Franken UI is worth trying.

HeadlessX2.4k★

Dropdowns, modals, tabs, accordions, all the interactive patterns you'd otherwise build from scratch, but with zero CSS opinions. MIT license, TypeScript. The 'headless' pattern means you get the behavior (keyboard navigation, ARIA attributes, focus management) and you bring the styles. Works with Tailwind, CSS Modules, styled-components, whatever. Fully free. No paid tier, no hosted version. Install the package and use the components. Solo through large teams: free at every scale. Headless UI libraries save the most time for teams with custom design systems; you get accessibility compliance without fighting pre-styled components. The catch: is small for a component library. Radix UI (headless primitives by the Vercel/shadcn ecosystem) has and a much larger community. Headless UI by Tailwind Labs is another established option. HeadlessX is emerging and the component coverage may not match the established players. Check that it has the specific components you need before committing; an incomplete headless library means you're mixing sources or building the gaps yourself.

solid-glass2.1k★

Solid Glass is a dark, smoky-glass theme for shadcn/ui plus a set of components built for AI chat and agent screens: a composer, tool steps, a diff view, a reasoning panel, a context ring, and an ask card for when the agent needs your decision. It is one stylesheet that restyles the shadcn/ui components you already have. MIT licensed, no paid tier, free. Setup is two commands on an existing shadcn/ui project: npx shadcn@latest add deeplethe/solid-glass/solid-glass, then import the CSS after Tailwind and delete the colour variables shadcn init wrote. It targets React 19, Tailwind CSS 4 and the Base UI flavour of shadcn/ui, so an older Radix-based app is not plug and play. Nothing to host. The docs site has a Create page where you turn dials for thickness, tint, radius and blur and copy out the CSS. Solo, small teams and larger teams: free. Compare it with Vercel's AI Elements or assistant-ui if you want chat components without the opinionated look. The catch: it's about a week old, has no tagged releases, and nearly every commit comes from one maintainer at a five-month-old org. Pin the install to a commit and expect the look to keep shifting.

super_editor1.9k★

Super Editor gives Flutter developers the building blocks to make a rich-text editor instead of a finished one. If you're building a notes app, a comment box, or a document editor in Flutter and the stock text field isn't enough, this is a toolkit of composable pieces, text layout, attributed text, keyboard handling, that you assemble into exactly the editing experience you want. It's backend-agnostic, so where the content lives is your call. There's nothing to host. You add the packages from pub.dev and build. The trade-off is upfront: because it hands you parts rather than a drop-in widget, you do the assembly work, but you get an editor that matches your app instead of fighting a black box. It's maintained by the Flutter Bounty Hunters along with Superlist and the community. Flutter developers who need real document editing, more than a multiline text field, are the audience. For simple input, the built-in widgets are fine and you should use them. Super Editor earns its complexity when you need formatting, custom nodes, or editor behavior you can't get any other way. The catch: this is a toolkit, so expect to write integration code, it's not install-and-go. Rich-text editing is hard, and Super Editor exposes that complexity rather than hiding all of it. The flip side is full control and an MIT license, you own what you build on top of it.

DevExtreme1.9k★

Think enterprise dashboards, admin panels, and anything with serious data tables. It works with React, Angular, Vue, and jQuery. The source code is on GitHub, but this is not a typical open source project. DevExpress, the company behind it, sells commercial licenses. The GitHub repo is "source-available" for transparency and issue tracking, not for free commercial use. You can evaluate it freely, but production use requires a paid license. Pricing starts around $1,099/year for a single developer license (DevExtreme Complete). That gets you the full component set, priority support, and updates. Enterprise and Universal bundles that include server-side controls go higher. For teams, the per-seat cost adds up fast. The catch: this is a commercial product with an open GitHub repo, not an open source project you can self-host for free. The license explicitly prohibits redistribution. If you need free, look at AG Grid (community edition), Ant Design, or Material UI. DevExtreme's strength is in the data grid and scheduler components, which are the best for complex use cases, but you're paying for that quality.

bitplatform1.4k★

bitplatform is a toolkit for building apps in Blazor, Microsoft's framework for writing web front ends in C# instead of JavaScript. The headline is bit BlazorUI: 80+ components with dark and light themes in under 400 KB. Around it sit helpers for PWAs, offline storage and browser APIs, all MIT with unlimited commercial use. Nothing to host, it is NuGet packages and a project template. The Boilerplate template is the ambitious part: ASP.NET Core Identity, multiple languages, and one codebase targeting web, Android, iOS, Windows and macOS. Besql puts Entity Framework Core and SQLite in the browser for offline-first apps, and Butil exposes browser APIs in C#. Teams on .NET picking a Blazor component library should put it next to MudBlazor and Microsoft's Fluent UI Blazor, and against paid suites like Telerik and Syncfusion. Every team size uses it free. Paid help runs €35 an hour (roughly $40) for code reviews, workshops, security consultation or custom features. The catch is community size. Blazor is already a smaller world than React, and MudBlazor has a far bigger following, so expect fewer answers online when you get stuck.

seraui1.3k★

SeraUI is a component library for Vue 3 with a clean design system. It aims to give you production-ready components without the overhead of larger frameworks. MIT license, TypeScript. Still early. The component set covers the basics: buttons, inputs, selects, modals, dropdowns, tooltips, and layout primitives. Built with TypeScript and follows Vue 3 composition API patterns. Fully free. No paid tier, no premium components. Everything is open source. The honest take: SeraUI is early-stage. The component library space for Vue is crowded: PrimeVue, Vuetify, Naive UI, and Element Plus all have larger communities, more components, and more battle-testing. SeraUI might be the right choice if its design aesthetic matches what you want and you're comfortable with a smaller community. Solo developers: worth evaluating if you like the design. Small to large teams: you're probably better served by PrimeVue or Naive UI, which have more components, more documentation, and more people finding and fixing edge cases. The catch: small community, limited components compared to mature alternatives, and the documentation is still catching up. Building a production app on an early-stage component library is a risk.

slim-select1.3k★

The native HTML select box has not meaningfully changed since the 1990s, and every design system eventually has to replace it. Slim Select is that replacement: single and multi-select, search with highlighting, option groups with select-all, remote data loading, and a modal mode that becomes a centered panel with a backdrop on mobile. MIT licensed, free, and maintained since 2017. The pitch is that it stays out of your way. Zero dependencies, roughly 16KB of JavaScript gzipped plus 2KB of CSS, TypeScript types included, and theming through CSS custom properties instead of fighting class specificity. It ships WCAG 2.1 Level AA accessibility with real keyboard and screen reader support, which is the part most homegrown dropdowns get wrong. Official Vue 3 and React wrappers exist, or drop it into vanilla JS in two lines. There is no paid tier and nothing gated. Solo devs, small teams, large teams get the same library. If you want alternatives in the same weight class, Choices.js and Tom Select cover similar ground, and react-select has a deeper ecosystem if you have already committed to React. The catch is that a form component this central is one you live with for years, and this is a small-maintainer project. Check the issue tracker cadence before you commit, and vendor the source if that risk matters to you. The accessibility work is also only as good as your implementation: drop it into a form with no labels and no amount of ARIA in the library saves you.

page-mascot1.3k★

page-mascot puts a small character on your web page that follows the visitor's cursor with its head and reacts when clicked. It is a React component with two required props, plus a gallery of 52 ready-made characters you can download and drop in. MIT licensed, free, and on npm at version 0.1.0. Nothing to host. Install from npm, put two sprite sheets in your public folder, and render the component. The trick is simple on purpose: each character is two 3 by 3 sheets, nine head directions and nine expressions, and the pointer angle picks the cell. Tracking switches off on touch devices and the click animation respects reduced-motion settings. The second half is an agent skill that draws new characters for you. Ask Claude Code or Codex for a chibi otter, or a mascot based on your photo, in one of six styles, and it generates both sheets, checks the alignment, and wires up the component. Codex uses its own image tool. Claude Code goes through the OpenAI images API, so you need an OpenAI key and pay for the generations. The catch: it is decoration. It adds image weight to your page for charm, not function, and at 0.1.0 the API could still change. The prompts are in the repo for use in any chat UI.

prosekit1.2k★

ProseKit is the plumbing for building your own rich-text editor, not a drop-in editor itself. It's a headless, framework-agnostic toolkit built on ProseMirror, with type-safe, composable pieces and first-class support for React, Vue, Preact, Svelte, Solid, and vanilla JS. "Headless" means it handles the editor logic and hands you the behavior, you build the UI. It's a mature project with a substantial commit history, a shadcn/ui integration, and an active community. If you've used ProseMirror directly, ProseKit is the layer that makes it approachable without hiding its power. Free under MIT, for solo devs and teams alike. Reach for it when you need a custom editing experience, notes, comments, a CMS body field, and want control over every piece rather than fighting a closed editor's defaults. The catch is that this is a library, so you assemble the editor. If you want something you can paste in and ship in an afternoon, this isn't it, look at a batteries-included option instead. And ProseMirror's model has a learning curve underneath. TipTap is the closest OSS comparison; CKEditor and TinyMCE are the commercial ones. Pick ProseKit when control matters more than speed to first render.