Introduction

Get familiar with Franken UI.

What is Franken UI

Franken UI is an open-source library of UI components that works as a standalone or as a Tailwind CSS plugin. Under the hood, it uses UIkit 3 and extended with LitElement. The design is based on shadcn/ui.

While it may appear confusing to beginners at first glance, it is actually straightforward. Let’s explore Franken UI in detail:

  • Tailwind CSS - A utility-first CSS framework that offers classes like flex, pt-4, text-center, and rotate-90, which can be combined to create any design directly in your markup.
  • UIkit - A modular front-end framework for developing fast and powerful web interfaces.
  • shadcn/ui - A collection of re-usable components.

Consider this: using Tailwind CSS alone may lead to cluttered HTML with numerous utility classes, which can be a nightmare to maintain. This is where UIkit shines. It provides pre-built components such as inputs, buttons, accordions, and more, along with a mature JavaScript library for modals, popovers, carousels, toast notifications, and other features. So, what is the role of shadcn/ui? Think of it as a “skin” that has a beautiful, opinionated design. Now, fuse them all together and we have Franken UI.

Frequently Asked Questions

Installation

For installation instructions, please refer to our installation page.

Customize