Buildkit for Astro
Buildkit for Astro
Browse blocks

Components.

Every primitive the blocks are built from, in one place. Switch the theme or dark mode in the header to see them adapt.

Back to preview

Typography

Heading and Text carry every size and color the blocks use, so type stays consistent across sections.

Heading

size="2xl"

Answers in seconds

size="xl"

Answers in seconds

size="lg"

Answers in seconds

size="default"

Answers in seconds

size="sm"

Answers in seconds

size="xs"

Answers in seconds

Text

size="xl"

We read your events and answer the question in plain language.

size="lg"

We read your events and answer the question in plain language.

size="default"

We read your events and answer the question in plain language.

size="sm"

We read your events and answer the question in plain language.

size="xs"

We read your events and answer the question in plain language.

variant="default"

Body copy in the default color.

variant="muted"

Body copy in the muted color.

variant="secondary"

Body copy in the secondary color.

Actions

Buttons in every variant and size, plus the ButtonActions pair that every block uses for its calls to action.

Variants

Sizes

Blocks use xl for their calls to action.

With icons

States

Rendered as a link

ButtonActions

Start free trial Talk to sales
Back to overview

Navigation

Links for body copy and nav bars, a dropdown menu with full keyboard support, and pagination for long listings.

Link

Default link Muted link Nav link External link

Links sit inside paragraphs too. Read the documentation or browse the changelog for the latest updates.

Dropdown menu

Pagination

Display

Badges, cards, avatars, and icons: the surfaces and labels every block is assembled from.

Badge

Primary Secondary Outline Soft Destructive
Primary Secondary Outline Soft Destructive

Avatar

Jordan Reyes Marco Bellini Priya Shah Theo Park

Without an image, initials come from the name in alt.

Bordered

Card surface, border, and a soft shadow.

Muted

A faint tint and a border.

Plain

Page background, no chrome.

Outline

Bordered, wrapped in a muted ring.

Linked card

Pass href and the whole card becomes a link with a hover state.

Linked muted card

Every variant has a matching hover.

Icon

Lucide icons, sized with size-* and colored with text tokens.

Forms

Styled native controls with the disabled and invalid states the contact and newsletter blocks rely on, plus Field to label them and Alert to report back.

Sizes

States

Enter a full email address.

Select

Pick a team size so we can suggest a plan.

Checkbox

A short email when something ships, about once a month.

Webinars and meetups in your region.

Always on for workspace owners.

Accept the terms to create your workspace.

Radio group

How should we follow up?

We only reach out about this request.

Billing cycle

Choose how often we should bill you.

Data region (set by your admin)

Choice cards

What can we help with?

A Label wrapping its control makes the whole card clickable.

Field

We send the workspace invite here.

Pick a team size so we can suggest a plan.

Five short emails over your first two weeks.

fieldAria points the control at the description and error ids Field renders.

Switch

A Monday summary of what changed in your workspace.

An email when you pass 80% of your plan.

Managed by your workspace owner.

Input group

https://

Enter a domain without a path, like acme.com.

.example.com

Alert

You're on the list

Check your inbox to confirm your email address.

Replies within one business day

Our support team works Monday to Friday, 9 to 6 CET.

Default alerts are a polite status region, destructive ones an alert. Render one after a form posts back.

Media

Image optimizes every source at build time. Set the rendered size, and shape it with classes.

Fixed size

Abstract shapes

width plus densities builds a 1x and a 2x copy of the image.

Shapes

Square crop Video crop Round crop

No aspect or rounding props: shape is a Tailwind class.

Responsive

Abstract artwork Abstract artwork Abstract artwork

widths plus sizes lets the browser pick a copy per breakpoint.

Logo

Vercel Astro Tailwind CSS React Next.js Remix
Vercel Astro Tailwind CSS React Next.js Remix

Grayscale by default, full color on hover or on request.

Code

CodeBlock highlights at build time with the same themes as markdown, and follows dark mode.

Astro 

---
import HeroSimple from "@/components/blocks/hero/HeroSimple.astro";
---

<HeroSimple
  badge="Now in every region"
  title="Ship your code to the edge"
  titleMuted="in seconds, not sprints."
  primaryCta={{ label: "Get access", href: "/signup/" }}
/>

Shell 

npm run dev      # Dev server on port 4321
npm run check    # Type-check every page and block

Controls

The preference toggles from the header. Each is switched on or off by one flag in config.ts, and every copy stays in sync.

Dark mode

Theme

Layout

Layout

Separators divide content, and Container sets the reading width every block sits in.

Separator

Left

Center

Right

Container sm, 64rem

Container md, 72rem

Container lg, 80rem

Container xl, 90rem

Container 2xl, 105rem

Container max, 120rem

Tokens

Every color is a token from global.css, overridden per theme in themes.css. Switch themes to watch them change.

Core

background

foreground

Primary

primary

primary-foreground

Secondary

secondary

secondary-foreground

Muted

muted

muted-foreground

Accent

accent

accent-foreground

Destructive

destructive

Card

card

card-foreground

Popover

popover

popover-foreground

Border, input, ring

border

input

ring

Chart

chart-1

chart-2

chart-3

chart-4

chart-5

Sidebar (used by animated visuals)

sidebar

sidebar-foreground

sidebar-primary

sidebar-accent

sidebar-border

sidebar-ring