Learn how to install and integrate FrankenstyleKit in your projects.
FrankenstyleKit is an HTML-first UI component library built on UIkit 3 and extended with LitElement, inspired by coss ui.
Perfect for beginners, the simplest installation can be done using CDN.
Once you're done, you may now proceed adding JavaScript.
To speed up your development, you can grab a copy of our official boilerplate by clicking the button below. You're free to remove any optional components you don't need.
First, install the latest version of FrankenstyleKit using NPM:
Next, import the frankenstyle-kit-standalone.css file into your main CSS file:
Alternatively, you can pull FrankenstyleKit CSS directly from the node_modules directory.
Note FrankenstyleKit is very
flexible and can be used alongside any CSS framework you're familiar with.
If you choose this approach, you're expected to provide your own resets and
utility classes. If you prefer a complete solution, import frankenstyle-kit.css
instead of frankenstyle-kit-standalone.css.
If you'd like to use Tailwind CSS v4 alongside FrankenstyleKit, you can
manually configure your @theme directives
like so:
This will allow you to use utilities like bg-primary, bg-muted, and other custom utility
classes within your project.
Once you're done, you may now proceed adding JavaScript.