Vlossom

A vibrant and versatile Vue 3 UI library designed to blossom your web applications with elegance and ease.

Note

You are on the v2 project. Check out the v1 project for Vlossom v1.
Both versions will be maintained in parallel.

• Various Color Schemes — Easily style any component with a single prop
• Layered Style Sets — Global, named, or per-instance style overrides via CSS variables
• Overlay System — Modal, Toast, Confirm as plugins with full app context inheritance
• Declarative Responsive — Breakpoint objects instead of media queries
• Async Validation — Sync and async rules with built-in defaults per component
• Dark / Light Theme — One-line global toggle, auto-persisted

Quick Start

# Install
npm install vlossom
# or
pnpm add vlossom

Tip

Vlossom supports per-component tree shaking.
See VLOSSOM_USAGE_GUIDE.md.

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createVlossom, VlossomComponents } from "vlossom";
import "vlossom/styles";

const app = createApp(App);
app.use(
  createVlossom({
    components: VlossomComponents,
  }),
);
app.mount("#app");

<template>
  <vs-button primary>Hello Vlossom</vs-button>
</template>

<script setup lang="ts">
// Components are globally registered via createVlossom — no import needed
</script>

Component Overview

Layout

Component	Description
vs-container	Responsive content container
vs-grid	Grid layout system
vs-layout	Page layout with header, footer, and content
vs-page	Full page wrapper
vs-responsive	Responsive breakpoint wrapper
vs-block	Block-level section wrapper
vs-header	Page header
vs-footer	Page footer

Form

Component	Description
vs-input	Text input field
vs-textarea	Multi-line text input
vs-checkbox	Checkbox and checkbox set
vs-radio	Radio button and radio set
vs-select	Dropdown select
vs-switch	Toggle switch
vs-toggle	Toggle button
vs-file-drop	Drag and drop file upload
vs-search-input	Search input with suggestions
vs-form	Form wrapper with validation
vs-input-wrapper	Input label and message wrapper

Display

Component	Description
vs-accordion	Collapsible content panel
vs-avatar	User avatar
vs-bar	Horizontal bar
vs-chip	Compact label chip
vs-divider	Visual divider line
vs-expandable	Expandable section
vs-grouped-list	Grouped list of items
vs-image	Image with fallback
vs-label-value	Label-value pair display
vs-skeleton	Loading skeleton placeholder
vs-text-wrap	Text with overflow handling

Feedback

Component	Description
vs-loading	Loading spinner
vs-message	Inline message banner
vs-modal	Modal dialog
vs-drawer	Slide-in drawer panel
vs-dimmed	Dimmed overlay
vs-progress	Progress bar
vs-toast	Toast notification

Navigation

Component	Description
vs-tabs	Tab navigation
vs-pagination	Page pagination
vs-steps	Step indicator
vs-index-view	Index-based view switcher

Utility

Component	Description
vs-floating	Floating positioned element
vs-focus-trap	Focus trap for accessibility
vs-inner-scroll	Inner scrollable area
vs-render	Conditional renderer
vs-visible-render	Visibility-based renderer
vs-theme-button	Dark/light theme toggle
vs-tooltip	Tooltip popup

Links

• Changelog
• npm

Contributing

See CONTRIBUTING.md for development setup, commit conventions, and PR guidelines.

Project Structure

vlossom/
├── packages/vlossom/          # Main library package
│   └── src/
│       ├── components/        # UI components
│       ├── composables/       # Shared composables
│       ├── framework/         # Plugin & overlay system
│       ├── icons/             # Icon definitions
│       ├── plugins/           # Toast, Modal, Confirm plugins
│       ├── props/             # Shared prop definitions
│       ├── stores/            # State management
│       ├── styles/            # Global styles
│       └── utils/             # Utility functions
├── .github/                   # GitHub templates & workflows
└── release-please-config.json # Release automation

Component Structure

Each component follows this directory pattern:

vs-[name]/
├── Vs[Name].vue                           # Main component
├── Vs[Name].css                           # Styles
├── types.ts                               # TypeScript types
├── README.md                              # Documentation
├── __tests__/
│   └── vs-[name].test.ts                 # Unit tests
└── __stories__/
    ├── vs-[name].stories.ts              # Storybook stories
    └── vs-[name].chromatic.stories.ts    # Visual regression tests

For complex components, you may also include:

• vs-[name]-rules.ts — validation rules
• icons.ts — component-specific icons
• composables/ — component-specific composables

Releasing

Releases are automated via release-please. When a feat, fix, or chore commit is pushed to main:

1. release-please creates a release PR with version bump and changelog
2. Merging the release PR triggers npm publish automatically

Credits

• Pretendard - Default font (SIL Open Font License 1.1)

License

MIT