UI Components

milkdown11.7k★

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.

assistant-ui10.8k★

Assistant-UI is a TypeScript and React component library for building AI chat interfaces. Composable primitives (Thread, Message, Composer, ActionBar) handle the parts you would otherwise rewrite for every new project: streaming, auto-scroll, retries, attachments, markdown rendering, code highlighting, voice dictation, keyboard shortcuts, and accessibility. MIT licensed. Start with `npx assistant-ui@latest create` or `init` for an existing project, then wire it to your backend. The library works with Vercel AI SDK, LangGraph, LangChain, Google ADK, or any custom streaming endpoint. Generative UI is built in, meaning tool calls render as proper React components instead of JSON blobs in the chat. Solo developers and small teams shipping AI features want this. It is what you would build yourself if you had a month to spare; using it saves the month. Larger teams that want managed thread persistence and usage analytics can pay for Assistant Cloud, the optional hosted layer. The catch is component customization. Once you go past the defaults, you are styling React primitives and writing your own variants. That is fine if your team has design system experience, less fine if you expected an out-of-the-box product. If you want something fully styled, look at Vercel's AI Chatbot template, which is more opinionated and harder to bend.

flowbite9.3k★

A component library built on top of Tailwind CSS. If you're already using Tailwind and don't want to design every button, modal, dropdown, and navbar from scratch, Flowbite gives you pre-built components you can copy-paste into your project. The free version includes 56 component categories: navbars, cards, modals, forms, tables, alerts, and more. All built with Tailwind utility classes, so they match whatever custom Tailwind theme you've set up. Framework support covers React, Vue, Svelte, and vanilla HTML. Flowbite Pro ($149 one-time for personal, $299 for teams) adds 450+ advanced components, application UI blocks (dashboards, e-commerce layouts, admin panels), and Figma design files. That's where the real value is if you're building a full app. The catch: the free components are solid but basic. Once you need a data table with sorting, a complex dashboard layout, or an e-commerce checkout flow, you're either building it yourself or paying for Pro. Also, you're locked into Tailwind. If you ever move away from it, these components don't come with you. For a free alternative, consider shadcn/ui (React only) which gives you owned, customizable components rather than a library dependency.

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-vue2.6k★

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.0k★

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.

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.

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.