HTML-first, framework-agnostic, beautifully designed components that you can truly copy and paste into your site. Accessible. Customizable. Open Source.
Include the Franken UI CSS in your <head> tag, but please only pick one style and do not activate two styles at once.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/default.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/slate.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/stone.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/gray.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/neutral.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/red.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/rose.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/orange.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/green.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/blue.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/yellow.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/violet.min.css" />While we're at it, you can also include UIkit JavaScript:
<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>You can also choose to use the defer attribute to delay script execution. Or, you can place the code before the end of your tag.
Visit https://www.franken-ui.dev to view the documentation.
Probably not, but you can always clone the documentation and run it locally.
Credits and attributions are now on their dedicated page.
I'm a completely independent developer and have no affiliation with Svelte, @shadcn, UIkit and YOOtheme, or any other entities. Follow me on Mastodon or X, formerly known as Twitter ™ for updates.
If Franken UI has been beneficial to you in any way, I have setup Ko-Fi and Liberapay.
- Continuous Documentation Improvement: Enhancing and expanding documentation to ensure clarity and ease of use.
- More components: Developing more components to broaden the range of options available to developers.
- Building "Blocks": Creating common page templates like Authentication pages, admin dashboards, etc., for easy integration into projects.
- Project Maintenance: Ensuring the project remains up-to-date and compatible with evolving technologies.
- Educational Content: Producing tutorials and screencasts for greater adoption and understanding of Franken UI.
Licensed under the MIT license.
