@enonic/ui

@enonic/ui

A modern UI component library built with Preact/React, TypeScript, and Tailwind CSS.

Installation

pnpm

With React

pnpm add @enonic/ui react react-dom @radix-ui/react-slot focus-trap-react

With Preact

pnpm add @enonic/ui preact @radix-ui/react-slot focus-trap-react

npm

With React

npm install @enonic/ui react react-dom @radix-ui/react-slot focus-trap-react

With Preact

npm install @enonic/ui preact @radix-ui/react-slot focus-trap-react

Yarn

With React

yarn add @enonic/ui react react-dom @radix-ui/react-slot focus-trap-react

With Preact

yarn add @enonic/ui preact @radix-ui/react-slot focus-trap-react

Usage

Styles

Important: Components render unstyled without CSS setup. Choose one of the paths below before importing components.

Tailwind CSS

If your project uses Tailwind CSS, import the preset in your main CSS file:

@import 'tailwindcss';
@import 'tw-animate-css';
@import '@enonic/ui/preset.css';

CSS Only

If your project does not use Tailwind CSS, import the pre-built stylesheet instead:

@import '@enonic/ui/style.css';

Import Components

import { Button, Input } from '@enonic/ui';

function App() {
  return (
    <div>
      <Button variant='primary' size='md'>
        Click Me
      </Button>
      <Input placeholder='Enter text...' />
    </div>
  );
}

Peer Dependencies

This library requires one of the following frameworks:

React

{
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "@radix-ui/react-slot": "^1.2.0",
  "focus-trap-react": "^11.0.0"
}

Preact

{
  "preact": ">=10.0.0",
  "@radix-ui/react-slot": "^1.2.0",
  "focus-trap-react": "^11.0.0"
}

Icon Libraries (Optional)

The library uses and expects one of the following icon libraries to be used to provide icons for the components:

• lucide-react (>=0.500.0) - For React projects
• lucide-preact (>=0.500.0) - For Preact projects

Development

# Install dependencies
pnpm install

# Start development server with Storybook
pnpm dev

# Build the library
pnpm build

# Run type checking
pnpm typecheck

# Run linting
pnpm lint

# Check bundle size
pnpm size

License

MIT