ApexUI

A Vue 3 UI component library built with Tailwind CSS v4 and TypeScript.

Requirements

• Vue ≥ 3.4
• Tailwind CSS ≥ 4.0 (with @tailwindcss/vite)
• @lucide/vue ≥ 1.0

Installation

npm install @ertugrulozcan97/apexui

Setup

1. Import styles

In your main.css (or equivalent), import the library's design tokens and your Tailwind base before your own styles:

@import "tailwindcss";
@import "@ertugrulozcan97/apexui/style";

2. Register the plugin

// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import ApexUI from "@ertugrulozcan97/apexui"

const app = createApp(App)
app.use(ApexUI)
app.mount("#app")

3. Add providers

Place these once in your root App.vue template. They are required for toasts and dialogs to work:

<template>
	<UToastProvider />
	<UDialogProvider />
	<RouterView />
</template>

À la carte usage

Import only what you need instead of registering the full plugin:

import { UButton, UInput, useToast, useDialog } from "@ertugrulozcan97/apexui"

Components

| Component | Description | | -------------------- | ----------------------------------------------------------------------------------- | | UBadge | Status badge with variants: success, warning, danger, info, neutral | | UButton | Button with variants primary, secondary, danger, ghost and sizes md, sm | | UCheckbox | Checkbox with label and v-model support | | UDialog | Programmatic confirmation dialog (used with useDialog) | | UDialogProvider | Required provider — mount once in root | | UDrawer | Slide-over panel, supports left, right, top, bottom sides | | UDropzone | File drag-and-drop upload area | | UEmptyState | Empty state placeholder with icon, title, and description | | UFormRow | Form field wrapper with label and hint | | UIcon | Lucide icon wrapper with color and size props | | UIconButton | Square icon-only button | | UInput | Text input, textarea, or select — controlled via v-model | | UListCard | Card container for list items | | UListCardCell | Cell inside a UListCard | | ULogoMark | Brand logo mark | | UModal | Modal dialog with slot-based content | | UPageLayout | Two-column page layout (sidebar + content) | | URadio | Radio button with label | | USelect | Dropdown select with v-model | | USidebar | Navigation sidebar with sections, items, and nested children | | UStatCard | Statistic card with label, value, and trend | | USwitch | Toggle switch with sizes md, sm | | UTabs | Tab bar with active tab tracking | | UTable | Data table with sorting, pagination, and column toggling | | UTableColumnToggle | Popover to show/hide table columns | | UTablePager | Pagination controls for UTable | | UTableRow | Row wrapper for UTable | | UToastProvider | Required provider — mount once in root | | UTopBar | Top navigation bar |

Composables

useToast

import { useToast } from "@ertugrulozcan97/apexui"

const toast = useToast()

toast.success("Saved successfully")
toast.error("Something went wrong")
toast.warning("Check your input")
toast.info("New update available")

useDialog

import { useDialog } from "@ertugrulozcan97/apexui"

const dialog = useDialog()

const confirmed = await dialog.confirm({
	title: "Delete item",
	message: "This action cannot be undone.",
	variant: "danger",
})

Example

<script setup lang="ts">
import { ref } from "vue"
import { UButton, UInput, useToast } from "@ertugrulozcan97/apexui"

const name = ref("")
const toast = useToast()

function submit() {
	toast.success(`Hello, ${name.value}!`)
}
</script>

<template>
	<UInput v-model="name" label="Name" placeholder="Enter your name" />
	<UButton @click="submit">Submit</UButton>
</template>

License

MIT