Bref-ui

A Svelte-first, human-first, agent-first UI library for building beautiful sites and apps with components you can make your own.

Usage

Made to become your own

A little less noise.

Small components. A clear point of view. Room for yours.

Explore Button

Notifications on

Svelte

<script lang="ts">
	import { Button, Theme } from 'bref-ui';
	let count = $state(0);
</script>

<Theme />
<Button label={`Count: ${count}`} onClick={() => count++} />

Render Theme once at the app root for its palette, reset and Material Symbols font setup.

Why Bref-ui?

The need for quality code curation isn't going away. Bref brings that curation and quality management together with the flexibility to adapt every component to your needs. That's the deal.

Basically, open source IS the future: it gives you ultimate customizability.

Svelte-first

Build with small components, scoped CSS and familiar HTML. The goal is to keep runtime dependencies to Svelte; the current package also includes the Material Symbols font. Components preserve native events, bindings and snippets.

Human-first

Compose components and make them your own. The source ownership model is inspired by shadcn; use the CLI to copy component source into your project.

Agent-first

Bref is planned to pair its component collection with tools for discovery, customization and validation. Site generation and live generative UI remain future work.

Explore the current components

These pages document the current Button, Icon and Theme APIs.

ThemeModeToggle is also available from the package exports.