woozdesign/ui

An open-source design library for building simple, useful, and impactful design.

🖥 Environment Support

• Modern browsers
• Server-side Rendering
• Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install @woozdesign/ui

yarn add @woozdesign/ui

pnpm add @woozdesign/ui

🔨 Usage

import React from 'react';
import '@woozdesign/ui/styles.css';
import { Button, Layout } from '@woozdesign/ui';

const App = () => (
  <Container>
    <Row>
      <Col xs={24}>
        <Button variant="solid" color="purple">
          Button
        </Button>
      </Col>
    </Row>
  </Container>
);

💻 SSR

'use client';

import React from 'react';
import { ThemeProvider } from '@woozdesign/ui';
import '@woozdesign/ui/styles.css';

export const RootStyleRegistry = ({ children }: React.PropsWithChildren) => {
  return <ThemeProvider appearance="light">{children}</ThemeProvider>;
};

Supported Components

Wooz Design offers a robust and diverse set of components to aid in creating interactive and dynamic user interfaces. Our library is continuously evolving, and we are committed to enhancing and expanding our component offerings. For more in-depth information on the supported components, please refer to our detailed documentation.

TypeScript

woozdesign is written in TypeScript with complete definitions.

⌨️ Development

Clone locally:

$ git clone git@github.com:woozdesign/woozdesign-ui.git
$ cd @woozdesign/ui
$ npm install
$ npm start

🤝 Contributing

Read our contributing guide and let's build a better woozdesign together.

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)