Installation

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

  Optionally, you can include a pre-built (~91.45 kB gzipped) Tailwind CSS utility classes to complement with Franken UI. These utility classes are pre-extracted from Tailwind CSS. If you find this too large, you can always switch to a proper build process.

  The following utility classes are available:

  Layout

  • Display
  • Visibility
  • Overflow
  • Position
  • Top / Right / Bottom / Left

  Flexbox and Grid

  • Flex Basis
  • Flex Direction
  • Flex Wrap
  • Flex
  • Flex Grow
  • Flex Shrink
  • Order
  • Grid Template Columns
  • Grid Column Start / End
  • Grid Template Rows
  • Grid Row Start / End
  • Grid Auto Flow
  • Grid Auto Columns
  • Grid Auto Rows
  • Gap
  • Justify Content
  • Justify Items
  • Justify Self
  • Align Content
  • Align Items
  • Align Self
  • Place Content
  • Place Items
  • Place Self

  Spacing

  • Padding
  • Margin
  • Space Between

  Sizing

  • Width
  • Min-Width
  • Max-Width
  • Height
  • Min-Height
  • Max-Height
  • Size

  Typography

  • Font Size
  • Font Style
  • Font Weight
  • Letter Spacing
  • Line Height
  • Text Align
  • Text Transform

  Borders

  • Border Radius
  • Border Width
  • Border Style
• First, install the latest version of Franken UI using NPM:

  Next, configure your vite.config.js file to use the Franken UI plugin.

  Once the plugin is configured, import the franken-ui.css file into your main CSS file:

  Alternatively, you can pull Franken UI CSS directly from the node_modules directory.

  Note Franken UI compiles CSS behind the scenes, so make sure to import the Vite plugin at the top of your vite.config.js file or second, right before any other CSS plugins, to avoid issues when importing it into your CSS file.

  Using Franken UI with Tailwind CSS v4

  If you'd like to use Tailwind CSS v4 alongside Franken UI, 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. Make sure to update your vite.config.js as well.

  Note If you choose to use Franken UI alongside Tailwind CSS v4, make sure to set preflight to false in your vite.config.js, as Tailwind already includes this feature. You also need to set layer to true to make the class hirarchy equal. Adding components inside layerExceptions will disable CSS layering for those components, placing them at the highest level of hierarchy.

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