diff --git a/docs/component/circle-style.md b/docs/component/circle-style.md
index 0189d2ef..cb455b7a 100644
--- a/docs/component/circle-style.md
+++ b/docs/component/circle-style.md
@@ -1,5 +1,9 @@
 # vl-style-circle
 
+> Styles points as circles.
+
+Use it inside [`vl-style-box`](/docs/component/style-box.md) to style points as circles.
+
 ## ES6 Module
 
 ```javascript
@@ -7,3 +11,109 @@ import { CircleStyle } from 'vuelayers'
 
 Vue.use(CircleStyle)
 ```
+
+## Usage
+
+Styling a feature inside a vector layer.
+
+<vuep template="#circle-style-feature"></vuep>
+
+<script v-pre type="text/x-template" id="circle-style-feature">
+<template>
+  <div>
+    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
+      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+      <vl-layer-tile>
+        <vl-source-osm></vl-source-osm>
+      </vl-layer-tile>
+
+      <vl-layer-vector>
+        <vl-feature>
+          <vl-geom-point
+            :coordinates="[12.492442,41.890170]" 
+          ></vl-geom-point>
+
+          <vl-style-box>
+            <vl-style-circle :radius="20">
+              <vl-style-fill color="white"></vl-style-fill>
+              <vl-style-stroke color="red"></vl-style-stroke>
+            </vl-style-circle>
+          </vl-style-box>
+        </vl-feature>
+      </vl-layer-vector>
+    </vl-map>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [12.492442,41.890170],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+Styling the whole layer
+
+<vuep template="#circle-style-layer"></vuep>
+
+<script v-pre type="text/x-template" id="circle-style-layer">
+<template>
+  <div>
+    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
+      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+      <vl-layer-tile>
+        <vl-source-osm></vl-source-osm>
+      </vl-layer-tile>
+
+      <vl-layer-vector>
+        <vl-source-vector :features="points"></vl-source-vector>
+
+        <vl-style-box>
+          <vl-style-circle :radius="20">
+            <vl-style-fill color="white"></vl-style-fill>
+            <vl-style-stroke color="red"></vl-style-stroke>
+          </vl-style-circle>
+        </vl-style-box>
+      </vl-layer-vector>
+    </vl-map>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [12.492442,41.890170],
+        rotation: 0,
+        points: [
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [12.492442,41.890170],
+            },
+            properties: {},
+          }
+        ],
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### radius
+
+- **Type**: `number`
+
+Radius in pixels of the circle.
diff --git a/docs/component/fill-style.md b/docs/component/fill-style.md
index 772083dc..8a133e02 100644
--- a/docs/component/fill-style.md
+++ b/docs/component/fill-style.md
@@ -1,5 +1,9 @@
 # vl-style-fill
 
+> Color the filling of a polygon or mulipolygon in a vector layer
+
+Use it inside [`vl-style-box`](/docs/component/style-box.md) along with [`vl-style-stroke`](/docs/component/stroke-style.md) to style polygons and other shapes with area like circles.
+
 ## ES6 Module
 
 ```javascript
@@ -7,3 +11,165 @@ import { FillStyle } from 'vuelayers'
 
 Vue.use(FillStyle)
 ```
+
+## Usage
+
+Styling points like circles with filling.
+
+<vuep template="#fill-style-feature"></vuep>
+
+<script v-pre type="text/x-template" id="fill-style-feature">
+<template>
+  <div>
+    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
+      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+      <vl-layer-tile>
+        <vl-source-osm></vl-source-osm>
+      </vl-layer-tile>
+
+      <vl-layer-vector>
+        <vl-feature>
+          <vl-geom-point
+            :coordinates="[12.492442,41.890170]"
+          ></vl-geom-point>
+
+          <vl-style-box>
+            <vl-style-circle :radius="20">
+              <vl-style-fill color="white"></vl-style-fill>
+              <vl-style-stroke color="red"></vl-style-stroke>
+            </vl-style-circle>
+          </vl-style-box>
+        </vl-feature>
+      </vl-layer-vector>
+    </vl-map>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [12.492442,41.890170],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+Styling all features with filling in a layer.
+
+<vuep template="#fill-style-layer"></vuep>
+
+<script v-pre type="text/x-template" id="fill-style-layer">
+<template>
+  <div>
+    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
+      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+      <vl-layer-tile>
+        <vl-source-osm></vl-source-osm>
+      </vl-layer-tile>
+
+      <vl-layer-vector>
+        <vl-source-vector :features="features"></vl-source-vector>
+
+        <vl-style-box>
+          <vl-style-fill color="white"></vl-style-fill>
+          <vl-style-stroke color="red"></vl-style-stroke>
+        </vl-style-box>
+      </vl-layer-vector>
+    </vl-map>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [12.492442,41.890170],
+        rotation: 0,
+        features: [
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [
+                    12.483816146850586,
+                    41.88866861985328
+                  ],
+                  [
+                    12.488279342651365,
+                    41.886687809812926
+                  ],
+                  [
+                    12.489266395568846,
+                    41.89032989704626
+                  ],
+                  [
+                    12.485275268554686,
+                    41.89109662579462
+                  ],
+                  [
+                    12.483816146850586,
+                    41.88866861985328
+                  ]
+                ]
+              ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [
+                    12.491540908813477,
+                    41.89288562375104
+                  ],
+                  [
+                    12.492055892944336,
+                    41.889307577732616
+                  ],
+                  [
+                    12.495832443237305,
+                    41.8896909493925
+                  ],
+                  [
+                    12.495746612548828,
+                    41.89282173182968
+                  ],
+                  [
+                    12.49445915222168,
+                    41.8946745716015
+                  ],
+                  [
+                    12.491540908813477,
+                    41.89288562375104
+                  ]
+                ]
+              ]
+            }
+          }
+        ],
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### color
+
+- **Type**: `string`, `array`
+
+The color either in hexadecimal or as RGB array with red, green, and blue values between 0 and 255 and alpha between 0 and 1 inclusive.
diff --git a/docs/component/stroke-style.md b/docs/component/stroke-style.md
index 34efda0b..93b3556f 100644
--- a/docs/component/stroke-style.md
+++ b/docs/component/stroke-style.md
@@ -1,5 +1,9 @@
 # vl-style-stroke
 
+> Style the stroke of a line or polygon.
+
+Use it inside [`vl-style-box`](/docs/component/style-box.md) to style lines and polygons or inside [`vl-style-circle`](/docs/component/circle-style.md) to style circles.
+
 ## ES6 Module
 
 ```javascript
@@ -7,3 +11,163 @@ import { StrokeStyle } from 'vuelayers'
 
 Vue.use(StrokeStyle)
 ```
+
+## Usage
+
+<vuep template="#stroke-style-example"></vuep>
+
+<script v-pre type="text/x-template" id="stroke-style-example">
+<template>
+  <div>
+    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
+      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+      <vl-layer-tile>
+        <vl-source-osm></vl-source-osm>
+      </vl-layer-tile>
+
+      <vl-layer-vector>
+        <vl-source-vector :features="features"></vl-source-vector>
+
+        <vl-style-box>
+          <vl-style-fill color="white"></vl-style-fill>
+          <vl-style-stroke
+            color="red"
+            :width="3"
+            :line-dash="[3, 5, 30, 5]"
+          ></vl-style-stroke>
+        </vl-style-box>
+      </vl-layer-vector>
+    </vl-map>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [12.492442,41.890170],
+        rotation: 0,
+        features: [
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [
+                    12.483816146850586,
+                    41.88866861985328
+                  ],
+                  [
+                    12.488279342651365,
+                    41.886687809812926
+                  ],
+                  [
+                    12.489266395568846,
+                    41.89032989704626
+                  ],
+                  [
+                    12.485275268554686,
+                    41.89109662579462
+                  ],
+                  [
+                    12.483816146850586,
+                    41.88866861985328
+                  ]
+                ]
+              ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [
+                    12.491540908813477,
+                    41.89288562375104
+                  ],
+                  [
+                    12.492055892944336,
+                    41.889307577732616
+                  ],
+                  [
+                    12.495832443237305,
+                    41.8896909493925
+                  ],
+                  [
+                    12.495746612548828,
+                    41.89282173182968
+                  ],
+                  [
+                    12.49445915222168,
+                    41.8946745716015
+                  ],
+                  [
+                    12.491540908813477,
+                    41.89288562375104
+                  ]
+                ]
+              ]
+            }
+          }
+        ],
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### Color
+
+- **Type**: `array`, `string`
+
+Stroke color. Either in hexadecimal or as RGBA array with red, green, and blue values betweeen 0 and 255 and alpha value between 0 and 1 inclusive.
+
+### lineCap
+
+- **Type**: `string`
+- **Default**: `round`,
+
+How to style the ends of the lines if any. Options are `round`, `butt`, and `square`.
+
+### lineJoin
+
+- **Type**: `string`
+- **Default**: `round`,
+
+How to style line segment joints. Choices are  `round`, `bevel`, `miter`
+
+### lineDash
+
+- **Type**: `array`
+
+An Array of numbers that specify distances to alternately draw a line and a gap.
+
+### lineDashOffset
+
+- **Type**: `number`
+- **Default**: `0`
+
+Offsets the starting point of the dash pattern by the given amount.
+
+### miterLimit
+
+- **Type**: `number`
+- **Default**: `10`
+
+When to cut corners on sharp angles. For reference check [this entry](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit) on Mozilla Developer Network.
+
+### Width
+
+- **Type**: `Number`
+- **Default**: `1.25`
+
+Width of the stroke.
diff --git a/docs/component/style-box.md b/docs/component/style-box.md
index e5627590..f4df35ed 100644
--- a/docs/component/style-box.md
+++ b/docs/component/style-box.md
@@ -1,5 +1,9 @@
 # vl-style-box
 
+> A container for a collection of styles
+
+Use it inside [`vl-feature`](/docs/component/feature.md) or [`vl-layer-vector`](/docs/component/vector-layer.md) to give custom styles to vector features.
+
 ## ES6 Module
 
 ```javascript
@@ -7,3 +11,143 @@ import { StyleBox } from 'vuelayers'
 
 Vue.use(StyleBox)
 ```
+
+## Usage
+
+Styling a feature.
+
+<vuep template="#circle-style-feature"></vuep>
+
+<script v-pre type="text/x-template" id="circle-style-feature">
+<template>
+  <div>
+    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
+      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+      <vl-layer-tile>
+        <vl-source-osm></vl-source-osm>
+      </vl-layer-tile>
+
+      <vl-layer-vector>
+        <vl-feature>
+          <vl-geom-point
+            :coordinates="[12.492442,41.890170]"
+          ></vl-geom-point>
+
+          <vl-style-box>
+            <vl-style-circle :radius="20">
+              <vl-style-fill color="white"></vl-style-fill>
+              <vl-style-stroke color="red"></vl-style-stroke>
+            </vl-style-circle>
+          </vl-style-box>
+        </vl-feature>
+      </vl-layer-vector>
+    </vl-map>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [12.492442,41.890170],
+        rotation: 0,
+      }
+    },
+  }
+</script>
+</script>
+
+Styling the whole layer.
+
+<vuep template="#circle-style-layer"></vuep>
+
+<script v-pre type="text/x-template" id="circle-style-layer">
+<template>
+  <div>
+    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:4326" style="height: 400px">
+      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
+
+      <vl-layer-tile>
+        <vl-source-osm></vl-source-osm>
+      </vl-layer-tile>
+
+      <vl-layer-vector>
+        <vl-source-vector :features="features"></vl-source-vector>
+
+        <vl-style-box>
+          <vl-style-fill color="white"></vl-style-fill>
+          <vl-style-stroke color="red"></vl-style-stroke>
+          <vl-style-icon src="/_media/marker.png" :anchor="[.5, 1]" :scale=".3"></vl-style-icon>
+        </vl-style-box>
+      </vl-layer-vector>
+    </vl-map>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        zoom: 15,
+        center: [12.492442,41.890170],
+        rotation: 0,
+        features: [
+          {
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [12.492442,41.890170],
+            },
+            properties: {},
+          },
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [
+                    12.483816146850586,
+                    41.88866861985328
+                  ],
+                  [
+                    12.488279342651365,
+                    41.886687809812926
+                  ],
+                  [
+                    12.489266395568846,
+                    41.89032989704626
+                  ],
+                  [
+                    12.485275268554686,
+                    41.89109662579462
+                  ],
+                  [
+                    12.483816146850586,
+                    41.88866861985328
+                  ]
+                ]
+              ]
+            }
+          }
+        ],
+      }
+    },
+  }
+</script>
+</script>
+
+## Properties
+
+### z-index
+
+- **Type**: `number`
+- **Default**: `0`
+
+### condition
+
+- **Type**: `Function | Boolean`
+- **Default**: `true`
diff --git a/docs/component/wms-source.md b/docs/component/wms-source.md
index 42b9cbf3..8a46da87 100644
--- a/docs/component/wms-source.md
+++ b/docs/component/wms-source.md
@@ -7,3 +7,12 @@ import { WmsSource } from 'vuelayers'
 
 Vue.use(WmsSource)
 ```
+
+## Properties
+
+### extParams
+
+- **Type**: `object`
+- **Example**: `{tiled: true, tilesOrigin: [0, 0]}`
+
+Extra parameters to be passed to the `TileWMS` constructor. Corresponds to [`params`](https://openlayers.org/en/latest/apidoc/module-ol_source_TileWMS.html) except that other properties like `layers` are specified separately.