@pattern-lab-ui/react NPM

@pattern-lab-ui/react

npm version

About

A comprehensive React Design System built to provide reusable components that ensure consistency and scalability across your projects.

See the Changelog for detailed updates and new features.

Components

Button
Heading
Text
TextInput
Textarea
Checkbox
Avatar
MultiStep

Installation

Install with npm

npm i @pattern-lab-ui/react

How to Use

Create a global.ts file in src/styles/global.ts

Import the global styles:

import { globalCss } from "@pattern-lab-ui/react";

If you need to add more styles:

import { globalCss } from "@pattern-lab-ui/react";

export const globalStyles = globalCss({
  '*': {
    boxSizing: 'border-box',
    padding: 0,
    margin: 0,
  },
  body: {
    backgroundColor: '$gray900',
    color: '$gray100',
    '-webkit-font-smoothing': 'antialiased',
  },
})

Using the Components:

import { Heading } from "@pattern-lab-ui/react";

export default function Home() {
  return (
    <Heading as="h1">Hello World</Heading>
  );
}

Applying Styles in the App() (in the _app.tsx file)

Example using Next.js v14.2.12 and React v18:

import { globalStyles } from "@/styles/global";
import type { AppProps } from "next/app";

globalStyles()

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}