diff --git a/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj b/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj
index 4acbf43..cc676a7 100644
--- a/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj
+++ b/PuraceDemo/PuraceDemo.xcodeproj/project.pbxproj
@@ -12,6 +12,7 @@
 		2F1F7D7328318D9900AA30DB /* TextExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F1F7D7228318D9900AA30DB /* TextExample.swift */; };
 		2F1F7D7528318EEE00AA30DB /* ButtonExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F1F7D7428318EEE00AA30DB /* ButtonExample.swift */; };
 		2F27BC9D284814B600B5AC8D /* TabExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F27BC9C284814B600B5AC8D /* TabExample.swift */; };
+		2F569939285FB93500F2D4D3 /* ModalExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F569938285FB93500F2D4D3 /* ModalExample.swift */; };
 		2F5EFD3C284D23E3005D130A /* HorizontalGridExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F5EFD3B284D23E2005D130A /* HorizontalGridExample.swift */; };
 		2F6267AE2857B6960063A630 /* AccordionExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F6267AD2857B6960063A630 /* AccordionExample.swift */; };
 		2F77A234283C4AC700F143FB /* ImageExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2F77A233283C4AC700F143FB /* ImageExample.swift */; };
@@ -33,6 +34,7 @@
 		2F1F7D7228318D9900AA30DB /* TextExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextExample.swift; sourceTree = "<group>"; };
 		2F1F7D7428318EEE00AA30DB /* ButtonExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonExample.swift; sourceTree = "<group>"; };
 		2F27BC9C284814B600B5AC8D /* TabExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabExample.swift; sourceTree = "<group>"; };
+		2F569938285FB93500F2D4D3 /* ModalExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModalExample.swift; sourceTree = "<group>"; };
 		2F5EFD3B284D23E2005D130A /* HorizontalGridExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HorizontalGridExample.swift; sourceTree = "<group>"; };
 		2F6267AD2857B6960063A630 /* AccordionExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AccordionExample.swift; sourceTree = "<group>"; };
 		2F77A233283C4AC700F143FB /* ImageExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageExample.swift; sourceTree = "<group>"; };
@@ -78,6 +80,7 @@
 				2F072906283C00080098C5AF /* LoaderExample.swift */,
 				2F77A233283C4AC700F143FB /* ImageExample.swift */,
 				2F6267AD2857B6960063A630 /* AccordionExample.swift */,
+				2F569938285FB93500F2D4D3 /* ModalExample.swift */,
 			);
 			path = Basic;
 			sourceTree = "<group>";
@@ -216,6 +219,7 @@
 				2F9321B7282EE49E003DA929 /* MenuView.swift in Sources */,
 				2F9321B3282EE49E003DA929 /* AppDelegate.swift in Sources */,
 				2F6267AE2857B6960063A630 /* AccordionExample.swift in Sources */,
+				2F569939285FB93500F2D4D3 /* ModalExample.swift in Sources */,
 				2F77A234283C4AC700F143FB /* ImageExample.swift in Sources */,
 				2F5EFD3C284D23E3005D130A /* HorizontalGridExample.swift in Sources */,
 				2FA9867B28373DD3000DB409 /* SnackbarExample.swift in Sources */,
diff --git a/PuraceDemo/PuraceDemo/Examples/Basic/ModalExample.swift b/PuraceDemo/PuraceDemo/Examples/Basic/ModalExample.swift
new file mode 100644
index 0000000..6841886
--- /dev/null
+++ b/PuraceDemo/PuraceDemo/Examples/Basic/ModalExample.swift
@@ -0,0 +1,30 @@
+//
+//  ModalExample.swift
+//  PuraceDemo
+//
+//  Created by Juan Hurtado on 19/06/22.
+//
+
+import Foundation
+import SwiftUI
+import Purace
+
+struct ModalExample: View {
+    @State var isVisible = false
+    
+    var body: some View {
+        ZStack {
+            VStack {
+                PuraceButtonView("Mostrar") {
+                    isVisible.toggle()
+                }
+                Spacer()
+            }
+            PuraceModalView(
+                title: "Lorem ipsum",
+                content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+                isVisible: $isVisible
+            )
+        }
+    }
+}
diff --git a/PuraceDemo/PuraceDemo/MenuView.swift b/PuraceDemo/PuraceDemo/MenuView.swift
index c6a6cc9..16f2041 100644
--- a/PuraceDemo/PuraceDemo/MenuView.swift
+++ b/PuraceDemo/PuraceDemo/MenuView.swift
@@ -32,6 +32,9 @@ struct MenuView: View {
                     NavigationLink("Accordion") {
                         AccordionExample()
                     }
+                    NavigationLink("Modal") {
+                        ModalExample()
+                    }
                 }
                 Section(header: Text("Complex")) {
                     NavigationLink("Collection card") {
diff --git a/Sources/Purace/Views/Basic/Modal/PuraceModalView.swift b/Sources/Purace/Views/Basic/Modal/PuraceModalView.swift
new file mode 100644
index 0000000..dfd2c07
--- /dev/null
+++ b/Sources/Purace/Views/Basic/Modal/PuraceModalView.swift
@@ -0,0 +1,74 @@
+//
+//  PuraceModalView.swift
+//  
+//
+//  Created by Juan Hurtado on 19/06/22.
+//
+
+import Foundation
+import SwiftUI
+
+public struct PuraceModalView: View {
+    let titleText: String
+    let contentText: String
+    var isVisible: Binding<Bool>
+    
+    @State var opacity: Double = 0
+    
+    public init(title: String, content: String, isVisible: Binding<Bool>) {
+        self.titleText = title
+        self.contentText = content
+        self.isVisible = isVisible
+    }
+    
+    var title: some View {
+        HStack {
+            PuraceTextView(titleText, fontSize: 14, weight: .medium)
+                .multilineTextAlignment(.leading)
+            Spacer(minLength: 0)
+        }
+    }
+    
+    var content: some View {
+        HStack {
+            PuraceTextView(contentText)
+                .multilineTextAlignment(.leading)
+            Spacer(minLength: 0)
+        }
+    }
+    
+    var card: some View {
+        VStack(spacing: 5) {
+            title
+            content
+        }
+        .padding()
+        .background(Color.white)
+        .opacity(opacity)
+        .cornerRadius(5)
+    }
+    
+    public var body: some View {
+        ZStack {
+            Color.black
+                .opacity(0.7)
+            VStack(spacing: 15) {
+                HStack {
+                    Spacer()
+                    Image(systemName: "xmark")
+                        .foregroundColor(.white)
+                        .onTapGesture {
+                            isVisible.wrappedValue = false
+                        }
+                }
+                card
+            }.padding(.horizontal)
+        }
+        .onChange(of: isVisible.wrappedValue) { visible in
+            withAnimation {
+                opacity = visible ? 1 : 0
+            }
+        }
+        .opacity(opacity)
+    }
+}