diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Example-Code/UIElementsList.swift b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Example-Code/UIElementsList.swift
index 96c7390..c7fe0d7 100644
--- a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Example-Code/UIElementsList.swift
+++ b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Example-Code/UIElementsList.swift
@@ -122,7 +122,7 @@ struct UIElementsList: View {
NavigationLink {
DeviderViews()
} label: {
- Text("Deviders")
+ Text("Dividers")
}
NavigationLink {
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeActionSheet.md b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeActionSheet.md
new file mode 100644
index 0000000..b78a732
--- /dev/null
+++ b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeActionSheet.md
@@ -0,0 +1,72 @@
+## Action Sheet - Preview
+
+| Preview1 |
+| --- |
+| 
|
+
+## Action Sheet code snippets
+Action Sheet with example
+```swift
+struct ActionOptions: Identifiable {
+
+ var name: String
+ var id: UUID = UUID()
+ var icon: String
+
+ static var options: [ActionOptions] = [
+ .init(name: "Camera", icon: "camera"),
+ .init(name: "Photo", icon: "photo"),
+ ]
+
+ func hash(into hasher: inout Hasher) {
+ hasher.combine(id)
+ }
+
+}
+
+struct ActionSheet: View {
+
+ var options: [ActionOptions] = ActionOptions.options
+ @State var showingSheet = false
+
+ var body: some View {
+ List{
+ Section {
+ Text("Gallary Options")
+ .onTapGesture {
+ self.showingSheet.toggle()
+ }
+ }
+
+ }
+ .nitrozenSheet(isPresented: $showingSheet, postion: .bottom, content: {
+ NitrozenActionSheet(
+ title: "Select Profile Picture!!",
+ isShowing:$showingSheet,
+ closeView: NitrozenActionSheet.CustomView.nitrozen,
+ content: {
+ VStack(alignment: .leading, spacing: 12){
+ ForEach(options) { option in
+ HStack(alignment: .top) {
+ Image(systemName: option.icon)
+ Text(option.name)
+ .body(size: .s, weight: .regular)
+ .foregroundColor(.gray)
+ Spacer()
+ }
+ .frame(height: 30.0)
+ .padding(0)
+ }
+
+ }
+ .padding([.top,.bottom], 10)
+
+ })
+
+ })
+
+ }
+
+}
+
+```
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeAlert.md b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeAlert.md
new file mode 100644
index 0000000..b83fe3d
--- /dev/null
+++ b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeAlert.md
@@ -0,0 +1,130 @@
+## Alert - Preview
+
+| Preview1 | Preview2 |
+| --- | --- |
+| 
| 
|
+
+## Alert code snippets
+Alert with example
+```swift
+struct Alerts: View {
+
+ @State var canShowAlert1: Bool = false
+ @State var canShowAlert2: Bool = false
+
+
+ var body: some View {
+
+ List {
+ Section {
+ Text("Alert with Horizontal Actions")
+
+ Button {
+ self.canShowAlert1 = true
+ } label: {
+ Text("Show alert")
+ .frame(maxWidth: .infinity)
+ }
+ .primaryButton()
+ }
+
+ Section {
+ Text("Alert with Verticle Actions")
+
+ Button {
+ self.canShowAlert2 = true
+ } label: {
+ Text("Show alert")
+ .frame(maxWidth: .infinity)
+ }
+ .primaryButton()
+
+ }
+ }
+ .frame(maxWidth: .infinity, maxHeight: .infinity)
+ .background(.red.opacity(0.2))
+ .nitrozenSheet(isPresented: $canShowAlert1, postion: .center) {
+ NitrozenAlert(isPresented: $canShowAlert1,
+ title: "Great! Your bank account was added successfully",
+ subtitle: "You KYC verification is pending. Check your mailbox to complete the process.",
+ topView: AnyView(
+ Image(systemName: "exclamationmark.circle.fill")
+ .resizable()
+ .scaledToFill()
+ .foregroundColor(.orange)
+ .frame(width: 40, height: 40)
+ .padding(.top, 20)
+ .padding(.bottom, 12)
+ ),
+ closeView: .nitrozen,
+ actions: {
+
+ HStack(spacing: 16) {
+ Button {
+ print("tap on button 1")
+ self.canShowAlert1 = false
+ } label: {
+ Text("B1")
+ .frame(maxWidth: .infinity)
+ }
+ .borderedButton()
+
+ Button {
+ print("tap on button 2")
+ self.canShowAlert1 = false
+ } label: {
+ Text("B2")
+ .frame(maxWidth: .infinity)
+ }
+ .primaryButton()
+ }
+ .padding(.horizontal, 8)
+ .padding(.bottom, 48)
+
+ })
+ }
+ .nitrozenSheet(isPresented: $canShowAlert2, postion: .center) {
+ NitrozenAlert(isPresented: $canShowAlert2,
+ title: "Great! Your bank account was added successfully",
+ subtitle: "You KYC verification is pending. Check your mailbox to complete the process.",
+ topView: AnyView(
+ Image(systemName: "checkmark.circle.fill")
+ .resizable()
+ .scaledToFill()
+ .foregroundColor(.green)
+ .frame(width: 40, height: 40)
+ .padding(.top, 20)
+ .padding(.bottom, 12)
+ ),
+ closeView: .nitrozen,
+ actions: {
+
+ VStack(spacing: 16) {
+ Button {
+ print("tap on button 1")
+ self.canShowAlert2 = false
+ } label: {
+ Text("B1")
+ .frame(maxWidth: .infinity)
+ }
+ .borderedButton()
+
+ Button {
+ print("tap on button 2")
+ self.canShowAlert2 = false
+ } label: {
+ Text("B2")
+ .frame(maxWidth: .infinity)
+ }
+ .primaryButton()
+ }
+ .padding(.horizontal, 8)
+ .padding(.bottom, 48)
+
+ })
+ }
+ }
+}
+
+
+```
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeDividerView.md b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeDividerView.md
new file mode 100644
index 0000000..c42eea0
--- /dev/null
+++ b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeDividerView.md
@@ -0,0 +1,91 @@
+## Divider - Preview
+
+| Preview1 |
+| --- |
+| 
|
+
+
+## Divider code snippets
+Divider with example
+```swift
+struct DeviderViews: View {
+
+ var body: some View {
+ List{
+
+ Section {
+ VStack {
+ Text("Default Nitrozen style")
+ NitrozenDivider()
+ }
+ }
+
+ Section {
+ VStack {
+ Text("Default Nitrozen style with horizontal layout\n- custom height, custom color")
+ NitrozenDivider(
+ appearance: NitrozenAppearance.shared
+ .divider.copy
+ .layout(.horizontal(height: 20))
+ .color(NitrozenAppearance.shared.colorProvider.warning50)
+ .shape(.capsule)
+ )
+ }
+ }
+
+ Section {
+ VStack {
+ Text("Default Nitrozen style with horizontal layout\n- custom height, custom color, custom shape")
+ NitrozenDivider(
+ appearance: NitrozenAppearance.shared
+ .divider.copy
+ .layout(.horizontal(height: 20))
+ .color(NitrozenAppearance.shared.colorProvider.success50)
+ .shape(.roundedRectangle(radius: 5))
+ )
+ }
+ }
+
+ Section {
+ VStack {
+ Text("Default Nitrozen style with verticle layout")
+ NitrozenDivider(
+ appearance: NitrozenAppearance.shared
+ .divider.copy
+ .layout(.verticle(width: 1))
+ )
+ }
+ }
+
+ Section {
+ VStack {
+ Text("Default Nitrozen style with verticle layout\n- custom width, custom color")
+ NitrozenDivider(
+ appearance: NitrozenAppearance.shared
+ .divider.copy
+ .layout(.verticle(width: 20))
+ .color(NitrozenAppearance.shared.colorProvider.warning50)
+ .shape(.capsule)
+ )
+ }
+ }
+
+ Section {
+ VStack {
+ Text("Default Nitrozen style with verticle layout\n- custom width, custom color, custom shape")
+ NitrozenDivider(
+ appearance: NitrozenAppearance.shared
+ .divider.copy
+ .layout(.verticle(width: 20))
+ .color(NitrozenAppearance.shared.colorProvider.success50)
+ .shape(.roundedRectangle(radius: 5))
+ )
+ }
+ }
+
+ }
+ }
+}
+
+
+```
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeOTPView.md b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeOTPView.md
new file mode 100644
index 0000000..6df5f18
--- /dev/null
+++ b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeOTPView.md
@@ -0,0 +1,94 @@
+## OTPView - Preview
+
+| Preview1 |
+| --- |
+| 
|
+
+## OTPView code snippets
+OTPView with example
+```swift
+struct OtpView: View {
+ @State var otpcode6:String = ""
+ @State var otpcode7:String = ""
+ @State var otpcode4:String = ""
+ @State var otpcode5:String = ""
+ @State var otpcode3:String = ""
+ @State var otpcode10:String = ""
+
+ var body: some View {
+
+ VStack(spacing: 40) {
+
+ VStack {
+ Text("Nitrozen OTPField")
+ NitrozenOtpTextView(
+ otpCode: $otpcode6,
+ otpCodeLength: 6,
+ placeHolder: "0",
+ validationState: .error
+ )
+ }
+
+ VStack {
+ Text("Nitrozen OTPField")
+ NitrozenOtpTextView(
+ otpCode: $otpcode7,
+ otpCodeLength: 6,
+ placeHolder: "0",
+ validationState: .success,
+ spacing: 4
+ )
+ }
+
+ VStack {
+ Text("SecureField OTPField with custom border color")
+ NitrozenOtpTextView(
+ otpCode: $otpcode4,
+ otpCodeLength: 4,
+ placeHolder: "0",
+ isSecureField: true,
+ isAutoFirstResponder: true,
+ appearance: NitrozenAppearance.shared.otpTextView.copy
+ .borderColor(.green)
+ .fillBorderColor(.blue)
+ .size(CGSize.init(width: 60, height: 40))
+ .borderRadius(0)
+
+ )
+ }
+
+ VStack {
+ Text("Custom Height OTPField")
+ NitrozenOtpTextView(
+ otpCode: $otpcode5,
+ otpCodeLength: 5,
+ placeHolder: "0",
+ appearance: NitrozenAppearance.shared.otpTextView.copy
+ .size(CGSize.init(width: 60, height: 60))
+ )
+ }
+
+ VStack {
+ Text("Custom PlaceHolder")
+ NitrozenOtpTextView(
+ otpCode: $otpcode3,
+ otpCodeLength: 3,
+ placeHolder: "\u{272A}",
+ isAutoFirstResponder: false
+ )
+ }
+
+ VStack {
+ NitrozenOtpTextView(
+ otpCode: $otpcode10,
+ otpCodeLength: 10,
+ placeHolder: "0",
+ appearance: NitrozenAppearance.shared.otpTextView.copy
+ .size(CGSize.init(width: 20, height: 20))
+ )
+ }
+ }
+ Spacer()
+ }
+}
+```
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmePageControl.md b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmePageControl.md
new file mode 100644
index 0000000..f31394e
--- /dev/null
+++ b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmePageControl.md
@@ -0,0 +1,181 @@
+## Page Control - Preview
+
+| Preview1 | Preview2 |
+| --- | --- |
+| 
| 
|
+
+## Page Control code snippets
+Page Control with example
+```swift
+struct PageControls: View {
+
+ let totalPages1 = 5
+ @State var currentPage1: Int = 4
+
+ let totalPages2 = 8
+ @State var currentPage2: Int = 2
+
+ let totalPages3 = 4
+ @State var currentPage3: Int = 3
+
+ let totalPages4 = 6
+ @State var currentPage4: Int = 2
+
+ let totalPages5 = 10
+ @State var currentPage5: Int = 6
+
+ let totalPages6 = 3
+ @State var currentPage6: Int = 1
+
+ var body: some View {
+ List{
+
+ Section {
+
+ Text("Nitrozen style with wider current selection \n- animated next/previous actions")
+ NitrozenPageControl(
+ pageCount: totalPages1,
+ currentPage: $currentPage1,
+ selectedView: .nitrozen, deselectedView: .nitrozen,
+ viewUseCase: .pageControl
+ )
+ Button("Previous") {
+ withAnimation {
+ self.currentPage1 -= 1
+ }
+ }
+ Button("Next") {
+ withAnimation {
+ self.currentPage1 += 1
+ }
+ }
+ }
+
+ Section {
+
+ Text("Nitrozen style with infinity width \n- animated next/previous actions")
+ NitrozenPageControl(
+ pageCount: totalPages6,
+ currentPage: $currentPage6,
+ selectedView: .nitrozen, deselectedView: .nitrozen,
+ viewUseCase: .pageControl,
+ appearance: NitrozenAppearance.shared.pageControl.copy
+ .spacing(10)
+ .selectedColor(.blue.opacity(0.5))
+ .deselectedColor(.gray.opacity(0.5))
+ .selectedViewShape(.capsule).deselectedViewShape(.capsule)
+ .selectedSize(.init(width: Double(CGFloat.infinity), height: 8))
+ .deSelectedSize(.init(width: Double(CGFloat.infinity), height: 8))
+ )
+ Button("Previous") {
+ withAnimation {
+ self.currentPage6 -= 1
+ }
+ }
+ Button("Next") {
+ withAnimation {
+ self.currentPage6 += 1
+ }
+ }
+ }
+
+ Section {
+
+ Text("Nitrozen style with wider current selection \n- custom colors for views and borders")
+ NitrozenPageControl(
+ pageCount: totalPages2,
+ currentPage: $currentPage2,
+ selectedView: .nitrozen, deselectedView: .nitrozen,
+ viewUseCase: .pageControl,
+ appearance: NitrozenAppearance.shared
+ .pageControl.copy
+ .selectedColor(.purple.opacity(0.5)).selectedBorderColor(.purple)
+ .deselectedColor(.purple.opacity(0.5)).deselectedBorderColor(.purple.opacity(0.25))
+ .selectedBorderWidth(2).deselectedBorderWidth(1)
+
+ )
+ Button("Previous") {
+ self.currentPage2 -= 1
+ }
+ Button("Next") {
+ self.currentPage2 += 1
+ }
+ }
+
+ Section {
+ Text("custom .circle style with current selection \n- custom colors for views\n- custom width for borders")
+ NitrozenPageControl(
+ pageCount: totalPages3,
+ currentPage: $currentPage3,
+ selectedView: .nitrozen, deselectedView: .nitrozen,
+ viewUseCase: .pageControl,
+ appearance: NitrozenAppearance.shared
+ .pageControl.copy
+ .selectedViewShape(.circle).deselectedViewShape(.circle)
+ .selectedSize(.init(width: 10, height: 10)).deSelectedSize(.init(width: 10, height: 10))
+ .selectedColor(.purple)
+ .deselectedColor(.purple.opacity(0.5))
+ .selectedBorderWidth(2).deselectedBorderWidth(1)
+
+ )
+ Button("Previous") {
+ self.currentPage3 -= 1
+ }
+ Button("Next") {
+ self.currentPage3 += 1
+ }
+ }
+
+ Section {
+ Text("custom .circle style with current selection \n- custom size \n- custom colors for views")
+ NitrozenPageControl(
+ pageCount: totalPages4,
+ currentPage: $currentPage4,
+ selectedView: .nitrozen, deselectedView: .nitrozen,
+ viewUseCase: .pageControl,
+ appearance: NitrozenAppearance.shared
+ .pageControl.copy
+ .selectedViewShape(.circle).deselectedViewShape(.circle)
+ .selectedSize(.init(width: 30, height: 30)).deSelectedSize(.init(width: 15, height: 15))
+ .selectedColor(.orange)
+ .deselectedColor(.orange.opacity(0.5))
+ )
+ Button("Previous") {
+ self.currentPage4 -= 1
+ }
+ Button("Next") {
+ self.currentPage4 += 1
+ }
+ }
+
+ Section {
+ Text("custom .circle style with current selection \n- custom view - custom size \n- custom colors for views")
+ NitrozenPageControl(
+ pageCount: totalPages5,
+ currentPage: $currentPage5,
+ selectedView: .custom(view: AnyView(
+ Rectangle().cornerRadius(8)
+ )),
+ deselectedView: .custom(view: AnyView(
+ Rectangle().cornerRadius(4)
+ )),
+ viewUseCase: .pageControl,
+ appearance: NitrozenAppearance.shared
+ .pageControl.copy
+ .selectedViewShape(.none).deselectedViewShape(.none)
+ .selectedSize(.init(width: 30, height: 30)).deSelectedSize(.init(width: 15, height: 15))
+ .selectedColor(.pink)
+ .deselectedColor(.pink.opacity(0.5))
+ )
+ Button("Previous") {
+ self.currentPage5 -= 1
+ }
+ Button("Next") {
+ self.currentPage5 += 1
+ }
+ }
+
+ }
+ }
+}
+```
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeSegmentControl.md b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeSegmentControl.md
new file mode 100644
index 0000000..76e5c5d
--- /dev/null
+++ b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/ReadmeSegmentControl.md
@@ -0,0 +1,114 @@
+## Segment Control - Preview
+
+| Preview1 | Preview2 |
+| --- | --- |
+| 
| 
|
+
+## Segment Control code snippets
+Segment Control with example
+```swift
+struct SegmentControlViews: View {
+
+ var options1: [String] = ["Item1", "Item2", "Item3"]
+ @State var selection1: String = "Item2"
+
+ var options2: [String] = ["Item1", "Item2", "Item3"]
+ @State var selection2: String = "Item2"
+
+ var options4: [String] = ["Home", "Office", "Shop", "Market", "Godown", "Truck"]
+ @State var selection4: String = "Male"
+
+ var options5: [String] = ["Item1", "Item2", "Item3"]
+ @State var selection5: String = "Item2"
+
+ var options6: [String] = ["Item1", "Item2", "Item3"]
+ @State var selection6: String = "Item3"
+
+
+ var body: some View {
+ List{
+
+ Section {
+ Text("Segment Control with default apperance\n- full width - Custom fixed height")
+ NitrozenSegmentControl(options: self.options1, selection: $selection1)
+ }
+
+ Section {
+ Text("Segment Control with custom apperance \n- Custom Fixed width - Custom fixed Height")
+ NitrozenSegmentControl(
+ options: self.options2,
+ selection: $selection2,
+ appearance: NitrozenAppearance.shared
+ .segment.copy
+ .itemSize(.init(width: 60, height: 30))
+ .itemSpacing(8)
+ )
+ }
+
+ Section {
+ Text("Segment Control with default apprance\n- Custom View \n- full width - Custom fixed height")
+ NitrozenSegmentControl(
+ options: options5,
+ selection: $selection5,
+ itemBuilder: { item, isSelected in
+
+ HStack {
+ Group {
+ Image(systemName: "heart.fill")
+ Text(item)
+ }.if(isSelected) { group in
+ group
+ .font(NitrozenAppearance.shared.segment.selectedTitleAppearance.font)
+ .foregroundColor(NitrozenAppearance.shared.segment.selectedTitleAppearance.titleColor)
+ }.if(isSelected == false) { group in
+ group
+ .font(NitrozenAppearance.shared.segment.titleAppearance.font)
+ .foregroundColor(NitrozenAppearance.shared.segment.titleAppearance.titleColor)
+ }
+
+ }
+
+ },
+ appearance: nil
+ )
+
+ }
+
+ Section {
+ Text("Segment Control with custom apperance\n- Custom View \n- Custom Fixed width - Custom fixed Height")
+ NitrozenSegmentControl(
+ options: options6,
+ selection: $selection6,
+ itemBuilder: { item, isSelected in
+
+ VStack {
+ Group {
+ Image(systemName: "heart.fill")
+ Spacer().frame(height: 10)
+ Text(item)
+ }.if(isSelected) { group in
+ group
+ .font(NitrozenAppearance.shared.segment.selectedTitleAppearance.font)
+ .foregroundColor(NitrozenAppearance.shared.segment.selectedTitleAppearance.titleColor)
+ }.if(isSelected == false) { group in
+ group
+ .font(NitrozenAppearance.shared.segment.titleAppearance.font)
+ .foregroundColor(NitrozenAppearance.shared.segment.titleAppearance.titleColor)
+ }
+
+ }
+
+ },
+ appearance: NitrozenAppearance.shared
+ .segment.copy
+ .itemSize(.init(width: 90, height: 60))
+ .itemSpacing(8)
+ )
+
+ }
+
+ }
+ }
+}
+
+```
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/actionsheet1.png b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/actionsheet1.png
new file mode 100644
index 0000000..3980a88
Binary files /dev/null and b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/actionsheet1.png differ
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/alert1.png b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/alert1.png
new file mode 100644
index 0000000..f866ee3
Binary files /dev/null and b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/alert1.png differ
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/alert2.png b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/alert2.png
new file mode 100644
index 0000000..90a98c7
Binary files /dev/null and b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/alert2.png differ
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/divider1.png b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/divider1.png
new file mode 100644
index 0000000..1041844
Binary files /dev/null and b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/divider1.png differ
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/otpview1.png b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/otpview1.png
new file mode 100644
index 0000000..e843859
Binary files /dev/null and b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/otpview1.png differ
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/pagecontrol1.png b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/pagecontrol1.png
new file mode 100644
index 0000000..677e535
Binary files /dev/null and b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/pagecontrol1.png differ
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/pagecontrol2.png b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/pagecontrol2.png
new file mode 100644
index 0000000..6c74a85
Binary files /dev/null and b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/pagecontrol2.png differ
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/segmentcontrol1.png b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/segmentcontrol1.png
new file mode 100644
index 0000000..fa9b44e
Binary files /dev/null and b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/segmentcontrol1.png differ
diff --git a/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/segmentcontrol2.png b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/segmentcontrol2.png
new file mode 100644
index 0000000..9a07a32
Binary files /dev/null and b/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview Content/segmentcontrol2.png differ
diff --git a/README.md b/README.md
index 57f2382..9e65d4b 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,18 @@ That takes apperance as optional inputs for its styling, and other inputs as per
* [Avatar](https://github.com/keyur-gofynd/nitrozen-ios/blob/master/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview%20Content/ReadmeAvatar.md)
* [EmptyView](https://github.com/keyur-gofynd/nitrozen-ios/blob/master/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview%20Content/ReadmeEmptyView.md)
+* [OTPView](https://github.com/keyur-gofynd/nitrozen-ios/blob/master/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview%20Content/ReadmeOTPView.md)
+
+* [DividerView](https://github.com/keyur-gofynd/nitrozen-ios/blob/master/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview%20Content/ReadmeDividerView.md)
+
+* [Action Sheet](https://github.com/keyur-gofynd/nitrozen-ios/blob/master/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview%20Content/ReadmeActionSheet.md)
+
+* [Alert](https://github.com/keyur-gofynd/nitrozen-ios/blob/master/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview%20Content/ReadmeAlert.md)
+
+* [Segment Control](https://github.com/keyur-gofynd/nitrozen-ios/blob/master/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview%20Content/ReadmeSegmentControl.md)
+
+* [Page Control](https://github.com/keyur-gofynd/nitrozen-ios/blob/master/Example-Nitrozen-SwiftUI/Example-Nitrozen-SwiftUI/Preview%20Content/ReadmePageControl.md)
+
## Contributors