diff --git a/elm.json b/elm.json
index a381213e..27429755 100644
--- a/elm.json
+++ b/elm.json
@@ -45,6 +45,7 @@
         "Nri.Ui.SegmentedControl.V6",
         "Nri.Ui.Select.V5",
         "Nri.Ui.Svg.V1",
+        "Nri.Ui.SlideModal.V1",
         "Nri.Ui.Table.V3",
         "Nri.Ui.Table.V4",
         "Nri.Ui.Tabs.V3",
diff --git a/src/Nri/Ui/SlideModal/V1.elm b/src/Nri/Ui/SlideModal/V1.elm
new file mode 100644
index 00000000..0a197cf1
--- /dev/null
+++ b/src/Nri/Ui/SlideModal/V1.elm
@@ -0,0 +1,308 @@
+module Nri.Ui.SlideModal.V1 exposing
+    ( Config, Panel
+    , State, closed, open
+    , view
+    )
+
+{-|
+
+@docs Config, Panel
+@docs State, closed, open
+@docs view
+
+-}
+
+import Accessibility.Styled as Html exposing (..)
+import Accessibility.Styled.Aria exposing (labelledBy)
+import Accessibility.Styled.Role as Role
+import Accessibility.Styled.Style
+import Accessibility.Styled.Widget as Widget
+import Css
+import Css.Global
+import Html.Styled
+import Html.Styled.Attributes exposing (css)
+import Html.Styled.Events exposing (onClick)
+import Nri.Ui
+import Nri.Ui.AssetPath exposing (Asset(..))
+import Nri.Ui.Button.V8 as Button
+import Nri.Ui.Colors.Extra
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Fonts.V1 as Fonts
+import Nri.Ui.Icon.V3 as Icon
+import Nri.Ui.Text.V2 as Text
+
+
+{-| -}
+type alias Config msg =
+    { panels : List (Panel msg)
+    , height : Css.Vh
+    , parentMsg : State -> msg
+    }
+
+
+{-| -}
+type State
+    = State (Maybe Int)
+
+
+{-| Create the open state for the modal (the first panel will show).
+-}
+open : State
+open =
+    State (Just 0)
+
+
+{-| Close the modal.
+-}
+closed : State
+closed =
+    State Nothing
+
+
+{-| View the modal (includes the modal backdrop).
+-}
+view : Config msg -> State -> Html msg
+view config state =
+    summarize state config.panels
+        |> Maybe.map (viewPanels config.parentMsg)
+        |> Maybe.map (viewModal config.height >> viewBackdrop)
+        |> Maybe.withDefault (Html.text "")
+
+
+type alias Summary msg =
+    { current : Panel msg
+    , upcoming : List ( State, String )
+    , previous : List ( State, String )
+    }
+
+
+summarize : State -> List (Panel msg) -> Maybe (Summary msg)
+summarize (State state) panels =
+    let
+        indexedPanels =
+            List.indexedMap
+                (\i { title } -> ( State (Just i), title ))
+                panels
+
+        toSummary current currentPanel =
+            { current = currentPanel
+            , upcoming = List.drop (current + 1) indexedPanels
+            , previous = List.take current indexedPanels
+            }
+    in
+    Maybe.andThen
+        (\current ->
+            List.head (List.drop current panels)
+                |> Maybe.map (toSummary current)
+        )
+        state
+
+
+viewModal : Css.Vh -> ( String, List (Html msg) ) -> Html msg
+viewModal height ( labelledById, panels ) =
+    Nri.Ui.styled div
+        "modal-container"
+        [ Css.width (Css.px 600)
+        , Css.height height
+        , Css.maxHeight <| Css.calc (Css.vh 100) Css.minus (Css.px 100)
+        , Css.padding4 (Css.px 35) Css.zero (Css.px 25) Css.zero
+        , Css.margin2 (Css.px 75) Css.auto
+        , Css.backgroundColor Colors.white
+        , Css.borderRadius (Css.px 20)
+        , Css.property "box-shadow" "0 1px 10px 0 rgba(0, 0, 0, 0.35)"
+        , Css.displayFlex
+        , Css.alignItems Css.center
+        , Css.flexDirection Css.column
+        , Css.flexWrap Css.noWrap
+        , Fonts.baseFont
+        ]
+        [ Role.dialog
+        , Widget.modal True
+        , labelledBy labelledById
+        ]
+        panels
+
+
+viewBackdrop : Html msg -> Html msg
+viewBackdrop modal =
+    Nri.Ui.styled div
+        "modal-backdrop-container"
+        (Css.backgroundColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.navy)
+            :: [ Css.height (Css.vh 100)
+               , Css.left Css.zero
+               , Css.overflow Css.hidden
+               , Css.position Css.fixed
+               , Css.top Css.zero
+               , Css.width (Css.pct 100)
+               , Css.zIndex (Css.int 200)
+               , Css.displayFlex
+               , Css.alignItems Css.center
+               , Css.justifyContent Css.center
+               ]
+        )
+        []
+        [ -- This global <style> node sets overflow to hidden on the body element,
+          -- thereby preventing the page from scrolling behind the backdrop when the modal is
+          -- open (and this node is present on the page).
+          Css.Global.global [ Css.Global.body [ Css.overflow Css.hidden ] ]
+        , modal
+        ]
+
+
+{-| Configuration for a single modal view in the sequence of modal views.
+-}
+type alias Panel msg =
+    { icon : Html Never
+    , title : String
+    , content : Html msg
+    , buttonLabel : String
+    }
+
+
+viewPanels : (State -> msg) -> Summary msg -> ( String, List (Html msg) )
+viewPanels parentMsg ({ current } as summary) =
+    let
+        id =
+            "modal-header__" ++ String.replace " " "-" current.title
+    in
+    ( id
+    , [ viewIcon current.icon
+      , Text.subHeading
+            [ span [ Html.Styled.Attributes.id id ] [ Html.text current.title ]
+            ]
+      , viewContent current.content
+      , viewFooter summary |> Html.map parentMsg
+      ]
+    )
+
+
+viewContent : Html msg -> Html msg
+viewContent content =
+    Nri.Ui.styled div
+        "modal-content"
+        [ Css.overflowY Css.auto
+        , Css.padding2 (Css.px 30) (Css.px 45)
+        , Css.width (Css.pct 100)
+        , Css.minHeight (Css.px 150)
+        , Css.marginBottom Css.auto
+        , Css.boxSizing Css.borderBox
+        ]
+        []
+        [ content ]
+
+
+viewIcon : Html Never -> Html msg
+viewIcon svg =
+    div
+        [ css
+            [ Css.width (Css.px 100)
+            , Css.height (Css.px 100)
+            , Css.displayFlex
+            , Css.alignItems Css.center
+            , Css.justifyContent Css.center
+            , Css.Global.children
+                [ Css.Global.svg
+                    [ Css.maxHeight (Css.px 100)
+                    , Css.width (Css.px 100)
+                    ]
+                ]
+            ]
+        ]
+        [ svg ]
+        |> Html.map never
+
+
+viewFooter : Summary msg -> Html State
+viewFooter { previous, current, upcoming } =
+    let
+        nextPanel =
+            List.head upcoming
+                |> Maybe.map Tuple.first
+                |> Maybe.withDefault closed
+    in
+    Nri.Ui.styled div
+        "modal-footer"
+        [ Css.displayFlex
+        , Css.flexDirection Css.column
+        , Css.alignItems Css.center
+        , Css.margin4 (Css.px 20) Css.zero Css.zero Css.zero
+        ]
+        []
+        [ viewFooterButton { label = current.buttonLabel, msg = nextPanel }
+        , (List.map (uncurry Inactive) previous
+            ++ Active
+            :: List.map (uncurry InactiveDisabled) upcoming
+          )
+            |> List.map dot
+            |> div [ css [ Css.marginTop (Css.px 16) ] ]
+        ]
+
+
+uncurry : (a -> b -> c) -> ( a, b ) -> c
+uncurry f ( a, b ) =
+    f a b
+
+
+viewFooterButton : { label : String, msg : msg } -> Html msg
+viewFooterButton { label, msg } =
+    Button.button
+        { onClick = msg
+        , size = Button.Large
+        , style = Button.Primary
+        , width = Button.WidthExact 230
+        }
+        { label = label
+        , state = Button.Enabled
+        , icon = Nothing
+        }
+
+
+type Dot
+    = Active
+    | Inactive State String
+    | InactiveDisabled State String
+
+
+dot : Dot -> Html.Html State
+dot type_ =
+    let
+        styles backgroundColor cursor =
+            css
+                [ Css.height (Css.px 10)
+                , Css.width (Css.px 10)
+                , Css.borderRadius (Css.px 5)
+                , Css.margin2 Css.zero (Css.px 2)
+                , Css.display Css.inlineBlock
+                , Css.cursor cursor
+                , Css.backgroundColor backgroundColor
+
+                -- resets
+                , Css.borderWidth Css.zero
+                , Css.padding Css.zero
+                , Css.hover [ Css.outline Css.none ]
+                ]
+    in
+    case type_ of
+        Active ->
+            Html.div
+                [ styles Colors.azure Css.auto
+                ]
+                []
+
+        Inactive goTo title ->
+            Html.button
+                [ styles Colors.gray75 Css.pointer
+                , onClick goTo
+                ]
+                [ span Accessibility.Styled.Style.invisible
+                    [ text ("Go to " ++ title) ]
+                ]
+
+        InactiveDisabled goTo title ->
+            Html.button
+                [ styles Colors.gray75 Css.auto
+                , Html.Styled.Attributes.disabled True
+                ]
+                [ span Accessibility.Styled.Style.invisible
+                    [ text ("Go to " ++ title) ]
+                ]
diff --git a/styleguide-app/Examples/SlideModal.elm b/styleguide-app/Examples/SlideModal.elm
new file mode 100644
index 00000000..38acf160
--- /dev/null
+++ b/styleguide-app/Examples/SlideModal.elm
@@ -0,0 +1,251 @@
+module Examples.SlideModal exposing (Msg, State, example, init, update)
+
+{-|
+
+@docs Msg, State, example, init, update
+
+-}
+
+import Accessibility.Styled as Html exposing (Html, div, h3, p, text)
+import Assets
+import Css
+import Html.Styled exposing (fromUnstyled)
+import Html.Styled.Attributes exposing (css)
+import ModuleExample exposing (Category(..), ModuleExample)
+import Nri.Ui.Button.V8 as Button
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.SlideModal.V1 as SlideModal
+import Svg exposing (..)
+import Svg.Attributes exposing (..)
+
+
+{-| -}
+type Msg
+    = ModalMsg SlideModal.State
+
+
+{-| -}
+type alias State =
+    { modal : SlideModal.State }
+
+
+{-| -}
+example : (Msg -> msg) -> State -> ModuleExample msg
+example parentMessage state =
+    { filename = "Nri.Ui.SlideModal.V1.elm"
+    , category = Modals
+    , content =
+        [ viewModal state.modal
+        , modalLaunchButton
+        ]
+            |> List.map (Html.map parentMessage)
+    }
+
+
+{-| -}
+init : State
+init =
+    { modal = SlideModal.closed
+    }
+
+
+{-| -}
+update : Msg -> State -> ( State, Cmd Msg )
+update msg state =
+    case msg of
+        ModalMsg modal ->
+            ( { state | modal = modal }, Cmd.none )
+
+
+
+-- INTERNAL
+
+
+modalLaunchButton : Html Msg
+modalLaunchButton =
+    Button.button
+        { onClick = ModalMsg SlideModal.open
+        , size = Button.Small
+        , style = Button.Secondary
+        , width = Button.WidthUnbounded
+        }
+        { label = "Launch Modal"
+        , state = Button.Enabled
+        , icon = Nothing
+        }
+
+
+viewModal : SlideModal.State -> Html Msg
+viewModal state =
+    SlideModal.view
+        { panels =
+            [ { icon = grayBox
+              , title = "Welcome to Self-Review, FirstName!"
+              , content = Html.text "This is where the content goes!"
+              , buttonLabel = "Continue"
+              }
+            , { icon = fancyIcon
+              , title = "Here are the steps we’ll take:"
+              , content =
+                    div [ css [ Css.height (Css.px 400) ] ]
+                        [ Html.text "Sometimes the content may change height."
+                        ]
+              , buttonLabel = "Okay, keep going!"
+              }
+            , { icon = grayBox
+              , title = "As you revise, remember:"
+              , content = Html.text "Sometimes things may change back."
+              , buttonLabel = "Let's get to it!"
+              }
+            ]
+        , height = Css.vh 60
+        , parentMsg = ModalMsg
+        }
+        state
+
+
+grayBox : Html msg
+grayBox =
+    div
+        [ css
+            [ Css.backgroundColor Colors.gray45
+            , Css.height (Css.pct 100)
+            , Css.width (Css.pct 100)
+            ]
+        ]
+        []
+
+
+{-| -}
+fancyIcon : Html msg
+fancyIcon =
+    svg [ viewBox "0 0 100 100", version "1.1" ]
+        [ g
+            [ id "Page-1"
+            , stroke "none"
+            , strokeWidth "1"
+            , fill "none"
+            , fillRule "evenodd"
+            ]
+            [ g
+                [ id "tree-3"
+                , fillRule "nonzero"
+                ]
+                [ Svg.path
+                    [ d "M44.2554458,76.2957186 C36.1962642,76.2957186 29.6386609,69.7388768 29.6386609,61.6796952 L29.6386609,55.8332857 C29.6386609,54.2174899 30.9468311,52.9100811 32.5618657,52.9100811 C34.1776615,52.9100811 35.4858318,54.2174899 35.4858318,55.8332857 L35.4858318,61.6796952 C35.4858318,66.5156609 39.4194799,70.4493092 44.2554458,70.4493092 C45.8712416,70.4493092 47.1786506,71.7567179 47.1786506,73.3725139 C47.1786506,74.9883097 45.8712416,76.2957186 44.2554458,76.2957186 L44.2554458,76.2957186 Z"
+                    , id "Path"
+                    , fill "#D55F05"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M61.7946739,70.4493092 L55.9482646,70.4493092 C54.3324686,70.4493092 53.0250599,69.1419004 53.0250599,67.5261044 C53.0250599,65.9103087 54.3324686,64.6028997 55.9482646,64.6028997 L61.7946739,64.6028997 C66.6298784,64.6028997 70.5642881,60.6692516 70.5642881,55.8332857 C70.5642881,54.2174899 71.8716969,52.9100811 73.4874928,52.9100811 C75.1032886,52.9100811 76.4106974,54.2174899 76.4106974,55.8332857 C76.4106974,63.8924673 69.8530942,70.4493092 61.7946739,70.4493092 L61.7946739,70.4493092 Z"
+                    , id "Path"
+                    , fill "#913F02"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M58.8714693,55.8332857 L58.8714693,95.7256259 L41.3322411,95.7256259 L41.3322411,55.8332857 C41.3322411,54.1961693 42.6175679,52.9100811 44.2554458,52.9100811 L55.9482646,52.9100811 C57.585381,52.9100811 58.8714693,54.1961693 58.8714693,55.8332857 L58.8714693,55.8332857 Z"
+                    , id "Path"
+                    , fill "#D97F4A"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M58.8714693,55.8332857 L58.8714693,95.7256259 L50.1018553,95.7256259 L50.1018553,52.9100811 L55.9482646,52.9100811 C57.585381,52.9100811 58.8714693,54.1961693 58.8714693,55.8332857 L58.8714693,55.8332857 Z"
+                    , id "Path"
+                    , fill "#D55F05"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M99.9326344,40.1063075 L99.9326344,40.164939 C98.9975744,50.2206412 90.0916609,58.1716972 79.5090354,58.7564904 L44.2554458,58.7564904 L49.9259604,51.7412561 C49.984592,51.7412561 50.0432236,51.6826243 50.1018553,51.6239928 C55.246208,49.4020832 58.8714693,44.2569686 58.8714693,38.2940576 C58.8714693,32.2725149 55.246208,27.1274003 50.1018553,24.9054908 C48.2888439,24.0876939 46.3014607,23.6780341 44.2554458,23.6780341 L26.7154562,23.6780341 C25.0783398,23.6780341 23.7922517,22.391946 23.7922517,20.7548294 C23.7922517,9.47090917 32.9715254,0.097465538 44.2554458,0.097465538 L67.6410834,0.097465538 C78.5739756,0.097465538 87.5773547,8.94474751 88.1035161,19.7611378 C95.7621755,23.4442691 100.633929,31.5118267 99.9326344,40.1063075 L99.9326344,40.1063075 Z"
+                    , id "Path"
+                    , fill "#9CDD05"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M99.9326344,40.1063075 L99.9326344,40.164939 C98.9975744,50.2206412 90.0916609,58.1716972 79.5090354,58.7564904 L50.1018553,58.7564904 L50.1018553,51.6239928 C55.246208,49.4020832 58.8714693,44.2569686 58.8714693,38.2940576 C58.8714693,32.2725149 55.246208,27.1274003 50.1018553,24.9054908 L50.1018553,0.097465538 L67.6410834,0.097465538 C78.5739756,0.097465538 87.5773547,8.94474751 88.1035161,19.7611378 C95.7621755,23.4442691 100.633929,31.5118267 99.9326344,40.1063075 L99.9326344,40.1063075 Z"
+                    , id "Path"
+                    , fill "#66BB00"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M50.1018553,18.7080531 C48.2309737,18.1240213 46.3014607,17.8316247 44.2554458,17.8316247 L20.8690469,17.8316247 C15.1985323,17.8316247 9.93615468,20.0535344 6.07789013,24.1455642 C2.16099382,28.2383552 -0.0220819872,33.6751048 0.211682965,39.4050125 C0.796476291,50.045508 10.5795797,58.7564904 21.8048683,58.7564904 L44.2554458,58.7564904 C46.3014607,58.7564904 48.2309737,58.4640938 50.1018553,57.8793006 C58.5204412,55.3657558 64.7178786,47.5312018 64.7178786,38.2940576 C64.7178786,29.0569135 58.5204412,21.2223595 50.1018553,18.7080531 Z"
+                    , id "Path"
+                    , fill "#C3EA21"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M64.7178786,38.2940576 C64.7178786,47.5312018 58.5204412,55.3657558 50.1018553,57.8793006 L50.1018553,18.7080531 C58.5204412,21.2223595 64.7178786,29.0569135 64.7178786,38.2940576 L64.7178786,38.2940576 Z"
+                    , id "Path"
+                    , fill "#9CDD05"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M88.1035161,38.2940576 C88.1035161,39.9083306 86.7945844,41.2172622 85.1803114,41.2172622 C83.5660384,41.2172622 82.2571069,39.9083306 82.2571069,38.2940576 C82.2571069,36.6797847 83.5660384,35.3708529 85.1803114,35.3708529 C86.7945844,35.3708529 88.1035161,36.6797847 88.1035161,38.2940576 L88.1035161,38.2940576 Z"
+                    , id "Path"
+                    , fill "#CD0000"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M76.4106974,20.7548294 C76.4106974,22.3691024 75.1017658,23.6780341 73.4874928,23.6780341 C71.8732199,23.6780341 70.5642881,22.3691024 70.5642881,20.7548294 C70.5642881,19.1405564 71.8732199,17.8316247 73.4874928,17.8316247 C75.1017658,17.8316247 76.4106974,19.1405564 76.4106974,20.7548294 L76.4106974,20.7548294 Z"
+                    , id "Path"
+                    , fill "#CD0000"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M53.0250599,38.2940576 C53.0250599,39.931174 51.7389717,41.2172622 50.1018553,41.2172622 C48.4639774,41.2172622 47.1786506,39.931174 47.1786506,38.2940576 C47.1786506,36.6569411 48.4639774,35.3708529 50.1018553,35.3708529 C51.7389717,35.3708529 53.0250599,36.6569411 53.0250599,38.2940576 Z"
+                    , id "Path"
+                    , fill "#FF637B"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M76.4106974,44.1404669 C76.4106974,45.7547399 75.1017658,47.0636717 73.4874928,47.0636717 C71.8732199,47.0636717 70.5642881,45.7547399 70.5642881,44.1404669 C70.5642881,42.5261939 71.8732199,41.2172622 73.4874928,41.2172622 C75.1017658,41.2172622 76.4106974,42.5261939 76.4106974,44.1404669 L76.4106974,44.1404669 Z"
+                    , id "Path"
+                    , fill "#CD0000"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M41.3322411,44.1404669 C41.3322411,45.7547399 40.0233093,47.0636717 38.4090364,47.0636717 C36.794002,47.0636717 35.4858318,45.7547399 35.4858318,44.1404669 C35.4858318,42.5261939 36.794002,41.2172622 38.4090364,41.2172622 C40.0233093,41.2172622 41.3322411,42.5261939 41.3322411,44.1404669 Z"
+                    , id "Path"
+                    , fill "#FF637B"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M23.7922517,44.1404669 C23.7922517,45.7547399 22.4840813,47.0636717 20.8690469,47.0636717 C19.2547739,47.0636717 17.9458422,45.7547399 17.9458422,44.1404669 C17.9458422,42.5261939 19.2547739,41.2172622 20.8690469,41.2172622 C22.4840813,41.2172622 23.7922517,42.5261939 23.7922517,44.1404669 Z"
+                    , id "Path"
+                    , fill "#FF637B"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M64.7178786,14.9084201 C64.7178786,16.5226931 63.4089469,17.8316247 61.7946739,17.8316247 C60.1796395,17.8316247 58.8714693,16.5226931 58.8714693,14.9084201 C58.8714693,13.2941471 60.1796395,11.9852154 61.7946739,11.9852154 C63.4089469,11.9852154 64.7178786,13.2941471 64.7178786,14.9084201 L64.7178786,14.9084201 Z"
+                    , id "Path"
+                    , fill "#CD0000"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M29.6386609,32.4476482 C29.6386609,34.0619211 28.3304908,35.3708529 26.7154562,35.3708529 C25.1011832,35.3708529 23.7922517,34.0619211 23.7922517,32.4476482 C23.7922517,30.8333752 25.1011832,29.5244436 26.7154562,29.5244436 C28.3304908,29.5244436 29.6386609,30.8333752 29.6386609,32.4476482 Z"
+                    , id "Path"
+                    , fill "#FF637B"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M50.1018553,41.2172622 L50.1018553,35.3708529 C51.7389717,35.3708529 53.0250599,36.6569411 53.0250599,38.2940576 C53.0250599,39.931174 51.7389717,41.2172622 50.1018553,41.2172622 Z"
+                    , id "Path"
+                    , fill "#FF001E"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M76.4106974,96.9530825 C76.4106974,98.5901989 75.1246092,99.8762872 73.4874928,99.8762872 L26.7154562,99.8762872 C25.0783398,99.8762872 23.7922517,98.5901989 23.7922517,96.9530825 C23.7922517,95.3159659 25.0783398,94.0298778 26.7154562,94.0298778 L73.4874928,94.0298778 C75.1246092,94.0298778 76.4106974,95.3159659 76.4106974,96.9530825 L76.4106974,96.9530825 Z"
+                    , id "Path"
+                    , fill "#C3EA21"
+                    ]
+                    []
+                , Svg.path
+                    [ d "M76.4106974,96.9530825 C76.4106974,98.5901989 75.1246092,99.8762872 73.4874928,99.8762872 L50.1018553,99.8762872 L50.1018553,94.0298778 L73.4874928,94.0298778 C75.1246092,94.0298778 76.4106974,95.3159659 76.4106974,96.9530825 L76.4106974,96.9530825 Z"
+                    , id "Path"
+                    , fill "#9CDD05"
+                    ]
+                    []
+                ]
+            ]
+        ]
+        |> fromUnstyled
diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm
index 3ef56678..8c34866c 100644
--- a/styleguide-app/NriModules.elm
+++ b/styleguide-app/NriModules.elm
@@ -15,6 +15,7 @@ import Examples.Modal
 import Examples.Page
 import Examples.SegmentedControl
 import Examples.Select
+import Examples.SlideModal
 import Examples.Table
 import Examples.Tabs
 import Examples.Text
@@ -39,6 +40,7 @@ type alias ModuleStates =
     , textInputExampleState : TextInputExample.State
     , disclosureIndicatorExampleState : Examples.DisclosureIndicator.State
     , modalExampleState : Examples.Modal.State
+    , slideModalExampleState : Examples.SlideModal.State
     , tabsExampleState : Examples.Tabs.Tab
     }
 
@@ -56,6 +58,7 @@ init =
     , textInputExampleState = TextInputExample.init
     , disclosureIndicatorExampleState = Examples.DisclosureIndicator.init
     , modalExampleState = Examples.Modal.init
+    , slideModalExampleState = Examples.SlideModal.init
     , tabsExampleState = Examples.Tabs.First
     }
 
@@ -73,6 +76,7 @@ type Msg
     | TextInputExampleMsg TextInputExample.Msg
     | DisclosureIndicatorExampleMsg Examples.DisclosureIndicator.Msg
     | ModalExampleMsg Examples.Modal.Msg
+    | SlideModalExampleMsg Examples.SlideModal.Msg
     | TabsExampleMsg Examples.Tabs.Tab
     | NoOp
 
@@ -184,6 +188,15 @@ update outsideMsg moduleStates =
             , Cmd.map ModalExampleMsg cmd
             )
 
+        SlideModalExampleMsg msg ->
+            let
+                ( slideModalExampleState, cmd ) =
+                    Examples.SlideModal.update msg moduleStates.slideModalExampleState
+            in
+            ( { moduleStates | slideModalExampleState = slideModalExampleState }
+            , Cmd.map SlideModalExampleMsg cmd
+            )
+
         TabsExampleMsg tab ->
             ( { moduleStates | tabsExampleState = tab }
             , Cmd.none
@@ -232,6 +245,7 @@ nriThemedModules model =
     , Examples.DisclosureIndicator.example DisclosureIndicatorExampleMsg model.disclosureIndicatorExampleState
     , Examples.Colors.example
     , Examples.Modal.example ModalExampleMsg model.modalExampleState
+    , Examples.SlideModal.example SlideModalExampleMsg model.slideModalExampleState
     , Examples.Tabs.example TabsExampleMsg model.tabsExampleState
     ]
 
diff --git a/tests/Spec/Nri/Ui/SlideModal/V1.elm b/tests/Spec/Nri/Ui/SlideModal/V1.elm
new file mode 100644
index 00000000..43778c55
--- /dev/null
+++ b/tests/Spec/Nri/Ui/SlideModal/V1.elm
@@ -0,0 +1,157 @@
+module Spec.Nri.Ui.SlideModal.V1 exposing (all)
+
+import Css
+import Expect exposing (Expectation)
+import Html.Styled as Html
+import Json.Encode
+import Nri.Ui.SlideModal.V1 as SlideModal
+import Test exposing (..)
+import Test.Html.Event as Event
+import Test.Html.Query as Query
+import Test.Html.Selector exposing (..)
+
+
+all : Test
+all =
+    describe "Nri.Ui.SlideModal.V1"
+        [ test "shows first panel when open" <|
+            \() ->
+                SlideModal.open
+                    |> SlideModal.view
+                        { panels = threePanels
+                        , height = Css.vh 60
+                        , parentMsg = identity
+                        }
+                    |> Html.toUnstyled
+                    |> Query.fromHtml
+                    |> Expect.all
+                        [ Query.has [ text "Title1", text "Content1" ]
+                        , Query.hasNot [ text "Title2", text "Content2" ]
+                        , Query.hasNot [ text "Title3", text "Content3" ]
+                        ]
+        , test "shows no panel when closed" <|
+            \() ->
+                SlideModal.closed
+                    |> SlideModal.view
+                        { panels = threePanels
+                        , height = Css.vh 60
+                        , parentMsg = identity
+                        }
+                    |> Html.toUnstyled
+                    |> Query.fromHtml
+                    |> Expect.all
+                        [ Query.hasNot [ text "Title1", text "Content1" ]
+                        , Query.hasNot [ text "Title2", text "Content2" ]
+                        , Query.hasNot [ text "Title3", text "Content3" ]
+                        ]
+        , test "can click through" <|
+            \() ->
+                { panels = threePanels
+                , height = Css.vh 60
+                , parentMsg = identity
+                }
+                    |> initTest
+                    |> click "Continue1"
+                    |> click "Continue2"
+                    |> click "Continue3"
+                    |> assertAndFinish
+                        [ Query.hasNot [ text "Title1", text "Content1" ]
+                        , Query.hasNot [ text "Title2", text "Content2" ]
+                        , Query.hasNot [ text "Title3", text "Content3" ]
+                        ]
+        , test "can navigate back using the dots" <|
+            \() ->
+                { panels = threePanels
+                , height = Css.vh 60
+                , parentMsg = identity
+                }
+                    |> initTest
+                    |> click "Continue1"
+                    |> click "Go to Title1"
+                    |> assertAndFinish
+                        [ Query.has [ text "Title1", text "Content1" ]
+                        , Query.hasNot [ text "Title2", text "Content2" ]
+                        , Query.hasNot [ text "Title3", text "Content3" ]
+                        ]
+        , test "cannot navigate forward using the dots" <|
+            \() ->
+                { panels = threePanels
+                , height = Css.vh 60
+                , parentMsg = identity
+                }
+                    |> initTest
+                    |> click "Continue1"
+                    |> assertAndFinish
+                        [ Query.has [ tag "button", containing [ text "Go to Title1" ] ]
+                        , Query.hasNot [ tag "button", containing [ text "Go to Title2" ] ]
+                        , Query.has [ tag "button", disabled True, containing [ text "Go to Title3" ] ]
+                        ]
+        ]
+
+
+threePanels : List (SlideModal.Panel msg)
+threePanels =
+    [ { icon = Html.text "Icon1"
+      , title = "Title1"
+      , content = Html.text "Content1"
+      , buttonLabel = "Continue1"
+      }
+    , { icon = Html.text "Icon2"
+      , title = "Title2"
+      , content = Html.text "Content 2"
+      , buttonLabel = "Continue2"
+      }
+    , { icon = Html.text "Icon3"
+      , title = "Title3"
+      , content = Html.text "Content 3"
+      , buttonLabel = "Continue3"
+      }
+    ]
+
+
+type alias TestContext =
+    { view : SlideModal.State -> Query.Single SlideModal.State
+    , state : Result String SlideModal.State
+    }
+
+
+initTest : SlideModal.Config SlideModal.State -> TestContext
+initTest config =
+    { view = SlideModal.view config >> Html.toUnstyled >> Query.fromHtml
+    , state = Ok SlideModal.open
+    }
+
+
+click : String -> TestContext -> TestContext
+click buttonText =
+    simulate
+        (Query.find [ tag "button", containing [ text buttonText ] ])
+        Event.click
+
+
+simulate :
+    (Query.Single SlideModal.State -> Query.Single SlideModal.State)
+    -> ( String, Json.Encode.Value )
+    -> TestContext
+    -> TestContext
+simulate findElement event testContext =
+    { testContext
+        | state =
+            Result.andThen
+                (testContext.view
+                    >> findElement
+                    >> Event.simulate event
+                    >> Event.toResult
+                )
+                testContext.state
+    }
+
+
+assertAndFinish : List (Query.Single SlideModal.State -> Expectation) -> TestContext -> Expectation
+assertAndFinish expectations { view, state } =
+    case Result.map view state of
+        Ok query ->
+            Expect.all expectations query
+
+        Err err ->
+            Expect.fail err