Getting Started with Fluid

Fluid is a React component library that brings type-safe styling to your application. Define your design system once, use it everywhere.

Installation

Install via pnpm add @casaba/fluid and import the components you need.

Fluid works with Next.js, Vite, and any React 18+ project. No additional configuration required.

Style Objects

Define styles once as typed objects. Use them across your entire application.

Change a style in one place, update everywhere instantly. No find-and-replace.

Core Concepts

Fluid replaces className strings with typed style objects.

Layout Components

Use Row and Column for flex layouts. Use Stack for overlays.

Typography

The Text component handles all text rendering with full style control.

Set scale, weight, color, spacing, and more through the style prop.

Theming

Use Brush.currentGray for colors that adapt to light and dark mode automatically.

Next Steps

Explore the component library to see what's available.

Check out the playground to experiment with styles interactively.