Rechtspilot UI Library

A React component library for building user interfaces primarily for the Rechtspilot platform. This library provides reusable UI components that follow a consistent design system.

Installation

# Recommended
pnpm add rechtspilot-ui@latest
# or
npm install rechtspilot-ui@latest
# or
yarn add rechtspilot-ui@latest

Usage

Web Applications

import { Button } from 'rechtspilot-ui';
import { UserCircle } from 'rechtspilot-ui/icons';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <UserCircle size={24} />
    </div>
  );
}

React Native Applications

Due to Metro bundler limitations with subpath imports, use direct paths for icons:

import { Button } from 'rechtspilot-ui';
import { UserCircle } from 'rechtspilot-ui/dist/icons.native.es.js';

function App() {
  return (
    <View>
      <Button variant="primary">Click me</Button>
      <UserCircle size={24} />
    </View>
  );
}

Development

1. Clone repository

git clone https://github.com/rechtspilot/rechtspilot-ui-library.git
cd rechtspilot-ui-library

2. Install dependencies

pnpm install

3. Run Storybook locally

pnpm sb

Use UI Library Locally

You can link the library locally to test changes in rechtspilot-chat-frontend with instant HMR — no builds or npm publishes needed.

# In rechtspilot-chat-frontend
pnpm link:ui            # enable (assumes ../rechtspilot-ui-library exists)
pnpm dev                # start dev server — edits here reflect instantly
pnpm unlink:ui          # revert to npm package when done

A pre-commit hook in rechtspilot-chat-frontend blocks commits while linking is active. See docs/LOCAL_UI_DEVELOPMENT.md in that repo for details.

Implementing components

1. Create a new folder in src/components/[ComponentName]

2. Inside the folder create [ComponentName].tsx - main component implementation

3. If more components are related to the main one, they should be inside the relative folder

4. Make the component accessible from the library by exporting it inside src/index.ts

   // Example
   export { default as ComponentName } from './components/ComponentName/ComponentName';

Implementing icons

1. Create a new file in src/icons/[IconName].tsx

2. Implement the SVG icon as a react component

3. Export icon in src/icons/index.ts

   // Example
   export { default as IconName } from '@/icons/IconName';

Documenting components

All components should be documented with Storybook stories and MDX documentation.

Creating stories

1. Create a story file in src/docs/stories/[ComponentName].stories.tsx

import type { Meta, StoryObj } from '@storybook/react';

import ComponentName from '@/components/ComponentName/ComponentName';

const meta: Meta<typeof ComponentName> = {
  component: ComponentName,
  // Optional: tags, parameters, etc.
};

export default meta;

type Story = StoryObj<typeof ComponentName>;

export const Primary: Story = {
  args: {
    // Component props
  },
};

// Add more variations if needed

2. For complex components, create MDX file in src/docs/[ComponentName].mdx

import { Meta, Story } from '@storybook/blocks';

import * as ComponentNameStories from './stories/ComponentName.stories.tsx';

<Meta of={ComponentStories} />

# ComponentName

Brief description of what the component does and when to use it.

## Usage

Describe how should the component be used with examples

Releasing

When a feature branch is merged into main, the GitHub Action will automatically publish to npm using trusted publishing (no tokens required).

Before merging, update the package version:

pnpm version patch