As Astro grows as a web framework, so do the UI libraries that support Astro. They are springing up, one after the other, until you almost lose track. That is why we will categorize selected UI libraries - gathered from the community - and provide them with advantages and disadvantages.
Discover an Astro UI library focused on accessibility with some basic components and support for using them in Markdown and MDX.
- Pros: Accessible by default, Markdown & MDX support, Starter templates (blog, portfolio)
- Cons: Currently only a few components available
This neo-brutalist, 8/16-bit inspired UI library is a niche choice for those who want to build a unique Astro site with a retro look.
- Pros: Easy to set up, free, retro style
- Cons: Currently only a few components available
- User Comments:
- "Love the retro look!! Please keep adding more components" - Speedware01
- "It is a spectacular job" - CarajitoGeek
Try out the newest UI library on the list, which aims to support you by purely providing styles instead of complete components.
- Pros: Themeable, any framework
- Cons: Not built with components, but Tailwind styles only
- User Comments:
- "Dude your shipping tempo is nuts, you're announcing features every day." - JT Booth
This library ships as a Tailwind CSS plugin, providing you with many component class names, which let you develop faster and cleaner.
- Pros: very customizable, any framework, themeable
- Cons: Not built with components, but Tailwind styles only
- User Comments:
- "I'm glad I found daisyUI. daisyUI is built with Tailwind CSS which makes it perfect fit for me." - Rem Kim
- "daisyUI is such a time saver" - Ollie The Dev
Use Fulldev UI to build content-driven Astro sites with modern components and pre-built blocks with just props.
- Pros: Easy to set up, free, prebuilt blocks, many components and structures, clean and minimal website and docs
- Cons: Rather slow release schedule (few months between minors)
- User Comments:
- "Wow you’re really cooking this is serious! Nice design choices as well" - Oliver Speir
- "It's beautiful and I want to contribute" - Cameron Pak
This accessible, composable, but unstyled component library ships a decent amount of SolidJS components.
- Pros: Complete open for styles and animations, customizability via polymorphism
- Cons: Many developed for SolidJSs
Not a framework, not a library. Just install Alpine and Tailwind and copy so-called "elements" from this website to ship faster.
- Pros: Easy setup, online playground
- Cons: No maintainability (many Tailwind classes)
- User Comments:
- "I deeply admire and respect their choice to make the library publicly accessible to all." - Yucel Faruk Sahan
This shadcn/ui extension provides ready-to-use blocks for all kind of sections of your website.
- Pros: Copy whole sections (eg Testimonials, Signups, Team, Footer, Pricing, ...), Sanity CMS & Payload CMS Addons
- Cons: Not open source, paid service, focused on shadcn/ui and therefore React
HTML-like tags or React components with styling included. Support for attributes, slots, properties.
- Pros: Cherry pick components, install via CDN or npm, very extendable
- Cons: No optimized Astro components (just React), nonmodern style
- User Comments:
- "It's a Nice and Pure components. It works fine in no-framework project, but also in vue or react project." - BitSoul
- "Shoelace is becoming Web Awesome, part of the Font Awesome family." - Cory LaViska
Modern-looking, actively maintained component library for Astro inspired by the shadcn/ui philosophy (only install components you need).
- Pros: Tailwind support, only install what you need, Astro-native, clean design, fast feedback-to-release loop
- Cons: Rather small community
- User Comments:
- "I wanted to express my sincere appreciation for the fantastic work on this project! It's really impressive, and I can see it becoming a valuable resource, much like the success of shadcn/ui." - raeperd
- "I want to say that this is such a great project!" - thks
Reusable and composable UI components for Astro projects with a modern look, and less JavaScript than your "Hello, World!" React App.
- Pros: Active community, open for suggestions, clean design, Astro-native
- Cons: More difficult customization, not 100% accessible, currently in beta
- User Comments:
- "The @studiocms/ui library has completely transformed how I build interfaces in Astro" - Adam Matthiesen
- "Look, we've all been there working with Astro. You're building components for your UI, things are getting complex with the interactions and all the accessibility concerns, the struggle is real. You think "What's the harm installing React? I can use shadcn or NextUI" and BAM, your project is now bloated with tons of unnecessary JavaScript for basically nothing. "No more" I said. Now I install StudioCMS UI." - Matthew Justice
