AmpecoUI

AmpecoUI is a collection of React UI components built with Tailwind CSS, based on Nova.

Requirements

• React ^19.0.0
• React DOM ^19.0.0
• React Router DOM ^7.2.0 (peer dependency)
• Node.js 18.x, 20.x, or 22.x

See CHANGELOG.md for version history.

Getting started

Installation

1. Install the package:

npm install @ampeco/ampeco-ui

2. Include the required styles. Import the CSS file in your application entry point:

import "@ampeco/ampeco-ui/dist/style.css";

Or in your main CSS file:

@import "@ampeco/ampeco-ui/dist/style.css";

3. Configure Tailwind CSS (if not already configured). The design system uses Tailwind CSS v4. Make sure your project has Tailwind CSS configured to support dark mode. The components use Tailwind's dark: variant for dark mode support.

Running package locally in other projects for easier testing

1. Open terminal in root of this project and run following command

npm link

2. Build the package using npm run build:lib command (You need to build the package after every change to make them visible)

3. Open terminal in root of your desired project and run

npm link @ampeco/ampeco-ui

4. When you are done with testing run following command first in your project, then in this one

npm unlink --no-save @ampeco/ampeco-ui

NOTE: If you are having issues with running the package, first uninstall @ampeco/ampeco-ui from your dependencies, then follow the steps.

Development

Running Storybook

To view and develop components in Storybook:

npm run start:storybook

Running Tests

npm test

Building the Library

npm run build:lib

Documentation

The component library documentation is available via Storybook, automatically deployed to GitHub Pages:

View Storybook Documentation

Publishing

For information on how to publish this package to npm, see PUBLISHING.md.

For information on deploying Storybook to GitHub Pages, see GITHUB_PAGES_SETUP.md.