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:
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:
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:
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:
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.
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