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

• Why?

  While shadcn/ui offers beautifully designed components, it is React-first. Franken UI aims to provide a solution for those who are not comfortable using or do not want to use React.

• Do I need to use Tailwind CSS with Franken UI?

  No, Tailwind CSS is not required. However, Franken UI also doubles as a Tailwind CSS plugin, so you can upgrade to a proper build later if you want.

• Do I need TypeScript to use Franken UI?

  No, TypeScript is not required.

• Does Franken UI work with HTMX and Alpine?

  Yes, Franken UI is compatible with HTMX and Alpine.

• Who is Franken UI designed for?

  Franken UI is tailored for small teams and solo developers who seek a beautiful, reliable CSS framework without the complexity of React, Vue, or Svelte. It is designed with an "HTML-first" approach, making it accessible to developers at any skill level.

Installation

For installation instructions, please refer to our installation page.