Bref

A Svelte UI Component Library using scoped CSS.

1. Brief, short, concise
2. In short: used to summarize or conclude
3. Components that do more with less

Installation

Install Bref via npm or bun or your favorite package manager.

		npm install bref-ui
	

Philosophy

Why Bref?

• Scoped CSS: Uses Svelte's built-in scoped styling, each component's styles are encapsulated and won't leak or conflict.
• Minimal: Only essential components, nothing extra. No bloat, no unnecessary dependencies.
• Flexible: Use as an npm package or copy components directly into your project with our CLI tool.
• Batteries Included Theming: Just provide your base colors and Bref handles shade generation, contrast calculation, and dark mode automatically.

For LLMs

AI-friendly documentation for code assistants.

Use /llms.txt for a token-optimized reference when working with AI coding assistants. It provides concise props and examples for all components.

Roadmap

We're building Bref in phases:

• Base Components: Button, Icon, Input, Select, Checkbox, and other foundational UI elements.
• Section Components: Nav, Card, Accordion, Tabs, Table, Form, and Toast for complex layouts.
• Marketing Components: Hero, Features, Pricing, FAQ, and CTA sections for landing pages.
• CLI Tool: Import components directly into your codebase and customize them at will.

Check out the GitHub repo to follow our progress or contribute!