diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js
new file mode 100644
index 000000000..dcd50f86f
--- /dev/null
+++ b/.storybook/postcss.config.js
@@ -0,0 +1,31 @@
+const path = require("path");
+const convertImports = require("postcss-import");
+const scopify = require("postcss-scopify");
+const { kebabCase } = require("lodash");
+
+function rewriteRootRule() {
+  return root => {
+    root.walkRules(rule => {
+      rule.selectors = rule.selectors.map(selector => {
+        if (selector === ":root") {
+          return "&";
+        }
+        return selector;
+      });
+    });
+  };
+}
+
+function addIdScope() {
+  return root => {
+    const filename = root.source.input.file;
+    const basename = path.basename(filename, ".css");
+    const id = kebabCase(basename);
+    return scopify(`#${id}`)(root);
+  };
+}
+
+module.exports = {
+  exec: true,
+  plugins: [convertImports(), rewriteRootRule(), addIdScope()],
+};
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 9d298c45b..f173caf32 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,3 +1,6 @@
+import React from "react";
+import { kebabCase } from "lodash";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -6,3 +9,10 @@ export const parameters = {
     hideNoControlsWarning: true,
   },
 };
+
+export const decorators = [
+  (Story, context) => {
+    document.body.id = kebabCase(context.kind);
+    return <Story />;
+  },
+];
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index deef987d7..3a727ed60 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -5,6 +5,19 @@ module.exports = ({ config }) => {
     ...config.resolve.alias,
     "renderless-components": path.resolve(__dirname, "../src"),
   };
+  config.module.rules.push({
+    test: /\.css$/,
+    use: [
+      {
+        loader: require.resolve("postcss-loader"),
+        options: {
+          config: {
+            path: __dirname,
+          },
+        },
+      },
+    ],
+  });
 
   return config;
 };
diff --git a/package.json b/package.json
index f979228db..5f37950f9 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,8 @@
     "lodash": "4.17.20",
     "mockdate": "^3.0.2",
     "outdent": "^0.7.1",
+    "postcss-import": "^12.0.1",
+    "postcss-scopify": "^0.1.9",
     "prettier": "2.1.2",
     "raw-loader": "^4.0.2",
     "react": "16.14.0",
diff --git a/src/accordion/stories/Accordion.component.tsx b/src/accordion/stories/AccordionBasic.component.tsx
similarity index 100%
rename from src/accordion/stories/Accordion.component.tsx
rename to src/accordion/stories/AccordionBasic.component.tsx
diff --git a/src/accordion/stories/Accordion.stories.tsx b/src/accordion/stories/AccordionBasic.stories.tsx
similarity index 81%
rename from src/accordion/stories/Accordion.stories.tsx
rename to src/accordion/stories/AccordionBasic.stories.tsx
index e3cac9a06..4f914c0f8 100644
--- a/src/accordion/stories/Accordion.stories.tsx
+++ b/src/accordion/stories/AccordionBasic.stories.tsx
@@ -2,9 +2,9 @@ import * as React from "react";
 import { Meta } from "@storybook/react";
 
 import { CompositeState } from "reakit/ts";
-import { App as Accordion } from "./Accordion.component";
 import { AccordionInitialState } from "../AccordionState";
-import { accordionTemplate, accordionTemplateJs } from "./templates";
+import { App as Accordion } from "./AccordionBasic.component";
+import { accordionBasicTemplate, accordionBasicTemplateJs } from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export const Default: React.FC<Omit<
@@ -17,8 +17,8 @@ export default {
   title: "Accordion/Basic",
   parameters: {
     preview: createPreviewTabs({
-      js: accordionTemplateJs,
-      ts: accordionTemplate,
+      js: accordionBasicTemplateJs,
+      ts: accordionBasicTemplate,
     }),
   },
 } as Meta;
diff --git a/src/calendar/stories/Calendar.component.tsx b/src/calendar/stories/CalendarBase.component.tsx
similarity index 100%
rename from src/calendar/stories/Calendar.component.tsx
rename to src/calendar/stories/CalendarBase.component.tsx
diff --git a/src/calendar/stories/Calendar.css b/src/calendar/stories/CalendarBase.css
similarity index 100%
rename from src/calendar/stories/Calendar.css
rename to src/calendar/stories/CalendarBase.css
diff --git a/src/calendar/stories/Calendar.stories.tsx b/src/calendar/stories/CalendarBase.stories.tsx
similarity index 88%
rename from src/calendar/stories/Calendar.stories.tsx
rename to src/calendar/stories/CalendarBase.stories.tsx
index 79d613d14..1aadf9c9b 100644
--- a/src/calendar/stories/Calendar.stories.tsx
+++ b/src/calendar/stories/CalendarBase.stories.tsx
@@ -3,18 +3,18 @@ import { Meta, Story } from "@storybook/react";
 import { useArgs } from "@storybook/client-api";
 import { addWeeks, format, subWeeks } from "date-fns";
 
-import "./Calendar.css";
+import "./CalendarBase.css";
 import {
-  calendarTemplate,
-  calendarTemplateJs,
-  calendarCssTemplate,
+  calendarBaseTemplate,
+  calendarBaseTemplateJs,
+  calendarBaseCssTemplate,
 } from "./templates";
-import { App as Calendar } from "./Calendar.component";
+import { App as Calendar } from "./CalendarBase.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: Calendar,
-  title: "Calendar",
+  title: "Calendar/Base",
   argTypes: {
     value: { control: "date" },
     minValue: { control: "date" },
@@ -23,9 +23,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: calendarTemplateJs,
-      ts: calendarTemplate,
-      css: calendarCssTemplate,
+      js: calendarBaseTemplateJs,
+      ts: calendarBaseTemplate,
+      css: calendarBaseCssTemplate,
     }),
   },
 } as Meta;
diff --git a/src/calendar/stories/RangeCalendar.component.tsx b/src/calendar/stories/CalendarRange.component.tsx
similarity index 100%
rename from src/calendar/stories/RangeCalendar.component.tsx
rename to src/calendar/stories/CalendarRange.component.tsx
diff --git a/src/calendar/stories/RangeCalendar.css b/src/calendar/stories/CalendarRange.css
similarity index 100%
rename from src/calendar/stories/RangeCalendar.css
rename to src/calendar/stories/CalendarRange.css
diff --git a/src/calendar/stories/RangeCalendar.stories.tsx b/src/calendar/stories/CalendarRange.stories.tsx
similarity index 90%
rename from src/calendar/stories/RangeCalendar.stories.tsx
rename to src/calendar/stories/CalendarRange.stories.tsx
index 757a5ccd0..b5bb508ca 100644
--- a/src/calendar/stories/RangeCalendar.stories.tsx
+++ b/src/calendar/stories/CalendarRange.stories.tsx
@@ -3,17 +3,17 @@ import { Meta, Story } from "@storybook/react";
 import { useArgs } from "@storybook/client-api";
 import { addDays, addWeeks, subDays, format, subWeeks } from "date-fns";
 
-import "./RangeCalendar.css";
+import "./CalendarRange.css";
 import {
-  rangeCalendarTemplate,
-  rangeCalendarTemplateJs,
-  rangeCalendarCssTemplate,
+  calendarRangeTemplate,
+  calendarRangeTemplateJs,
+  calendarRangeCssTemplate,
 } from "./templates";
-import { App as RangeCalendar } from "./RangeCalendar.component";
+import { App as RangeCalendar } from "./CalendarRange.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
-  title: "RangeCalendar",
+  title: "Calendar/Range",
   component: RangeCalendar,
   argTypes: {
     start: { control: "date", name: "value.start" },
@@ -31,9 +31,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: rangeCalendarTemplateJs,
-      ts: rangeCalendarTemplate,
-      css: rangeCalendarCssTemplate,
+      js: calendarRangeTemplateJs,
+      ts: calendarRangeTemplate,
+      css: calendarRangeCssTemplate,
     }),
   },
 } as Meta;
diff --git a/src/datepicker/stories/DatePicker.component.tsx b/src/datepicker/stories/DatePickerBase.component.tsx
similarity index 100%
rename from src/datepicker/stories/DatePicker.component.tsx
rename to src/datepicker/stories/DatePickerBase.component.tsx
diff --git a/src/datepicker/stories/DatePicker.css b/src/datepicker/stories/DatePickerBase.css
similarity index 100%
rename from src/datepicker/stories/DatePicker.css
rename to src/datepicker/stories/DatePickerBase.css
diff --git a/src/datepicker/stories/DatePicker.stories.tsx b/src/datepicker/stories/DatePickerBase.stories.tsx
similarity index 87%
rename from src/datepicker/stories/DatePicker.stories.tsx
rename to src/datepicker/stories/DatePickerBase.stories.tsx
index fb8f58cb8..37622aa34 100644
--- a/src/datepicker/stories/DatePicker.stories.tsx
+++ b/src/datepicker/stories/DatePickerBase.stories.tsx
@@ -4,17 +4,17 @@ import { useArgs } from "@storybook/client-api";
 import { addWeeks, subWeeks, format, addDays } from "date-fns";
 
 import {
-  datePickerTemplate,
-  datePickerTemplateJs,
-  datePickerCssTemplate,
+  datePickerBaseTemplate,
+  datePickerBaseTemplateJs,
+  datePickerBaseCssTemplate,
 } from "./templates";
-import "./DatePicker.css";
-import { App as DatePicker } from "./DatePicker.component";
+import "./DatePickerBase.css";
+import { App as DatePicker } from "./DatePickerBase.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: DatePicker,
-  title: "DatePicker",
+  title: "DatePicker/Base",
   argTypes: {
     value: { control: "date" },
     minValue: { control: "date" },
@@ -23,9 +23,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: datePickerTemplateJs,
-      ts: datePickerTemplate,
-      css: datePickerCssTemplate,
+      js: datePickerBaseTemplateJs,
+      ts: datePickerBaseTemplate,
+      css: datePickerBaseCssTemplate,
     }),
   },
 } as Meta;
diff --git a/src/datepicker/stories/DateRangePicker.component.tsx b/src/datepicker/stories/DatePickerRange.component.tsx
similarity index 100%
rename from src/datepicker/stories/DateRangePicker.component.tsx
rename to src/datepicker/stories/DatePickerRange.component.tsx
diff --git a/src/datepicker/stories/DateRangePicker.css b/src/datepicker/stories/DatePickerRange.css
similarity index 100%
rename from src/datepicker/stories/DateRangePicker.css
rename to src/datepicker/stories/DatePickerRange.css
diff --git a/src/datepicker/stories/DateRangePicker.stories.tsx b/src/datepicker/stories/DatePickerRange.stories.tsx
similarity index 85%
rename from src/datepicker/stories/DateRangePicker.stories.tsx
rename to src/datepicker/stories/DatePickerRange.stories.tsx
index c57c91ddb..8bbaaea22 100644
--- a/src/datepicker/stories/DateRangePicker.stories.tsx
+++ b/src/datepicker/stories/DatePickerRange.stories.tsx
@@ -5,16 +5,16 @@ import { useArgs } from "@storybook/client-api";
 import { addWeeks, setDate, subWeeks } from "date-fns";
 
 import {
-  dateRangePickerTemplate,
-  dateRangePickerTemplateJs,
-  dateRangePickerCssTemplate,
+  datePickerRangeTemplate,
+  datePickerRangeTemplateJs,
+  datePickerRangeCssTemplate,
 } from "./templates";
-import "./DatePicker.css";
-import { App as DateRangePicker } from "./DateRangePicker.component";
+import "./DatePickerRange.css";
+import { App as DateRangePicker } from "./DatePickerRange.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
-  title: "DateRangePicker",
+  title: "DatePicker/Range",
   component: DateRangePicker,
   argTypes: {
     start: { control: "date", name: "value.start" },
@@ -24,9 +24,9 @@ export default {
   },
   parameters: {
     preview: createPreviewTabs({
-      js: dateRangePickerTemplateJs,
-      ts: dateRangePickerTemplate,
-      css: dateRangePickerCssTemplate,
+      js: datePickerRangeTemplateJs,
+      ts: datePickerRangeTemplate,
+      css: datePickerRangeCssTemplate,
     }),
   },
 } as Meta;
diff --git a/src/number-input/stories/NumberInput.stories.tsx b/src/number-input/stories/NumberInput.stories.tsx
index efb201b85..34f67281d 100644
--- a/src/number-input/stories/NumberInput.stories.tsx
+++ b/src/number-input/stories/NumberInput.stories.tsx
@@ -8,8 +8,8 @@ import {
   NumberInputDecrementButton,
   NumberInputIncrementButton,
 } from "../index";
-import { numberInputTemplate, numberInputTemplateJs } from "./templates";
 import { App as NumberInput } from "./NumberInput.component";
+import { numberInputTemplate, numberInputTemplateJs } from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
diff --git a/src/select/stories/Combobox.stories.tsx b/src/select/stories/Combobox.stories.tsx
index 36978e108..67578050f 100644
--- a/src/select/stories/Combobox.stories.tsx
+++ b/src/select/stories/Combobox.stories.tsx
@@ -7,6 +7,7 @@ import {
   comboboxTemplate,
   comboboxTemplateJs,
 } from "./templates";
+import "./Select.css";
 import { App as Combobox } from "./Combobox.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 import {
@@ -16,7 +17,7 @@ import {
   SelectOption,
   useSelectState,
   SelectInitialState,
-} from "..";
+} from "../index";
 
 export const Default: React.FC<Omit<
   SelectInitialState,
@@ -33,6 +34,12 @@ export default {
       css: selectCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "select";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const countries = [
diff --git a/src/select/stories/Select.stories.tsx b/src/select/stories/Select.stories.tsx
index ac8fed959..233b5c063 100644
--- a/src/select/stories/Select.stories.tsx
+++ b/src/select/stories/Select.stories.tsx
@@ -34,6 +34,12 @@ export default {
       css: selectCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "select";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const countries = [
diff --git a/src/slider/stories/MultiSlider.stories.tsx b/src/slider/stories/MultiSlider.stories.tsx
index 99996fcc1..23cb1d2fc 100644
--- a/src/slider/stories/MultiSlider.stories.tsx
+++ b/src/slider/stories/MultiSlider.stories.tsx
@@ -21,6 +21,12 @@ export default {
       deps: ["reakit@latest"],
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <MultiSlider {...args} />;
diff --git a/src/slider/stories/RangeSlider.stories.tsx b/src/slider/stories/RangeSlider.stories.tsx
index 24b19fb80..83962cb0f 100644
--- a/src/slider/stories/RangeSlider.stories.tsx
+++ b/src/slider/stories/RangeSlider.stories.tsx
@@ -20,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <RangeSlider {...args} />;
diff --git a/src/slider/stories/SingleOriginSlider.stories.tsx b/src/slider/stories/SingleOriginSlider.stories.tsx
index b63048d3f..dff9b4e32 100644
--- a/src/slider/stories/SingleOriginSlider.stories.tsx
+++ b/src/slider/stories/SingleOriginSlider.stories.tsx
@@ -20,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <SingleOriginSlider {...args} />;
diff --git a/src/slider/stories/SingleReversedSlider.stories.tsx b/src/slider/stories/SingleReversedSlider.stories.tsx
index d8c404982..4c4a3095e 100644
--- a/src/slider/stories/SingleReversedSlider.stories.tsx
+++ b/src/slider/stories/SingleReversedSlider.stories.tsx
@@ -20,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <SingleReversedSlider {...args} />;
diff --git a/src/slider/stories/SingleSlider.stories.tsx b/src/slider/stories/SingleSlider.stories.tsx
index 4aa8dd6eb..b808443ac 100644
--- a/src/slider/stories/SingleSlider.stories.tsx
+++ b/src/slider/stories/SingleSlider.stories.tsx
@@ -20,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <SingleSlider {...args} />;
diff --git a/src/slider/stories/SingleVerticalSlider.stories.tsx b/src/slider/stories/SingleVerticalSlider.stories.tsx
index 23edb10bb..2c4511700 100644
--- a/src/slider/stories/SingleVerticalSlider.stories.tsx
+++ b/src/slider/stories/SingleVerticalSlider.stories.tsx
@@ -9,7 +9,6 @@ import {
 } from "./templates";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 import { App as SingleVerticalSlider } from "./SingleVerticalSlider.component";
-import { DefaultPage } from "renderless-components/pagination/stories/Pagination.stories";
 
 export default {
   component: SingleVerticalSlider,
@@ -21,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <SingleVerticalSlider {...args} />;
diff --git a/src/slider/stories/Slider.stories.tsx b/src/slider/stories/Slider.stories.tsx
index bb8322f71..f5398e946 100644
--- a/src/slider/stories/Slider.stories.tsx
+++ b/src/slider/stories/Slider.stories.tsx
@@ -20,6 +20,12 @@ export default {
       css: sliderCssTemplate,
     }),
   },
+  decorators: [
+    Story => {
+      document.body.id = "slider";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 const Base: Story = args => <Slider {...args} />;
diff --git a/src/toast/stories/Toast.component.tsx b/src/toast/stories/ToastBasic.component.tsx
similarity index 100%
rename from src/toast/stories/Toast.component.tsx
rename to src/toast/stories/ToastBasic.component.tsx
diff --git a/src/toast/stories/Toast.css b/src/toast/stories/ToastBasic.css
similarity index 100%
rename from src/toast/stories/Toast.css
rename to src/toast/stories/ToastBasic.css
diff --git a/src/toast/stories/Toast.stories.tsx b/src/toast/stories/ToastBasic.stories.tsx
similarity index 80%
rename from src/toast/stories/Toast.stories.tsx
rename to src/toast/stories/ToastBasic.stories.tsx
index 53e15cbc1..bb8166945 100644
--- a/src/toast/stories/Toast.stories.tsx
+++ b/src/toast/stories/ToastBasic.stories.tsx
@@ -1,15 +1,15 @@
-import "./Toast.css";
 import React from "react";
 import { Meta } from "@storybook/react";
 
 import {
-  toastCssTemplate,
-  toastTemplate,
-  toastTemplateJs,
+  toastBasicCssTemplate,
+  toastBasicTemplate,
+  toastBasicTemplateJs,
   toastUtilsTemplate,
   toastUtilsTemplateJs,
 } from "./templates";
-import { App as Toast } from "./Toast.component";
+import "./ToastBasic.css";
+import { App as Toast } from "./ToastBasic.component";
 import { CreateToastSandbox } from "../../../scripts/create-preview-tabs";
 
 const sandboxJs = CreateToastSandbox({
@@ -23,12 +23,12 @@ const sandboxTs = CreateToastSandbox({
 
 export default {
   component: Toast,
-  title: "Toast/BasicToast",
+  title: "Toast/Basic",
   parameters: {
     preview: [
       {
         tab: "ReactJS",
-        template: toastTemplateJs,
+        template: toastBasicTemplateJs,
         language: "jsx",
         copy: true,
         codesandbox: sandboxJs,
@@ -42,7 +42,7 @@ export default {
       },
       {
         tab: "React",
-        template: toastTemplate,
+        template: toastBasicTemplate,
         language: "tsx",
         copy: true,
         codesandbox: sandboxTs,
@@ -56,7 +56,7 @@ export default {
       },
       {
         tab: "CSS",
-        template: toastCssTemplate,
+        template: toastBasicCssTemplate,
         language: "css",
         copy: true,
         codesandbox: sandboxTs,
diff --git a/src/toast/stories/CSSAnimatedToast.stories.tsx b/src/toast/stories/ToastCSSAnimated.stories.tsx
similarity index 86%
rename from src/toast/stories/CSSAnimatedToast.stories.tsx
rename to src/toast/stories/ToastCSSAnimated.stories.tsx
index 2d9a3b19c..9c0600275 100644
--- a/src/toast/stories/CSSAnimatedToast.stories.tsx
+++ b/src/toast/stories/ToastCSSAnimated.stories.tsx
@@ -1,9 +1,9 @@
-import "./Toast.css";
 import React from "react";
 import { Meta } from "@storybook/react";
 
+import "./ToastBasic.css";
 import {
-  toastCssTemplate,
+  toastBasicCssTemplate,
   toastUtilsTemplate,
   toastUtilsTemplateJs,
   toastCssAnimatedTemplate,
@@ -23,7 +23,7 @@ const sandboxTs = CreateToastSandbox({
 
 export default {
   component: CSSAnimatedToast,
-  title: "Toast/CSSAnimatedToast",
+  title: "Toast/CSSAnimated",
   parameters: {
     preview: [
       {
@@ -56,13 +56,19 @@ export default {
       },
       {
         tab: "CSS",
-        template: toastCssTemplate,
+        template: toastBasicCssTemplate,
         language: "css",
         copy: true,
         codesandbox: sandboxTs,
       },
     ],
   },
+  decorators: [
+    Story => {
+      document.body.id = "toast-basic";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 export const Default = () => <CSSAnimatedToast />;
diff --git a/src/toast/stories/ReactSpringToast.stories.tsx b/src/toast/stories/ToastReactSpring.stories.tsx
similarity index 86%
rename from src/toast/stories/ReactSpringToast.stories.tsx
rename to src/toast/stories/ToastReactSpring.stories.tsx
index 8afb0ea37..8b3e2eb8f 100644
--- a/src/toast/stories/ReactSpringToast.stories.tsx
+++ b/src/toast/stories/ToastReactSpring.stories.tsx
@@ -1,9 +1,9 @@
-import "./Toast.css";
 import React from "react";
 import { Meta } from "@storybook/react";
 
+import "./ToastBasic.css";
 import {
-  toastCssTemplate,
+  toastBasicCssTemplate,
   toastUtilsTemplate,
   toastUtilsTemplateJs,
   toastReactSpringTemplate,
@@ -23,7 +23,7 @@ const sandboxTs = CreateToastSandbox({
 
 export default {
   component: ReactSpringToast,
-  title: "Toast/ReactSpringToast",
+  title: "Toast/ReactSpring",
   parameters: {
     preview: [
       {
@@ -56,13 +56,19 @@ export default {
       },
       {
         tab: "CSS",
-        template: toastCssTemplate,
+        template: toastBasicCssTemplate,
         language: "css",
         copy: true,
         codesandbox: sandboxTs,
       },
     ],
   },
+  decorators: [
+    Story => {
+      document.body.id = "toast-basic";
+      return <Story />;
+    },
+  ],
 } as Meta;
 
 export const Default = () => <ReactSpringToast />;
diff --git a/yarn.lock b/yarn.lock
index d28d92352..12a99a0ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8623,6 +8623,11 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -9372,6 +9377,13 @@ is-core-module@^2.0.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.1.0.tgz#a4cc031d9b1aca63eecbd18a650e13cb4eeab946"
+  integrity sha512-YcV7BgVMRFRua2FqQzKtTDMz8iCuLEyGKjr70q8Zm1yy2qKcurbFEd79PAdHV77oL3NrAaOVQIbMmiHQCHB7ZA==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -10410,6 +10422,11 @@ jest@26.6.1:
     import-local "^3.0.2"
     jest-cli "^26.6.1"
 
+js-base64@^2.1.9:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
+  integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
+
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
@@ -12653,6 +12670,16 @@ postcss-flexbugs-fixes@^4.1.0:
   dependencies:
     postcss "^7.0.26"
 
+postcss-import@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
+  integrity sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==
+  dependencies:
+    postcss "^7.0.1"
+    postcss-value-parser "^3.2.3"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-load-config@^2.0.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.2.tgz#c5ea504f2c4aef33c7359a34de3573772ad7502a"
@@ -12704,6 +12731,13 @@ postcss-modules-values@^3.0.0:
     icss-utils "^4.0.0"
     postcss "^7.0.6"
 
+postcss-scopify@^0.1.9:
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/postcss-scopify/-/postcss-scopify-0.1.9.tgz#c3737606a76c32412d55ce2e5095e89ab586ac56"
+  integrity sha1-w3N2BqdsMkEtVc4uUJXomrWGrFY=
+  dependencies:
+    postcss "^5.0.0"
+
 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
@@ -12714,12 +12748,27 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     uniq "^1.0.1"
     util-deprecate "^1.0.2"
 
+postcss-value-parser@^3.2.3:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
 postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^5.0.0:
+  version "5.2.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
+  integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.35"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
   integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
@@ -13396,6 +13445,13 @@ reactcss@^1.2.0:
   dependencies:
     lodash "^4.0.1"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
+  dependencies:
+    pify "^2.3.0"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -13937,6 +13993,14 @@ resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.1.7:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
+  integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
+  dependencies:
+    is-core-module "^2.1.0"
+    path-parse "^1.0.6"
+
 resolve@^1.18.1:
   version "1.18.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.18.1.tgz#018fcb2c5b207d2a6424aee361c5a266da8f4130"
@@ -14973,6 +15037,13 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
+  dependencies:
+    has-flag "^1.0.0"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"