styple

Getting started

A guide to get you started with styple.

Using styple requires familiarity with React and CSS-in-TS frameworks, as Stitches is the underlying styling method used in the design system.

1. Install the library

styple can be installed through npm. It includes the entire design system with all components, light and dark themes and React-based icons from lucide.

npm install @styple/design-system

2. Usage

After installing you can pretty much just start importing and using components. The only thing left is to wrap your app with the TooltipProvider and optionally apply styple's global-styles:

// Example with Next.js. Wrap in a similiar way with any React app at the root
import { globalStyles, TooltipProvider } from "@styple/design-system"
import { AppProps } from "next/app";

function App({ Component, pageProps }: AppProps) {
  globalStyles(); // Optional

  return (
    <TooltipProvider>
      <Component {...pageProps} />
    </TooltipProvider>
  );
}

export default App;

Example usage of a component with an icon:

// Imports
import { Button } from "@styple/design-system";
import { Coffee } from "lucide-react";

// Somewhere in your file
<Button>
  Example Button <Coffee size="20" style={{ verticalAlign: "middle" }} />
</Button>

Additional packages

@styple/hooks

styple also has other useful packages. First of which is a set of general-purpose hooks.

npm install @styple/hooks

Introduction

Theming