Enonic UI Component Library
npm install @enonic/uiA modern UI component library built with Preact/React, TypeScript, and Tailwind CSS.
#### pnpm
#### With React
``bash`
pnpm add @enonic/ui react react-dom @radix-ui/react-slot focus-trap-react
#### With Preact
`bash`
pnpm add @enonic/ui preact @radix-ui/react-slot focus-trap-react
npm
#### With React
`bash`
npm install @enonic/ui react react-dom @radix-ui/react-slot focus-trap-react
#### With Preact
`bash`
npm install @enonic/ui preact @radix-ui/react-slot focus-trap-react
Yarn
#### With React
`bash`
yarn add @enonic/ui react react-dom @radix-ui/react-slot focus-trap-react
#### With Preact
`bash`
yarn add @enonic/ui preact @radix-ui/react-slot focus-trap-react
`tsx
import { Button, Input } from '@enonic/ui';
function App() {
return (
$3
#### Tailwind CSS
If your project uses Tailwind CSS, you can import the styles directly from the library:
`css
/ Import Tailwind CSS /
@import 'tailwindcss';
/ Required by some components that use animations /
@import 'tw-animate-css';/ Preset styles (includes tokens, base, and utilities) /
@import '@enonic/ui/preset.css';
`#### CSS Only
If you only need the pre-built CSS styles:
`css
@import '@enonic/ui/style.css';
`Peer Dependencies
This library requires one of the following frameworks:
$3
`json
{
"react": "^19.0.0",
"react-dom": "^19.0.0",
"@radix-ui/react-slot": "^1.2.0",
"focus-trap-react": "^11.0.0"
}
`$3
`json
{
"preact": ">=10.0.0",
"@radix-ui/react-slot": "^1.2.0",
"focus-trap-react": "^11.0.0"
}
`$3
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 projectsDevelopment
`bash
Install dependencies
pnpm installStart development server with Storybook
pnpm devBuild the library
pnpm buildRun type checking
pnpm typecheckRun linting
pnpm lintCheck bundle size
pnpm size
``MIT