feat: new docs layout, web and native docs splitted, switch in progress

apps/docs/.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

apps/docs/content/docs/changelog/meta.json

@@ -1,7 +0,0 @@
-{
-  "title": "Changelog",
-  "description": "HeroUI v3 Release Notes",
-  "icon": "clock-arrow-rotate-left",
-  "root": false,
-  "pages": ["changelog", "v3-0-0-beta-3"]
-}

apps/docs/content/docs/meta.json

@@ -1,74 +1,3 @@
 {
-  "title": "Documentation",
-  "description": "HeroUI v3 Documentation",
-  "root": true,
-  "pages": [
-    "---Getting Started---",
-    "introduction",
-    "quick-start",
-    "components-list",
-    "design-principles",
-    "changelog",
-    "[sparkles][Showcase](/showcase)",
-    "[route][Roadmap](https://herouiv3.featurebase.app/roadmap)",
-    "[figma][Figma](https://www.figma.com/community/file/1546526812159103429)",
-    "[smartphone][React Native](https://link.heroui.com/native?ref=heroui-v3)",
-    "---Handbook---",
-    "handbook/colors",
-    "handbook/theming",
-    "handbook/styling",
-    "handbook/animation",
-    "handbook/composition",
-    "---UI for Agents---",
-    "ui-for-agents/llms-txt",
-    "ui-for-agents/mcp-server",
-    "---Components---",
-    "components/accordion",
-    "components/alert",
-    "components/alert-dialog",
-    "components/avatar",
-    "components/button",
-    "components/button-group",
-    "components/card",
-    "components/checkbox",
-    "components/checkbox-group",
-    "components/chip",
-    "components/close-button",
-    "components/combobox",
-    "components/date-field",
-    "components/description",
-    "components/disclosure",
-    "components/disclosure-group",
-    "components/dropdown",
-    "components/error-message",
-    "components/field-error",
-    "components/fieldset",
-    "components/form",
-    "components/input",
-    "components/input-group",
-    "components/input-otp",
-    "components/kbd",
-    "components/label",
-    "components/link",
-    "components/listbox",
-    "components/modal",
-    "components/number-field",
-    "components/popover",
-    "components/radio-group",
-    "components/scroll-shadow",
-    "components/separator",
-    "components/search-field",
-    "components/select",
-    "components/skeleton",
-    "components/slider",
-    "components/spinner",
-    "components/switch",
-    "components/surface",
-    "components/tabs",
-    "components/tag-group",
-    "components/text-field",
-    "components/textarea",
-    "components/time-field",
-    "components/tooltip"
-  ]
+  "pages": ["react", "native"]
 }

apps/docs/content/docs/native/components/(overlays)/toast.mdx

@@ -170,7 +170,7 @@ export default function ToastExample() {
 
 Configure toast behavior globally using `HeroUINativeProvider` config prop. Global configs serve as defaults for all toasts unless overridden locally.
 
-> **Note**: For complete provider configuration options, see the [Provider documentation](/docs/native/handbook/provider#toast-configuration).
+> **Note**: For complete provider configuration options, see the [Provider documentation](/docs/native/getting-started/handbook/provider#toast-configuration).
 
 ### Insets
 

apps/docs/content/docs/native/components/meta.json

@@ -0,0 +1,40 @@
+{
+  "title": "Components",
+  "description": "HeroUI Native components",
+  "root": true,
+  "icon": "circles-4-diamond",
+  "pages": [
+    "---Buttons---",
+    "(buttons)/button",
+    "---Forms---",
+    "(forms)/checkbox",
+    "(forms)/form-field",
+    "(forms)/radio-group",
+    "(forms)/select",
+    "(forms)/switch",
+    "(forms)/text-field",
+    "---Navigation---",
+    "(navigation)/accordion",
+    "(navigation)/tabs",
+    "---Overlays---",
+    "(overlays)/dialog",
+    "(overlays)/popover",
+    "(overlays)/toast",
+    "---Feedback---",
+    "(feedback)/error-view",
+    "(feedback)/skeleton",
+    "(feedback)/skeleton-group",
+    "(feedback)/spinner",
+    "---Layout---",
+    "(layout)/card",
+    "(layout)/divider",
+    "(layout)/surface",
+    "---Media---",
+    "(media)/avatar",
+    "---Data Display---",
+    "(data-display)/chip",
+    "---Utilities---",
+    "(utilities)/pressable-feedback",
+    "(utilities)/scroll-shadow"
+  ]
+}

apps/docs/content/docs/native/getting-started/(handbook)/animation.mdx

@@ -173,6 +173,6 @@ This pattern allows you to conditionally render content based on component state
 
 ## Next Steps
 
-- Learn about [Styling](/docs/native/handbook/styling) approaches
-- View [Theming](/docs/native/handbook/theming) documentation
-- Explore [Colors](/docs/native/handbook/colors) documentation
+- Learn about [Styling](/docs/native/getting-started/handbook/styling) approaches
+- View [Theming](/docs/native/getting-started/handbook/theming) documentation
+- Explore [Colors](/docs/native/getting-started/handbook/colors) documentation

apps/docs/content/docs/native/getting-started/(handbook)/colors.mdx

@@ -57,7 +57,7 @@ These four colors stay the same in all themes:
 
 ### Primary Colors
 
-**Accent** — Your main brand color (used for primary actions)  
+**Accent** — Your main brand color (used for primary actions)
 **Accent Soft** — A lighter version for secondary actions
 
 <ColorPalette
@@ -324,6 +324,6 @@ import { View, Text } from 'react-native';
 
 ## Related
 
-- [Theming](/docs/native/handbook/theming) - Learn about the theming system
-- [Styling](/docs/native/handbook/styling) - Styling components with CSS
+- [Theming](/docs/native/getting-started/handbook/theming) - Learn about the theming system
+- [Styling](/docs/native/getting-started/handbook/styling) - Styling components with CSS
 - [Design Principles](/docs/native/design-principles) - Understanding HeroUI's design philosophy

apps/docs/content/docs/native/getting-started/(handbook)/composition.mdx

@@ -176,6 +176,6 @@ export function CustomButton({
 
 ## Next Steps
 
-- Learn about [Styling](/docs/native/handbook/styling) system
-- Explore [Theming](/docs/native/handbook/theming) documentation
-- Explore [Animation](/docs/native/handbook/animation) options
+- Learn about [Styling](/docs/native/getting-started/handbook/styling) system
+- Explore [Theming](/docs/native/getting-started/handbook/theming) documentation
+- Explore [Animation](/docs/native/getting-started/handbook/animation) options

apps/docs/content/docs/native/getting-started/(handbook)/provider.mdx

@@ -315,6 +315,6 @@ const config: HeroUINativeConfig = {
 ## Related
 
 - [Quick Start](/docs/native/quick-start) - Basic setup guide
-- [Theming](/docs/native/handbook/theming) - Customize colors and themes
-- [Styling](/docs/native/handbook/styling) - Style components with Tailwind
+- [Theming](/docs/native/getting-started/handbook/theming) - Customize colors and themes
+- [Styling](/docs/native/getting-started/handbook/styling) - Style components with Tailwind
 

apps/docs/content/docs/native/getting-started/(handbook)/styling.mdx

@@ -243,6 +243,6 @@ Available theme colors include: `background`, `foreground`, `surface`, `accent`,
 
 ## Next Steps
 
-- Learn about [Animation](/docs/native/handbook/animation) techniques
-- Explore [Theming](/docs/native/handbook/theming) system
-- Explore [Colors](/docs/native/handbook/colors) documentation
+- Learn about [Animation](/docs/native/getting-started/handbook/animation) techniques
+- Explore [Theming](/docs/native/getting-started/handbook/theming) system
+- Explore [Colors](/docs/native/getting-started/handbook/colors) documentation

apps/docs/content/docs/native/getting-started/(handbook)/theming.mdx

@@ -68,14 +68,14 @@ function ThemeToggle() {
 }
 ```
 
-> **Note**: See [Colors](/docs/native/handbook/colors) for the complete color palette and visual reference.
+> **Note**: See [Colors](/docs/native/getting-started/handbook/colors) for the complete color palette and visual reference.
 
 **Create your own theme:**
 
 Create multiple themes using Uniwind's variant system. For complete custom theme documentation, see the [Uniwind Custom Themes Guide](https://docs.uniwind.dev/theming/custom-themes).
 
 <Callout type="warning">
-  **Important:** All themes must define the same variables. See the [Default Theme](/docs/native/handbook/colors#default-theme) section for a complete list of all required variables.
+  **Important:** All themes must define the same variables. See the [Default Theme](/docs/native/getting-started/handbook/colors#default-theme) section for a complete list of all required variables.
 </Callout>
 
 ```css
@@ -306,7 +306,7 @@ HeroUI defines three types of variables:
 2. **Theme Variables** — Colors that change between light/dark themes
 3. **Calculated Variables** — Automatically generated hover (pressed) states and size variants
 
-For a complete reference, see: [Colors Documentation](/docs/native/handbook/colors), [Default Theme Variables](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/themes/default/variables.css), [Shared Theme Utilities](https://github.com/heroui-inc/heroui-native/blob/beta/src/styles/theme.css)
+For a complete reference, see: [Colors Documentation](/docs/native/getting-started/handbook/colors), [Default Theme Variables](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/themes/default/variables.css), [Shared Theme Utilities](https://github.com/heroui-inc/heroui-native/blob/beta/src/styles/theme.css)
 
 **Calculated variables (Tailwind):**
 
@@ -523,7 +523,7 @@ Form controls now rely on the `--field-*` variables and their calculated hover/f
 
 ## Resources
 
-- [Colors Documentation](/docs/native/handbook/colors)
-- [Styling Guide](/docs/native/handbook/styling)
+- [Colors Documentation](/docs/native/getting-started/handbook/colors)
+- [Styling Guide](/docs/native/getting-started/handbook/styling)
 - [Tailwind CSS v4 Theming](https://tailwindcss.com/docs/theme)
 - [OKLCH Color Tool](https://oklch.com)

apps/docs/content/docs/native/getting-started/(overview)/quick-start.mdx

@@ -97,7 +97,7 @@ export default function App() {
 }
 ```
 
-> **Note**: For advanced configuration options including text props, animation settings, and toast configuration, see the [Provider documentation](/docs/native/handbook/provider).
+> **Note**: For advanced configuration options including text props, animation settings, and toast configuration, see the [Provider documentation](/docs/native/getting-started/handbook/provider).
 
 ### 6. Use Your First Component
 
@@ -116,9 +116,9 @@ export default function MyComponent() {
 
 ## What's Next?
 
-- [HeroUI Native Provider](/docs/native/handbook/provider)
-- [Styling Guide](/docs/native/handbook/styling)
-- [Theming Documentation](/docs/handbook/theming)
+- [HeroUI Native Provider](/docs/native/getting-started/handbook/provider)
+- [Styling Guide](/docs/native/getting-started/handbook/styling)
+- [Theming Documentation](/docs/native/getting-started/handbook/theming)
 
 ## Running on Web (Expo)
 

apps/docs/content/docs/native/getting-started/index.mdx

@@ -10,7 +10,6 @@ HeroUI Native is a component library built on [Tailwind v4](https://tailwindcss.
   src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/native/heroui-native-og-light.jpg"
   darkSrc="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/native/heroui-native-og-dark.jpg"
   alt="HeroUI v3 Introduction"
-  className="h-[220px] md:h-[384px]"
 />
 
 ## Why HeroUI Native?
@@ -51,22 +50,22 @@ HeroUI Native is not a snapshot—it's a garden that keeps growing. 🌱
 
 ## FAQ
 
-**Is HeroUI Native free?**  
+**Is HeroUI Native free?**
 Yes, completely free and open source under the MIT license.
 
-**Is it production-ready?**  
+**Is it production-ready?**
 Currently in **beta**. We're actively working towards a stable release with community feedback.
 
-**Can I customize the components?**  
+**Can I customize the components?**
 Yes! Update default styles, animations or compose component parts differently. Every slot is customizable.
 
-**Does it work with TypeScript?**  
+**Does it work with TypeScript?**
 Fully typed with excellent IDE support and autocompletion.
 
-**What about accessibility?**  
+**What about accessibility?**
 Accessibility follows mobile development best practices with proper focus management, touch accessibility, and screen reader support built into every component.
 
-**Is there a Figma file?**  
+**Is there a Figma file?**
 Yes! Access our design system at [HeroUI Figma Kit V3](https://www.figma.com/community/file/1546526812159103429).
 
 ## Get Involved

apps/docs/content/docs/native/getting-started/meta.json

@@ -0,0 +1,22 @@
+{
+  "title": "Getting Started",
+  "description": "Get started with HeroUI Native",
+  "root": true,
+  "icon": "book-open",
+  "pages": [
+    "---Overview---",
+    "index",
+    "(overview)/quick-start",
+    "(overview)/design-principles",
+    "---Handbook---",
+    "(handbook)/colors",
+    "(handbook)/theming",
+    "(handbook)/styling",
+    "(handbook)/animation",
+    "(handbook)/composition",
+    "(handbook)/provider",
+    "---UI for Agents---",
+    "(ui-for-agents)/llms-txt",
+    "(ui-for-agents)/mcp-server"
+  ]
+}

apps/docs/content/docs/native/meta.json

@@ -0,0 +1,5 @@
+{
+  "title": "Documentation",
+  "description": "HeroUI Native Documentation",
+  "pages": ["getting-started", "components"]
+}

apps/docs/content/docs/react/components/index.mdx

@@ -1,8 +1,6 @@
 ---
-title: Components
+title: All Components
 description: Explore the full list of components available in the library. More are on the way.
-index: true
-icon: circles-4-diamond
 ---
 
-<ComponentsList />
+<ComponentsList />

apps/docs/content/docs/react/components/meta.json

@@ -0,0 +1,70 @@
+{
+  "title": "Components",
+  "description": "HeroUI React components",
+  "root": true,
+  "icon": "circles-4-diamond",
+  "pages": [
+    "---Overview---",
+    "index",
+    "---Buttons---",
+    "(buttons)/button",
+    "(buttons)/button-group",
+    "(buttons)/close-button",
+    "---Forms---",
+    "(forms)/checkbox",
+    "(forms)/checkbox-group",
+    "(forms)/date-field",
+    "(forms)/description",
+    "(forms)/error-message",
+    "(forms)/field-error",
+    "(forms)/fieldset",
+    "(forms)/form",
+    "(forms)/input",
+    "(forms)/input-group",
+    "(forms)/input-otp",
+    "(forms)/label",
+    "(forms)/number-field",
+    "(forms)/radio-group",
+    "(forms)/search-field",
+    "(forms)/text-field",
+    "(forms)/textarea",
+    "(forms)/time-field",
+    "---Navigation---",
+    "(navigation)/accordion",
+    "(navigation)/disclosure",
+    "(navigation)/disclosure-group",
+    "(navigation)/link",
+    "(navigation)/tabs",
+    "---Overlays---",
+    "(overlays)/alert-dialog",
+    "(overlays)/modal",
+    "(overlays)/popover",
+    "(overlays)/tooltip",
+    "---Collections---",
+    "(collections)/dropdown",
+    "(collections)/listbox",
+    "(collections)/tag-group",
+    "---Controls---",
+    "(controls)/slider",
+    "(controls)/switch",
+    "---Feedback---",
+    "(feedback)/alert",
+    "(feedback)/skeleton",
+    "(feedback)/spinner",
+    "---Layout---",
+    "(layout)/card",
+    "(layout)/separator",
+    "(layout)/surface",
+    "---Media---",
+    "(media)/avatar",
+    "---Pickers---",
+    "(pickers)/combobox",
+    "(pickers)/select",
+    "---Typography---",
+    "(typography)/kbd",
+    "---Data Display---",
+    "(data-display)/chip",
+    "---Utilities---",
+    "(utilities)/scroll-shadow"
+  ]
+}

apps/docs/content/docs/react/getting-started/(overview)/design-principles.mdx

@@ -16,6 +16,7 @@ Use semantic naming (primary, secondary, tertiary) instead of visual description
   src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/emphasis.jpg"
   darkSrc="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/emphasis-dark.jpg"
   alt="Semantic Intent Hierarchy"
+  className="object-contain"
 />
 
 

apps/docs/content/docs/react/getting-started/(overview)/quick-start.mdx

@@ -65,6 +65,6 @@ function App() {
 
 ## What's Next?
 
-- [Browse Components](/docs/components-list) - See all available components
+- [Browse Components](/docs/react/components) - See all available components
 - [Learn Styling](/docs/handbook/styling) - Customize with Tailwind CSS
 - [Explore Patterns](/docs/handbook/composition) - Master compound components

apps/docs/content/docs/react/getting-started/index.mdx

@@ -10,7 +10,6 @@ HeroUI is a React component library built on [Tailwind CSS v4](https://tailwindc
   src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/heroui-og_2x.jpg"
   darkSrc="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/heroui-og-black_2x.jpg"
   alt="HeroUI v3 Introduction"
-  className="h-[220px] md:h-[384px]"
 />
 
 ## Why HeroUI?
@@ -53,25 +52,25 @@ HeroUI v3 is not a snapshot—it's a garden that keeps growing. 🌱
 
 ## FAQ
 
-**Is HeroUI free?**  
+**Is HeroUI free?**
 Yes, completely free and open source under the MIT license.
 
-**Is it production-ready?**  
+**Is it production-ready?**
 Currently in **beta**. We're actively working towards a stable release with community feedback.
 
-**Can I customize the components?**  
+**Can I customize the components?**
 Yes! Use Tailwind utilities, CSS variables, [BEM](https://getbem.com/) modifiers, or compose component parts differently. Every slot is customizable.
 
-**Does it work with TypeScript?**  
+**Does it work with TypeScript?**
 Fully typed with excellent IDE support and autocompletion.
 
-**What about accessibility?**  
+**What about accessibility?**
 Built on React Aria Components for WCAG compliance. Keyboard navigation, focus management, and screen reader support included.
 
-**Can I use the styles without React?**  
+**Can I use the styles without React?**
 Yes, the CSS can be applied to plain HTML. See our [Tailwind Play example](https://play.tailwindcss.com/Ioomj2xdce).
 
-**Is there a Figma file?**  
+**Is there a Figma file?**
 Yes! Access our design system at [HeroUI Figma Kit V3](https://www.figma.com/community/file/1546526812159103429).
 
 ## Get Involved

apps/docs/content/docs/react/getting-started/meta.json

@@ -0,0 +1,24 @@
+{
+  "title": "Getting Started",
+  "description": "Get started with HeroUI v3",
+  "root": true,
+  "icon": "book-open",
+  "pages": [
+    "---Overview---",
+    "index",
+    "(overview)/quick-start",
+    "(overview)/design-principles",
+    "[sparkles][Showcase](/showcase)",
+    "[route][Roadmap](https://herouiv3.featurebase.app/roadmap)",
+    "[figma][Figma](https://www.figma.com/community/file/1546526812159103429)",
+    "---Handbook---",
+    "(handbook)/colors",
+    "(handbook)/theming",
+    "(handbook)/styling",
+    "(handbook)/animation",
+    "(handbook)/composition",
+    "---UI for Agents---",
+    "(ui-for-agents)/llms-txt",
+    "(ui-for-agents)/mcp-server"
+  ]
+}