Release Notes

v2.0-internal.45

February 15, 2025

Breaking Changes

1. Root layout update for charting component

• Impact: Very Low

To support the new charting component, please update your root layout to accept the charting feature.

Changes:

• Add the following line to your root layout’s script block:

<script>
      const htmlElement = document.documentElement;

      const __FRANKEN__ = JSON.parse(
        localStorage.getItem("__FRANKEN__") || "{}",
      );

      if (
        __FRANKEN__.mode === "dark" ||
        (!__FRANKEN__.mode &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        htmlElement.classList.add("dark");
        htmlElement.dataset.theme = "github-dark";
      } else {
        htmlElement.classList.remove("dark");
        htmlElement.dataset.theme = "github-light";
      }

      htmlElement.classList.add(__FRANKEN__.theme || "uk-theme-zinc");
      htmlElement.classList.add(__FRANKEN__.radii || "uk-radii-md");
      htmlElement.classList.add(__FRANKEN__.shadows || "uk-shadows-sm");
      htmlElement.classList.add(__FRANKEN__.font || "uk-font-sm");
      htmlElement.classList.add(__FRANKEN__.chart || "uk-chart-default");
</script>

2. Theme switcher update for charting component

• Impact: Very Low

To support the new charting component, please update your <uk-theme-switcher> to accept the charting feature.

Changes:

• Add the following line to your <uk-theme-switcher> component:

<uk-theme-switcher>
  <select hidden>
    <optgroup data-key="theme" label="Theme">
      <!-- ... -->
    </optgroup>
    <optgroup data-key="radii" label="Radii">
      <!-- ... -->
    </optgroup>
    <optgroup data-key="shadows" label="Shadows">
      <!-- .. -->
    </optgroup>
     <optgroup data-key="chart" label="Chart">
       <option data-hex="#e76e50" value="uk-chart-default" selected
         >Default</option
       >
       <option data-hex="#2563eb" value="uk-chart-sapphire"
         >Sapphire</option
       >
       <option data-hex="#e21d48" value="uk-chart-ruby">Ruby</option>
       <option data-hex="#1dc355" value="uk-chart-emerald"
         >Emerald</option
       >
       <option data-hex="#ad7c48" value="uk-chart-daylight"
         >Daylight</option
       >
       <option data-hex="#959593" value="uk-chart-midnight"
         >Midnight</option
       >
    </optgroup>
  </select>
</uk-theme-switcher>

Known Issues

1. Tailwind CSS v4

We are currently investigating an issue related to how Tailwind CSS v4 interacts with ApexCharts’ default styling. The franken-ui/css/npf.css is being imported at a lower level in the app.css, which causes ApexCharts’ default styling to override some customizations due to its higher specificity.

To resolve this, please move the importation of franken-ui/css/npf.css to the highest level of hierarchy in your app.css file.

@layer base {
  /* @import 'franken-ui/css/custom-palette.css'; */

  @import 'franken-ui/css/npf.css';
}
/* @import 'franken-ui/css/custom-palette.css'; */

@import 'franken-ui/css/npf.css';

v2.0-internal.44

Please read this document in its entirety before deciding to upgrade to version 2.0. This major release includes several breaking changes, but upgrading is optional. If you’re satisfied with version 1.0, you can continue using it without issues. However, if you choose to upgrade to 2.0, please be aware of the following changes.

Mini design system

On top of the original shadcn/ui, a mini design system has been introduced for Franken UI. By doing so, it address the potential “me-too” problem that can arise from the library’s ease of use into “Can I copy your homework? Yeah, sure, just change it up a bit so we don’t look the same!” – and actually mean it, thanks to the system’s built-in flexibility and customization options.

Sizing

Components such as buttons, inputs, selects, pagination, and many others have had their base size adjusted to accommodate additional size variants, including *-xs, *-sm, *-md, and *-lg. Providing developers with more options out of the box.

Padding

Padding has been unified for components such as modals, cards, and others, ensuring a more consistent UI.

Radii, shadows and font sizes

Border radii have been unified across all components and reduced to two options: a base radius and a smaller radius. For example, the dropdown component now uses the base radius for the dropdown itself, while the inner items use the smaller radius. A similar approach has been taken with shadows and font sizes.

This design system utilizes CSS variables to make it easy for developers to customize border radii and shadows according to their preferences.

Web components

For better compatibility with reactive frameworks, web components have undergone major changes, too. If you’re using these components, you’ll need to update your code accordingly. Refer to the documentation for specific guidance on updating these components.

• Command
• Input PIN
• Input Tag
• Select
• Theme Switcher

Root layout

To ensure seamless implementation of our mini design system, a change to your root layout is necessary. Franken UI now stores theme settings under a single key, __FRANKEN__, which is then parsed accordingly. For detailed instructions on how to update your <head> tag, please refer to the Theme Switcher documentation.

Component Reduction

To reduce the maintenance burden and improve compatibility, certain components have been removed or replaced with alternatives, often due to better solutions provided by Tailwind CSS.

The following table outlines the components that have been removed or replaced:

Others

1. Make sure to set a min-width on your Dropdown components.

<div
  class="uk-drop uk-dropdown min-w-52"
  data-uk-dropdown="mode: click; pos: bottom-right"
>
  <!-- ... -->
</div>

Class names

The following is a comprehensive list of class names that have been shortened, changed, or dropped to improve readability and maintainability. To update your code, you can perform careful find and replace operations for some of these changes.

Note Some of the dropped classes have better implementations available in Tailwind CSS, which can be used as alternatives.