# Apogee — the AVA design system for Astro > Accessible Astro components you copy into your project and own. URL: https://apogee.avaui.dev/ ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__screen-mockup-03.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__screen-mockup-03.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-11.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-11.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__dusk-card-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__dusk-card-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__dashboard-prompt-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__dashboard-prompt-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__screen-mockup-03.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__screen-mockup-03.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-11.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-11.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__dusk-card-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__dusk-card-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__dashboard-prompt-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__dashboard-prompt-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__curved-gallery-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__curved-gallery-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-03.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-03.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__floating-gifts-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__floating-gifts-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__fanned-cards-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__fanned-cards-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__curved-gallery-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__curved-gallery-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-03.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-03.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__floating-gifts-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__floating-gifts-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__fanned-cards-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__fanned-cards-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__coverflow-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__coverflow-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__color-card-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__color-card-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__geometric-shapes-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__geometric-shapes-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__brand-panel-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__brand-panel-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__coverflow-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__coverflow-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__color-card-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__color-card-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__geometric-shapes-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__geometric-shapes-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__brand-panel-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__brand-panel-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__abstract-angles-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__abstract-angles-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__brand-statement-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__brand-statement-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-06.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-06.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__abstract-angles-02.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__abstract-angles-02.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__abstract-angles-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__abstract-angles-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__brand-statement-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__brand-statement-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-06.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-06.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__abstract-angles-02.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__abstract-angles-02.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__thumb-streams-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__thumb-streams-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__audit-cards-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__audit-cards-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__prompt-cubes-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__prompt-cubes-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__gifting-tabs-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__gifting-tabs-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__thumb-streams-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__thumb-streams-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__audit-cards-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__audit-cards-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__prompt-cubes-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__prompt-cubes-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__gifting-tabs-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__gifting-tabs-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-04.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-04.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-03.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-03.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-07.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-07.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__framed-split-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__framed-split-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-04.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-04.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-03.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-03.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-07.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__card-mockup-07.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__framed-split-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__framed-split-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__color-card-03.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__color-card-03.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__photo-wordmark-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__photo-wordmark-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__film-strip-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__film-strip-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-05.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-05.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__color-card-03.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__color-card-03.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__photo-wordmark-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__photo-wordmark-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__film-strip-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__film-strip-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-05.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-05.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__halftone-glow-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__halftone-glow-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-02.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-02.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__photo-stamps-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__photo-stamps-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__halftone-glow-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__halftone-glow-01.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-02.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__split-image-02.dark.webp) ![](https://apogee.avaui.dev/thumbs/sm/hero-sections__photo-stamps-01.light.webp)![](https://apogee.avaui.dev/thumbs/sm/hero-sections__photo-stamps-01.dark.webp) Free forever · MIT license One command writes a component's source into your project: Astro markup, Tailwind classes, and JavaScript only where the browser can't do the job alone. You change it like any other file, and `apogee update` brings in later fixes without touching your edits. [Read the docs](https://apogee.avaui.dev/docs) ``` npx @ava-ui/apogee create my-site ``` Components 111 Blocks and pages 650+ JavaScript by default 0 KB WCAG accessible AA Free and open source MIT Source in your repo 100% Native first ## Turn JavaScript off. It still works. Apogee builds on what the browser already does. Scripts only add the extras, like arrow keys in a menu. Switch tabs and try it. - Menus with the popover attribute - Dialogs with dialog and invoker commands - Tooltips with hover and focus in CSS - Popovers with light dismiss built into the browser - Accordions with details and summary - Segmented controls with plain radio buttons apogee.avaui.dev/demo apogee.avaui.dev/demo Theming ## One file of tokens. Every colour, both themes. Pick a primary and a grey. Apogee works out every fill, border and text colour for light and dark, and picks text on each fill by measuring contrast. OceanGrapeForestEmberRoseMono LightNotifications Launch checklist Three of four steps done. Publish when you're ready. DarkNotifications Launch checklist Three of four steps done. Publish when you're ready. Sections and pages ## Start from a finished page. 151 pages and 503 blocks: heroes, pricing, blogs, sign-in and more. Add one, then make it yours. [Browse all](https://apogee.avaui.dev/docs/sections) - [Hero sections78 blocks hero-sections ![](https://apogee.avaui.dev/thumbs/hero-sections__split-image-01.light.webp)![](https://apogee.avaui.dev/thumbs/hero-sections__split-image-01.dark.webp) ](https://apogee.avaui.dev/docs/hero-sections) - [Landing pages20 pages landing-pages ![](https://apogee.avaui.dev/thumbs/landing-pages__landing-page-01.light.webp)![](https://apogee.avaui.dev/thumbs/landing-pages__landing-page-01.dark.webp) ](https://apogee.avaui.dev/docs/landing-pages) - [Pricing sections22 blocks pricing-sections ![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-cards-01.light.webp)![](https://apogee.avaui.dev/thumbs/pricing-sections__simple-cards-01.dark.webp) ](https://apogee.avaui.dev/docs/pricing-sections) - [Features sections46 blocks features-sections ![](https://apogee.avaui.dev/thumbs/features-sections__alternating-layout-01.light.webp)![](https://apogee.avaui.dev/thumbs/features-sections__alternating-layout-01.dark.webp) ](https://apogee.avaui.dev/docs/features-sections) - [Log in pages14 pages log-in-pages ![](https://apogee.avaui.dev/thumbs/log-in-pages__simple.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__simple.dark.webp) ](https://apogee.avaui.dev/docs/log-in-pages) - [Blog pages10 pages blog-pages ![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-01.light.webp)![](https://apogee.avaui.dev/thumbs/blog-pages__blog-page-01.dark.webp) ](https://apogee.avaui.dev/docs/blog-pages) - [Testimonials sections26 blocks testimonials-sections ![](https://apogee.avaui.dev/thumbs/testimonials-sections__card.light.webp)![](https://apogee.avaui.dev/thumbs/testimonials-sections__card.dark.webp) ](https://apogee.avaui.dev/docs/testimonials-sections) - [Contact pages10 pages contact-pages ![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-01.light.webp)![](https://apogee.avaui.dev/thumbs/contact-pages__contact-page-01.dark.webp) ](https://apogee.avaui.dev/docs/contact-pages) ## Questions Is Apogee really free? Yes. It’s MIT licensed, with no paid tier and no account. Use it in client work and commercial products. How is this different from a component library? You don’t install Apogee as a dependency. The CLI copies each component’s source into your project, so you read it, change it and ship it like your own code. Do I need Tailwind? Yes, Tailwind v4. Components are styled with utility classes that read Apogee’s tokens. apogee create sets Tailwind up for you. Does it need JavaScript? Most components ship none. The ones that do use a small script that only adds extras, like arrow keys in a menu, and they keep working without it. Is it accessible? Every component is keyboard operable with visible focus and the right roles and labels, and every text colour pair is checked against WCAG AA contrast. Can I make it look like my brand? Yes. Pick a primary colour and a grey in one file and Apogee generates every colour for light and dark. Skins change the surface style on top. I edited a component. What happens on update? apogee update only replaces files you haven’t changed. For the ones you edited, apogee diff shows what changed in the package, line by line, and you decide. Which Astro version? Apogee is built and tested on the latest Astro, 7 today. apogee create always starts on the newest release. What about React or Next.js? Not yet. Components are plain markup, tokens and small scripts, so a React port is on the way. ## Your next Astro site is one command away. Free, MIT licensed, and every line is yours. ``` npx @ava-ui/apogee create my-site ``` [Read the docs](https://apogee.avaui.dev/docs)