#Getting started

@wovryn/uikit is Wovryn's private React component package. It supports Node.js 24 and React 19.

#Install

Packages are published to the private Wovryn registry on Gitea. Ask a Wovryn organization member for access, then create a Gitea access token with package: Read permission and access to private packages.

Add this to the consuming application’s .npmrc (keep the default registry for public dependencies):

@wovryn:registry=https://git.vugar.dev/api/packages/wovryn/npm/
//git.vugar.dev/api/packages/wovryn/npm/:_authToken=${WOVRYN_NPM_TOKEN}

Set WOVRYN_NPM_TOKEN privately in your shell or CI secret store. Keep the actual token out of source control. The configuration above stores only an environment variable reference. Then install:

bun add @wovryn/uikit react@^19 react-dom@^19 tailwindcss@^4 @rsbuild/plugin-tailwindcss

#Configure Tailwind CSS v4

Register Tailwind's official Rsbuild plugin in the consuming application:

import { pluginTailwindcss } from "@rsbuild/plugin-tailwindcss";
import { defineConfig } from "@rsbuild/core";

export default defineConfig({
  plugins: [pluginTailwindcss()],
});

Import Tailwind and the UI kit theme in the application's global stylesheet. The theme publishes Wovryn's semantic color tokens and registers the UI kit's compiled JavaScript as a Tailwind source:

@import "tailwindcss";
@import "@wovryn/uikit/theme.css";

Application code can now use shared utilities such as bg-background, text-foreground, bg-primary, and text-muted-foreground.

#Import components

Add the provider at the application root:

import { theme, ThemeProvider } from "@wovryn/uikit";

export function App() {
  return (
    <ThemeProvider defaultColorScheme="auto" theme={theme}>
      {/* application routes */}
    </ThemeProvider>
  );
}

ThemeProvider writes the resolved scheme to data-mantine-color-scheme on the document. The UI kit tokens and Tailwind dark: variant both use that attribute, so applications must not maintain a separate .dark class.

For server-rendered applications, render ColorSchemeScript in the document head with the same default scheme to avoid a flash before hydration:

import { ColorSchemeScript, theme, ThemeProvider } from "@wovryn/uikit";

export function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript defaultColorScheme="auto" />
      </head>
      <body>
        <ThemeProvider defaultColorScheme="auto" theme={theme}>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Customize the base theme with the exported ThemeOverride type. Spreading the base theme preserves the UI kit's component recipes:

import { theme, type ThemeOverride, ThemeProvider } from "@wovryn/uikit";

const appTheme: ThemeOverride = {
  ...theme,
  fontFamily: "Geist, sans-serif",
};

export function App() {
  return (
    <ThemeProvider defaultColorScheme="auto" theme={appTheme}>
      {/* application routes */}
    </ThemeProvider>
  );
}

The exported theme registers #855FCC as Mantine's primary color. Wovryn components use the matching CSS tokens, which applications can override without replacing component configuration:

:root {
  --wovryn-color-primary: oklch(0.541 0.281 293.009);
  --wovryn-color-primary-hover: oklch(0.491 0.27 292.581);
  --wovryn-color-primary-foreground: oklch(0.985 0 0);
}

Use the main entry point when consuming multiple components:

import { Accordion, Button } from "@wovryn/uikit";

The exported Button and Accordion preserve Mantine's props and behavior. Their theme overrides default unstyled to true and apply the UI kit's Tailwind recipes. Mantine's stylesheet is not required.

#Runtime requirements

#Next step

Continue to the Button component or choose another component from the sidebar.