Introduction

Elevating Bits UI official documentation styles into a production-ready component library. Built with mathematical concentric radius and strict scale consistency.

What is Bytes UI?

Bytes UI packages the refined, artisanal inline Tailwind styles found in the official Bits UI documentation into clean, reusable Svelte 5 components. Instead of maintaining sprawling inline utility strings across multiple files, Bytes UI provides a unified API backed by strict design tokens.

Design Principles

📐

Concentric Radius

Follows the golden mathematical formula: Inner Radius = Outer Radius - Padding. A single root --radius variable automatically computes and coordinates all component curves.

📏

Strict Scale (1:1 Alignment)

Buttons, inputs, and selects strictly share heights across scales: sm (36px), default (48px), and lg (56px) for zero-misalignment side-by-side layouts.

Installation

Install the package alongside its peer dependencies:

npm install bytes-ui bits-ui tailwind-variants clsx tailwind-merge

Quick Start

Import the stylesheet into your root layout and start using components:

// src/routes/+layout.svelte
<script lang="ts">
  import "bytes-ui/styles/theme.css";
  let { children } = $props();
</script>

{@render children()}

// src/routes/+page.svelte
<script lang="ts">
  import { Button, Input } from "bytes-ui";
</script>

<div class="flex gap-2">
  <Input placeholder="Search components..." />
  <Button>Search</Button>
</div>