DOCSEARCHbyAlgolia
Submit Docs

Windi UI Documentation

website·Indexed 29 days ago

https://ui-windi.netlify.app/

A UI component library built with TypeScript designed to speed up web application development. Features a comprehensive set of components including Buttons, Modals, Accordions, and Inputs, with built-in support for light and dark themes.

Tokens
12.7K
Snippets
33
Records
61
Agent score
72%

What's inside Windi UI

  1. Overview of Windi UI

    Windi UI is a Vue.js-based UI library built on top of Tailwind CSS, VueUse, and Headless UI. It provides a collection of 50+ prebuilt, fully customizable components designed to accelerate web application development. The library is written in TypeScript and supports on-demand imports to ensure only used components are bundled, optimizing performance.

  4. Windi UI Theme Overview

    Windi UI supports light and dark themes out of the box with no developer configuration required. Customization is achieved through two primary methods: using the variants property for component-level overrides or creating a dedicated theme file for global styling.

  5. Use the WKbd component for keyboard inputs

    The WKbd component is used to represent a keyboard or keyboard-like input in the user interface. You can set the text of the component by using its default slot.

  6. Implement a closable WAlert

    To make an alert dismissible, add the closable prop to the WAlert component. This displays a close button that emits a close event when clicked. Developers must define a custom method to handle this event and remove the component from the UI.

  7. Add icons to WButton

    WButton supports icons from the Iconify library via the icon prop or specific slots:

    • Leading Icon: Pass an icon to the icon prop or use the leading slot.
    • Trailing Icon: Set the trailing prop to true or use the trailing slot.
    • Icon Only: To create an icon-only button, omit the label prop.

  8. Create a custom theme for Windi UI

    Windi UI allows for global customization by creating a custom theme file. This is useful for projects that need specific utility classes or an alternative provider to Tailwind CSS.

    To create a custom theme:

    1. Create a theme folder in the src directory.
    2. Create a theme file (e.g., my-theme.ts) inside that folder.
    3. Define the theme based on the component's presets, which typically include a base object for structural classes and a variants object for style variations.
    // Example: WButton preset structure in my-theme.ts
WButton: {
    base: {
      root: 'focus:outline-none text-white block font-medium rounded-md transition-all duration-200 ease-in',
      buttonPill: '!rounded-full',
      buttonSize: {
        'sm': 'text-sm',
        'lg': 'text-sm',
        // ... other sizes
      },
      // ... other base properties
    },
    variants: {
      'primary': {
        root: 'bg-blue-500 hover:enabled:bg-blue-600',
      },
      'success': {
        root: 'bg-green-500 hover:enabled:bg-green-600',
      },
      // ... other variants
    },
}

  9. Configure auto-imports for Windi UI components

    Windi UI supports automatic component imports using unplugin-vue-components. This allows you to use components in templates without explicit import statements while maintaining tree shaking.
    # Install the plugin
npm i -D unplugin-vue-components

    // 1. In main.ts/js, disable automatic registration in createWindiUI import { createApp } from 'vue' import windiTheme from 'windi-vue/dist/theme/windiTheme' import { createWindiUI } from 'windi-vue'

    const app = createApp(App) const UI = createWindiUI({ registerComponents: false }) app.use(UI, windiTheme) app.mount('#app')

    // 2. In vite.config.ts/js, add the WindiUIComponentResolver import { WindiUIComponentResolver } from 'windi-vue' import Components from "unplugin-vue-components/vite"

    export default defineConfig({ plugins: [ Components({ resolvers: [WindiUIComponentResolver()] }), ], })

  10. Use the Badge component for status and notifications

    The Badge component is used to highlight an item's status for quick recognition. It supports several display modes and configurations:

    • Chip: Use the chip prop to display the badge as a small dot/chip.
    • Value: Use the value prop to display a number or string. If the value exceeds a specified max-value, it automatically displays with a + icon.
    • Square: Use the square prop to change the badge shape from rounded to square.
    • Position: Use the position prop to place the badge relative to its container. The default position is top-right.

  11. Create a vertical divider with WDivider

    To change the orientation of the WDivider component from horizontal to vertical, use the vertical prop. This adjusts the alignment and dimensions of the divider to fit vertical layouts.

  12. Register individual Windi UI components with tree shaking

    Use createWindiUI to register only the specific components you need. This method supports a prefix option to avoid naming collisions.
    import { createApp } from 'vue'
import App from './App.vue'
import windiTheme from 'windi-vue/dist/theme/windiTheme'
import { WKbd, createWindiUI } from 'windi-vue' 

const app = createApp(App)

const UI = createWindiUI({
    prefix: 'T', 
    components: [WKbd], 
})

app.use(UI, windiTheme)
app.mount('#app')

    // Usage in template: <template> <div> <TKbd>K</TKbd> </div> </template>