instructions for codex

All components are server components, if possible. If not, mark file as "use client" Components working with forms must be compatible with react-hook-form.

Linoardo

Linoardo is a React UI component library. It is built on Tailwind CSS, includes core building blocks (Button, Input, Menu, Dialog, etc.), and lets you easily override the color palette via CSS variables.

Installation

npm i @lindle/linoardo
# or
pnpm add @lindle/linoardo
# or
yarn add @lindle/linoardo

Usage

1. Import the library styles.
2. Import the components you want to use.

import '@lindle/linoardo/styles.css';
import { Button } from '@lindle/linoardo';

export default function App() {
  return <Button color='primary'>Action</Button>;
}

Initial values (CSS variables)

The primary color is controlled by the --color-primary variable. By default it is set to oklch(0.62 0.13 250), but you can override it in your global styles.

:root {
  --color-primary: #0ea5e9;
}

If you want to scope the color locally, set it on a wrapper element:

.app-theme {
  --color-primary: #22c55e;
}

docker build --no-cache -t linoardo-storybook:latest .