Export to Astro

The Astro export gives you a section of any site in two ways: as an .astro component to add to a project you already have, or as a ready-to-run Astro project in a ZIP, useful when you want to start from scratch or show the section on its own.

How to export a section to Astro

Component or project?

Output	When to use it
.astro component	You already have an Astro site and want to add the section to it
Astro project (ZIP)	You want a project that runs as it is, to start a new site or test the section in isolation

What the styles contain

Like every Pickode format, the Astro export is built from the site’s original stylesheets, not from the values the browser computed:

• every @media, @supports and @container rule, as written;
• states such as :hover, :focus, :focus-visible, :focus-within and :active, also on ancestors (for example .card:hover .title);
• ::before, ::after and nested CSS;
• var() resolved to the site’s value, inherited properties set on the root, relative URLs made absolute;
• no computed values, no browser defaults, no universal resets.

See Export to HTML + CSS for how the CSS is read.

Free and Pro

Limits

Related

• Export to Vue
• Export to Tailwind
• Design tokens