Louis

Welcome to Louis. This project, built by Lokalise, is a ReactJS implementation of the Louis Design System. It contains the core components to start building your React application with Lokalise's look and feel.

Check Louis production storybook and figma ui library.

Prerequisites

Make sure your application bundler (e.g. Webpack) does have a loader (e.g. style-loader) for bundling CSS files.

Installation

To use Louis in your project, run the following command in your terminal:

npm i @lokalise/louis

After installing Louis, you need to set up a ThemeProvider at the root of your application:

import { ThemeProvider, themes } from '@lokalise/louis';

const App = () => (
	<ThemeProvider theme={themes.light}>
		<TheRestOfYourApplication />
	</ThemeProvider>
);

From here on out, you can import and use Louis components anywhere:

import { Button } from '@lokalise/louis';
import { useState } from 'react';

export const MyCounter = () => {
	const [count, setCount] = useState(0);
	return (
		<>
			<p>{`You've clicked the button ${count} times!`}</p>
			<Button variant="primary" onClick={() => setCount(count + 1)}>
				Click to increase the counter
			</Button>
		</>
	);
};

Styling and CSS

Default Import

Import Louis styles in your application:

import '@lokalise/louis/style.css';

Tailwind CSS v4 Compatibility

If you're using Tailwind CSS v4 (which uses CSS layers by default), import the layered version in your main CSS file to avoid specificity conflicts:

@import '@lokalise/louis/style-layered.css';

/* Control layer precedence - Tailwind utilities can override Louis component styles */
@layer louis, tailwind;

This ensures Tailwind utility classes can override Louis component styles when needed.

Note: Import either style.css or style-layered.css, not both. Choose style-layered.css when using Tailwind CSS v4.

Known Limitations

When using style-layered.css, be aware that unlayered styles from third-party libraries will always override layered Louis styles, regardless of layer order. This is expected CSS cascade layer behavior where unlayered styles have higher precedence than any layered styles.

Specifically, this affects Louis components that depend on third-party libraries with runtime-generated styles:

• Select/Multiselect components: These use react-select, which generates unlayered emotion styles at runtime. When using style-layered.css, these components will appear with react-select's unstyled minimal default appearance (basic dropdown controls with minimal styling) instead of Louis's custom theme. To preserve Louis's styling for these components, use the default style.css import instead.

Reporting issues

You can report issues on our JIRA Project, reach us on Slack or submit a Support Request.

How to contribute

Check our guidelines here

Code of Conduct

Follow up on our code of conduct

Thanks

Louis relies heavily on some of the approaches provided by Chakra-UI and Reach UI.

License

This project is APACHE, VERSION 2.0 licensed.