ODX Website React Component Library

General

ODX Website React Component Library based on Tailwind.

Installation 🚀

1. Install package: pnpm add -D @odx/websites-react
2. Install odxwebsite ui package: pnpm add -D @odx/websites-ui
3. Install peer dependency: pnpm add -D tailwindcss
4. Init tailwind: npx tailwindcss init
5. Add odxwebsite ui tailwind preset and import the content module in your content configuration to prevent Tailwind from purging its styles:

import preset from '@odx/websites-ui/tailwind';
import content from '@odx/websites-react/tailwind-lib-content';

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@odx/websites-ui/tailwind')],    
  content: [...content],
  theme: {
    extend: {},
  },
  plugins: [],
} 

6. Import the global styles including the @tailwind directives for each of Tailwind’s layers to your main CSS file. You can import the Global styles in your main JS file like this:

import '@odx/websites-ui/style';

Usage

The React package is a collection of React components that are structured with the following entry points:

• @odx/websites-react/components - General components
• @odx/websites-react/web - Dräger Website specific components
• @odx/websites-react/icons- Icons (as react components)
• @odx/websites-react/hooks- React hooks

You can import and use components like this in your project:

import { Button } from '@odx/websites-react/components';

Live demo ⭐

Please refer to our Storybook, to see the components in action and to get further information.

Technologies

• React
• Tailwind
• TypeScript
• pnpm
• tsup
• Jest
• React Testing Library
• ESLint
• Prettier
• Radix