iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
There is no single established winner for Preact UI components without shadcn or Radix. Preact’s ecosystem directory lists several toolkits, but it is a discovery list—not a comparison of their maintenance, coverage, accessibility, or compatibility. Choose by how you want to own components, what your interface needs, and what works in your exact Preact build.
Start with the component model you want
The most useful first distinction is not a framework name; it is whether you want a ready-made package, a minimal starting point, or a set of components you will build and maintain yourself.
- Installed component package: You add a dependency and consume its components. Check its release activity, peer dependencies, styling approach, and support for your Preact version before committing.
- Minimal UI kit: A smaller kit may leave more room for your own design system, but the label “minimal” does not tell you how many components it provides or whether it is actively maintained.
- Your own component system: If no candidate fits your requirements, build components around your design tokens and use development tooling such as Storybook for Preact to document and exercise them. Storybook is a development environment, not a finished UI kit.
Preact’s Libraries & Add-ons directory is a starting point for discovering projects, not a guarantee that every listing is equally current or suitable.
Preact-first options to investigate
preact-fluid
Preact’s directory describes preact-fluid as a minimal UI kit. That description alone does not establish its present maintenance status, component breadth, or fit for your project. Inspect its current documentation and examples against the components you need.
#1 Best Overall
preact-material-components
The directory describes this project as Material Components for the Web exposed as Preact components. It is worth considering if Material styling matches your product, but verify the project’s current status, version compatibility, and styling requirements rather than assuming the directory entry answers those questions.
Storybook for Preact
The directory lists Storybook for Preact as a UI development environment. Use it to develop and inspect your own components; do not treat it as a source of production-ready components.
Can React component libraries work with Preact?
Sometimes. Preact documents preact/compat as a compatibility layer that can let React ecosystem components run through bundler aliases. That makes a React library a candidate to test, not a guaranteed drop-in replacement. Preact’s getting-started guide also warns that some React libraries use types that preact/compat does not provide, which can lead to TypeScript errors.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →For example, Preact’s directory identifies @mui/material as a React UI library, not a native Preact toolkit. If you consider it, verify the specific components you plan to use in your own build. Check peer dependencies, framework-specific APIs, TypeScript definitions, server-side rendering if applicable, and runtime behavior—not merely whether a basic component renders.
Preact’s landing page says, “Preact can be used directly in the browser without any transpilation steps.” That describes Preact itself; it does not establish that every component library can be used without a build step.
How to evaluate a candidate in your project
- List the components you actually need. Separate essential elements—such as forms, navigation, dialogs, or data display—from optional ones. Compare those needs with the project’s documented components and demos.
- Decide who owns component code. A package-managed library centralizes updates in its releases. A copy-and-customize collection puts the component source in your application, where you control changes but also take responsibility for maintaining them.
- Check integration details. Confirm Preact and library versions, peer dependencies, bundler aliases, TypeScript behavior, and any SSR requirements in the project you will ship.
- Exercise behavior, not just appearance. Test keyboard interaction, focus management, forms, overlays, and other behavior relevant to your interface. A visual demo does not by itself establish accessibility or production suitability.
- Review maintenance evidence. Look at the candidate’s current repository, releases, documentation, and working examples. A listing or community recommendation is not proof of ongoing support.
Preact’s setup guide documents Vite and the create-preact initializer, including TypeScript and routing options. It also describes HTM for standard JavaScript projects that want JSX-like syntax without a JSX build step. Follow the setup that matches your application rather than adding build changes solely for a library you have not validated.
Community suggestions need direct verification
A Preact community discussion titled “UI/Component libraries known to work with Preact?” mentions Ark UI, Chakra UI, Park UI, Base UI, and kamod-ui. These are community suggestions, not official Preact compatibility certifications. The discussion also mentions aliasing and possible type errors, so evaluate each project independently before adopting it.
There is a separate ecosystem wrinkle: the shadcn/ui changelog dated July 2, 2026 says Base UI became the default for new projects while Radix remained supported. That is useful context about shadcn/ui’s own direction, but it does not establish that Base UI or Radix is ready for a particular Preact application.
Best Value
Where shadcn-preact fits—and why you may still exclude it
Although your constraint rules out shadcn, shadcn-preact clarifies an important choice. Its project documentation calls it an unofficial port and says its components are copied into your application and customized there; it is not distributed as an npm package. That ownership model differs from installing a library that you update through package releases. If “without shadcn” means excluding the project entirely, skip it; if you are comparing distribution models, use the distinction to decide whether local code ownership or centralized package updates suit you better.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
