diff --git a/.gitignore b/.gitignore
index ac5aa98..c18acde 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,7 @@ migrate_working_dir/
 **/doc/api/
 .dart_tool/
 build/
+
+# Don't check in golden failure output.
+test/**/failures/**
+test_goldens/**/failures/**
\ No newline at end of file
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..6788b48
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,13 @@
+{
+    "configurations": [
+        {
+            "name": "Golden",
+            "request": "launch",
+            "type": "dart",
+            "codeLens": {
+              "for": ["run-test", "run-test-file"]
+            },
+            "args": ["--update-goldens"]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce2e25f..b3143b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,2 +1,8 @@
+## 0.0.2
+
+- Added `HStack` widget.
+- Added `VStack` widget.
+- Added `Rectangle` widget.
+
 ## 0.0.1 - Sept, 2023
 Setting up the project structure. This release is not usable.
diff --git a/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery.xcodeproj/project.pbxproj b/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery.xcodeproj/project.pbxproj
index 1be5564..4651f65 100644
--- a/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery.xcodeproj/project.pbxproj
+++ b/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery.xcodeproj/project.pbxproj
@@ -7,6 +7,8 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		714951452C0EB31C00818B06 /* ShapesPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 714951442C0EB31C00818B06 /* ShapesPage.swift */; };
+		714951472C0EB52400818B06 /* RectangleExamples.swift in Sources */ = {isa = PBXBuildFile; fileRef = 714951462C0EB52400818B06 /* RectangleExamples.swift */; };
 		7179CF832B26DEB900C5927B /* TextTypographyPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7179CF822B26DEB900C5927B /* TextTypographyPage.swift */; };
 		7179CF852B26DEDD00C5927B /* TextAccessibilityPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7179CF842B26DEDD00C5927B /* TextAccessibilityPage.swift */; };
 		7179CF872B26DF0E00C5927B /* TextLocalizationPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7179CF862B26DF0E00C5927B /* TextLocalizationPage.swift */; };
@@ -51,6 +53,8 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
+		714951442C0EB31C00818B06 /* ShapesPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShapesPage.swift; sourceTree = "<group>"; };
+		714951462C0EB52400818B06 /* RectangleExamples.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RectangleExamples.swift; sourceTree = "<group>"; };
 		7179CF822B26DEB900C5927B /* TextTypographyPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextTypographyPage.swift; sourceTree = "<group>"; };
 		7179CF842B26DEDD00C5927B /* TextAccessibilityPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextAccessibilityPage.swift; sourceTree = "<group>"; };
 		7179CF862B26DF0E00C5927B /* TextLocalizationPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextLocalizationPage.swift; sourceTree = "<group>"; };
@@ -105,6 +109,15 @@
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
+		714951432C0EB2C200818B06 /* shapes */ = {
+			isa = PBXGroup;
+			children = (
+				714951442C0EB31C00818B06 /* ShapesPage.swift */,
+				714951462C0EB52400818B06 /* RectangleExamples.swift */,
+			);
+			path = shapes;
+			sourceTree = "<group>";
+		};
 		7179CF882B26E2E900C5927B /* typography */ = {
 			isa = PBXGroup;
 			children = (
@@ -187,6 +200,7 @@
 				C9CAE2B62AE107D30042DBC7 /* scaffolds */,
 				C9CAE2B52AE107C90042DBC7 /* collections */,
 				C9CAE2B42AE107B60042DBC7 /* primitives */,
+				714951432C0EB2C200818B06 /* shapes */,
 				C9CAE2802AC23AB40042DBC7 /* swift_ui_galleryApp.swift */,
 				C9CAE2822AC23AB40042DBC7 /* ContentView.swift */,
 				C9CAE2842AC23AB50042DBC7 /* Assets.xcassets */,
@@ -411,12 +425,14 @@
 				C9CAE2AD2AE106420042DBC7 /* CollectionsPage.swift in Sources */,
 				719116892B216D500007C4DE /* TextPage.swift in Sources */,
 				7179CF852B26DEDD00C5927B /* TextAccessibilityPage.swift in Sources */,
+				714951472C0EB52400818B06 /* RectangleExamples.swift in Sources */,
 				7179CF832B26DEB900C5927B /* TextTypographyPage.swift in Sources */,
 				C9CAE2832AC23AB40042DBC7 /* ContentView.swift in Sources */,
 				C9CAE2BB2AE1089A0042DBC7 /* LayoutsPage.swift in Sources */,
 				C9CAE2B12AE1065F0042DBC7 /* ControlsPage.swift in Sources */,
 				C9CAE2AB2ADFB1480042DBC7 /* PrimitivesPage.swift in Sources */,
 				C9FB17582C0C4D25004479AA /* ZStackExamples.swift in Sources */,
+				714951452C0EB31C00818B06 /* ShapesPage.swift in Sources */,
 				C902DDE72AE3904400242DBA /* TodoPage.swift in Sources */,
 				C9CAE2B32AE1066B0042DBC7 /* MotionPage.swift in Sources */,
 				B3DD96702B66513800F66E9F /* ImageLocalizationPage.swift in Sources */,
diff --git a/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/ContentView.swift b/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/ContentView.swift
index 74498a4..3c9cf27 100644
--- a/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/ContentView.swift
+++ b/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/ContentView.swift
@@ -26,6 +26,10 @@ struct ContentView: View {
             MotionPage().tabItem{
                 Label("Motion", systemImage: "move.3d")
             }
+            
+            ShapesPage().tabItem{
+                Label("Shapes", systemImage: "square.on.circle")
+            }
         }
     }
 }
diff --git a/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/Localizable.xcstrings b/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/Localizable.xcstrings
index 71e829c..cafeb1b 100644
--- a/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/Localizable.xcstrings
+++ b/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/Localizable.xcstrings
@@ -196,12 +196,18 @@
     },
     "First" : {
 
+    },
+    "First\nSecond" : {
+
     },
     "flight" : {
 
     },
     "footnote" : {
 
+    },
+    "Fourth\nFifth\nSixth" : {
+
     },
     "Frame" : {
 
@@ -367,6 +373,9 @@
     },
     "Other initializers" : {
 
+    },
+    "Overlay" : {
+
     },
     "Party LET" : {
 
@@ -412,6 +421,9 @@
     },
     "Raised pitch" : {
 
+    },
+    "Rectangle" : {
+
     },
     "red" : {
 
@@ -455,6 +467,9 @@
     },
     "serif" : {
 
+    },
+    "Shapes" : {
+
     },
     "size 6" : {
 
diff --git a/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/RectangleExamples.swift b/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/RectangleExamples.swift
new file mode 100644
index 0000000..baf49cb
--- /dev/null
+++ b/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/RectangleExamples.swift
@@ -0,0 +1,36 @@
+import SwiftUI
+
+struct RectanglePage: View {
+    var body: some View {
+        ScrollView {
+            VStack(spacing: 20) {
+                // Rectangle with solid fill
+                Rectangle()
+                    .fill(Color.blue)
+                    .frame(width: 200, height: 100)
+                
+                // Rectangle with gradient fill
+                Rectangle()
+                    .fill(LinearGradient(gradient: Gradient(colors: [.yellow, .orange]), startPoint: .leading, endPoint: .trailing))
+                    .frame(width: 200, height: 100)
+                
+                // Rectangle with solid stroke
+                Rectangle()
+                    .stroke(Color.red, lineWidth: 4)
+                    .frame(width: 200, height: 100)
+                
+                // Rectangle with gradient stroke
+                Rectangle()
+                    .stroke(LinearGradient(gradient: Gradient(colors: [.yellow, .blue]), startPoint: .leading, endPoint: .trailing), lineWidth: 14)
+                    .frame(width: 200, height: 100)
+            }
+        }
+    }
+}
+
+struct RectanglePage_Previews: PreviewProvider {
+    static var previews: some View {
+        RectanglePage()
+    }
+}
+
diff --git a/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/ShapesPage.swift b/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/ShapesPage.swift
new file mode 100644
index 0000000..4fbe5ca
--- /dev/null
+++ b/doc_swift_ui_gallery/swift_ui_gallery/swift_ui_gallery/shapes/ShapesPage.swift
@@ -0,0 +1,21 @@
+import SwiftUI
+
+struct ShapesPage: View {
+    var body: some View {
+        NavigationStack {
+            List() {
+                NavigationLink {
+                    RectanglePage()
+                } label: {
+                    Text("Rectangle")
+                }
+            }.navigationTitle("Shapes")
+        }
+    }
+}
+
+struct ShapesPage_Previews: PreviewProvider {
+    static var previews: some View {
+        ShapesPage()
+    }
+}
diff --git a/example/lib/home_screen.dart b/example/lib/home_screen.dart
index d281944..4877ede 100644
--- a/example/lib/home_screen.dart
+++ b/example/lib/home_screen.dart
@@ -1,9 +1,11 @@
 import 'package:example/collections/collection_examples.dart';
 import 'package:example/controls/controls_examples.dart';
+import 'package:example/infrastructure/inventory_page.dart';
 import 'package:example/layouts/layout_examples.dart';
 import 'package:example/motion/motion_examples.dart';
 import 'package:example/primitives/primitive_examples.dart';
 import 'package:example/scaffolds/scaffold_examples.dart';
+import 'package:example/shapes/shapes_examples.dart';
 import 'package:flutter/cupertino.dart';
 
 class HomeScreen extends StatefulWidget {
@@ -29,9 +31,7 @@ class _HomeScreenState extends State<HomeScreen> {
           case 3:
             return const ScaffoldsPage();
           case 4:
-            return const ControlsPage();
-          case 5:
-            return const MotionPage();
+            return const OverflowPage();
           default:
             throw Exception("Unknown tab index: $index");
         }
@@ -55,15 +55,41 @@ class _HomeScreenState extends State<HomeScreen> {
             label: "Scaffolds",
           ),
           BottomNavigationBarItem(
-            icon: Icon(CupertinoIcons.slider_horizontal_3),
-            label: "Controls",
-          ),
-          BottomNavigationBarItem(
-            icon: Icon(CupertinoIcons.move),
-            label: "Motion",
+            icon: Icon(CupertinoIcons.ellipsis),
+            label: "More",
           ),
         ],
       ),
     );
   }
 }
+
+class OverflowPage extends StatelessWidget {
+  const OverflowPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return InventoryPage(
+      title: "More",
+      groups: [
+        InventoryGroup(
+          title: 'ADDITIONAL CATEGORIES',
+          items: [
+            InventoryItem(
+              label: "Controls",
+              pageBuilder: (context) => const ControlsPage(),
+            ),
+            InventoryItem(
+              label: "Motion",
+              pageBuilder: (context) => const MotionPage(),
+            ),
+            InventoryItem(
+              label: "Shapes",
+              pageBuilder: (context) => const ShapesPage(),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}
diff --git a/example/lib/shapes/rectangle.dart b/example/lib/shapes/rectangle.dart
new file mode 100644
index 0000000..fb3ab8c
--- /dev/null
+++ b/example/lib/shapes/rectangle.dart
@@ -0,0 +1,57 @@
+import 'package:flutter/widgets.dart';
+import 'package:swift_ui/swift_ui.dart';
+
+class RectangleDemo extends StatelessWidget {
+  const RectangleDemo({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return const VStack(
+      [
+        // Rectangle with solid fill
+        Frame(
+          width: 200,
+          height: 100,
+          child: Rectangle(
+            fillColor: Colors.blue,
+          ),
+        ),
+
+        // Rectangle with gradient fill
+        Frame(
+          width: 200,
+          height: 100,
+          child: Rectangle(
+            fillGradient: LinearGradient(
+              colors: [Colors.yellow, Colors.orange],
+            ),
+          ),
+        ),
+
+        // Rectangle with solid stroke
+        Frame(
+          width: 200,
+          height: 100,
+          child: Rectangle(
+            strokeColor: Colors.red,
+            strokeLineWidth: 4.0,
+          ),
+        ),
+
+        // Rectangle with gradient stroke
+        Frame(
+          width: 200,
+          height: 100,
+          child: Rectangle(
+            strokeGradient: LinearGradient(
+              colors: [Colors.yellow, Colors.blue],
+            ),
+            strokeLineWidth: 14.0,
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/example/lib/shapes/shapes_examples.dart b/example/lib/shapes/shapes_examples.dart
new file mode 100644
index 0000000..658ab10
--- /dev/null
+++ b/example/lib/shapes/shapes_examples.dart
@@ -0,0 +1,25 @@
+import 'package:example/demo_screen.dart';
+import 'package:example/infrastructure/inventory_page.dart';
+import 'package:example/shapes/rectangle.dart';
+import 'package:flutter/cupertino.dart';
+
+class ShapesPage extends StatelessWidget {
+  const ShapesPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return InventoryPage(
+      title: "Shapes",
+      groups: [
+        InventoryGroup(
+          items: [
+            InventoryItem(
+              label: "Rectangle",
+              pageBuilder: createDemo(const RectangleDemo()),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}
diff --git a/example/macos/Runner.xcodeproj/project.pbxproj b/example/macos/Runner.xcodeproj/project.pbxproj
index 27e0f50..7d9ca67 100644
--- a/example/macos/Runner.xcodeproj/project.pbxproj
+++ b/example/macos/Runner.xcodeproj/project.pbxproj
@@ -227,7 +227,7 @@
 			isa = PBXProject;
 			attributes = {
 				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 1430;
+				LastUpgradeCheck = 1510;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					331C80D4294CF70F00263BE5 = {
diff --git a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
index 397f3d3..15368ec 100644
--- a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
+++ b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1430"
+   LastUpgradeVersion = "1510"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
diff --git a/lib/src/layout/alignment.dart b/lib/src/layout/alignment.dart
new file mode 100644
index 0000000..2a68a1c
--- /dev/null
+++ b/lib/src/layout/alignment.dart
@@ -0,0 +1,150 @@
+import 'package:flutter/painting.dart' as painting;
+
+enum HorizontalAlignment {
+  /// Alignment with the "leading" or "starting" edge of a bounding space.
+  ///
+  /// In a left-to-right layout context, the leading edge is the left edge.
+  leading,
+
+  /// Alignment that's equidistant from the left and right edges of a bounding space.
+  center,
+
+  /// Alignment with the "trailing" or "ending" edge of a bounding space.
+  ///
+  /// In a left-to-right layout context, the trailing edge is the right edge.
+  trailing,
+
+  /// Alignment with the leading edge of a list separator - this alignment is only
+  /// relevant when a widget is displayed within a list that has dividers.
+  listRowSeparatorLeading,
+
+  /// Alignment with the trailing edge of a list separator - this alignment is only
+  /// relevant when a widget is displayed within a list that has dividers.
+  listRowSeparatorTrailing,
+}
+
+enum VerticalAlignment {
+  /// Alignment with the top of a bounding space.
+  top,
+
+  /// Alignment that's equidistant from the top and bottom of a bounding space.
+  center,
+
+  /// Alignment with the bottom of a bounding space.
+  bottom,
+
+  /// Alignment with the baseline of the first line of text within another widget.
+  firstTextBaseline,
+
+  /// Alignment with the baseline of the last line of text within another widget.
+  lastTextBaseline,
+}
+
+enum Alignment {
+  /// Alignment that's equidistant from all edges of the bounding space.
+  center(horizontal: HorizontalAlignment.center, vertical: VerticalAlignment.center),
+
+  /// Alignment with the "leading" (or "starting") edge of the bounding space.
+  ///
+  /// In a left-to-right layout context, this is the left-most edge.
+  leading(horizontal: HorizontalAlignment.leading, vertical: VerticalAlignment.center),
+
+  /// Alignment with the "trailing" (or "ending") edge of the bounding space.
+  ///
+  /// In a left-to-right layout context, this is the right-most edge.
+  trailing(horizontal: HorizontalAlignment.trailing, vertical: VerticalAlignment.center),
+
+  /// Alignment with the top edge of the bounding space.
+  top(horizontal: HorizontalAlignment.center, vertical: VerticalAlignment.top),
+
+  /// Alignment with the bottom edge of the bounding space.
+  bottom(horizontal: HorizontalAlignment.center, vertical: VerticalAlignment.bottom),
+
+  /// Alignment with the top and "leading" (or "starting") edges of the bounding space.
+  ///
+  /// In a left-to-right layout context, this is the top-left corner.
+  topLeading(horizontal: HorizontalAlignment.leading, vertical: VerticalAlignment.top),
+
+  /// Alignment with the top and "trailing" (or "ending") edges of the bounding space.
+  ///
+  /// In a left-to-right layout context, this is the top-right corner.
+  topTrailing(horizontal: HorizontalAlignment.trailing, vertical: VerticalAlignment.top),
+
+  /// Alignment with the bottom and "leading" (or "starting") edges of the bounding space.
+  ///
+  /// In a left-to-right layout context, this is the bottom-left corner.
+  bottomLeading(horizontal: HorizontalAlignment.leading, vertical: VerticalAlignment.bottom),
+
+  /// Alignment with the bottom and "trailing" (or "ending") edges of the bounding space.
+  ///
+  /// In a left-to-right layout context, this is the bottom-right corner.
+  bottomTrailing(horizontal: HorizontalAlignment.trailing, vertical: VerticalAlignment.bottom),
+
+  /// Alignment with the top-most baseline.
+  centerFirstTextBaseline(horizontal: HorizontalAlignment.center, vertical: VerticalAlignment.firstTextBaseline),
+
+  /// Alignment with the bottom-most baseline.
+  centerLastTextBaseline(horizontal: HorizontalAlignment.center, vertical: VerticalAlignment.lastTextBaseline),
+
+  /// Alignment with the "leading" (or "starting") edge of the top-most baseline.
+  ///
+  /// In a left-to-right layout context, this is the left edge of the first line of text.
+  leadingFirstTextBaseline(horizontal: HorizontalAlignment.leading, vertical: VerticalAlignment.firstTextBaseline),
+
+  /// Alignment with the "trailing" (or "ending") edge of the top-most baseline.
+  ///
+  /// In a left-to-right layout context, this is the right edge of the first line of text.
+  trailingFirstTextBaseline(horizontal: HorizontalAlignment.trailing, vertical: VerticalAlignment.firstTextBaseline),
+
+  /// Alignment with the "leading" (or "starting") edge of the bottom-most baseline.
+  ///
+  /// In a left-to-right layout context, this is the left edge of the last line of text.
+  leadingLastTextBaseline(horizontal: HorizontalAlignment.leading, vertical: VerticalAlignment.lastTextBaseline),
+
+  /// Alignment with the "trailing" (or "ending") edge of the bottom-most baseline.
+  ///
+  /// In a left-to-right layout context, this is the right edge of the last line of text.
+  trailingLastTextBaseline(horizontal: HorizontalAlignment.trailing, vertical: VerticalAlignment.lastTextBaseline);
+
+  const Alignment({
+    required this.horizontal,
+    required this.vertical,
+  });
+
+  /// The horizontal alignment of the widget within its bounding space.
+  final HorizontalAlignment horizontal;
+
+  /// The vertical alignment of the widget within its bounding space.
+  final VerticalAlignment vertical;
+
+  painting.AlignmentGeometry toFlutter(painting.TextDirection direction) {
+    final isLtr = direction == painting.TextDirection.ltr;
+    switch (this) {
+      case Alignment.center:
+        return painting.Alignment.center;
+      case Alignment.leading:
+        return isLtr ? painting.Alignment.centerLeft : painting.Alignment.centerRight;
+      case Alignment.trailing:
+        return isLtr ? painting.Alignment.centerRight : painting.Alignment.centerLeft;
+      case Alignment.top:
+        return painting.Alignment.topCenter;
+      case Alignment.bottom:
+        return painting.Alignment.bottomCenter;
+      case Alignment.topLeading:
+        return isLtr ? painting.Alignment.topLeft : painting.Alignment.topRight;
+      case Alignment.topTrailing:
+        return isLtr ? painting.Alignment.topRight : painting.Alignment.topLeft;
+      case Alignment.bottomLeading:
+        return isLtr ? painting.Alignment.bottomLeft : painting.Alignment.bottomRight;
+      case Alignment.bottomTrailing:
+        return isLtr ? painting.Alignment.bottomRight : painting.Alignment.bottomLeft;
+      case Alignment.centerFirstTextBaseline:
+      case Alignment.centerLastTextBaseline:
+      case Alignment.leadingFirstTextBaseline:
+      case Alignment.trailingFirstTextBaseline:
+      case Alignment.leadingLastTextBaseline:
+      case Alignment.trailingLastTextBaseline:
+        throw Exception("swift_ui does not yet support this alignment: $this");
+    }
+  }
+}
diff --git a/lib/src/layout_adjustments/frame.dart b/lib/src/layout/frame.dart
similarity index 57%
rename from lib/src/layout_adjustments/frame.dart
rename to lib/src/layout/frame.dart
index 6a9fd0f..ec360cb 100644
--- a/lib/src/layout_adjustments/frame.dart
+++ b/lib/src/layout/frame.dart
@@ -1,5 +1,8 @@
-import 'package:flutter/widgets.dart';
+import 'package:flutter/widgets.dart' hide Alignment;
 
+import 'alignment.dart';
+
+/// A layout widget that aligns its child within a fixed-size rectangle.
 class Frame extends StatelessWidget {
   const Frame({
     super.key,
@@ -9,9 +12,22 @@ class Frame extends StatelessWidget {
     required this.child,
   });
 
+  /// The width of the frame.
+  ///
+  /// If `null`, the intrinsic width of the child is used.
   final double? width;
+
+  /// The height of the frame.
+  ///
+  /// If `null`, the intrinsic height of the child is used.
   final double? height;
+
+  /// The alignment of the child within the frame.
+  ///
+  /// See [Alignment] for more info about the available alignments.
   final Alignment alignment;
+
+  /// The child widget to be displayed within the frame.
   final Widget child;
 
   @override
@@ -20,12 +36,14 @@ class Frame extends StatelessWidget {
       return child;
     }
 
+    final textDirection = Directionality.of(context);
+
     if (width == null) {
       // Use the intrinsic width of the child.
       return SizedBox(
         height: height,
         child: Align(
-          alignment: alignment,
+          alignment: alignment.toFlutter(textDirection),
           child: IntrinsicWidth(
             child: child,
           ),
@@ -38,7 +56,7 @@ class Frame extends StatelessWidget {
       return SizedBox(
         width: width,
         child: Align(
-          alignment: alignment,
+          alignment: alignment.toFlutter(textDirection),
           child: IntrinsicHeight(
             child: child,
           ),
@@ -50,7 +68,7 @@ class Frame extends StatelessWidget {
       width: width,
       height: height,
       child: Align(
-        alignment: alignment,
+        alignment: alignment.toFlutter(textDirection),
         child: child,
       ),
     );
diff --git a/lib/src/layout/hstack.dart b/lib/src/layout/hstack.dart
index 6e26b08..0703996 100644
--- a/lib/src/layout/hstack.dart
+++ b/lib/src/layout/hstack.dart
@@ -1,5 +1,7 @@
 import 'package:flutter/widgets.dart';
 
+import 'alignment.dart' hide Alignment;
+
 /// A layout widget that displays its children horizontally, like a row.
 ///
 /// An `HStack` tightly wraps its [children]. Each child must have an intrinsic width
@@ -64,20 +66,3 @@ class HStack extends StatelessWidget {
     }
   }
 }
-
-enum VerticalAlignment {
-  /// Alignment with the top of a bounding space.
-  top,
-
-  /// Alignment that's equidistant from the top and bottom of a bounding space.
-  center,
-
-  /// Alignment with the bottom of a bounding space.
-  bottom,
-
-  /// Alignment with the baseline of the first line of text within another widget.
-  firstTextBaseline,
-
-  /// Alignment with the baseline of the last line of text within another widget.
-  lastTextBaseline,
-}
diff --git a/lib/src/layout/vstack.dart b/lib/src/layout/vstack.dart
index 1b3b5e3..7dde20c 100644
--- a/lib/src/layout/vstack.dart
+++ b/lib/src/layout/vstack.dart
@@ -1,5 +1,7 @@
 import 'package:flutter/widgets.dart';
 
+import 'alignment.dart' hide Alignment;
+
 /// A layout widget that displays its children vertically, like a column.
 ///
 /// A `VStack` tightly wraps its [children]. Each child must have an intrinsic height
@@ -64,26 +66,3 @@ class VStack extends StatelessWidget {
     }
   }
 }
-
-enum HorizontalAlignment {
-  /// Alignment with the "leading" or "starting" edge of a bounding space.
-  ///
-  /// In a left-to-right layout context, the leading edge is the left edge.
-  leading,
-
-  /// Alignment that's equidistant from the left and right edges of a bounding space.
-  center,
-
-  /// Alignment with the "trailing" or "ending" edge of a bounding space.
-  ///
-  /// In a left-to-right layout context, the trailing edge is the right edge.
-  trailing,
-
-  /// Alignment with the leading edge of a list separator - this alignment is only
-  /// relevant when a widget is displayed within a list that has dividers.
-  listRowSeparatorLeading,
-
-  /// Alignment with the trailing edge of a list separator - this alignment is only
-  /// relevant when a widget is displayed within a list that has dividers.
-  listRowSeparatorTrailing,
-}
diff --git a/lib/src/shapes/rectangle.dart b/lib/src/shapes/rectangle.dart
new file mode 100644
index 0000000..f66a6c6
--- /dev/null
+++ b/lib/src/shapes/rectangle.dart
@@ -0,0 +1,148 @@
+import 'package:flutter/widgets.dart';
+
+/// A rectangular shape that takes the size of the parent
+class Rectangle extends StatelessWidget {
+  const Rectangle({
+    super.key,
+    this.fillColor,
+    this.fillGradient,
+    this.strokeColor,
+    this.strokeGradient,
+    this.strokeLineWidth = 1.0,
+  });
+
+  /// A color used for painting the interior of the rectangle.
+  ///
+  /// This is an alternative to [fillGradient].
+  final Color? fillColor;
+
+  /// A gradient used for painting the interior of the rectangle.
+  ///
+  /// This is an alternative to [fillColor].
+  final Gradient? fillGradient;
+
+  /// A color used for painting the outline of the rectangle.
+  ///
+  /// The stroke line is drawn inside the frame of the rectangle, and its
+  /// width is determined by [strokeLineWidth].
+  ///
+  /// This is an alternative to [strokeGradient].
+  final Color? strokeColor;
+
+  /// A gradient used for painting the outline of the rectangle.
+  ///
+  /// The stroke line is drawn inside the frame of the rectangle, and its
+  /// width is determined by [strokeLineWidth].
+  ///
+  /// This is an alternative to [strokeColor].
+  final Gradient? strokeGradient;
+
+  /// The width of the stroke used to paint the outline of the rectangle.
+  ///
+  /// The default is 1.0.
+  final double strokeLineWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size.infinite,
+      painter: _RectanglePainter(
+        fillColor: fillColor,
+        fillGradient: fillGradient,
+        strokeColor: strokeColor,
+        strokeGradient: strokeGradient,
+        strokeLineWidth: strokeLineWidth,
+      ),
+    );
+  }
+}
+
+class _RectanglePainter extends CustomPainter {
+  _RectanglePainter({
+    required this.fillColor,
+    required this.fillGradient,
+    required this.strokeColor,
+    required this.strokeGradient,
+    required this.strokeLineWidth,
+  });
+
+  final Color? fillColor;
+  final Gradient? fillGradient;
+  final Color? strokeColor;
+  final Gradient? strokeGradient;
+  final double strokeLineWidth;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    _paintFill(canvas, size);
+    _paintStroke(canvas, size);
+  }
+
+  void _paintFill(Canvas canvas, Size size) {
+    if (fillColor != null) {
+      _paintSolidFill(canvas, size);
+    } else if (fillGradient != null) {
+      _paintGradientFill(canvas, size);
+    }
+  }
+
+  void _paintSolidFill(Canvas canvas, Size size) {
+    final rect = Rect.fromLTWH(0, 0, size.width, size.height);
+    final paint = Paint()
+      ..style = PaintingStyle.fill
+      ..color = fillColor!;
+    canvas.drawRect(rect, paint);
+  }
+
+  void _paintGradientFill(Canvas canvas, Size size) {
+    final rect = Rect.fromLTWH(0, 0, size.width, size.height);
+    final paint = Paint()
+      ..style = PaintingStyle.fill
+      ..shader = fillGradient!.createShader(rect);
+    canvas.drawRect(rect, paint);
+  }
+
+  void _paintStroke(Canvas canvas, Size size) {
+    if (strokeColor != null) {
+      _paintSolidStroke(canvas, size);
+    } else if (strokeGradient != null) {
+      _paintGradientStroke(canvas, size);
+    }
+  }
+
+  void _paintSolidStroke(Canvas canvas, Size size) {
+    final rect = _adjustRectForLineWidth(size);
+    final paint = Paint()
+      ..style = PaintingStyle.stroke
+      ..color = strokeColor!
+      ..strokeWidth = strokeLineWidth;
+    canvas.drawRect(rect, paint);
+  }
+
+  Rect _adjustRectForLineWidth(Size size) {
+    return Rect.fromLTWH(
+      strokeLineWidth / 2,
+      strokeLineWidth / 2,
+      size.width - strokeLineWidth,
+      size.height - strokeLineWidth,
+    );
+  }
+
+  void _paintGradientStroke(Canvas canvas, Size size) {
+    final rect = _adjustRectForLineWidth(size);
+    final paint = Paint()
+      ..style = PaintingStyle.stroke
+      ..shader = strokeGradient!.createShader(rect)
+      ..strokeWidth = strokeLineWidth;
+    canvas.drawRect(rect, paint);
+  }
+
+  @override
+  bool shouldRepaint(covariant _RectanglePainter oldDelegate) {
+    return oldDelegate.fillColor != fillColor ||
+        oldDelegate.fillGradient != fillGradient ||
+        oldDelegate.strokeColor != strokeColor ||
+        oldDelegate.strokeGradient != strokeGradient ||
+        oldDelegate.strokeLineWidth != strokeLineWidth;
+  }
+}
diff --git a/lib/swift_ui.dart b/lib/swift_ui.dart
index 4f2cd95..3ef7c55 100644
--- a/lib/swift_ui.dart
+++ b/lib/swift_ui.dart
@@ -15,10 +15,12 @@ export 'src/layout/vstack.dart';
 export 'src/layout/zstack.dart';
 
 // Layout Adjustments
-export 'src/layout_adjustments/frame.dart';
+export 'src/layout/frame.dart';
+export 'src/layout/alignment.dart';
 
 // Shapes
 export 'src/shapes/ellipse.dart';
+export 'src/shapes/rectangle.dart';
 
 // Infrastructure
 export 'src/infrastructure/late_bound_build.dart';
diff --git a/test/layout/frame_golden_test.dart b/test/layout/frame_golden_test.dart
new file mode 100644
index 0000000..c0ba54b
--- /dev/null
+++ b/test/layout/frame_golden_test.dart
@@ -0,0 +1,159 @@
+import 'package:flutter/widgets.dart' hide Alignment;
+import 'package:flutter_test/flutter_test.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+import 'package:swift_ui/swift_ui.dart' hide Border;
+
+void main() {
+  group("Layout adjustments > Frame >", () {
+    testGoldens("smoke test", (widgetTester) async {
+      final builder = GoldenBuilder.grid(columns: 4, widthToHeightRatio: 1)
+        ..addScenario(
+          'Center',
+          Container(
+            decoration: BoxDecoration(border: Border.all()),
+            child: Frame(
+              width: 100,
+              height: 100,
+              alignment: Alignment.center,
+              child: Container(
+                width: 10,
+                height: 10,
+                color: Colors.blue,
+              ),
+            ),
+          ),
+        )
+        ..addScenario(
+          'Top',
+          Container(
+            decoration: BoxDecoration(border: Border.all()),
+            child: Frame(
+              width: 100,
+              height: 100,
+              alignment: Alignment.top,
+              child: Container(
+                width: 10,
+                height: 10,
+                color: Colors.blue,
+              ),
+            ),
+          ),
+        )
+        ..addScenario(
+          'Bottom',
+          Container(
+            decoration: BoxDecoration(border: Border.all()),
+            child: Frame(
+              width: 100,
+              height: 100,
+              alignment: Alignment.bottom,
+              child: Container(
+                width: 10,
+                height: 10,
+                color: Colors.blue,
+              ),
+            ),
+          ),
+        )
+        ..addScenario(
+          'Leading',
+          Container(
+            decoration: BoxDecoration(border: Border.all()),
+            child: Frame(
+              width: 100,
+              height: 100,
+              alignment: Alignment.leading,
+              child: Container(
+                width: 10,
+                height: 10,
+                color: Colors.blue,
+              ),
+            ),
+          ),
+        )
+        ..addScenario(
+          'Trailing',
+          Container(
+            decoration: BoxDecoration(border: Border.all()),
+            child: Frame(
+              width: 100,
+              height: 100,
+              alignment: Alignment.trailing,
+              child: Container(
+                width: 10,
+                height: 10,
+                color: Colors.blue,
+              ),
+            ),
+          ),
+        )
+        ..addScenario(
+          'topLeading',
+          Container(
+            decoration: BoxDecoration(border: Border.all()),
+            child: Frame(
+              width: 100,
+              height: 100,
+              alignment: Alignment.topLeading,
+              child: Container(
+                width: 10,
+                height: 10,
+                color: Colors.blue,
+              ),
+            ),
+          ),
+        )
+        ..addScenario(
+          'topTrailing',
+          Container(
+            decoration: BoxDecoration(border: Border.all()),
+            child: Frame(
+              width: 100,
+              height: 100,
+              alignment: Alignment.topTrailing,
+              child: Container(
+                width: 10,
+                height: 10,
+                color: Colors.blue,
+              ),
+            ),
+          ),
+        )
+        ..addScenario(
+          'bottomLeading',
+          Container(
+            decoration: BoxDecoration(border: Border.all()),
+            child: Frame(
+              width: 100,
+              height: 100,
+              alignment: Alignment.bottomLeading,
+              child: Container(
+                width: 10,
+                height: 10,
+                color: Colors.blue,
+              ),
+            ),
+          ),
+        )
+        ..addScenario(
+          'bottomTrailing',
+          Container(
+            decoration: BoxDecoration(border: Border.all()),
+            child: Frame(
+              width: 100,
+              height: 100,
+              alignment: Alignment.bottomTrailing,
+              child: Container(
+                width: 10,
+                height: 10,
+                color: Colors.blue,
+              ),
+            ),
+          ),
+        );
+
+      await widgetTester.pumpWidgetBuilder(builder.build());
+      await screenMatchesGolden(widgetTester, 'frame_smoke-test');
+    });
+  });
+}
diff --git a/test/layout/goldens/frame_smoke-test.png b/test/layout/goldens/frame_smoke-test.png
new file mode 100644
index 0000000..6e76099
Binary files /dev/null and b/test/layout/goldens/frame_smoke-test.png differ
diff --git a/test/shapes/goldens/rectangle_smoke-test.png b/test/shapes/goldens/rectangle_smoke-test.png
new file mode 100644
index 0000000..8ece611
Binary files /dev/null and b/test/shapes/goldens/rectangle_smoke-test.png differ
diff --git a/test/shapes/rectangle_golden_test.dart b/test/shapes/rectangle_golden_test.dart
new file mode 100644
index 0000000..4fd1ae9
--- /dev/null
+++ b/test/shapes/rectangle_golden_test.dart
@@ -0,0 +1,58 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+import 'package:swift_ui/swift_ui.dart';
+
+void main() {
+  group("Shapes > Rectangle >", () {
+    testGoldens("smoke test", (widgetTester) async {
+      final builder = GoldenBuilder.grid(columns: 2, widthToHeightRatio: 1)
+        ..addScenario(
+          'Solid fill',
+          const Frame(
+            width: 200,
+            height: 100,
+            child: Rectangle(
+              fillColor: Colors.blue,
+            ),
+          ),
+        )
+        ..addScenario(
+          'Gradient fill',
+          const Frame(
+            width: 200,
+            height: 100,
+            child: Rectangle(
+              fillGradient: LinearGradient(
+                colors: [Colors.yellow, Colors.orange],
+              ),
+            ),
+          ),
+        )
+        ..addScenario(
+          'Solid stroke',
+          const Frame(
+            width: 200,
+            height: 100,
+            child: Rectangle(
+              strokeColor: Colors.blue,
+            ),
+          ),
+        )
+        ..addScenario(
+          'Gradient stroke',
+          const Frame(
+            width: 200,
+            height: 100,
+            child: Rectangle(
+              strokeGradient: LinearGradient(
+                colors: [Colors.yellow, Colors.orange],
+              ),
+            ),
+          ),
+        );
+      await widgetTester.pumpWidgetBuilder(builder.build());
+      await screenMatchesGolden(widgetTester, 'rectangle_smoke-test');
+    });
+  });
+}