Introduction

What is Interactive UI

Interactive UI offers a comprehensive collection of components that can seamlessly integrate into your projects. Best of all, it's completely free for both personal and commercial use, allowing you to download the source code and customize it to suit your specific requirements.

This is not a traditional UI component library. No installation is required — simply download the code and integrate it into your project. Our components are primarily built using React, alongside modern frameworks and libraries such as Chakra UI, PandaCSS + Ark UI (styled by Park UI), and Tailwind CSS + Radix UI (styled by shadcn/ui). We also leverage popular NPM packages to enhance functionality. Additionally, we plan to expand support for a variety of CSS libraries, including Material UI and others.

Rather than offering basic components typically found in UI libraries—such as buttons, lists, and inputs — we focus on advanced components tailored for SaaS applications and e-commerce platforms that demand rich, interactive experiences. Instead of building everything from scratch, we assemble components using a range of well-established libraries, ensuring both efficiency and flexibility.

How to install

Interactive UI allows you to install the components with the CLI; the CLI command can specify the name of the component and the CSS library. For example, if you want to install the Calendar component implemented in Chakra UI, you can execute the command in your root directory:

npx @interactive-ui/cli@latest add calendar chakra

After the execution, the CLI will generate the folder in your root directory like so:

interactive-ui
└── calendar_chakra
    ├── package.json
    └── src
        ├── App.tsx
        ├── Calendar.tsx
        ├── CalendarDay.tsx
        ├── CalendarDayLabel.tsx
        ├── CalendarHeader.tsx
        ├── CalendarHeaderItem.tsx
        ├── CalendarWeek.tsx
        ├── types.ts
        ├── useCalendar.ts
        └── useCore.ts

Also, when you install a component with the CLI, the dependencies will be merged with your package.json and the installation of with your package manger will be automatically executed.

As another option, you can download the code directly from the link.

In this case, you need to manually copy and past the dependencies to your package.json and install.

The CLI command and the download link are provided on each component page, so install in a way that suits you.