Installation

Install Sonnat-UI, the React component library using Sonnat Design System to build faster, elegant, and accessible web applications.

If you have questions about anything related to Sonnat UI, you're always welcome to ask our community on GitHub Discussions and Discord.

Setup

Ensure you have the latest version of NodeJS, and a package manager: NPM or Yarn.

Using create-sonnat-app

We recommend creating a new Sonnat App using create-sonnat-app, which sets up everything automatically for you. To create a new project, run:

yarn create sonnat-app <project-name> <project-template> [options]

# or
npx create-sonnat-app <project-name> <project-template> [options]

If you want to start with a TypeScript project you can use the --typescript flag.

For more information on how to use create-sonnat-app, you can review the documentation.

Adding Sonnat to existing project

Please note that react >= 17.0.2 and react-dom >= 17.0.2 are peer dependencies.

Run the following script to install and save in your package.json dependencies:
```
# with npm
npm install @sonnat/ui

# or with yarn
yarn add @sonnat/ui
```

Initialize @sonnat/ui in your project:

import CssBaseline from "@sonnat/ui/CssBaseline";
import SonnatInitializer from "@sonnat/ui/styles/SonnatInitializer";

const App = () => (
  <SonnatInitializer>
    <CssBaseline />
    <MyComponent />
  </SonnatInitializer>
);

Check out the documentations of <SonnatInitializer> and <CssBaseline>, to learn more about them.

Use @sonnat/ui components and utilities anywhere in your React-Tree:

import Button from "@sonnat/ui/Button";

const MyComponent = () => <Button label="Text" />;

If your project needs to be rendered on the server as well, follow this guide.