Windi UI

Overview

Windi UI is a versatile UI framework built with TypeScript in mind. It offers a wide range of features and tools such as on-demand component import, diverse selection of UI components, and powerful tools like TailwindCSS and VueUse. Windi UI also allows for easy customization to match your desired style.

Features

• TypeScript Support: Built with TypeScript in mind and from the ground up.
• Icon: Use any icon from Iconify in your project from your favorite icon set.
• On Demand Import: Windi UI comes with an intelligent resolver that automatically imports only used components.
• Diverse Component Selection: Create your application effortlessly with our expansive collection of 50+ UI components.
• Powerful Tools: Windi UI is built on top of powerful tools such as TailwindCSS, VueUse, Headless UI, etc.
• Themeable: Customize any part of our beautiful components to match your style.

Getting Started

Add Windi UI to your project by running one of the following commands:

npm install windi-vue

or

yarn add windi-vue

Usage

Add the Windi UI theme file and the darkMode class in your tailwind.config.cjs file as shown below:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@windicss/plugin-icons'),
    require('@tailwindcss/forms'),
    // ...
  ],
}

Component Registration

With Windi UI, you have the flexibility to register components precisely as you wish.

Import All Components

To import all the components provided by Windi UI, add WindiUI in your main entry file as shown below:

import { createApp } from 'vue'
import { WindiUI } from 'windi-vue'

const app = createApp(...)
app.use(WindiUI, options)

By doing this, you are importing all the components that are provided by Windi UI and in your final bundle, all the components including the ones you didn't use will be bundled. Use this method of component registration if you are confident that you will use all the components.

Individual Components with Tree Shaking

Probably you might not want to globally register all the components but instead only import the components that you need. You can achieve this by doing the following:

Import the createWindiUI option as well as the components you need as shown below:

import { createApp } from 'vue'
import { createWindiUI, Button, Alert } from 'windi-vue'

const app = createApp(...)
app.use(createWindiUI, {
  components: [Button, Alert],
  // ...
})

Now you can use the component as shown below:

<template>
  <div>
    <Button>Click me</Button>
    <Alert type="success">Success message</Alert>
  </div>
</template>

The prefix option is only available for individual component imports.

Auto Imports with Tree Shaking

Windi UI comes with an intelligent resolver that automatically imports only used components. This is made possible by leveraging a tool known as unplugin-vue-components which lets you auto-import components on demand, thus omitting import statements and still get the benefits of tree shaking.

To achieve this, you need to do the following:

1. Install the unplugin-vue-components package by running one of the following commands:

npm install -D unplugin-vue-components

or

yarn add -D unplugin-vue-components

2. Head over to your main.ts or main.js file and set registerComponents to false as shown below:

import { createApp } from 'vue'
import { createWindiUI } from 'windi-vue'

const app = createApp(...)
app.use(createWindiUI, {
  registerComponents: false,
  // ...
})

3. Head over to your vite.config.ts or vite.config.js file and add the following:

import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'

export default defineConfig({
  plugins: [
    // ...
    WindiCSS({
      safelist: 'prose',
    }),
  ],
})

Now you can simply use any component that you want and it will be auto-imported on demand.

Troubleshooting TypeScript Error

If you're encountering the TypeScript error: "Cannot find module 'windi-vue/dist/theme/windiTheme' or its corresponding type declarations," you can follow these steps to resolve it:

1. Create a windi-vue.d.ts declaration file in your src directory and inside it paste the following code:

declare module 'windi-vue/dist/theme/windiTheme' {
  import { WindiTheme } from 'windicss/types/interfaces'
  const theme: WindiTheme
  export default theme
}

2. The error should now be resolved.

Note: This issue is set to be fixed in the next release of Windi UI v0.0.1 Alpha.

Summary

Windi UI is a powerful UI framework built with TypeScript in mind. It offers a wide range of features and tools such as on-demand component import, a diverse selection of UI components, and customization options. With Windi UI, you can easily build web applications with ease. Contributions are welcome and encouraged.