installation.mdx

import PageEditButton from "components/PageEditButton"; import AnchorButton from "components/AnchorButton"; import WithSidebar from "components/layouts/WithSidebar"; import Head from "next/head"; import { defaultKeywordsMetaContent, siteFullAddress } from "sharedVars"; import { setCanonicalMeta, setDescriptionMeta, setKeywordsMeta, setTitleMeta } from "utils";

export const meta = { title: "Installation", description: "Install Sonnat-UI, " + "the React component library using Sonnat Design System to build faster, " + "elegant, and accessible web applications.", getLayout: () => page => {page} };

{setTitleMeta( `${meta.title} | Sonnat Developer Tools, React Components & Resources` )} {setDescriptionMeta(meta.description)} {setCanonicalMeta(`${siteFullAddress}/docs/installation`)} {setKeywordsMeta([ ...defaultKeywordsMetaContent, "install", "installation", "getting started", "get started", "شروع", "نصب", "دانلود" ])}

{meta.title}

{meta.description}

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.

1. Run the following script to install and save in your{" "} package.json dependencies:
2. Initialize @sonnat/ui in your project: ( );` } />
   Check out the documentations of{" "} <SonnatInitializer> {" "} and{" "} <CssBaseline> , to learn more about them.
3. Use @sonnat/ui components and utilities anywhere in your React-Tree: ;` } />
4. If your project needs to be rendered on the server as well, follow{" "} this guide.