Release Notes

August 21, 2026

v0.6.4

This release is packed with quality-of-life improvements and critical bug fixes designed to streamline your workflow and polish the user and development experience!

Shorthand Syntax Update

To prevent browsers from natively splitting classes by spaces (which often resulted in “garbage” classes), we have replaced the quote-system with underscores:

Old Syntax	New Syntax
`class="[m]='calc(var(--spacing) * 2)'"`	`class="[m]=calc(var(--spacing)_*_2)"`

Other Improvements

Plugin System Migration: We have moved to a new plugin-based architecture. This is an internal optimization, and no breaking changes are expected for your current projects.
CLS Mitigation: Introduced z-not-ready and z-ready classes to help developers eliminate Cumulative Layout Shift (CLS) and ensure smoother page loads. If you choose to migrate, make sure to include the z-not-ready class in your <head> tag.
Arbitrary Properties: You can now define any CSS property on the fly. For example: class="[writing-mode]={vertical-lr}". Learn more here.
Color Shorthand: Simplified color application with the new shorthand syntax, e.g., color=pink-500. Learn more here.
Intelligent Inline-Var Redirection: Scaled keys now automatically redirect to their arbitrary counterparts when a raw, non-integer value is provided (e.g., m=4px → [m]=4px). Learn more here.
Enhanced Debugging: The debugger now issues a warning when a scaled key is given a raw value without a matching arbitrary rule for redirection. This prevents the silent generation of broken calc() output.

August 15, 2026

v0.5.4

Breaking Changes

If you are using the runtime to generate display classes (e.g. block:hover), the naming convention has been updated to include a display- prefix. This change ensures better consistency and alignment with our prebundled CSS.

Affected Classes

Old	New
`block`	`display-block`
`inline-block`	`display-inline-block`
`inline`	`display-inline`
`flex`	`display-flex`
`inline-flex`	`display-inline-flex`
`table`	`display-table`
`inline-table`	`display-inline-table`
`table-caption`	`display-table-caption`
`table-cell`	`display-table-cell`
`table-column`	`display-table-column`
`table-column-group`	`display-table-column-group`
`table-footer-group`	`display-table-footer-group`
`table-header-group`	`display-table-header-group`
`table-row-group`	`display-table-row-group`
`table-row`	`display-table-row`
`flow-root`	`display-flow-root`
`grid`	`display-grid`
`inline-grid`	`display-inline-grid`
`contents`	`display-contents`
`list-item`	`display-list-item`
`hidden`	`display-hidden`

Changelog

Introduced :focus-visible to available states for better accessibility styling.
Added support for ::before and ::after pseudo-elements.
Updated alert variants to ensure text colors match properly.

Ecosystem changes:

Improved IntelliSense support in the playground. You now receive better suggestions and real-time validation for class-without-variable pairings (and vice-versa) directly as you type.
Theme Builder — Create and customize your app’s design system effortlessly with our new visual styling tool.
Converter — Easily convert Tailwind CSS utility classes to be compatible with your app. Optimized for version 0.5.1 and later, it includes comprehensive reports for any unsupported complex classes that require manual porting.

July 5, 2026

v0.4.6

Changelog

Remove pattern attribute from z-input-pin — triggered native browser validation UI instead of custom handling.

June 14, 2026

v0.4.5

Welcome to 0build.

Rebranding… again

We have outgrown our own skin! Franken UI and Frankenstyle no longer reflect what this project does, as it now has its own ecosystem. Frankenstyle should have been the final name, but right after its release, npm suffered another major attack (Team PCP). Hence:

Cutting off NPM

We’re moving away from npm and becoming 100% CDN-based — hence the new name. For the last few months, Microsoft has kept changing the goalposts, forcing mandatory 2FA and expiring tokens. Publishing is no longer as simple as running npm publish. It’s a nightmare for a solo maintainer.

GitHub… again

We tried to distance ourselves from Microsoft’s claws by moving to Codeberg. However, we learned that we can still publish directly to jsdelivr using GitHub. So, we’re going back.

Clean Break

We will leave the old repositories and websites as they are, with the exception of redirecting https://franken.style to the new home at https://038.0build.dev.

Ecosystem changes:

Introducing Playground - Distraction-free HTML playground that stays out of your way. Enjoy a floating editor, realtime preview, autosave, and instant downloads.
Discontinuation of Frankternity: its binaries are independent, so you can still use it as usual; it simply won’t be updated.

Changelog

Add new inline value shorthand feature.
Fix hardcoded 10% border opacity values
Fix runtime debugger false positives

Upgrading from FrankenstyleKit

You are not forced to update. FrankenstyleKit will continue to work! However, upgrading from v0.3.8 is fully possible if you are not relying on Tailwind CSS for your utility classes. Here’s how to migrate:

1. Global Find & Replace

Find and replace uk-* with z-*
Find and replace dropdown: w-full with dropdown: z-dropdown w-full
Find and replace UIkit with zUIkit
Find and replace FS with zRuntime
Find and replace Lucide with zLucide
Find and replace ApexCharts with zApexCharts
Asset URL change: The easiest approach is to refer to the new boilerplate.

2. Asset URL Updates

Because UIkit follows a different update cycle, it has been moved out of the core.iife.js and now has its own binary—please include it somewhere in your HTML document.

<script src="https://cdn.jsdelivr.net/gh/0builddotdev/[email protected]/dist/js/uikit.min.js"></script>

Breaking Changes

Remove drop="" option from z-select and z-input-date components. They will not work anymore. You can manually add z-dropdown class as stated above.
Because of changes in dropdown mechanics, a minor bug created a z-index issue. To fix this, you can either create a custom class with a z-index and apply it to the dropdown part via cls="dropdown: custom-class", or you can set it using the stl attribute like so: stl="dropdown: z-index\: 1020". Here’s the correct implementation:
```
<z-select
  cls="button: z-input-fake justify-between w-full; dropdown: z-dropdown w-full"
  stl="dropdown: z-index\: 1020"
>
  
</z-select>
```
The same treatment for your z-input-date components:
```
<z-input-date
  cls="z-input-fake justify-between"
  stl="dropdown: z-index\: 1020"
></z-input-date>
```
The uk-command component is also remove. It will be replace with a better component in the future release.