Flint UI

Flint UI

A lightweight, accessible component library for modern web applications.

Built with TypeScript. Designed for composability. Ships under 12kb gzipped.

@flint-ui/coreFlint UI core package on npmwww.npmjs.com

Quick Start — Install the core package and wrap your app in FlintProvider to get started.

bash
1npm install @flint-ui/core

Flint UI gives you unstyled, fully accessible components that you style with your own design tokens. No fighting overrides. No specificity wars.

Image

Flint UI in action — VS Code with Tokyo Night theme

JavaScript code on dark theme editor

Built for developers who care about DX

Why Flint UI

Unstyled by default — Flint UI handles behavior and accessibility. You handle the look. No more fighting CSS overrides.

Composable — Every component is a building block. Combine them to create complex patterns without writing complex code.

Accessible — WAI-ARIA patterns, keyboard navigation, screen reader support, and reduced motion — all built in. Not bolted on.

Flint UI is for teams who want a component library that stays out of their way. No opinions about styling. No bloated bundle. Just solid primitives that work.

Image

Flint UI + TypeScript — full type safety and IntelliSense

Changelog

Changelog
Flint UI follows semantic versioning. Breaking changes only in major releases.
v0.5.0 — March 2026

Contributing

Contributing
Flint UI is open source. Here's how to get involved.
Development Setup

At a Glance

FeatureStatus
Components12 primitives
Bundle size4.2kb gzipped
TypeScriptFull coverage
AccessibilityWAI-ARIA
FrameworkReact 18+
LicenseMIT
typescript
1import { Button, Card, Modal } from '@flint-ui/core'
2import { theme } from '@flint-ui/themes'
3

4function App() {
5  return (
6    <ThemeProvider theme={theme}>
7      <Card variant="outlined" padding="lg">
8        <h2>Welcome to Flint UI</h2>
9        <Button tone="primary" size="md">
10          Get Started
11        </Button>
12      </Card>
13    </ThemeProvider>
14  )
15}

Basic setup — wrap your app in ThemeProvider and start composing

Getting Started

Installation
Install core and default theme packages
Basic Setup
Wrap your app root with FlintProvider
Flint UI uses design tokens for all visual properties. Override any token to match your brand.
Override any token to match your brand

Components

Components
All components are unstyled by default. They handle behavior, accessibility, and keyboard navigation — you handle the look.

Guides

Guides
Practical recipes for common patterns. Copy, paste, customize.
Building with Flint UI — dark mode, forms, and animations

This is a fictional showcase built for Cravo demonstration purposes. All names, content, and details are fictitious and not associated with any real person, company, or service.

More Sites Built with Craft.do

All sites built with Cravo — turn Craft.do documents into websites.