Getting Started

Getting Started

Installation

bash
1npm install @flint-ui/core @flint-ui/themes

Install core and default theme packages

Basic Setup

typescript
1import { FlintProvider } from '@flint-ui/core'
2import { defaultTheme } from '@flint-ui/themes'
3

4export default function App() {
5  return (
6    <FlintProvider theme={defaultTheme}>
7      <YourApp />
8    </FlintProvider>
9  )
10}

Wrap your app root with FlintProvider

Design Tokens

Flint UI uses design tokens for all visual properties. Override any token to match your brand.

typescript
1const customTheme = {
2  colors: {
3    primary: '#6366f1',
4    surface: '#fafafa',
5    text: '#1a1a1a',
6  },
7  radius: {
8    sm: '4px',
9    md: '8px',
10    lg: '16px',
11  },
12}

Override any token to match your brand

<callout>Tip: Start with defaultTheme and override only the tokens you need. You can always add more customization later.

Framework Integration

typescript
1// Next.js App Router
2// app/providers.tsx
3'use client'
4import { FlintProvider } from '@flint-ui/core'
5import { defaultTheme } from '@flint-ui/themes'
6

7export function Providers({ children }) {
8  return <FlintProvider theme={defaultTheme}>{children}</FlintProvider>
9}

Next.js App Router setup — wrap in a client component

Code editor with dark theme

Flint UI components in VS Code — full TypeScript IntelliSense

typescript
1// Vite + React
2// main.tsx
3import { FlintProvider } from '@flint-ui/core'
4import { defaultTheme } from '@flint-ui/themes'
5

6createRoot(document.getElementById('root')!).render(
7  <FlintProvider theme={defaultTheme}>
8    <App />
9  </FlintProvider>
10)

Vite setup — wrap at the root

Tree Shaking

Flint UI is fully tree-shakeable. Only the components you import are included in your final bundle — no unused code ships to production. Each component is isolated with its own entry point, so your bundler can eliminate everything you don't use.

<callout>Flint UI ships ESM-only. Each component is a separate entry point. Import { Button } from '@flint-ui/core' adds ~2kb to your bundle.

TypeScript Support

Flint UI is written in TypeScript and ships complete type definitions. All components are generic where appropriate — Select, for example, is typed to your option values. Strict mode is fully supported, and IntelliSense works out of the box in VS Code and other editors.

typescript
1import { Select, type SelectOption } from '@flint-ui/core'
2

3// Generic type inference — value is typed as 'us' | 'kr' | 'jp'
4const countries = [
5  { value: 'us' as const, label: 'United States' },
6  { value: 'kr' as const, label: 'South Korea' },
7  { value: 'jp' as const, label: 'Japan' },
8] satisfies SelectOption[]
9

10// onChange receives the correct union type
11<Select<typeof countries[number]['value']>
12  label="Country"
13  options={countries}
14  onChange={(value) => {
15    // value: 'us' | 'kr' | 'jp' — fully typed
16    console.log(value)
17  }}
18/>

Full type inference — generic components narrow types automatically