Installation

Learn how to install and integrate Franken UI in your projects.

Installation via CDN

Perfect for beginners, the simplest installation can be done using CDN.

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/css/core.min.css"
/>

Once you’re done, you may now proceed adding JavaScript.

Installation via NPM

Because Franken UI is a Tailwind CSS plugin, it can be included into any existing Tailwind CSS project. To get started, you first need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine.

1. Install PostCSS and the latest version of Franken UI using NPM:

npm install postcss franken-ui

2. Run the npx franken-ui init -p command.

npx franken-ui init -p

This command will automatically generate and configure both tailwindcss.config.js and postcss.config.cjs for you. If you already have a Tailwind CSS or PostCSS configuration in place, the command will refuse to create a new one. This ensures that your existing configuration isn’t accidentally overwritten.

If you have trouble running the command, you can always refer to the source code and grab the right configuration you need.

3. Once you’re done, you may now proceed adding JavaScript.