Why I created a stitches system?

What’s wrong with a traditional component library?

If you are a front-end developer, you have encountered at least hundreds of component libraries or design systems. But the question is did they serve you as your expectation? I guess not Because they come with lots of configurations, and lots of components you might never need, A single Button component will contain 1000 lines of code, do we really need this? The answer will be no. In this article, we will discuss how we can overcome this issue.

Stitches System created with love and based on stitches. This design system can solve these issues.

Here’s a little background if you’ve never heard of Stitches before.

Stitches

Stitches is a styling solution focusing on component architecture and developer experience.

It introduces a first-class variant API, enabling design system authors to express their intent better. It’s fully typed, catching potential mistakes and improving the scalability of design systems. It’s lightweight, coming in at less than 5kb. And finally, it’s a breeze to get up and running with it.

What is Stitches System?

This is a design system built with stitches js. You can use it in SSR or CSR mode. This design system was inspired by NextUI. Basically, this is the engine of NextUI. This design system contains all the features and guidelines of a well-structured design system of stitches js. With this you will have access to your theme, colors, radius, spaces, and font family, you name it you will have it there. It also supports first-class support to blur, and keyframe animations.

This system contains all the theme configurations by default but you can customize them in no time. There is no blot component built in other than some basic building blocks like Box, Grid, Container, Row, Col, and Text to help you get going faster. You will be able to convert any design to code effortlessly.

How to use it?

Installation

Inside your React project directory, install Stitches System 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>
  );
}

For more Installation guide please look here.

How to use another HTML element?

Let’s create a stitches-system powered Input field.

import { styled } from “stitches-system”;

const StyledInput = styled("input", {
  border: "1px solid $primary",
  outline: "unset",
  margin: "$3",
  padding: "$1",
  width: "$xxl",
});

export default StyledInput;

Let’s create a stitches-system powered Button.

import { styled } from “stitches-system”;

const StyledButton = styled("button", {
  border: "1px solid $primary",
  outline: "unset",
  margin: "$3",
  padding: "$1",
  width: "auto",
“&:hover”: {
 color: ‘$warning’
},
“&.custom-class”: {
 background: ‘$primary’
}
});

export default StyledButton;

Simply use it by Importing it into any react component.

How stitches-system helping us?

Stitches system removes all the bloat components from the NextUI, You write your own component as you need it. You just write what you need. You will not need to modify or hack the built-in components to match your design. Deliver exactly what you are using. Which result’s in a smaller bundle, faster render and load time.