Installation and setup #

Install component library in your React project

1npm install @fxtrot/ui

1import { ThemeProvider } from '@fxtrot/ui';
2
3import '@fxtrot/ui/style.css';
4
5ReactDOM.createRoot(document.getElementById('root')).render(
6  <React.StrictMode>
7    <ThemeProvider>
8      <App />
9    </ThemeProvider>
10  </React.StrictMode>
11);

In addition to providing the default theme, ThemeProvider ensures all components get necessary context parameters. See theming to see how ThemeProvider can change the appearance of the component designs.

Usage #

Use components in your app.

1import { Button } from '@fxtrot/ui';
2
3<Button variant="outline">Start</Button>;

Usage with Tailwind CSS #

Tailwind CSS is utility-first CSS framework. This UI lib is built using Tailwind and exposes the setup to work with Fxtrot UI variables. Just import the preset in your Tailwind config:

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: ['./src/**/*.{js,jsx,ts,tsx,md,mdx}'],
4  presets: [require('@fxtrot/ui/tailwind.preset.cjs')],
5};

Next, in your global CSS, where you enable Tailwind rules, specify the order in which the browser should treat the layers (MDN - CSS Cascade Layers):

1@layer tailwind-base, fxtrot-ui;
2
3@layer tailwind-base {
4  @tailwind base;
5}
6
7@tailwind components;
8@tailwind utilities;

This way, Tailwind CSS User Agent styles resets from tailwind-base won't override the styles provided in fxtrot-ui layer.

You will see a warning message:

1Nested @tailwind rules were detected, but are not supported.

It should be ignored for now until better fix from Tailwind team. Follow this discussion if you want to know more: tailwindcss/Dealing with cascade layers