adds starter template

Author: avb-is-me

docs/starter-template/components/DevDocsAccordion.md

@@ -8,16 +8,6 @@ Accordion is a React component that creates an expandable and collapsible accord
 
 The accordion can contain any markdown content you wish to display.
 
-```jsx
-
-
-function MyComponent() {
-  return (
-    <component name="DevDocsAccordion" original="PERldkRvY3NBY2NvcmRpb24gdGl0bGU9IlNlY3Rpb24gVGl0bGUiPgogICAgICB7LyogWW91ciBjb250ZW50IGhlcmUgKi99CiAgICA8L0RldkRvY3NBY2NvcmRpb24+" props="eyJ0aXRsZSI6IlNlY3Rpb24gVGl0bGUiLCJjaGlsZHJlbiI6InsvKiBZb3VyIGNvbnRlbnQgaGVyZSAqL30ifQ=="></component>
-  );
-}
-```
-
 ## Parameters
 
 * `title` (string, required): The text to display as the accordion's header.
@@ -33,13 +23,15 @@ Accordion returns a React component that renders an accordion UI element.
 ### Basic Usage
 
 ```jsx
-<component name="DevDocsAccordion" original="PERldkRvY3NBY2NvcmRpb24gdGl0bGU9IkdldHRpbmcgU3RhcnRlZCI+CiAgPHA+VGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgYWNjb3JkaW9uLiBJdCBjYW4gaW5jbHVkZSBhbnkgdmFsaWQgSlNYLjwvcD4KPC9EZXZEb2NzQWNjb3JkaW9uPg==" props="eyJ0aXRsZSI6IkdldHRpbmcgU3RhcnRlZCIsImNoaWxkcmVuIjoiPHA+VGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgYWNjb3JkaW9uLiBJdCBjYW4gaW5jbHVkZSBhbnkgdmFsaWQgSlNYLjwvcD4ifQ=="></component>
-```
-
-### With Multiple Paragraphs
-
-```jsx
-<component name="DevDocsAccordion" original="PERldkRvY3NBY2NvcmRpb24gdGl0bGU9IkFkdmFuY2VkIFRvcGljcyI+CiAgPHA+Rmlyc3QgcGFyYWdyYXBoIG9mIGNvbnRlbnQuPC9wPgogIDxwPlNlY29uZCBwYXJhZ3JhcGggd2l0aCBtb3JlIGRldGFpbHMuPC9wPgogIDx1bD4KICAgIDxsaT5MaXN0IGl0ZW0gMTwvbGk+CiAgICA8bGk+TGlzdCBpdGVtIDI8L2xpPgogIDwvdWw+CjwvRGV2RG9jc0FjY29yZGlvbj4=" props="eyJ0aXRsZSI6IkFkdmFuY2VkIFRvcGljcyIsImNoaWxkcmVuIjoiPHA+Rmlyc3QgcGFyYWdyYXBoIG9mIGNvbnRlbnQuPC9wPlxuICA8cD5TZWNvbmQgcGFyYWdyYXBoIHdpdGggbW9yZSBkZXRhaWxzLjwvcD5cbiAgPHVsPlxuICAgIDxsaT5MaXN0IGl0ZW0gMTwvbGk+XG4gICAgPGxpPkxpc3QgaXRlbSAyPC9saT5cbiAgPC91bD4ifQ=="></component>
+<Accordion title="Click me to expand">
+  This is the content that will be shown when the accordion is expanded.
+  
+  You can include any markdown content here.
+  - List items
+  - More items
+  
+  Or even code blocks!
+</Accordion>
 ```
 
 ## Notes or Considerations

docs/starter-template/components/.md renamed to docs/starter-template/components/Tabs.md

@@ -16,9 +16,35 @@ The Tabs component and its subcomponents accept the following props:
 
 Here's a basic example of how to use the Tabs component:
 
-```jsx
-<component name="Tabs" original="PFRhYnMgZGVmYXVsdFZhbHVlPSJ0YWIxIj4KICA8VGFic0xpc3Q+CiAgICA8VGFic1RyaWdnZXIgdmFsdWU9InRhYjEiPlRhYiAxPC9UYWJzVHJpZ2dlcj4KICAgIDxUYWJzVHJpZ2dlciB2YWx1ZT0idGFiMiI+VGFiIDI8L1RhYnNUcmlnZ2VyPgogIDwvVGFic0xpc3Q+CiAgPFRhYnNDb250ZW50IHZhbHVlPSJ0YWIxIj5Db250ZW50IGZvciBUYWIgMTwvVGFic0NvbnRlbnQ+CiAgPFRhYnNDb250ZW50IHZhbHVlPSJ0YWIyIj5Db250ZW50IGZvciBUYWIgMjwvVGFic0NvbnRlbnQ+CjwvVGFicz4=" props="eyJkZWZhdWx0VmFsdWUiOiJ0YWIxIiwiY2hpbGRyZW4iOiI8VGFic0xpc3Q+XG4gICAgPFRhYnNUcmlnZ2VyIHZhbHVlPVwidGFiMVwiPlRhYiAxPC9UYWJzVHJpZ2dlcj5cbiAgICA8VGFic1RyaWdnZXIgdmFsdWU9XCJ0YWIyXCI+VGFiIDI8L1RhYnNUcmlnZ2VyPlxuICA8L1RhYnNMaXN0PlxuICA8VGFic0NvbnRlbnQgdmFsdWU9XCJ0YWIxXCI+Q29udGVudCBmb3IgVGFiIDE8L1RhYnNDb250ZW50PlxuICA8VGFic0NvbnRlbnQgdmFsdWU9XCJ0YWIyXCI+Q29udGVudCBmb3IgVGFiIDI8L1RhYnNDb250ZW50PiJ9"></component>
-```
+````jsx
+<Tabs defaultValue="preview">
+  <TabsList>
+    <TabsTrigger value="preview">Preview</TabsTrigger>
+    <TabsTrigger value="code">Code</TabsTrigger>
+  </TabsList>
+  <TabsContent value="preview">
+    <div className="p-4 border rounded">
+      A simple tabs example showing how the component works.
+    </div>
+  </TabsContent>
+  <TabsContent value="code">
+    ```jsx
+    <Tabs defaultValue="tab1">
+      <TabsList>
+        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">
+        Content for tab 1
+      </TabsContent>
+      <TabsContent value="tab2">
+        Content for tab 2
+      </TabsContent>
+    </Tabs>
+    ```
+  </TabsContent>
+</Tabs>
+````
 
 ## Notes or Considerations
 

docs/starter-template/components/using-the-codesnippet-component.md

@@ -1,13 +1,12 @@
-
-
-  # Using the CodeSnippet Component
+# Using the CodeSnippet Component
 
 The `CodeSnippet` component is a powerful tool for displaying multiple code examples in a tabbed interface within your documentation. It's particularly useful when you need to show code snippets in different languages or file types for the same concept.
 
 ## Basic Usage
 
 To use the `CodeSnippet` component, wrap your code blocks with it in your MDX file:
 
+````
 <CodeSnippets>
 ```javascript::example.js
 const greeting = "Hello, world!";
@@ -18,6 +17,7 @@ greeting = "Hello, world!"
 print(greeting)
 ```
 </CodeSnippets>
+````
 
 ## Syntax