WinUI 3 control styling,
reimplemented in Vue 3
A Vue 3 component library referencing the native WinUI 3 controls. It is implemented against real Windows behavior and the matching Windows App SDK source rather than the Fluent Design web specification alone: each control is checked state by state (rest / hover / pressed / selected / focus / disabled) for size, corner radius, stroke, fill and motion, and materials use web approximations of Mica / Acrylic . Browsers cannot provide every native capability: system-level animations, haptic feedback and native window behaviors are out of scope for a full reproduction, and the implementation distinguishes faithfully reproduced, approximated and unsupported behavior.
Accessibility
Focus rectangles, color contrast and ARIA semantics
- WAI-ARIA semantics
- Keyboard navigation
- Focus management
- Screen reader support
Component system
Consistent props / event conventions and a composable structure
- Base form controls
- Consistent props / event conventions
- Self-contained styles, on-demand imports
- Composable component structure
Vue 3 + TypeScript
Self-contained styles, design tokens and SSR safety
- Design-token-driven styles
- Ships a UnoCSS preset
- TypeScript type definitions
- SSR-safe (capability detection with harmless defaults)
Documentation and resources
Component props, events, examples and API tables are documented on this site; the entries below cover installation, the component inventory and design tokens.
Installation and setup →
Install @fluere-vue/ui and vue, import the stylesheet, and render your first component.
Component reference →
Browse the implemented component inventory, examples and API tables.
Themes and design tokens →
Design tokens (tokens.css), light / dark themes and the presetFluere theme adapter.
Desktop simulation →
Open an Explorer window assembled from real components in a Windows 11 + WinUI 3 desktop simulation.