For those who don't like any UI library but still want a structured design system. This design system based on NextUI which built on top op stitches. You use these design system as next ui doc. Cool thing is these package is bloat component free.

How to use?

Getting started

Installation

Inside your React project directory, install NextUI by running either of the following:

yarn add stitches-system

or

npm install stitches-system

Setup

For NextUI to work correctly, you need to set up the TNextUIProvider at the root of your application.

React

Go to the root of your application and do this:

import * as React from "react";

// 1. import `TNextUIProvider` component
import { TNextUIProvider } from "stitches-system";

function App({ Component }) {
  // 2. Use at the root of your app
  return (
    <TNextUIProvider>
      <Component />
    </TNextUIProvider>
  );
}

Using NextUI components

Once NextUI is installed you can use any of the components as follows. NextUI uses tree-shaking so the unused modules will not be included in the bundle during the build process and each component is exported separately.

import { Container } from "stitches-system";

const Component = () => <Container>Click me</Container>;

Individual Imports

import Text from "stitches-system/text";

const Component = () => <Text h3>Click me</Text>;

Use SSR.
Default theme.
Customize Theme.
Use CSS utilities.

Basically you can use the whole theme section from the nextui doc.

New Addition

• Container
• Grid
• Spacer
• Text

Demo Project

Repo: st-react

• Text Component
• Grid Component
• Keyframe animations
• Spacer Component
• Custom Font installation look at public/index.html & App.tsx
• Light mode dark mode
• LRT, RTL mode support

If you find any issue please report in github issues.

Thanks for using.