diff --git a/README.md b/README.md
index c7141e3..8ee06ef 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,12 @@ The libraries included in the Starter Kit are documented in their respective REA
- [Contact/PhoneNumber](src/Contact/README.md): A library for parsing and formatting a phone number.
+## Components
+
+Blade components included in the Starter Kit are documented in their respective files:
+
+- [Form Components](resources/views/components/cd/form/README.md): A set of Blade components for creating form components styled with the CSS Framework.
+- [Dialog Components](resources/views/components/cd/dialog/README.md): A set of Blade components for creating modal dialogs.
## Deploying a site
Once a Media3 site has been created, you have confirmed you can reach the default site via a web browser, and you have access to the site login by command line, the code can be deployed.
diff --git a/composer.json b/composer.json
index 8f8c672..538d433 100644
--- a/composer.json
+++ b/composer.json
@@ -5,7 +5,7 @@
"type": "library",
"require": {
"php": "^8.1",
- "livewire/livewire": "^3.3",
+ "livewire/livewire": "^3.4",
"spatie/laravel-package-tools": "^1.16",
"cubear/cwd_framework_lite": "^3.0",
"propaganistas/laravel-phone": "^5.0"
diff --git a/resources/views/components/cd/dialog/README.md b/resources/views/components/cd/dialog/README.md
new file mode 100644
index 0000000..bde92ba
--- /dev/null
+++ b/resources/views/components/cd/dialog/README.md
@@ -0,0 +1,47 @@
+# DIALOG
+
+NOTE: you must add the component
+```
+
+```
+to the head element of the page before using the `cd.dialog` component.
+
+The modal dialog component is used as follows:
+
+```
+
+
+
+
+
+
+
This is my modal
+
Isn't it great?
+
+
+
+
+```
+
+You can use any markup in ``, e.g., a button, link, etc. The click handler is already included in `cd-dialog.button`, so clicking on your element will open the dialog.
+
+If you would like to open the dialog from a Livewire component, add a `wire:model` atribute to the `` tag, like the following:
+
+```
+
+ ....
+
+```
+
+When dialogFlag (or whatever property you use) becomes true, the dialog will open.
+
+Any content you include in `` will be displayed in the dialog when it opens.
+
+The modal dialog has a close button in the upper right corner. You can add a close button to your panel content by including
+
+```
+
+```
+
+
+
diff --git a/resources/views/components/cd/dialog/button.blade.php b/resources/views/components/cd/dialog/button.blade.php
new file mode 100644
index 0000000..ba8a043
--- /dev/null
+++ b/resources/views/components/cd/dialog/button.blade.php
@@ -0,0 +1,3 @@
+
+ {{ $slot }}
+
\ No newline at end of file
diff --git a/resources/views/components/cd/dialog/close-button.blade.php b/resources/views/components/cd/dialog/close-button.blade.php
new file mode 100644
index 0000000..72b3704
--- /dev/null
+++ b/resources/views/components/cd/dialog/close-button.blade.php
@@ -0,0 +1,3 @@
+
+ {{ $slot }}
+
\ No newline at end of file
diff --git a/resources/views/components/cd/dialog/component-scripts.blade.php b/resources/views/components/cd/dialog/component-scripts.blade.php
new file mode 100644
index 0000000..6b7410b
--- /dev/null
+++ b/resources/views/components/cd/dialog/component-scripts.blade.php
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/resources/views/components/cd/dialog/index.blade.php b/resources/views/components/cd/dialog/index.blade.php
new file mode 100644
index 0000000..a64b2cb
--- /dev/null
+++ b/resources/views/components/cd/dialog/index.blade.php
@@ -0,0 +1,3 @@
+
+ {{ $slot }}
+
\ No newline at end of file
diff --git a/resources/views/components/cd/dialog/panel.blade.php b/resources/views/components/cd/dialog/panel.blade.php
new file mode 100644
index 0000000..6b7ad97
--- /dev/null
+++ b/resources/views/components/cd/dialog/panel.blade.php
@@ -0,0 +1,70 @@
+
+
In panel, open is
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $slot }}
+
+
+
+
\ No newline at end of file
diff --git a/resources/views/components/cd/form/README.md b/resources/views/components/cd/form/README.md
new file mode 100644
index 0000000..954ca56
--- /dev/null
+++ b/resources/views/components/cd/form/README.md
@@ -0,0 +1,181 @@
+# Form Components
+
+A set of form components provides support the the styled form elements in the CD Framework.
+
+## Form
+
+The form component creates the required fieldset and legend.
+
+Use wire:submit on the form component rather than wire:click on the submit button to maintain the
+expected behavior of submitting the form if the user hits enter in a text element.
+
+Here is an example of a simple form:
+
+```
+
+
+
+
+
+
+
+```
+
+## Form elements
+
+The `name` and `id` attributes on the form inputs default to the same value as
+that used in the `wire:model` attribute. You may supply different values for `name` and `id `.
+Inputs are not required by default; you can supply the `:required="true"` attribute if the input
+should be required for your form.
+
+Use the `description` attribute to provide additional instruction or formatting hints. The description text is displayed below the input. The component will add an `aria-describedby` attribute to the input to associate the description text with the input.
+
+## Text
+
+The `placeholder` attribute can be used on text inputs.
+
+To adjust the width of the text input, use the `size` attribute and add the class `use-size-attr`.
+
+Example:
+```
+
+```
+## Select
+
+The select form input requires an array of options.
+The options and the component call are demonstrated below. The required attribute is optional.
+Making the first option disabled gives it the function of placeholder text.
+
+```
+$this->roleoptions = [
+ [ 'value'=>'', 'option'=>'Select a Role', 'disabled'=>true],
+ [ 'value'=>'administrator', 'option'=>'Administrator', 'disabled'=>false],
+ [ 'value'=>'editor', 'option'=>'Editor', 'disabled'=>false],
+ [ 'value'=>'subscriber', 'option'=>'Subscriber', 'disabled'=>false],
+ ];
+```
+
+```
+
+```
+You may add the attribute `multiple="multiple"` to create a multiselect. Multiselect with groups are not yet supported.
+
+## Checkbox
+
+The checkbox component implements a single checkbox (see Checkboxes for multiple checkboxes).
+The checkbox component needs a value to return when the box is checked. The checkbox-inline variant places the label next to the checkbox input rather than above it.
+
+Note: single checkboxes cannot be required.
+
+Note: In Livewire 3, wire:model passes a boolean value to the server based on whether a checkbox is clicked or not. If you need to pass a different (e.g., numeric) value, use wire:click instead.
+
+```
+
+```
+Alternately, specify the text value using the component slot:
+
+```
+
+ Subscribe
+
+```
+
+When using checkbox-inline, the label is displayed alongside the checkbox.
+
+```
+
+```
+## Checkboxes
+
+The checkboxes component implements a set of related checkboxes which are bound to one Livewire variable.
+An array of options define the set of checkboxes as demonstrated here.
+
+```
+ $this->checkboxoptions = [
+ [ 'value' => "tomato", "label" => "Tomato"],
+ [ 'value' => "lettuce", "label" => "Lettuce"],
+ [ 'value' => "pickle", "label" => "Pickle"],
+ [ 'value' => "onion", "label" => "Onion"],
+ ];
+```
+
+```
+
+```
+
+## Special text inputs
+
+The CD Framework provides styling for several special-purpose text inputs. These may be selected
+using the `type` attribute, as in the following examples:
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+```
+## Range
+
+A range input rendered as a slider may be specified using this special text input which requires
+`max` and `min` attributes.
+
+```
+
+```
+
+## File
+
+The file selector input is also a variant of the text input.
+```
+
+```
+
+## Color
+
+The color picker is also a variant of the text input. Take care to initialize the value of this
+input to a valid `value`, which is a hash (#) character followed by six hexadecimal digits.
+```
+
+```
+
+# Radio Buttons
+
+The `radios` component implements a set of related radio buttons defined by an array of options, as demonstrated below.
+
+```
+
+```
+Using `inline=1` alows the radio buttons to be displayed inline with flexbox.
+
+# Submit, Reset and Cancel Buttons
+
+Components are provided for the submit and reset buttons often used in forms. Since the submit button will cause
+the form to call the `wire:submit` function specified in the form element, no `wire:click` is required in that element.
+
+The reset button will clear the form.
+
+The cancel button requires a `wire:click` or `x-on:click` attribute to specify the action which should be
+taken when the button is pressed.
+
+```
+
+
+
+```
+
+
+
+
diff --git a/resources/views/components/cd/form/cancel-button.blade.php b/resources/views/components/cd/form/cancel-button.blade.php
new file mode 100644
index 0000000..73d94a5
--- /dev/null
+++ b/resources/views/components/cd/form/cancel-button.blade.php
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/resources/views/components/cd/form/checkbox-inline.blade.php b/resources/views/components/cd/form/checkbox-inline.blade.php
new file mode 100644
index 0000000..8198e42
--- /dev/null
+++ b/resources/views/components/cd/form/checkbox-inline.blade.php
@@ -0,0 +1,19 @@
+@php
+ $field = $name ?? $attributes->whereStartsWith('wire:model')->first();
+@endphp
+