Franken UI is an HTML-first, 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.
Home Page: https://franken-ui.dev
License: MIT License
Franken UI is an HTML-first, 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.
Visit https://www.franken-ui.dev to view the documentation.
Licensed under the MIT license.
This project is tested with BrowserStack
The demo here uses the Geist font without loading a bold version of the font, and then proceeds to apply font-weight: bold to the heading text.
This generates a poorly rendered bold font.
Hi,
I am using the alert-component with presetQuick.
Alert-danger has a red border, while alert-success is just plain. Is it not supposed to be green?
Thanks.
Could you provide a CSS file to add as a stylesheet to a static HTML web page, so I can use pure CSS version, without JS nor npm? Thanks!
npm i tailwindcss postcss franken-ui && npx franken-ui init -p
npm error Cannot read properties of null (reading 'matches')
hi @sveltecult,
i really appreciate your work on Franken UI. but can you give us installation guide on Laravel please. because, for the first time i read your docs, it seems i have little bit confused when trying to implement things on my Laravel application.
On https://franken-ui.dev/docs/installation#installation-via-cdn
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/css/blue.min.css"
/>
is broken as https://unpkg.com/[email protected]/dist/css/blue.min.css is unavailable.
I tried other colors (themes) and every other color works fine.
Hello :)
Thanks for the awesome library.
I am experience odd bahavior with index stacking in regards to absolute positioned navbar dropdowns in conjunction with a slider right below it. No matter what I try and do the navbar dropdown disappears behind the slider, as well as other component types.
Code to reproduce the issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Franken UI</title>
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<style>
:root {
font-family: Inter, sans-serif;
font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
:root {
font-family: InterVariable, sans-serif;
}
}
</style>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/css/slate.min.css"
/>
<script>
if (
localStorage.getItem("color-theme") === "dark" ||
(!("color-theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<script
type="module"
src="https://unpkg.com/[email protected]/dist/js/wc.iife.js"
></script>
</head>
<body class="bg-background text-foreground">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>
<br/>
<br/>
<div class="uk-position-relative uk-visible-toggle mt-2" tabindex="-1" uk-slider>
<div
class="uk-child-width-1-3@s uk-child-width-1-4@m uk-slider-items uk-child-width-1-2"
>
<div>
<img src="https://franken-ui.dev/images/slider1.jpg" width="400" height="600" alt="" />
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</div>
<div>
<img src="https://franken-ui.dev/images/slider2.jpg" width="400" height="600" alt="" />
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</div>
<div>
<img src="https://franken-ui.dev/images/slider3.jpg" width="400" height="600" alt="" />
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</div>
<div>
<img src="https://franken-ui.dev/images/slider4.jpg" width="400" height="600" alt="" />
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</div>
<div>
<img src="https://franken-ui.dev/images/slider5.jpg" width="400" height="600" alt="" />
<div class="uk-position-center uk-panel"><h1>5</h1></div>
</div>
<div>
<img src="https://franken-ui.dev/images/slider6.jpg" width="400" height="600" alt="" />
<div class="uk-position-center uk-panel"><h1>6</h1></div>
</div>
</div>
</div>
<!-- END -->
<script>
var themeToggleBtn = document.getElementById("theme-toggle");
themeToggleBtn?.addEventListener("click", function () {
// if set via local storage previously
if (localStorage.getItem("color-theme")) {
if (localStorage.getItem("color-theme") === "light") {
document.documentElement.classList.add("dark");
localStorage.setItem("color-theme", "dark");
} else {
document.documentElement.classList.remove("dark");
localStorage.setItem("color-theme", "light");
}
// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains("dark")) {
document.documentElement.classList.remove("dark");
localStorage.setItem("color-theme", "light");
} else {
document.documentElement.classList.add("dark");
localStorage.setItem("color-theme", "dark");
}
}
});
</script>
</body>
</html>I have a gut feeling this is a UiKit issue, and has nothing to do with franken-ui, but thought I would bring it up since it has been grinding my brain for a little bit.
Have you noticed that when performing a search in the combobox mode for the Select component it doesn't match Caps?
Ie https://franken-ui.dev/docs/select#combobox here if you type "Af..." it wont match "Afghanistan"
Hi! Thanks for your lib, it looks pretty well.
I want to know if it's possible to use unocss instead of tailwind ?
Can this be used with htmx ?
Are there any plans to include a component similar to shadcn's combobox?
Reference
Thanks!
Hi!, I've found this lib interesting and tried to give it a go. While building something auto-complete suggests the classes uk-label-danger, uk-label-warning, uk-label-success but only danger seems to work.
If I go to definition I see the class is there's in the sass/css/less files, but it's not getting added in the css that reaches the browser.
<span class="uk-label uk-label-success">Done</span>
Thanks! :)
the Introduction Document on the Franken-UI web page does not has enough left spacing I explain this problem with screenshots.
"franken-ui": "^0.0.7",
"tailwindcss": "^3.4.3"
My experience with sortable so far:
Add a select support
This only happens when bundled with tailwind cli. The CDN static css works as expected.
This is due to the placement of width media query directives before the general css directives in the released npm package.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.