ReefProvider Component

ReefProvider is the root provider component that sets up all necessary context providers for the Reef component library. It must wrap your application to enable theming, popovers, icons, timezone display, and reduced motion preferences.

Usage

Basic Setup

Wrap your application root with ReefProvider to enable all Reef components:

import { ReefProvider } from "@228-co/reef/components";

function App() {
  return (
    <ReefProvider>
      <YourApp />
    </ReefProvider>
  );
}

With Custom Theme

Pass a theme object to customize colors, sizing, and UI details:

import { ReefProvider } from "@228-co/reef/components";
import { customColors, customDetails } from "./my-theme.stylex";

function App() {
  return (
    <ReefProvider
      theme={{
        colors: customColors,
        details: customDetails,
      }}
    >
      <YourApp />
    </ReefProvider>
  );
}

With Icon Registry

Provide custom icons to use throughout your application:

import { ReefProvider } from "@228-co/reef/components";
import CheckIcon from "./icons/check.svg";
import CloseIcon from "./icons/close.svg";

const icons = {
  check: CheckIcon,
  close: CloseIcon,
};

function App() {
  return (
    <ReefProvider icons={icons}>
      <YourApp />
    </ReefProvider>
  );
}

With Cloudflare Images

Enable optimized image loading through Cloudflare Images:

import { ReefProvider } from "@228-co/reef/components";

function App() {
  return (
    <ReefProvider cloudflareImagesAccountHash="your-account-hash">
      <YourApp />
    </ReefProvider>
  );
}

Full Configuration

Combine all options for a fully configured provider:

import { ReefProvider } from "@228-co/reef/components";
import * as stylex from "@stylexjs/stylex";
import { customColors, customDetails, customSizing } from "./theme.stylex";
import { icons } from "./icons";

const bodyStyles = stylex.create({
  root: {
    fontFamily: "Inter, sans-serif",
  },
});

function App() {
  return (
    <ReefProvider
      theme={{
        colors: customColors,
        details: customDetails,
        sizing: customSizing,
      }}
      bodyStyle={bodyStyles.root}
      icons={icons}
      cloudflareImagesAccountHash="abc123"
    >
      <YourApp />
    </ReefProvider>
  );
}

Props

Name	Type	Default	Description
`children`	`JSXElement`		The content to render within the provider tree
`theme`	`{ colors?, details?, sizing? }`	undefined	Theme configuration object with optional StyleX theme overrides for colors, details, and sizing
`bodyStyle`	`StyleXStyles`	undefined	Additional StyleX styles to apply to the root element
`icons`	`IconIndex`	{}	Icon registry mapping icon names to SVG components for use with the Icon component
`cloudflareImagesAccountHash`	`string`	undefined	Cloudflare Images account hash for optimized image loading via the Image component

Theme Object

The theme prop accepts an object with three optional properties for customizing different aspects of the UI:

Property	Type	Description
`colors`	`stylex.Theme<typeof themeColors>`	Color palette overrides (danger, warning, info, success, primary, secondary, background, neutral)
`details`	`stylex.Theme<typeof themeDetails>`	UI detail overrides (padding, border radius, animation times, icon colors, etc.)
`sizing`	`stylex.Theme<typeof themeSizing>`	Sizing overrides (font sizes, spacing values)

Bundled Providers

ReefProvider bundles several context providers together for convenience:

ThemeProvider - Applies theme variables to the document root and handles dark mode

ReducedMotionProvider - Detects and provides user's reduced motion preference

IconProvider - Provides icon registry to Icon components

TimezoneProvider - Enables timezone-aware date display in InlineDate components

PopoverProvider - Manages popover/tooltip positioning and z-index stacking

CloudflareImagesProvider - Configures Cloudflare Images integration (when account hash is provided)

Theme Variables

The theme system uses StyleX variables organized into three categories:

Colors (themeColors)

Color palettes with shades from 0-1000. Each status has its own color scale:

danger - Red colors for errors and destructive actions

warning - Yellow colors for warnings and cautions

info - Blue colors for informational content

success - Green colors for success states

primary - Primary text and UI colors (adapts to dark mode)

secondary - Secondary text and UI colors

background - Background colors (adapts to dark mode)

neutral - Neutral gray colors

Sizing (themeSizing)

Fluid typography and spacing using clamp():

font0-font5 - Font size scale

spaceXS, spaceS, spaceM, spaceL - Spacing scale

spaceText, spaceHeading - Typography-specific spacing

Details (themeDetails)

UI component dimensions and animation timing:

containerPadding - Default container padding

containerBaseBorderRadius - Base border radius for containers

tooltipPaddingInline, tooltipPaddingBlock - Tooltip padding

animationLoadingTime, animationFadeTime - Animation durations

iconPrimaryColor, iconSecondaryColor - Default icon colors

Reduced Motion

The ReducedMotionContext is accessible via the ReducedMotionContext export for components that need to respect user motion preferences:

import { useContext } from "solid-js";
import { ReducedMotionContext } from "@228-co/reef/components";

function MyAnimatedComponent() {
  const { prefersReducedMotion } = useContext(ReducedMotionContext);

  return (
    <div
      style={{
        transition: prefersReducedMotion() ? "none" : "transform 0.3s",
      }}
    >
      Content
    </div>
  );
}