@vifui/core

🚀 Beautiful and modern Vue UI library built with Tailwind CSS 4.0, inspired by Vuesax.

⚠️ Alpha Notice

This library is in active development and currently in alpha stage. APIs may change between releases.

Features

✨ 10+ High-Quality Components - Built with Vue 3 Composition API
🎨 Vuesax-Inspired Design - Beautiful, modern aesthetic
⚡ Tailwind CSS 4.0 - Utility-first styling with CSS variables
♿ Accessible - Built on Reka UI primitives (Radix Vue)
🎯 TypeScript - Full type safety
🌙 Dark Mode - Built-in theme support
📦 Tree-shakeable - Import only what you need

Installation

# npm
npm install @vifui/core @vifui/styles

# pnpm
pnpm add @vifui/core @vifui/styles

# yarn
yarn add @vifui/core @vifui/styles

Peer Dependencies

Make sure you have these installed:

npm install vue@^3.4.0 tailwindcss@^4.0.0 @iconify/vue@^4.0.0

Quick Start

1. Import Styles

In your main.js or App.vue:

import '@vifui/core/styles'

2. Use Components

<script setup>
import { Button, Badge, Card } from '@vifui/core'
</script>

<template>
  <Card>
    <CardHeader>
      <h3>Welcome to VifUI</h3>
    </CardHeader>
    <CardBody>
      <p>Beautiful components for Vue 3</p>
      <Badge color="success">New</Badge>
    </CardBody>
    <CardFooter>
      <Button color="brand">Get Started</Button>
    </CardFooter>
  </Card>
</template>

Available Components

✅ Ready to Use

• Button - Versatile button with variants, sizes, and colors
• Badge - Status indicators and labels
• Accordion - Collapsible content panels
• Alert - Contextual feedback messages
• Avatar - User profile images with fallbacks
• Breadcrumb - Navigation hierarchy
• Card - Content containers with media support
• Checkbox - Selection controls with indeterminate state
• Divider - Visual content separators
• Spinner - Loading indicators

🚧 Coming Soon

• Radio
• Switch
• Input
• Select
• Dialog
• Dropdown
• Tabs
• Tooltip
• And more...

Component Example

<script setup>
import { ref } from 'vue'
import {
  AlertRoot,
  AlertIcon,
  AlertContent,
  AlertHeader,
  AlertTitle,
  AlertDescription,
  Button
} from '@vifui/core'

const showAlert = ref(true)
</script>

<template>
  <AlertRoot
    v-model:visible="showAlert"
    variant="soft"
    color="success"
  >
    <AlertIcon icon="lucide:check-circle" />
    <AlertContent>
      <AlertHeader>
        <AlertTitle>Success!</AlertTitle>
        <AlertDescription>
          Your changes have been saved.
        </AlertDescription>
      </AlertHeader>
    </AlertContent>
  </AlertRoot>
</template>

Theming

VifUI uses Tailwind CSS 4.0 with CSS variables for theming:

/* Customize theme colors */
:root {
  --primary: oklch(0.61 0.2 263.6);
  --success: oklch(0.77 0.2 145.5);
  --warning: oklch(0.82 0.18 83.7);
  --danger: oklch(0.62 0.22 10);
}

Dark mode is automatically supported through Tailwind's dark: variants.

Documentation

Full documentation coming soon at vifui.com

For now, explore our Storybook examples in the repository.

TypeScript Support

All components are built with TypeScript and include full type definitions:

import type { ButtonProps, CardRootProps } from '@vifui/core'

const buttonProps: ButtonProps = {
  color: 'brand',
  size: 'lg',
  variant: 'solid'
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! This is an alpha project and we'd love your feedback.

1. Fork the repository
2. Create your feature branch
3. Make your changes
4. Submit a pull request

License

MIT © AbdulAzeez Olamide

Acknowledgments

• Inspired by Vuesax
• Built with Reka UI (Radix Vue)
• Styled with Tailwind CSS

Made with ❤️ by the VifUI team