Ship marketing sites that load instantly. Zero unnecessary JavaScript,
beautiful components, and the developer experience you love.
Everything you need
Zero-JS Components
Components compile to static HTML with no client-side
hydration
Ship HTML and CSS only. Interactive elements use lightweight
primitives instead of framework runtimes.
Instant Page Loads
Typical score: 98-100 on PageSpeed Insights
No JavaScript bundle to parse. Pages render immediately with
perfect Lighthouse scores.
Accessible by Default
WCAG 2.1 AA compliant out of the box
Keyboard navigation, ARIA attributes, and screen reader support
built into every component.
Copy & Own
Similar to shadcn/ui's approach but for Astro
Components live in your codebase. No black-box dependencies,
full control over every line.
Tailwind v4 Native
Uses @theme and CSS custom properties
Built on the latest Tailwind CSS with CSS-first configuration
and zero PostCSS plugins.
Rich Interactions
Uses data-slot primitives for behavior
Navigation menus, tooltips, hover cards, and more — all without
React hydration overhead.
Simple, transparent pricing
Starter
For personal projects
$0/mo
Pro
Popular
For growing teams
$29/mo
Enterprise
For large organizations
Custom
Starter
For personal projects
$0/yr
Pro
Save 20%
For growing teams
$278/yr
Enterprise
For large organizations
Custom
Why performance matters
Modern marketing websites have become increasingly JavaScript-heavy.
The average web page now ships over 500KB of JavaScript, and
component libraries built on
React
A JavaScript library for building user interfaces. React
alone adds ~42KB (gzipped) to your bundle before any
components.
add significant overhead. Every component on the page needs to
Hydration
The process where the browser downloads JavaScript, parses
it, and attaches event listeners to server-rendered HTML.
Even static text paragraphs need hydration in React.
— including static text content that never changes.
This is particularly problematic for long-form content. Blog posts,
landing pages, and documentation sites are content-first by nature,
yet frameworks like Next.js require the full
Virtual DOM
A programming concept where a virtual representation of the
UI is kept in memory and synced with the real DOM. This
reconciliation process has a cost proportional to the number
of nodes.
runtime to reconcile every text node, heading, and paragraph. The
more content on the page, the higher the cost.
Consider a marketing page with a navigation menu, pricing tables,
testimonials, and a contact form. In a traditional React setup, the
browser must download, parse, and execute JavaScript for
Radix UI
A popular headless component library for React. Each
primitive (Dialog, Select, NavigationMenu, etc.) adds 5-30KB
of JavaScript to handle accessibility and interactions.
, state management, event delegation, and the component
tree itself — even for sections that are purely presentational.
The alternative is to use a server-first approach where components
render to plain HTML by default. Interactive elements like
Navigation Menu
A complex component requiring hover detection, keyboard
navigation, focus management, and animated transitions. In
Astro + data-slot, this costs ~3KB vs ~25KB in React + Radix.
and tooltips use lightweight
data-slot Primitives
Vanilla JavaScript behavior modules that attach to HTML
elements via data attributes. No framework runtime needed —
just the bare minimum JS for interactivity.
that add only the JavaScript strictly necessary for behavior — no
framework, no virtual DOM, no hydration.
Frequently asked questions
While inspired by shadcn/ui's copy-and-own approach, our
components are built natively for Astro. They compile to pure HTML
and CSS with zero React runtime overhead. Interactive components use
lightweight data-slot primitives instead of Radix UI.
The components are designed for Astro's .astro file format.
However, Astro supports islands architecture, so you can mix these
components with React or Vue islands where you need complex
client-side state.
All interactive components include proper ARIA attributes, keyboard
navigation, and focus management. The data-slot primitives handle
accessibility patterns like roving tabindex, aria-expanded, and
screen reader announcements.
A typical marketing page built with our components ships 5-15KB of
JavaScript total. The same page with Next.js + shadcn/Radix
typically ships 150-300KB. That's a 10-20x difference in
JavaScript payload.
Yes. The component library is used in production on multiple
Bejamas client projects and our own marketing sites. It's actively
maintained with regular updates and security patches.
Run npx bejamas add to start adding components to your Astro
project. Each component is copied into your codebase where you have
full control to customize it.