Tailwind UI blocks and page sections for Astro
Blocks and pages give you their markup as an .astro file — which, for Astro, is not a compromise: a component that is only markup is the normal shape of one.
- Astro 5
- Starlight
- content sites
Effects: not in Astro
There is no Astro converter for the effect tier, so this page does not offer one. Take the HTML and CSS target instead and keep its <style> block —Astro scopes component styles for you, so the result is the same component you would have written.
A block, as a Astro file
This is where the honest answer is different, so here it is with the words that make it different. 433 blocks and pages are React components with state and handlers. What you get in Astro is the block rendered to markup and wrapped as a file your framework compiles — a real presentational component, carrying the layout, the Tailwind classes and the accessible structure, and not a port of the React logic.
The sample below is Magic Link Sign In, and it is an interactive one, chosen so you can see exactly what is missing rather than a case where nothing is. The caveat is printed at the top of the file itself, because the file is what gets read six months later.
---
// Magic Link Sign In — markup from the Hoverlab catalog.
//
// This is the block rendered once to HTML and wrapped as a component
// file. It is not a port of the React source: the Tailwind classes carry
// the design, which is the part that took the work, and they are the same
// in every framework.
//
// This block is interactive in React and the handlers are NOT here.
// Buttons, toggles and menus render in their initial state and do
// nothing until you wire them up.
---
<section aria-labelledby="_R_0_-auth-magic-link-form-heading" class="w-full bg-background px-6 py-16 ">
<div class="mx-auto max-w-md rounded-xl border border-border bg-card p-8 shadow-sm">
<h2 id="_R_0_-auth-magic-link-form-heading" class="text-xl font-semibold tracking-tight text-card-foreground">Sign in without a password</h2>
<p class="mt-2 text-sm text-muted-foreground">One address, one link, no password to forget or reuse. The link works once and expires in fifteen minutes, which is stated here rather than discovered when it fails.</p>
<form class="mt-6 space-y-4">
<div>
<label for="_R_0_-auth-magic-link-form-email" class="block text-sm font-medium text-foreground">Email</label>
<input id="_R_0_-auth-magic-link-form-email" type="email" required="" aria-describedby="_R_0_-auth-magic-link-form-email-hint" class="mt-1.5 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" name="email" />
<p id="_R_0_-auth-magic-link-form-email-hint" class="mt-1 text-xs text-muted-foreground">The link lands here and works once. It expires after 15 minutes.</p>
</div>
<button type="submit" class="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60">Email me a link</button>
<p role="status" aria-live="polite" class="min-h-5 text-sm text-muted-foreground"></p>
</form>
</div>
</section>
Getting it into your project
npx hoverlab add btn-gradientFor the block markup, the API
The CLI’s framework flag covers effects; it writes blocks as their React source. The markup wrapper comes from the public API instead — no key, no account:
curl "https://hoverlab5.netlify.app/api/v1/blocks/auth-magic-link-form?format=html&framework=astro"- Save the file under src/components. The frontmatter fence is there and empty, which is where your props go.
- A component that is only markup is not a compromise in Astro — it is the normal shape of one, and it ships zero JavaScript.
- For an effect, take the HTML and CSS target instead and keep the <style> block: Astro scopes component styles for you.
Where the licence comes into it
Astro output is not gated anywhere — not in the export panel, not in the API, not in the CLI. What Pro sells is the licence to ship it, which is a separate question from reaching it.