STUDS provides a streamlined UI design system for React applications. To integrate it into your project, follow these steps.

​
Step 1: Install the Studs package from NPM

To add STUDS to your React project, install the @studs/react package from NPM. This package contains the necessary components and styles to get you started.

npm install @studs/react

​
Step 2: Add the STUDS CSS

​
How to install @studs/styles

Install @studs/styles using your prefered package manager.

npm install @studs/styles

​
Order of Imports

Ensure that the @studs/styles is applied before any other styles to avoid conflicts. This will provide base styling for your project. The order should be:

  1. @studs/styles
  2. Any additional app-specific styles.

​
How to add @studs/styles to your React Application

In your App.js add the following line:

import "@studs/styles"
import '@studs/react/styles'

or in your main <head> section,

<link href="node_modules/@studs/styles/public/css/studs-styles.css" rel="stylesheet" />

​
Step 3: Use a STUDS Component

import { Button } from "@studs/react";

function App() {
  return (
    <Button onClick={() => console.log("Button clicked")}>Button</Button>
  );
}