Components Overview

fluent-design-vue provides 44+ component families built on Fluent 2 design tokens and reka-ui headless primitives.

通用组件 General

Component	Description	Headless
Button	Button with multiple appearances	Native
Text	Typography component	Native
Link	Link with appearances	Native
Label	Form label	Native
Divider	Horizontal/vertical divider	Native
Image	Image with fit/shape	Native
Avatar	Avatar with initials/image	Native
Badge	Badge indicators	Native
Spinner	Loading spinner	Native
Tag	Tag chips	Native

Component	Description	Headless
Card	Card container	Native
DataGrid	Sortable data grid with selection	TanStack
Table	Data table	Native
List	Vertical list	Native
ProgressBar	Progress indicator	Native
Skeleton	Skeleton loading placeholders	Native
Accordion	Collapsible sections	reka-ui

Component	Description	Headless
Stack	Flexbox layout helper	Native
Provider	Theme provider	Native

vue

<script setup>
import { FuiButton } from 'fluent-design-vue'
</script>

<template>
  <FuiButton appearance="primary">Click me</FuiButton>
</template>

All components are registered globally in the docs so you can use them directly in markdown.