Core

Provider

The KeystarProvider provides the necessary contexts for all components.

It should be placed at the root of your application, but may be nested when required. For Next.js applications use the tailor-made NextRootProvider instead.

Color scheme

Control your application’s color scheme with the colorScheme prop. The default is "auto" which will use the user’s system preference.

Dark mode

Picker

Text

Locale

Control your application’s language preferences with the locale prop, which accepts a BCP 47 language code. The example below sets the locale to "pt-BR" for Brazilian Portuguese.

<KeystarProvider locale="pt-BR">
  {/* ... */}
</KeystarProvider>

Client-side routing

The provider component accepts an optional router prop, which enables Keystar components that render links to perform client-side navigation using your application or framework’s client-side router.

import { KeystarProvider } from '@keystar/ui/core';
import { useNavigate } from 'react-router-dom';

export function App() {
  let navigate = useNavigate();
  let router = useMemo(() => ({ navigate }), [navigate]);

  return (
    <KeystarProvider router={router}>
      {/* ... */}
    </KeystarProvider>
  );
}

NOTE: external links to different origins will not trigger client-side routing, and will use native browser navigation.

Additionally, if the link has a target other than "\_self", uses the download attribute, or the user presses modifier keys such as Command or Alt to change the default behavior, browser native navigation will occur instead of client-side routing.