Getting started

Install and set up

Install

npm install xedonium

Current version v1.26.2pin it with xedonium@1.26.2

Peer dependencies: react, react-dom (18 or newer) and tailwindcss (^3.4). npm 7+ installs peers for you; with yarn or pnpm add them yourself if your project does not already have them.

1. Tailwind

Use the preset and scan the library's files so its classes are generated:

// tailwind.config.js
import xedonium from 'xedonium/tailwind-preset'

export default {
	presets: [xedonium],
	content: ['./index.html', './src/**/*.{js,jsx}', './node_modules/xedonium/dist/**/*.js'],
}

2. Styles

Import the theme tokens and base styles once, before your Tailwind CSS:

import 'xedonium/styles.css'

3. Provider

import { ThemeProvider, AppBar, PageLayout, Button } from 'xedonium'

<ThemeProvider storageKey="my-app-theme">
	<div className="flex min-h-screen flex-col">
		<AppBar brand="My App" />
		<PageLayout>
			<Button>Hello</Button>
		</PageLayout>
	</div>
</ThemeProvider>

AppBar has no router dependency. For react-router pass linkComponent={Link} linkProp="to".

Overlay z-indexes can be overridden with --xd-z-modal, --xd-z-toast and --xd-z-tooltip.

4. Import only what you use

The package ships one file per module. import { Button } from "xedonium" is tree-shaken by modern bundlers, and subpaths such as xedonium/Button, xedonium/hooks/*, xedonium/icons/* and xedonium/theme load only that module (default exports for components and hooks; require("xedonium/Button").default in CommonJS).

// each component is its own module: import just the ones you use
import Button from 'xedonium/Button'
import Select from 'xedonium/Select'
import CheckIcon from 'xedonium/icons/Check'
import useTimedToast from 'xedonium/hooks/useTimedToast'
import { ThemeProvider, useTheme } from 'xedonium/theme'

// the named imports above still work and are tree-shaken too
import { Button, Select } from 'xedonium'

Next steps