diff --git a/lib/phlexy_ui/mockup_browser.rb b/lib/phlexy_ui/mockup_browser.rb
new file mode 100644
index 0000000..901a1a1
--- /dev/null
+++ b/lib/phlexy_ui/mockup_browser.rb
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+ # @component html class="mockup-browser"
+ class MockupBrowser < Base
+ def initialize(*, as: :div, **)
+ super(*, **)
+ @as = as
+ end
+
+ def view_template(&)
+ generate_classes!(
+ # "mockup-browser"
+ component_html_class: :"mockup-browser",
+ modifiers_map: modifiers,
+ base_modifiers:,
+ options:
+ ).then do |classes|
+ public_send(as, class: classes, **options, &)
+ end
+ end
+
+ def toolbar(**options, &)
+ generate_classes!(
+ # "mockup-browser-toolbar"
+ component_html_class: :"mockup-browser-toolbar",
+ options:
+ ).then do |classes|
+ div(class: classes, **options, &)
+ end
+ end
+ end
+end
diff --git a/lib/phlexy_ui/mockup_code.rb b/lib/phlexy_ui/mockup_code.rb
new file mode 100644
index 0000000..28880d7
--- /dev/null
+++ b/lib/phlexy_ui/mockup_code.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+ # @component html class="mockup-code"
+ class MockupCode < Base
+ def initialize(*, as: :div, **)
+ super(*, **)
+ @as = as
+ end
+
+ def view_template(&)
+ generate_classes!(
+ # "mockup-code"
+ component_html_class: :"mockup-code",
+ modifiers_map: modifiers,
+ base_modifiers:,
+ options:
+ ).then do |classes|
+ public_send(as, class: classes, **options, &)
+ end
+ end
+ end
+end
diff --git a/lib/phlexy_ui/mockup_phone.rb b/lib/phlexy_ui/mockup_phone.rb
new file mode 100644
index 0000000..9c530cb
--- /dev/null
+++ b/lib/phlexy_ui/mockup_phone.rb
@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+ # @component html class="mockup-phone"
+ class MockupPhone < Base
+ def initialize(*, as: :div, **)
+ super(*, **)
+ @as = as
+ end
+
+ def view_template(&)
+ generate_classes!(
+ # "mockup-phone"
+ component_html_class: :"mockup-phone",
+ modifiers_map: modifiers,
+ base_modifiers:,
+ options:
+ ).then do |classes|
+ public_send(as, class: classes, **options, &)
+ end
+ end
+
+ def camera(**options, &)
+ generate_classes!(
+ # "mockup-phone-camera"
+ component_html_class: :"mockup-phone-camera",
+ options:
+ ).then do |classes|
+ div(class: classes, **options, &)
+ end
+ end
+
+ def display(**options, &)
+ generate_classes!(
+ # "mockup-phone-display"
+ component_html_class: :"mockup-phone-display",
+ options:
+ ).then do |classes|
+ div(class: classes, **options, &)
+ end
+ end
+ end
+end
diff --git a/lib/phlexy_ui/mockup_window.rb b/lib/phlexy_ui/mockup_window.rb
new file mode 100644
index 0000000..73fd938
--- /dev/null
+++ b/lib/phlexy_ui/mockup_window.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+ # @component html class="mockup-window"
+ class MockupWindow < Base
+ def initialize(*, as: :div, **)
+ super(*, **)
+ @as = as
+ end
+
+ def view_template(&)
+ generate_classes!(
+ # "mockup-window"
+ component_html_class: :"mockup-window",
+ modifiers_map: modifiers,
+ base_modifiers:,
+ options:
+ ).then do |classes|
+ public_send(as, class: classes, **options, &)
+ end
+ end
+ end
+end
diff --git a/spec/lib/phlexy_ui/mockup_browser_spec.rb b/spec/lib/phlexy_ui/mockup_browser_spec.rb
new file mode 100644
index 0000000..698a73f
--- /dev/null
+++ b/spec/lib/phlexy_ui/mockup_browser_spec.rb
@@ -0,0 +1,57 @@
+require "spec_helper"
+
+describe PhlexyUI::MockupBrowser do
+ subject(:output) { render described_class.new }
+
+ it "is expected to match the formatted HTML" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ is_expected.to eq(expected_html)
+ end
+
+ describe "with toolbar method" do
+ subject(:output) do
+ render described_class.new do |m|
+ m.toolbar { "Toolbar" }
+ end
+ end
+
+ it "renders toolbar" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+
+ describe "data" do
+ subject(:output) do
+ render described_class.new(data: {foo: "bar"})
+ end
+
+ it "renders it correctly" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+
+ describe "passing :as option" do
+ subject(:output) { render described_class.new(as: :section) }
+
+ it "renders as the given tag" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+end
diff --git a/spec/lib/phlexy_ui/mockup_code_spec.rb b/spec/lib/phlexy_ui/mockup_code_spec.rb
new file mode 100644
index 0000000..5f21253
--- /dev/null
+++ b/spec/lib/phlexy_ui/mockup_code_spec.rb
@@ -0,0 +1,39 @@
+require "spec_helper"
+
+describe PhlexyUI::MockupCode do
+ subject(:output) { render described_class.new }
+
+ it "is expected to match the formatted HTML" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ is_expected.to eq(expected_html)
+ end
+
+ describe "data" do
+ subject(:output) do
+ render described_class.new(data: {foo: "bar"})
+ end
+
+ it "renders it correctly" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+
+ describe "passing :as option" do
+ subject(:output) { render described_class.new(as: :pre) }
+
+ it "renders as the given tag" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+end
diff --git a/spec/lib/phlexy_ui/mockup_phone_spec.rb b/spec/lib/phlexy_ui/mockup_phone_spec.rb
new file mode 100644
index 0000000..4a54c74
--- /dev/null
+++ b/spec/lib/phlexy_ui/mockup_phone_spec.rb
@@ -0,0 +1,59 @@
+require "spec_helper"
+
+describe PhlexyUI::MockupPhone do
+ subject(:output) { render described_class.new }
+
+ it "is expected to match the formatted HTML" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ is_expected.to eq(expected_html)
+ end
+
+ describe "with part methods" do
+ subject(:output) do
+ render described_class.new do |m|
+ m.camera { "Camera" }
+ m.display { "Display" }
+ end
+ end
+
+ it "renders all parts" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+
+ describe "data" do
+ subject(:output) do
+ render described_class.new(data: {foo: "bar"})
+ end
+
+ it "renders it correctly" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+
+ describe "passing :as option" do
+ subject(:output) { render described_class.new(as: :section) }
+
+ it "renders as the given tag" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+end
diff --git a/spec/lib/phlexy_ui/mockup_window_spec.rb b/spec/lib/phlexy_ui/mockup_window_spec.rb
new file mode 100644
index 0000000..3eb9489
--- /dev/null
+++ b/spec/lib/phlexy_ui/mockup_window_spec.rb
@@ -0,0 +1,39 @@
+require "spec_helper"
+
+describe PhlexyUI::MockupWindow do
+ subject(:output) { render described_class.new }
+
+ it "is expected to match the formatted HTML" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ is_expected.to eq(expected_html)
+ end
+
+ describe "data" do
+ subject(:output) do
+ render described_class.new(data: {foo: "bar"})
+ end
+
+ it "renders it correctly" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+
+ describe "passing :as option" do
+ subject(:output) { render described_class.new(as: :section) }
+
+ it "renders as the given tag" do
+ expected_html = html <<~HTML
+
+ HTML
+
+ expect(output).to eq(expected_html)
+ end
+ end
+end