Franken UI
The shadcn look on UIkit 3 and LitElement.
Franken UI is an HTML-first component library built on UIkit 3 and extended with LitElement, taking its visual language from shadcn/ui. It is the other answer to the same question Basecoat asks: how do you get the modern look without adopting React.
At a glance
| Distribution | npm install franken-ui, or a CDN link |
| Foundation | UIkit 3, extended with LitElement |
| Styling | Tailwind CSS with shadcn-style theming |
| Behaviour | UIkit's JavaScript, plus real web components |
| MCP server | not published |
| License | MIT |
Franken UI or Basecoat
Both deliver the shadcn look outside React. They differ where it matters.
| Franken UI | Basecoat | |
|---|---|---|
| Behaviour | UIkit 3 plus LitElement web components | thin vanilla JavaScript |
| Interactive depth | fuller, inherits UIkit's component set | deliberately minimal |
| Weight | heavier, you carry UIkit | lighter |
| Custom elements | yes, real web components | no |
Choose Franken UI when you need working interactive components out of the box. Choose Basecoat when you already have htmx or Alpine and want styles more than behaviour.
The UIkit inheritance cuts both ways
You get a mature, well-tested component set for free, including things most shadcn ports never implement. You also inherit UIkit's conventions, its markup patterns and its bundle. That is a reasonable trade for an internal tool and a heavier one for a marketing site.
Choose it if
- You want the shadcn aesthetic with real interactive components and no React.
- Web components matter to you, because the LitElement layer produces genuine custom elements.
Look elsewhere if
- You want the smallest possible footprint. Basecoat is lighter for the same look.
- You are in React. shadcn/ui is the original and the ecosystem is there.