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. It is compatible with UIkit 3. The design is influenced by 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.

    By leveraging existing solutions like UIkit for JavaScript and accessibility, Franken UI avoids the need to create a new solution from scratch, thus sidestepping the need to deal with React or other ports from Vue or Svelte.

    Simply put, shadcn/ui uses Tailwind CSS for design and Radix UI for behavior, while Franken UI uses Tailwind CSS for design and UIkit JavaScript for behavior.

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

    No, Tailwind CSS is not required. However, using it can provide many conveniences, such as Intellisense for class names and automating the removal of unused CSS.

    If you prefer not to use Tailwind CSS, you can pick one pre-built CSS from 12 themes available and reference it in your HTML. You can always upgrade to a proper build later in your development 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.

  • What do you mean "framework-agnostic"?

    "Framework-agnostic" means that Franken UI can be used with any major JavaScript framework, such as Vue, React, or Svelte.

  • 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.

  • I'm concerned about the build size of Franken UI.

    The CDN and the `preset-quick` will result in an upfront size of approximately 132.08kB (21.27kB minified and gzipped). If you find this too large, you can easily turn off components you don't need.

Installation

For installation instructions, please refer to our installation page.