HeroUI is a free, open-source UI component library for web and mobile. The React version includes 75+ components built on React Aria and Tailwind CSS v4, and a separate React Native library adds 37 mobile components. You install it as a package and get a polished default look, with theming through CSS variables. It also ships AI tooling (MCP servers, Agent Skills, LLM docs) so coding assistants can build with it. HeroUI suits React developers who want accessible, attractive UI without starting from scratch.

• 75+ React Components: Covers forms, overlays, navigation, data display, and feedback, including Table, Modal, Drawer, Toast, Tabs, and Autocomplete. Most standard app interfaces are covered out of the box.
• React Native Library: 37 native components, such as BottomSheet, Dialog, Menu, and InputOTP, give your mobile app the same design language as your web app.
• Built on React Aria and Tailwind CSS v4: Keyboard handling and accessibility behavior come from React Aria, and you style with Tailwind utilities you already know.
• Full Date, Time, and Color Systems: Includes Calendar, RangeCalendar, DatePicker, DateRangePicker, TimeField, ColorPicker, ColorArea, and ColorSlider, so you skip third-party pickers.
• Theming and Dark Mode: CSS variables and global styles control the look, and you can switch between light, dark, and system modes. The Theme Builder lets you design a theme visually and export the CSS.
• MCP Servers and Agent Skills: Connect AI coding assistants to HeroUI's React and Native documentation through MCP servers and Agent Skills. Resources such as AGENTS.md, DESIGN.md, and LLMs.txt help coding agents follow the correct component patterns and design rules.
• HeroUI CLI: Initializes projects and manages HeroUI dependencies from the terminal.
• Docs Agent API: A read-only API with search and page endpoints, plus an OpenAPI spec. It requires no account or paid plan.

• Free and Open Source: The core web and mobile libraries cost nothing, so you can use them in personal and commercial projects without a subscription.
• Good-Looking Defaults: You get a polished, consistent style out of the box, so you spend less time on visual design than with unstyled primitives.
• Accessibility Built In: React Aria handles focus, keyboard navigation, and ARIA semantics, which saves you from building that logic yourself.
• Works with a Tailwind Workflow: Components use Tailwind CSS v4, so teams already on Tailwind can customize them with familiar utilities.
• Ready for AI Coding Assistants: MCP servers, Agent Skills, and LLM-ready docs help tools like Cursor or Claude Code generate correct HeroUI code.
• One Design Language Across Web and Mobile: Separate React and React Native libraries let you keep a consistent look across your products.

• Tied to Tailwind CSS v4: The React library is built on Tailwind CSS v4, so projects on other styling systems or older Tailwind versions need extra setup or a migration.
• Smaller Mobile Library: The native library has 37 components, compared with 75+ on web. Some web components have no mobile equivalent yet.
• Premium Extras Are Paid: Pro components, premium templates, Pro AI tooling, and priority support are sold separately through HeroUI Pro plans. The public pricing page lists the plans without showing prices.

• SaaS Dashboards: Build admin panels with Table, Pagination, Tabs, and Dropdown components. You ship a consistent, accessible interface without designing each control.
• Forms and Data Entry: Use TextField, Select, ComboBox, DatePicker, and InputOTP to build signup, checkout, or booking flows. Built-in validation messaging and keyboard support make the forms easier to complete.
• Cross-Platform Products: Pair the React library with HeroUI Native to keep your web app and mobile app on the same design language. Your team maintains one visual system.
• AI-Assisted Prototyping: Connect the HeroUI MCP server or Agent Skills to your coding assistant and describe the UI you want. The assistant can generate working HeroUI code from accurate docs.
• Branded Marketing and Product Sites: Use the Theme Builder and CSS variables to match your brand colors, then build pages with Card, Avatar, and Accordion. Dark mode works with no extra libraries.
• Scheduling and Booking Tools: Calendar, RangeCalendar, DateRangePicker, and TimeField cover reservation and planning interfaces. They handle date selection without a separate picker package.