docs: added documentation for admin components (#9491)

- Documented common admin components with design that matches the admin.
- Updated existing admin customization snippets to match the admin's design.

Closes DOCS-964

www/apps/book/app/basics/admin-customizations/page.mdx

@@ -24,12 +24,15 @@ For example, create the file `src/admin/widgets/product-widget.tsx` with the fol
 
 ```tsx title="src/admin/widgets/product-widget.tsx"
 import { defineWidgetConfig } from "@medusajs/admin-sdk"
+import { Container, Heading } from "@medusajs/ui"
 
 const ProductWidget = () => {
   return (
-    <div>
-      <h2>Product Widget</h2>
-    </div>
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">Product Widget</Heading>
+      </div>
+    </Container>
   )
 }
 
@@ -42,6 +45,8 @@ export default ProductWidget
 
 This inserts a widget with the text “Product Widget” at the beginning of a product’s details page.
 
+In your widget, use custom components from the [Medusa UI package](https://docs.medusajs.com/ui).
+
 ### Test the Widget
 
 To test out the widget, start the Medusa application:
@@ -51,3 +56,9 @@ npm run dev
 ```
 
 Then, open a product’s details page in the Medusa Admin. You’ll find your custom widget at the top of the page.
+
+---
+
+## Admin Components List
+
+To build admin customizations that match the Medusa Admin's designs and layouts, refer to [this guide](!resources!/admin-component) to find common components.