Update react components docs

Author: handotdev

core-concepts/react-components.mdx

@@ -1,31 +1,24 @@
 ---
-title: "React Components"
-description: "Learn how to use React components"
+title: "React"
+description: "Build interactive and reusable elements with React components"
 icon: "react"
 ---
 
 import { Counter } from "/snippets/counter.mdx";
 import { ColorGenerator } from "/snippets/color-generator.mdx";
 
-Create interactive examples and dynamic content in your documentation using familiar [React hooks](https://react.dev/reference/react/hooks).
+[React components](https://react.dev) are a powerful way to create interactive and reusable elements in your documentation.
 
-<Note>
-  No imports needed! All standard React hooks are automatically available in your MDX files.
-</Note>
+You can use React directly in your MDX files without any additional setup.
 
-## Available Hooks
 
-You can use all standard React hooks in your documentation, such as `useState`, `useEffect`, and other [React hooks](https://react.dev/reference/react/hooks).
+## Using React Components
 
-## Interactive Examples
+You can build components directly in your MDX files using [React hooks](https://react.dev/reference/react/hooks).
 
-### Creating Components Directly in MDX
+### Basic Example
 
-Create a component directly in your MDX file using React hooks to build interactive elements that respond to user actions:
-
-*A basic counter component created with `useState` hook*
-
-<Counter />
+Here's a basic example of a counter component:
 
 ```jsx
 export const Counter = () => {
@@ -40,23 +33,21 @@ export const Counter = () => {
     </div>
   );
 }
-
-<Counter />
 ```
 
-### Importing Components from Snippet Files
-
-Import snippets into your MDX files to create reusable interactive components. Store snippets in the `snippets` folder for better organization. Learn more in the [reusable snippets documentation](/reusable-snippets).
+The `Counter` component can then be used in your MDX files like this:
 
-*Interactive HSL color generator created with multiple React hooks*
+```jsx
+<Counter />
+```
 
-<ColorGenerator />
+And the component will be rendered as a React component in the MDX file.
 
-## Using React Hooks
+<Counter />
 
-### Create a snippet file
+### Complex Example
 
-Create a new file in the `snippets` folder with your component code.
+You can also build much more complex components. Here's an example of a color generator component that uses multiple React hooks:
 
 ```jsx /snippets/color-generator.mdx [expandable]
 export const ColorGenerator = () => {
@@ -86,9 +77,7 @@ export const ColorGenerator = () => {
   }
 
   return (
-    <div className="p-4 border dark:border-zinc-950/80 rounded-xl bg-white dark:bg-zinc-950/80 shadow-sm">
-      <span className="text-xl mb-4 font-semibold text-zinc-950/80 dark:text-white/80">HSL Color Generator</span>
-
+    <div className="p-4 border dark:border-zinc-950/80 rounded-xl not-prose">
       <div className="space-y-4">
         <div className="space-y-2">
           <label className="block text-sm text-zinc-950/70 dark:text-white/70">
@@ -173,23 +162,36 @@ export const ColorGenerator = () => {
 }
 ```
 
-### Import the snippet
+The above component can then be used in your MDX files like this:
 
-Add an import statement at the top of your MDX file:
+```jsx
+<ColorGenerator />
+```
+
+And the component will be rendered as a React component in the MDX file.
+
+<ColorGenerator />
+
+
+## Importing Components
+
+Just like in regular React, you can import components from other files.
 
 ```jsx
 import { ColorGenerator } from "/snippets/color-generator.mdx"
 ```
 
-### Use the component
-
-Add the component to your MDX content wherever needed:
+After importing the component, you can use it in your MDX files like this:
 
 ```jsx
 <ColorGenerator />
 ```
 
-## Important Considerations
+But unlike regular React, you can't import components from every MDX file. Re-usable components can only be referenced from MDX files within the `snippets` folder.
+
+Learn more about this limitation in the [reusable snippets](/reusable-snippets) documentation.
+
+## Considerations
 
 <AccordionGroup>
   <Accordion title="Client-Side Rendering Impact">

snippets/color-generator.mdx

@@ -25,9 +25,7 @@ export const ColorGenerator = () => {
   }
 
   return (
-    <div className="p-4 border dark:border-white/20 rounded-xl bg-white dark:bg-white/5 not-prose">
-      <p className="text-xl mb-4 font-semibold text-zinc-950/80 dark:text-white">HSL Color Generator</p>
-
+    <div className="p-4 border dark:border-white/10 rounded-2xl not-prose">
       <div className="space-y-4">
         <div className="space-y-2">
           <label className="block text-sm text-zinc-950/70 dark:text-white/70">

snippets/counter.mdx

@@ -6,22 +6,22 @@ export const Counter = () => {
 
   return (
   <div className="flex items-center justify-center">
-      <div className="flex items-center rounded-lg overflow-hidden border border-zinc-950/20 dark:border-white/20">
+      <div className="flex items-center rounded-xl overflow-hidden border border-zinc-950/20 dark:border-white/20">
         <button
           onClick={decrement}
-          className="flex items-center justify-center h-8 w-8 bg-white hover:bg-zinc-950/10 text-zinc-950/80 dark:bg-zinc-950 dark:hover:bg-white/10 dark:text-white/80 border-r border-zinc-950/20 dark:border-white/20"
+          className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-r border-zinc-950/20 dark:border-white/20"
           aria-label="Decrease"
         >
           -
         </button>
 
-        <div className="flex text-sm items-center justify-center h-8 px-6 bg-white dark:bg-zinc-950/90 text-zinc-950/80 dark:text-white/80 font-medium min-w-[4rem] text-center">
+        <div className="flex text-sm items-center justify-center h-8 px-6 text-zinc-950/80 dark:text-white/80 font-medium min-w-[4rem] text-center">
           {count}
         </div>
 
         <button
           onClick={increment}
-          className="flex items-center justify-center h-8 w-8 bg-white hover:bg-zinc-950/10 text-zinc-950/80 dark:bg-zinc-950 dark:hover:bg-white/10 dark:text-white/80 border-l border-zinc-950/20 dark:border-white/20"
+          className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-l border-zinc-950/20 dark:border-white/20"
           aria-label="Increase"
         >
           +