# Vuetning [](https://www.npmjs.org/package/vuetning) [](https://npmjs.org/package/vuetning) 
## Introduction
[Vuetning](https://marceloatg.github.io/vuetning) is a Salesforce Lightning Design System framework for Vue.js 3, you
can find the documentation for vuetning on [https://vuetning.com](https://vuetning.com).
## Components
| Name | Availability | Coverage | Documentation |
|---------------------------------------------------------------------|-------------------------------------------------------|------------------------------------------------|--------------------------------------------------|
| [Accordion](/src/components/slds-accordion) |  |  |  |
| [Accordion Section](/src/components/slds-accordion) |  |  |  |
| [Activity Timeline](/src/components/slds-activity-timeline) |  |  |  |
| [Alert](/src/components/slds-alert) |  |  |  |
| [App Launcher](/src/components/slds-app-launcher) |  |  |  |
| [Avatar](/src/components/slds-avatar) |  |  |  |
| [Avatar Group](/src/components/slds-avatar-group) |  |  |  |
| [Badge](/src/components/slds-badge) |  |  |  |
| [Brand Band](/src/components/slds-brand-band) |  |  |  |
| [Breadcrumbs](/src/components/slds-breadcrumbs) |  |  |  |
| [Builder Header](/src/components/slds-builder-header) |  |  |  |
| [Button](/src/components/slds-button) |  |  |  |
| [Button Group](/src/components/slds-button-group) |  |  |  |
| [Button Icon](/src/components/slds-button-icon) |  |  |  |
| [Card](/src/components/slds-card) |  |  |  |
| [Carousel](/src/components/slds-carousel) |  |  |  |
| [Chat](/src/components/slds-chat) |  |  |  |
| [Checkbox](/src/components/slds-checkbox) |  |  |  |
| [Checkbox Button](/src/components/slds-checkbox-button) |  |  |  |
| [Checkbox Button Group](/src/components/slds-checkbox-button-group) |  |  |  |
| [Checkbox Group](/src/components/slds-checkbox-group) |  |  |  |
| [Checkbox Toggle](/src/components/slds-checkbox-toggle) |  |  |  |
| [Code Block](/src/components/slds-code-block) |  |  |  |
| [Color Picker](/src/components/slds-color-picker) |  |  |  |
| [Combobox](/src/components/slds-combobox) |  |  |  |
| [Counter](/src/components/slds-counter) |  |  |  |
| [Data Table](/src/components/slds-data-table-test) |  |  |  |
| [Date Picker](/src/components/slds-date-picker) |  |  |  |
| [Datetime Picker](/src/components/slds-datetime-picker) |  |  |  |
| [Docked Composer](/src/components/slds-docked-composer) |  |  |  |
| [Docked Form Footer](/src/components/slds-docked-form-footer) |  |  |  |
| [Docked Utility Bar](/src/components/slds-docked-utility-bar) |  |  |  |
| [Drop Zone](/src/components/slds-drop-zone) |  |  |  |
| [Dueling Picklist](/src/components/slds-dueling-picklist) |  |  |  |
| [Dynamic Icon](/src/components/slds-dynamic-icon) |  |  |  |
| [Dynamic Menu](/src/components/slds-dynamic-menu) |  |  |  |
| [Expandable Section](/src/components/slds-expandable-section) |  |  |  |
| [Expression](/src/components/slds-expression) |  |  |  |
| [Feed](/src/components/slds-feed) |  |  |  |
| [Files](/src/components/slds-feed) |  |  |  |
| [File Selector](/src/components/slds-file-selector) |  |  |  |
| [Formatted Date Time](/src/components/slds-formatted-date-time) |  |  |  |
| [Global Header](/src/components/slds-global-header) |  |  |  |
| [Global Navigation](/src/components/slds-global-navigation) |  |  |  |
| [Icon](/src/components/slds-icon) |  |  |  |
| [Illustration](/src/components/slds-illustration) |  |  |  |
| [Input](/src/components/slds-input) |  |  |  |
| [List Builder](/src/components/slds-list-builder) |  |  |  |
| [Lookup](/src/components/slds-lookup) |  |  |  |
| [Map](/src/components/slds-map) |  |  |  |
| [Media Object](/src/components/slds-media-object) |  |  |  |
| [Menu](/src/components/slds-menu) |  |  |  |
| [Modal](/src/components/slds-modal) |  |  |  |
| [Multi Picklist](/src/components/slds-multi-picklist) |  |  |  |
| [Notifications](/src/components/slds-notifications) |  |  |  |
| [Page Header](/src/components/slds-page-header) |  |  |  |
| [Pagination](/src/components/slds-pagination) |  |  |  |
| [Panel](/src/components/slds-panel) |  |  |  |
| [Path](/src/components/slds-path) |  |  |  |
| [Picklist](/src/components/slds-picklist) |  |  |  |
| [Pill](/src/components/slds-pill) |  |  |  |
| [Popover](/src/components/slds-popover) |  |  |  |
| [Progress Bar](/src/components/slds-progress-bar) |  |  |  |
| [Progress Indicator](/src/components/slds-progress-indicator) |  |  |  |
| [Progress Ring](/src/components/slds-progress-ring) |  |  |  |
| [Prompt](/src/components/slds-prompt) |  |  |  |
| [Publisher](/src/components/slds-publisher) |  |  |  |
| [Radio Button Group](/src/components/slds-radio-button-group) |  |  |  |
| [Radio Group](/src/components/slds-radio-group) |  |  |  |
| [Rich Text Editor](/src/components/slds-rich-text-editor) |  |  |  |
| [Scoped Notification](/src/components/slds-scoped-notification) |  |  |  |
| [Scoped Tabs](/src/components/slds-scoped-tabs) |  |  |  |
| [Setup Assistant](/src/components/slds-setup-assistant) |  |  |  |
| [Slider](/src/components/slds-slider) |  |  |  |
| [Spinner](/src/components/slds-spinner) |  |  |  |
| [Split View](/src/components/slds-split-view) |  |  |  |
| [Summary Detail](/src/components/slds-summary-detail) |  |  |  |
| [Tabs](/src/components/slds-tabs) |  |  |  |
| [Text](/src/components/slds-text) |  |  |  |
| [Text Area](/src/components/slds-text-area) |  |  |  |
| [Tile](/src/components/slds-tile) |  |  |  |
| [Time Picker](/src/components/slds-time-picker) |  |  |  |
| [Toast](/src/components/slds-toasts) |  |  |  |
| [Tooltip](/src/components/slds-tooltip) |  |  |  |
| [Tree](/src/components/slds-tree) |  |  |  |
| [Tree Grid](/src/components/slds-tree-grid) |  |  |  |
| [Trial Bar](/src/components/slds-trial-bar) |  |  |  |
| [Vertical Navigation](/src/components/slds-vertical-navigation) |  |  |  |
| [Vertical Tabs](/src/components/slds-vertical-tabs) |  |  |  |
| [Virtual Scroller](/src/components/slds-virtual-scroller) |  |  |  |
| [Visual Picker](/src/components/slds-visual-picker) |  |  |  |
| [Welcome Mat](/src/components/slds-welcome-mat) |  |  |  |
| [Wide Radio Group](/src/components/slds-wide-radio-group) |  |  |  |
## Browser Support
Vuetning is being developed in recent versions of **Chromium** based browsers and **Safari**. Support for **Firefox**
will be added in the future.
## Quick-start CDN
```html
```
## CDN Links
- https://cdn.jsdelivr.net/npm/vuetning/dist/vuetning.umd.min.js
- https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system
# Install inside a NPM project
Vuetning is available as [npm](https://www.npmjs.com/package/vuetning) and [yarn](https://yarnpkg.com/package/vuetning)
packages.
``` bash
# npm
npm install vuetning
```
``` bash
# yarn
yarn add vuetning
```
## Usage
In your `main.js`, or similar entry point, install vuetning using:
### All components
```javascript
import Vue from 'vue'
import Vuetning from 'vuetning'
Vue.use(Vuetning)
```
### Or use individual components:
```javascript
import Vue from 'vue'
import {sldsButton, sldsCombobox, sldsModal} from 'vuetning'
Vue.use(sldsButton)
Vue.use(sldsCombobox)
Vue.use(sldsModal)
```
## License
This project is licensed under the terms of the [MIT license](/LICENSE).