# Fluent UI Svelte > Fluent UI 2 components for Svelte 5, published on npm as `fluentui-svelte`. Every component is exported from the package root, needs `fluentui-svelte/theme.css` and works best inside the `FluentUISvelte` provider. Read the global guide before writing code with the library: it covers setup, the conventions every component shares and the mistakes agents make most often. Each component guide matches the latest release; the installed version ships its own copy in `node_modules/fluentui-svelte/dist/components//docs/llms.md`. ## Docs - [Global guide](https://fluentui-svelte.dev/docs/llms.md): setup, shared conventions, pitfalls and the index of components. - [Types reference](https://fluentui-svelte.dev/docs/types): the shared types named in the prop tables. ## Components - [AppSurface](https://fluentui-svelte.dev/docs/components/app-surface.md): The area of an app that holds its content: a layer over the window or its Mica, with rounded corners next to a SideNav, in the colors of an active or an inactive window. - [AppWindow](https://fluentui-svelte.dev/docs/components/app-window.md): The surface of an app: a Mica window built on the Flyout, with its own border and the shell shadow of an active or an inactive window, sized by a width and a height. - [Auto Suggest Box](https://fluentui-svelte.dev/docs/components/auto-suggest-box.md): An input field that shows dynamic suggestions as the user types, improving form and search efficiency. - [Avatar](https://fluentui-svelte.dev/docs/components/avatar.md): A graphical representation of a user, team, or entity, showing an image, icon, or initials with optional presence status. - [Badge](https://fluentui-svelte.dev/docs/components/badge.md): A visual decoration for UI elements that displays notifications, status indicators, or counts with configurable colors, shapes, and styles. - [Breadcrumb](https://fluentui-svelte.dev/docs/components/breadcrumb.md): A navigation landmark that shows where a page sits in the hierarchy above it, in three sizes and with room for an overflow menu. - [Button](https://fluentui-svelte.dev/docs/components/button.md): A button triggers an action or event when activated, with accent, standard, and subtle appearances. - [Calendar Date Picker](https://fluentui-svelte.dev/docs/components/calendar-date-picker.md): A button trigger paired with a CalendarView popup for selecting a single date. - [Calendar View](https://fluentui-svelte.dev/docs/components/calendar-view.md): An inline calendar for browsing days, months, and years and selecting dates or a range. - [Card](https://fluentui-svelte.dev/docs/components/card.md): A card is a container that displays content and actions on a single topic. - [Checkbox](https://fluentui-svelte.dev/docs/components/checkbox.md): A control a user can check or clear, and that can also report an indeterminate (mixed) state. - [ColorPicker](https://fluentui-svelte.dev/docs/components/color-picker.md): A Fluent color picker with square and circular spectra, RGB and HSV fields, and optional opacity. - [Date Picker](https://fluentui-svelte.dev/docs/components/date-picker.md): An input for selecting a date from carousel-style day, month, and year columns. - [Dialog](https://fluentui-svelte.dev/docs/components/dialog.md): A window overlaid on the page that requires user attention, composed of trigger, surface, title, content, and actions. - [Divider](https://fluentui-svelte.dev/docs/components/divider.md): A horizontal or vertical rule that visually separates content within a layout, with an optional label. - [Dropdown](https://fluentui-svelte.dev/docs/components/dropdown.md): A custom dropdown that lets users select one or more options from a list, with rich option content. - [Dropdown Select](https://fluentui-svelte.dev/docs/components/dropdown-select.md): A native-select-based dropdown for choosing one or more options, with support for rich option content. - [Expander](https://fluentui-svelte.dev/docs/components/expander.md): A control that displays a header and a collapsible content area that can expand up or down. - [File Uploader](https://fluentui-svelte.dev/docs/components/file-uploader.md): A drop zone and file list that picks, drops, captures and imports files, and uploads them to any S3-compatible storage, powered by upup. - [Flyout](https://fluentui-svelte.dev/docs/components/flyout.md): A floating panel that displays additional information or options in a non-intrusive, accessible way. - [Hyperlink](https://fluentui-svelte.dev/docs/components/hyperlink.md): A clickable link that navigates to a specified URL, following Fluent UI design principles with built-in accessibility. - [Info Bar](https://fluentui-svelte.dev/docs/components/info-bar.md): An inline, non-intrusive status message with built-in severity levels and an optional close button. - [Label](https://fluentui-svelte.dev/docs/components/label.md): An accessible caption for a form control, with configurable size, weight, position, and required state. - [List View](https://fluentui-svelte.dev/docs/components/list-view.md): A vertically stacked set of items that can be focused, selected, and navigated with the keyboard. - [Media Player](https://fluentui-svelte.dev/docs/components/media-player.md): A video player with Fluent transport controls: seek bar, volume, subtitles, playback speed, full screen and picture-in-picture, powered by Video.js. - [Menu](https://fluentui-svelte.dev/docs/components/menu.md): A dropdown list of actions or options, with support for groups, submenus, checkable items, and context menus. - [Number Box](https://fluentui-svelte.dev/docs/components/number-box.md): A numeric input with min, max, and step constraints and optional spinner buttons. - [Persona](https://fluentui-svelte.dev/docs/components/persona.md): A visual representation of a person combining an avatar, presence, and up to three lines of text. - [PillButton](https://fluentui-svelte.dev/docs/components/pill-button.md): A checkbox styled as a Fluent pill, with native form submission, validation and reset. - [Progress Bar](https://fluentui-svelte.dev/docs/components/progress-bar.md): A horizontal progress indicator that shows determinate or indeterminate progress, with paused and error states. - [Progress Ring](https://fluentui-svelte.dev/docs/components/progress-ring.md): A circular progress indicator that shows determinate or indeterminate progress, with paused and error states. - [Radio Button](https://fluentui-svelte.dev/docs/components/radio-button.md): A control for choosing a single option from a set of mutually exclusive choices. - [Rating](https://fluentui-svelte.dev/docs/components/rating.md): A control that lets users give a value to an item by selecting one of a row of stars. - [SideNav](https://fluentui-svelte.dev/docs/components/side-nav.md): Collapsible app navigation with an icon rail, floating overlay, nested links, custom content and a pinned footer. - [Skeleton](https://fluentui-svelte.dev/docs/components/skeleton.md): A placeholder that indicates where content will appear while it is loading. - [Slider](https://fluentui-svelte.dev/docs/components/slider.md): A control that lets users select a value from a continuous or discrete range by dragging a thumb along a track. - [TabView](https://fluentui-svelte.dev/docs/components/tab-view.md): A strip of document tabs, with icons, close buttons and a new tab button, that owns the selection and leaves the content to you. - [Table](https://fluentui-svelte.dev/docs/components/table.md): A low level set of primitives to display two dimensional data, with support for sorting, selection and custom cell layouts. - [Tag](https://fluentui-svelte.dev/docs/components/tag.md): A visual representation of an attribute, person or asset that can be dismissed, selected and grouped, with an interactive variant that carries a primary action. - [Tag Picker](https://fluentui-svelte.dev/docs/components/tag-picker.md): A text field and a dropdown that let people choose several options from a list, or enter their own, each choice shown as a dismissible tag. - [Text Box](https://fluentui-svelte.dev/docs/components/text-box.md): A single-line (or configurable) text input for capturing plain text, with search, password, and number types. - [Textarea](https://fluentui-svelte.dev/docs/components/textarea.md): A multiline text input that lets the user enter and edit longer, free-form text. - [Time Picker](https://fluentui-svelte.dev/docs/components/time-picker.md): An input for selecting a time from carousel-style hour, minute, and second columns, in 12- or 24-hour format. - [TitleBar](https://fluentui-svelte.dev/docs/components/title-bar.md): The top bar of an app shell, laid out like a Windows 11 title bar: navigation and app identity at the start, a flexible search at the center, and the person picture and window controls at the end. - [Toggle Switch](https://fluentui-svelte.dev/docs/components/toggle-switch.md): A switch that lets someone choose between two mutually exclusive options with an immediate result. - [Tooltip](https://fluentui-svelte.dev/docs/components/tooltip.md): A small popup that displays additional information about an element when the user hovers over it. - [TopNav](https://fluentui-svelte.dev/docs/components/top-nav.md): A row of navigation items with a bar that travels to whichever one is selected, in four appearances and three sizes. - [Tree View](https://fluentui-svelte.dev/docs/components/tree-view.md): A hierarchical, nested list where each item can be expanded, checked, or selected. ## Optional - [Full documentation](https://fluentui-svelte.dev/llms-full.txt): the global guide and every component guide in one file.