Overview

Welcome to rothko ui, a cutting-edge and lightweight UI component library designed to elevate your web development projects. rothko ui stands out from the crowd by offering a sleek and modern design aesthetic that aligns perfectly with the latest trends in UI/UX.

Setup

Prerequisites

Rothko ui is built off of tailwindcss v4.x. To use rothko-ui, first follow the installation guide in the .

Installation

Rothko ui is available on npm as @rothko-ui/react. This single package contains all rothko ui components. The iconography library is separately available as @rothko-ui/icons. Style tokens are available through @rothko-ui/tokens.

bash

npm install @rothko-ui/react @rothko-ui/icons @rothko-ui/tokens
Registering Source Files

Wherever you've added @import 'tailwindcss'; in your globals.css file, you'll need to register the rothko source files. You can do so using the @source directive.

@import "tailwindcss";
@source "../../node_modules/@rothko-ui";

For more information on registering source files see the tailwindcss .

Adding Theme Tokens

You will need to add the theme tokens you installed in the first step.

@import "tailwindcss";
@source "../../node_modules/@rothko-ui";
@import "@rothko-ui/tokens/style.css";

Usage

After setting up you global.css file, you can now import and use the components:

1  import { Button } from '@rothko-ui/react';
2  

3  function MyComponent() {
4    return <Button>Click Me</Button>;
5  }

Philosophy

Compound components enhance UI library design by pairing a parent component with its children to create reusable, yet customizable, functional units. This pattern allows for implicit state management and a more expressive API, while also exposing the individual building blocks so users can style and arrange them as needed. Learn more about this powerful technique .

SSR / Next.js

In Next.js with Server-Side Rendering (SSR), components that utilize React Context from rothko-ui require the 'use client' directive. This is because React Context relies on client-side rendering and is not supported in SSR.

1  'use client';
2  import { Accordion, AccordionPanel } from '@rothko-ui/react';
3  

4  export default function MyComponent() { 
5    return (
6      <Accordion>
7        <AccordionPanel label="My Label 1">
8          Content 1
9        </AccordionPanel>
10       <AccordionPanel label="My Label 2">
11         Content 2
12       </AccordionPanel>
13     </Accordion>
14   );
15 }

Next Steps

Check out the section, to better understand how to customize rothko ui to your needs.