A geology-inspired UI kit for React. From the granular flexibility of sand to the solid reliability of boulders, build accessible and consistent interfaces with nature-toned primitives.
Explore the component library in Storybook, where you can find detailed documentation and interactive examples.
The playground is only for testing and visually validating boulder-ui components and it's not intended to be a production application.
- Minimal and composable components
- Accessibility-first (ARIA, keyboard navigation, semantic HTML)
- Design tokens via CSS custom properties (
--boulder-*) - Fully typed with TypeScript
- Tree-shakeable (ESM + CJS,
preserveModules) - No runtime dependencies beyond React
npm install boulder-uiImport the design tokens (CSS variables) once in your application entry point:
import "boulder-ui/styles";Then import components as needed:
import { Button, Input, FormField } from "boulder-ui";import { Button } from "boulder-ui";
<Button variant="primary" size="md">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="danger" isLoading>Deleting...</Button>import { FormField, Input } from "boulder-ui";
<FormField label="Email" description="We'll never share your email.">
<Input placeholder="you@example.com" />
</FormField>
<FormField label="Username" error="Username is already taken">
<Input />
</FormField>All styling is driven by CSS custom properties prefixed with --boulder-. You can override them in your application:
:root {
--boulder-color-primary: #0070f3;
--boulder-font-family: "Inter", sans-serif;
--boulder-radius-md: 6px;
}MIT