Introduction

What is Reactolith UI?

Reactolith UI is a component library that wraps shadcn/ui components (built on Base UI) and exposes them as HTML custom elements (web components) via Reactolith.

This means you can use beautifully designed, accessible React components directly in your HTML — no React knowledge required.

Key Features

• 55 component groups with 299 sub-components
• Standard HTML — use <ui-button> instead of importing React components
• shadcn/ui design — same beautiful, accessible components
• Base UI primitives — built on unstyled, accessible Base UI components
• Tailwind CSS v4 — fully styled with Tailwind utilities
• Customizable — use Tailwind classes directly on any element

How It Works

Each shadcn/ui component is wrapped in a thin Reactolith layer that registers it as an HTML custom element. For example, the React Button component becomes <ui-button>.

Props are passed as HTML attributes:

<!-- Instead of React JSX: -->
<!-- <Button variant="outline" size="lg">Click me</Button> -->

<!-- Use standard HTML: -->
<ui-button variant="outline" size="lg">Click me</ui-button>

Architecture

The library consists of three layers:

1. Base UI — Provides unstyled, accessible component primitives
2. shadcn/ui — Adds Tailwind-based styling and design system
3. Reactolith — Wraps React components as HTML custom elements

Browser Support

Reactolith UI works in all modern browsers that support custom elements (Chrome, Firefox, Safari, Edge).