Design systém gov.cz4.6.0

Usage with React

To integrate @gov-design-system-ce/react into a React application, make the following changes to your project:

1. Install provided React wrapper for Design System ​

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

2. Import icons & fonts ​

See the for developers page.

3. Import styles ​

css
/* Variables. */
@import "@gov-design-system-ce/styles/lib/html/tokens.css";
/* General settings. */
@import "@gov-design-system-ce/styles/lib/html/styles.css";
/* Styles for basic layout and containers. */
@import "@gov-design-system-ce/styles/lib/html/layout.css";
/* Styles of individual components. */
@import "@gov-design-system-ce/styles/lib/html/components.css";
/* Styles of animations. */
@import "@gov-design-system-ce/styles/lib/html/animations.css";

4. Use the components in you application ​

Every component needs to be imported before use. For example, to use the Button you can do it as follows:

typescript
import React, { useState } from "react";
import { GovButton } from "@gov-design-system-ce/react";

export function ReactExample() {
  const [clicks, setClicks] = useState(0);

  function handleEvent(ev) {
    ev.preventDefault()
    setClicks(clicks => clicks + 1)
  }

  return (
    <GovButton color="primary" type="solid" onClick={handleEvent}>
      Click me: {clicks}
    </GovButton>
  );

}