> For the complete documentation index, see [llms.txt](https://desislavsd.gitbook.io/vue-select/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://desislavsd.gitbook.io/vue-select/layout-and-theming.md).

# Layout & Theming

Customize the look & feel

### Layout

The component allows to fairly easy customize its layout:

```javascript
import { vSelect } from '@desislavsd/vue-select'
import MyLayout from './components/myVueSelectLayout.vue'

vSelect.components; // { Option, Selected, Layout }

// custom vSelect component that will hide the build in ajax indicator
let MyVSelect = {
    mixins: [vSelect],
    components: {
        Layout: MyLayout
    }
}
```

Here is an example of a valid **Layout** component that contains all the recommended slots and the default CSS classes. 

```markup
<template>
    <div>
        <div class="v-select-bar">
            
            <slot name="selected" /> 

            <div class="v-select-inp-group">
                <slot name="input" />
                <slot name="actions" />
            </div>

        </div>

        <div class="v-select-list" ref="list">
            <slot name="options" />
        </div>

    </div>
</template>

<script>
export default {
    inject: ['select']
}
</script>

<style>
</style>
```

You can add  classes  and elements as you like. You can even add more scoped slots. The scope of each  scoped slot is automatically populated with `{ state, select }`, where `state` contains various state related flags & properties and `select` is the component instance itself.

### Theming

The component utilizes CSS variables to make it easy for you to apply quick changes in component's size and colors. Check the root element in the devtools for the compleet list.&#x20;

```css
.v-select {
    --c-base: #fff; /* background */
    --c-theme: #f0f0f0; /* tags background; options hover */
    --c-border: #ccc; /* border color of root element and tags */
    --radius: 0.2em; /* border radius of root element and tags */
    --padd: 3px; /* tags spacing */
    --height: 3em; /* minimum height; can grow larger when `:multiple=true` */
}
```

#### Scaling

Since all elements are sized using `em` units you can easily scale the component by changing the font size of the root element:

```css
.v-select {
    font-size: 10px;
}
```