Modern UI Toolkit for React

Explore the Components

• 57 production-ready React components built with TypeScript 5.9 (strict).
• Accessible by default with ARIA-friendly patterns and keyboard support.
• CSS Modules, design tokens, and theming via ThemeProvider.
• Namespaced entry points for tree-shaking; fully typed API surface.
• Light dependency stack focused on React, TypeScript, and CSS Modules.
• React 19 ready; ships ESM and CJS plus type declarations.

• ✨ Key Features
• 📦 Packaging & Bundles
• 🧰 Tooling & Quality
• 🚀 Getting Started
• ☕ Quick Usage
• 🎨 Theming
• 🌍 Browser Support
• 🍫 Documentation
• 🔨 Build & Test
• 🤝 Contributing

• Comprehensive component set: forms, navigation, overlays, data display, media, layout, disclosure, feedback, core primitives.
• Theming-first: design tokens, CSS variables, and ThemeProvider to keep brand control.
• Tree-shakeable namespaces to keep bundles lean; side effects minimized.
• Accessibility baked in: keyboard interactions and sensible ARIA defaults.
• Type-safe: emitted declarations for every entry point; IntelliSense-friendly.

• Package name: react-creme (unscoped).
• Namespaced imports (recommended):
  • react-creme/core, react-creme/forms, react-creme/feedback, react-creme/data-display, react-creme/navigation, react-creme/overlay, react-creme/layout, react-creme/disclosure, react-creme/media.
• Measured bundles (latest build):
  • Full ESM bundle: ~119 KB gzipped.
  • CSS bundle: ~47 KB gzipped.
  • Examples (ESM): core ~36 KB, forms ~80 KB, data-display ~88 KB, navigation ~64 KB, overlay ~60 KB.
• Legacy root import react-creme remains for compatibility.

• Build: Vite 6 and Bun build pipeline; Turborepo for orchestration.
• Linting: ESLint, Stylelint, Oxlint; format via Prettier.
• Tests: Vitest + Testing Library; coverage tracked with Codecov.
• Security and analysis: Snyk, SonarCloud, CodeQL, CodeFactor.
• Supported runtimes: Node >= 20.18.1, Bun >= 1.1.0.

Install with your preferred package manager:

npm install react-creme
yarn add react-creme
pnpm add react-creme
bun add react-creme

Import the bundled styles once (typically in your root entry point):

import 'react-creme/css';

Use namespaced entry points for tree-shaking:

• react-creme/core — buttons, ThemeProvider, utilities
• react-creme/forms — inputs, sliders, switches, file upload
• react-creme/feedback — notifications, loaders, progress
• react-creme/data-display — tables, tags, timelines
• react-creme/navigation — tabs, breadcrumbs, menus
• react-creme/overlay — dialogs, drawers, tooltips
• react-creme/layout — layout primitives
• react-creme/disclosure — accordion and collapsible surfaces
• react-creme/media — media helpers

Full bundle (ESM) is ~119 KB gzipped; CSS bundle is ~47 KB gzipped. The legacy root import react-creme remains available for compatibility.

import { Button, ThemeProvider } from "react-creme/core";
import "react-creme/css";

function App() {
  return (
    <ThemeProvider>
      <Button>Welcome to react-creme</Button>
    </ThemeProvider>
  );
}

export default App;

Theme tokens are provided via ThemeProvider from react-creme/core. Define your palette, typography, and sizing once and components across namespaces inherit it. Example:

import { ThemeProvider, Theme } from "react-creme/core";
import { Input } from "react-creme/forms";
import "react-creme/css";

const theme: Theme = {
  colors: { primary: "#0074B7" },
  fontSizes: { md: 16, sm: 14 },
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Input placeholder="Search" />
    </ThemeProvider>
  );
}

Chrome	Firefox	Microsoft Edge	Opera	Safari

Full docs, live examples, and API reference: react-creme.vercel.app

• Build everything: bun build
• Build library only: bun build:lib
• Build docs: bun build:doc then cd packages/documentation/expo_dist && bunx serve .
• Tests: bun test

Contributions, ideas and PR's are welcome!. Please read the guidelines for more details.

1. Fork it
2. Create your feature branch (git checkout -b new-feature)
3. Commit your changes (git commit -am 'Add feature')
4. Push to the branch (git push origin new-feature)
5. Create a new Pull Request