# Gov Design System - React wrapper

This package contains a wrapper that is specific to React and is designed for use with Gov Design System CE Components.

## Usage

For full usage instructions, please see the [documentation](https://designsystem.gov.cz/zaciname/developers/react).

### Install

```shell
npm install @gov-design-system-ce/react@latest @gov-design-system-ce/styles@latest
```

### Import styles

Unlike the Vue and Angular wrappers, the React wrapper is **not** a Web Component proxy — it renders light-DOM markup with `.gov-*` classes. It therefore needs the full stylesheets, **including component styles**:

```css
@import "@gov-design-system-ce/styles/tokens.css";
@import "@gov-design-system-ce/styles/styles.css";
@import "@gov-design-system-ce/styles/layout.css";
@import "@gov-design-system-ce/styles/content.css";
@import "@gov-design-system-ce/styles/components.css";
@import "@gov-design-system-ce/styles/animations.css";
```

> Since 4.7.0 the stylesheets live at the package root — the former `html/*` paths were removed.

Icons and fonts are loaded from `/assets/icons` and `/assets/fonts` — see the [for developers](https://designsystem.gov.cz/zaciname/for-developers) page for asset setup.

### Use a component

Every component is imported by name:

```tsx
import { GovButton } from "@gov-design-system-ce/react";

export function Example() {
  return (
    <GovButton color="primary" type="solid">
      Click me
    </GovButton>
  );
}
```

### Timeline needs the web components

`GovTimeline`, `GovTimelineCategory`, `GovTimelineStep` and `GovTimelineCard` are the exception to the stateless-markup pattern above: they render the `gov-timeline*` custom elements, because the timeline is laid out (spine, steps, scroll-spy navigation) at runtime. The web components must be registered once at application start, otherwise the elements stay inert and `GovTimeline` logs a development warning:

```tsx
import { defineCustomElements } from "@gov-design-system-ce/components/loader";

defineCustomElements();
```

They are styled by the web-component stylesheets (`@gov-design-system-ce/styles/tokens.css`, `styles.css`, `components.css`, `animations.css`), not by the `html/*` set listed above. The `ref` of `GovTimeline` is the element, so `ref.current.refresh()` is available, and `onGovChange` receives the timeline's own `gov-change` event (a `gov-change` bubbling up from the card content, e.g. a form control, is not passed on). All four wrappers pass `id`, `style`, `aria-*` and `data-*` through to the element. Give each `GovTimelineCategory` its own `id` when its section is deep-linked (`/page#priprava`): a generated id depends on the page and the order of the categories.

**Server-side rendering (Next.js etc.):** the server renders only the `gov-timeline*` elements with their attributes and children; the axis, dots and nav are added by the web component in the browser. Call `defineCustomElements()` only after hydration, e.g. in a `useEffect` of the root component, because elements upgraded before React hydrates would change the DOM and cause a hydration mismatch:

```tsx
import { useEffect } from "react";
import { defineCustomElements } from "@gov-design-system-ce/components/loader";

export function App({ children }) {
  useEffect(() => {
    defineCustomElements();
  }, []);
  return children;
}
```

Fully server-rendered timeline markup (axis, dots and nav) comes only from the Stencil `hydrate` package's `renderToString`, not from React SSR.

## Architecture

Unlike `core-vue` / `core-angular`, whose proxy files are generated from the Stencil core (`vueOutputTarget` / `angularOutputTarget`), `core-react` is a **hand-written React reimplementation** of the components. The build target compiles `src/` with `tsc` into ES Modules plus type declarations under `dist/`.

## Copyright

Copyright(c) 2020 - 2026 Digitální a informační agentura