Component Library

LibreChat's interface is built from a shared set of React components published on npm as @librechat/client. The pages in this section show each one live, rendered from the published package in the same theme the app uses, with the code that renders it underneath.

Every preview follows the light or dark mode of this site. The examples are written the way LibreChat's own code uses the components: labels tied to their fields, localized strings, and semantic color tokens rather than raw palette colors.

Install

npm install @librechat/client

The package lists its runtime libraries as peer dependencies (React, Tailwind CSS 4, Radix UI, Ariakit and others), so a host installs the versions it needs once and shares them. Your package manager reports any that are missing.

Set up the styles

The components are styled with Tailwind CSS 4 and LibreChat's theme tokens. Import the package's theme and component styles after Tailwind, then load a Tailwind config that uses the package preset:

@import 'tailwindcss';
@import '@librechat/client/theme.css';
@import '@librechat/client/style.css';
@config './tailwind.config.js';

const libreChatTailwindPreset = require('@librechat/client/tailwind-preset')

module.exports = {
  presets: [libreChatTailwindPreset],
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@librechat/client/dist/**/*.{js,mjs,cjs}',
  ],
  darkMode: ['class'],
}

Then wrap your app in ThemeProvider, which applies light, dark or system mode and any custom theme:

import { ThemeProvider } from '@librechat/client'

export function App({ children }) {
  return <ThemeProvider initialTheme="system">{children}</ThemeProvider>
}

Some components read their built-in labels (such as a dialog's Cancel button) through react-i18next, so initialize i18next with LibreChat's translations or your own strings for the same keys.

Components