Meet Franken UI : A Shadcn Alternative for Building UI

Abdul Aziz Ahwan
20 Jul, 2024

Introduction to Franken UI

In the dynamic landscape of web development, the need for versatile and efficient UI component libraries has never been more critical. Franken UI emerges as a compelling solution to this need. It is an open-source library of UI components that functions as a standalone or integrates seamlessly as a Tailwind CSS plugin. Franken UI is compatible with UIkit 3 and takes design inspiration from shadcn/ui, creating a unique and powerful toolset for developers.

While the initial glance at Franken UI might seem overwhelming, especially for beginners, it is, in essence, a straightforward and intuitive library once you dive into its capabilities and structure. This blog post will explore Franken UI in detail, covering its integration with Tailwind CSS, its components, theming options, and more.

Understanding the Core Technologies

To fully appreciate the power of Franken UI, it's essential to understand the core technologies it leverages:

  • Tailwind CSS: A utility-first CSS framework that provides utility classes like flex, pt-4, text-center, and rotate-90, allowing developers to create designs directly in the markup.
  • UIkit: A modular front-end framework designed for developing fast and powerful web interfaces. It offers pre-built components and a mature JavaScript library for features like modals, popovers, carousels, and toast notifications.
  • shadcn/ui: A collection of re-usable components with a beautiful and opinionated design.

By combining these technologies, Franken UI offers a robust and flexible framework for building modern web interfaces.

Why Choose Franken UI?

Franken UI addresses several challenges faced by developers:

  1. Clean HTML: Using Tailwind CSS alone can lead to cluttered HTML with numerous utility classes, making it difficult to maintain. Franken UI mitigates this by providing pre-built components from UIkit.
  2. Powerful JavaScript Library: UIkit's mature JavaScript library enhances functionality with features like modals, popovers, and toast notifications.
  3. Beautiful Design: shadcn/ui offers aesthetically pleasing and opinionated designs, making your UI components look great out of the box.
  4. Framework-Agnostic: Franken UI is designed to be framework-agnostic, meaning it can be used with various front-end frameworks like HTMX and Alpine.

Frequently Asked Questions

Before diving into the installation and usage, here are answers to some common questions about Franken UI:

  • Why use Franken UI? Franken UI combines the utility of Tailwind CSS, the comprehensive components of UIkit, and the elegant design of shadcn/ui, making it a versatile and powerful UI library.
  • Do I need to use Tailwind CSS with Franken UI? While Franken UI works best as a Tailwind CSS plugin, it can also function as a standalone library.
  • Do I need TypeScript to use Franken UI? No, TypeScript is not a requirement, but it is supported and can enhance the development experience.
  • Does Franken UI work with HTMX and Alpine? Yes, Franken UI is designed to be framework-agnostic and works well with HTMX and Alpine.
  • What does "framework-agnostic" mean? It means Franken UI can be integrated and used with any front-end framework, providing flexibility in development.
  • Who is Franken UI designed for? It is designed for developers seeking a powerful, flexible, and beautifully designed UI component library.
  • I'm concerned about the build size of Franken UI. Franken UI allows for fine-grained configuration, enabling you to include only the components you need, resulting in a leaner build.

Installation

Franken UI can be installed via CDN for beginners or via NPM for more advanced setups. Here’s how to get started:

Installation Via CDN

For a quick and easy installation, you can use the CDN. Simply include one of the 12 available styles in your <head> tag. Remember, do not include multiple styles simultaneously.

<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/slate.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/stone.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/gray.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/neutral.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/red.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/rose.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/orange.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/green.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/blue.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/yellow.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/violet.min.css">
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.2/dist/css/zinc.min.css">

Once you’ve included the CSS, proceed to adding JavaScript.

Installation Via NPM

For a more integrated setup, follow these steps:

  1. Install PostCSS and Franken UI:

     npm install postcss franken-ui

  2. Initialize Franken UI:

     npx franken-ui init -p

    This command generates and configures both tailwindcss.config.js and postcss.config.cjs. If you want total control over the components, use the --fine flag (-i). To opt out of shadcn/ui, use the --raw flag (-r).

  3. Add JavaScript: Once the setup is complete, proceed to adding JavaScript.

Theming

Franken UI offers a variety of themes to suit different design needs. The available themes are:

  • slate
  • stone
  • gray
  • neutral
  • red
  • rose
  • orange
  • green
  • blue
  • yellow
  • violet
  • zinc

To set a theme, configure your preset function with the desired theme. Here’s an example using the green theme:

import franken from "franken-ui/shadcn-ui/preset-quick";

/** @type {import('tailwindcss').Config} */
export default {
  presets: [franken({ theme: "green" })],
};

For fine-grained configuration, set the theme inside hooks() and variables() functions:

import variables from "franken-ui/shadcn-ui/variables";
import hooks from "franken-ui/shadcn-ui/hooks";

const shadcn = hooks({ theme: "green" });

/** @type {import('tailwindcss').Config} */
export default {
  plugins: [
    variables({ theme: "green" }),
  ],
};

Custom Palette

If the provided themes are not sufficient, you can generate your own palette by referring to the documentation.

Selecting Components

Franken UI allows you to include only the components you need, resulting in a leaner build. This can be done using fine-grained configuration or by specifying components in preset-quick.

To include specific components, use the only option:

import franken from "franken-ui/shadcn-ui/preset-quick";

/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    franken({
      theme: "green",
      only: ["button", "form", "modal", "offcanvas"],
    }),
  ],
};

To exclude specific components, use the except option:

import franken from "franken-ui/shadcn-ui/preset-quick";

/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    franken({
      theme: "green",
      except: ["align", "article", "margin", "padding"],
    }),
  ],
};

Customization

For specific style overrides, you can use Tailwind CSS utility classes. For advanced customization, explore the use of hooks.

Editor Setup

To make development easier, Franken UI supports TypeScript and works well with Tailwind CSS IntelliSense for autocomplete features. This setup saves time and reduces errors.

Adding JavaScript

Once Franken UI is installed, include the JavaScript to control component behavior. There are two methods for this:

Via CDN

Add the JavaScript files to the <head> section of your HTML:

<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.6/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.6/dist/js/uikit-icons.min.js"></script>

Via NPM

Import the JavaScript files into your project:

import UIkit from "uikit/dist/js/uikit";
import Icons from "uikit/dist/js/uikit-icons";

// loads the Icon plugin
UIkit.use(Icons);

Conclusion

Franken UI is a versatile and powerful UI component library that leverages the strengths of Tailwind CSS, UIkit, and shadcn/ui. Whether you are building a simple web page or a complex web application, Franken UI provides the tools and flexibility needed to create a beautiful and functional user interface.

Explore the official documentation for more detailed guides and examples to get the most out of Franken UI. Happy coding!

Next Post Previous Post
No Comment
Add Comment
comment url