Flint Get started
Install the package once, then use the output that fits your stack. Every output carries the same values.
Install
Flint is a private package on GitHub. Install it with a semver range so npm update picks up new minor and patch releases and never jumps a major.
Terminal
npm install "github:InnerSpark/flint#semver:^1.13.0"iOS apps add the same repository as a Swift package instead. See iOS and SwiftUI.
Pick your platform
- Web and CSSPlain CSS variables. Astro, EJS, static sites, anything with a stylesheet.
- MUIReact apps on Material UI. One theme factory, light and dark.
- shadcn/uiReact apps on Tailwind v4 and shadcn/ui.
- iOS and SwiftUINative apps on iOS 16 or macOS 13 and later.
- FigmaDesigning with the Flint library and Figma Make.
What you get
| Import | What it is |
|---|---|
@innerspark/flint/tokens.css | Every token as a CSS variable. Dark mode with data-theme="dark". |
@innerspark/flint/tokens.media.css | The same, with dark mode following the system setting. |
@innerspark/flint | Typed JS exports of every resolved value. |
@innerspark/flint/mui | The MUI theme factory, createFlintTheme. |
@innerspark/flint/shadcn.css | The bridge from shadcn/ui variables to Flint. |
@innerspark/flint/tokens.json | Resolved values as JSON, for tools like Style Dictionary. |
@innerspark/flint/tokens.dtcg.json | W3C design token format, with references kept, for Tokens Studio. |
@innerspark/flint/contrast.json | Every contrast pairing the build measured, with its ratio. |