@zvoove/unity-ui

v2.22.0

Published

9 days ago

0High
0Medium
0Low

saithis

fabiorodriguesdev

UnityUI is a React implementation of zvoove's Design System. All React implementations can/should be built using this package.

Getting Started

To get started with the Unity UI project, follow these steps:

Adding UnityUI to your project

npm registry (recommended)

The unity-ui is available as a public package on npmjs. You can install it directly:

npm i @zvoove/unity-ui

GitHub Packages registry (legacy)

Note: We are transitioning to the public npm registry (@zvoove/unity-ui). The GitHub Packages registry (@zvoove-org/unity-ui) will be discontinued in the future. We recommend migrating to the npm registry as soon as possible.

The unity-ui is also available on our private package registry on GitHub. To install from GitHub Packages, you'll need to setup a personal access token with the read:packages permission.

Configure the token for npm: npm config set //npm.pkg.github.com/:_authToken $TOKEN.

Then create a .npmrc file in the root of your project:

@zvoove-org:registry=https://npm.pkg.github.com/zvoove-org

Then install:

npm i @zvoove-org/unity-ui

@zvoove/unity-ui (or @zvoove-org/unity-ui) has required peer dependencies for react and react-dom. If your project doesn't have them already, make sure you have installed using at least v18

Styles

The unity-ui uses tailwindcss for styling, so you have to include the compiled unity-ui.css file in your project. This file contains all the compiled css to make the components to look like they should.

In case you want to install tailwindcss in your project and have access to the UnityUI theme, you can install tailwindcss in your project and import the theme.css file in your index.css to have access to the pre-defined design tokens of the Design system.

/* index.css or main.css etc... */

@import '@zvoove-org/unity-ui/theme.css';
@import '@zvoove-org/unity-ui/unity-ui.css';

The theme.css file contains all the design tokens used in the project, so you can use them in your styles.

After that you can use the components in your project and you can also use the design tokens in your styles. (Check our Design Tokens section for more information)

import { Button } from '@zvoove-org/unity-ui';

const App = () => {
  return (
    <div className="bg-primary text-on-primary">
      <Button>Click me</Button>
    </div>
  );
};

export default App;

Dark Mode

The unity-ui has a dark mode that can be enabled by adding the dark data attribute to the root element of your application.

import { Button } from '@zvoove-org/unity-ui';

const App = () => {
  return (
    <div data-theme="dark">
      <Button>Click me</Button>
    </div>
  );
};

if you are using it in a NextJS project, you can set it up in the top level layout.tsx file.

const Layout = ({ children }) => {
  return <div data-theme="dark">{children}</div>;
};

export default Layout;

you can also force a specific component to be in dark mode by adding the dark data attribute to the component.

import { Button } from '@zvoove-org/unity-ui';

<Button data-theme="dark">Click me</Button>;

Fonts

Our project uses the Source Sans font family available at google fonts, you can include it in your project by adding the following lines to your <head> tag:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
  rel="stylesheet"
/>

Fonts in NextJS

For NextJS you can load the fonts using next/font like this:

import './globals.css';
import { Source_Sans_3 } from 'next/font/google';

const sourceSans3 = Source_Sans_3({
  subsets: ['latin'],
  variable: '--font-source-sans-3',
});

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="de-DE" className={sourceSans3.variable}>
      <body data-theme="light">{children}</body>
    </html>
  );
}

And then you update your globals.css with:

@import '@zvoove-org/unity-ui/theme.css';
@import '@zvoove-org/unity-ui/unity-ui.css';

@layer base {
  html {
    font-family: var(--font-source-sans-3);
  }
}

Installing (Development)

To learn how to develop and contribute with this project, please check our CONTRIBUTING session on storybook.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme