Root

The Root component serves as the top-level wrapper for the design system, providing essential context providers and applying base styling with color scheme support.

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Root } from '@adaptavant/eds-core';

Features​

The Root component adds several things to your app that are critical for EDS usage:

  • Brand styling
  • Translations for EDS components
  • MobileView provider
  • Portal and Tooltip providers
  • Basic app styles

When setting up your app to use EDS, there are additional steps required beyond adding the Root component. For more details, see the Getting Started guide.

Usage​

The Root component should be placed as high in your app's component tree as possible.

The brand, colorScheme, and translations props are required.

import brand from '@adaptavant/eds-brands/setmore-black';
import { Root } from '@adaptavant/eds-core';
import translations from '@adaptavant/eds-translations/english';

export default function AppWrapper({ children }: { children: React.ReactNode }) {
  return (
    <Root
      brand={brand} // brand config and tokens
      colorScheme="light" // preferred color scheme
      translations={translations} // preferred language for text that is built into components
    >
      {children}
    </Root>
  );
}

Color Scheme​

The colorScheme prop determines which color scheme to use, with options of system, light, and dark.

If your app only supports one color scheme, you can hardcode this value. You can also use this prop to implement light and dark modes in your application.

type ColorScheme = "system" | "light" | "dark";

export default function App() {
  const [colorScheme, setColorScheme] = useState<ColorScheme>("system");

  const colorSchemeOptions = [
    {
      value: "system",
      name: "theme",
      directSlot: (
        <>
          <div className="w-5 h-5 flex items-center justify-center">
            <DeviceDesktopIcon size="20" />
          </div>
          <Text className="text-body-12">System</Text>
        </>
      ),
    },
    {
      value: "light",
      name: "theme",
      directSlot: (
        <>
          <div className="w-5 h-5 flex items-center justify-center">
            <ModeLightIcon size="20" />
          </div>
          <Text className="text-body-12">Light</Text>
        </>
      ),
    },
    {
      value: "dark",
      name: "theme",
      directSlot: (
        <>
          <div className="w-5 h-5 flex items-center justify-center">
            <ModeDarkIcon size="20" />
          </div>
          <Text className="text-body-12">Dark</Text>
        </>
      ),
    },
  ];

  const onChange = (value: string | string[]) => {
    setColorScheme((Array.isArray(value) ? value[0] : value) as ColorScheme);
  };

  return (
    <Root brand={brand} colorScheme={colorScheme} translations={translations}>
      <div className="p-5 flex item-center justify-center">
        <SelectCard
          controlType="radio"
          onChange={onChange}
          options={colorSchemeOptions}
          value={colorScheme}
        />
      </div>
    </Root>
  );
}

Portal configuration​

By default React Portals will be rendered at the Root component's level.

There may be some cases, for example in a micro-frontend architecture, where you'll want to ensure portals are created at the top level of your HTML tree.

Use the shouldAttachPortalsToBody prop to ensure all portals are attached to the HTML document's body element.

import brand from '@adaptavant/eds-brands/setmore-black';
import { Root } from '@adaptavant/eds-core';
import translations from '@adaptavant/eds-translations/english';

export default function AppWrapper({ children }: { children: React.ReactNode }) {
  return (
    <Root
      brand={brand}
      colorScheme="light"
      translations={translations}
      shouldAttachPortalsToBody={true}
    >
      {children}
    </Root>
  );
}

API Reference​

Root

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.