feat: improve SEO meta description (#131)

yoannfleurydev · web-flow · commit 0c2901a8cc64 · 2026-02-23T16:59:20.000+01:00
diff --git a/apps/docs/pages/docs/Components/Inputs/checkbox.en-US.mdx b/apps/docs/pages/docs/Components/Inputs/checkbox.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Checkbox component for React Native with CheckboxGroup support. Customizable sizes, colors, icons, and custom render functions.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Inputs/input.en-US.mdx b/apps/docs/pages/docs/Components/Inputs/input.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Input component for React Native with TextInput wrapper. Supports prefix, suffix icons, custom colors, and focus styles.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Inputs/pininput.en-US.mdx b/apps/docs/pages/docs/Components/Inputs/pininput.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: PinInput component for React Native OTP and verification codes. Supports masking, custom cell count, and color schemes.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Inputs/radio.en-US.mdx b/apps/docs/pages/docs/Components/Inputs/radio.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Radio button component for React Native with RadioGroup support. Customizable sizes, colors, and custom render functions.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Inputs/select.en-US.mdx b/apps/docs/pages/docs/Components/Inputs/select.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Select dropdown component for React Native using react-native-picker-select. Native picker with multiple sizes and color schemes.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Inputs/slider.en-US.mdx b/apps/docs/pages/docs/Components/Inputs/slider.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Slider range input component for React Native using @react-native-community/slider. Customizable colors, steps, and value ranges.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Inputs/switch.en-US.mdx b/apps/docs/pages/docs/Components/Inputs/switch.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Switch toggle component for React Native with animated transitions. Multiple sizes, color schemes, and disabled state support.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Inputs/textarea.en-US.mdx b/apps/docs/pages/docs/Components/Inputs/textarea.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Textarea component for React Native multiline text input. Extended Input component with larger size and focus state styling.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Layout/box.en-US.mdx b/apps/docs/pages/docs/Components/Layout/box.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Box component for React Native - a View wrapper with style props for background, shadows, borders, border radius, and flexbox layouts.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Layout/center.en-US.mdx b/apps/docs/pages/docs/Components/Layout/center.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Center component for React Native to easily center children horizontally and vertically. Extends Box with centered alignment.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Layout/flex.en-US.mdx b/apps/docs/pages/docs/Components/Layout/flex.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Flex component for React Native with flex=1 by default. Quickly create flexible layouts that expand to fill available space.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Layout/hstack.en-US.mdx b/apps/docs/pages/docs/Components/Layout/hstack.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: HStack component for React Native to arrange children horizontally with consistent spacing. Build horizontal layouts easily.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Layout/safeareabox.en-US.mdx b/apps/docs/pages/docs/Components/Layout/safeareabox.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: SafeAreaBox component for React Native wrapping SafeAreaView with Ficus UI style props. Handle device notches and safe areas.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Layout/scrollbox.en-US.mdx b/apps/docs/pages/docs/Components/Layout/scrollbox.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: ScrollBox component for React Native wrapping ScrollView with Ficus UI style props. Create scrollable content areas with ease.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Layout/stack.en-US.mdx b/apps/docs/pages/docs/Components/Layout/stack.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Stack component for React Native to arrange children with spacing and optional dividers. Supports horizontal and vertical directions.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Layout/tabs.en-US.mdx b/apps/docs/pages/docs/Components/Layout/tabs.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Tabs component for React Native using react-native-tab-view. Build swipeable tab interfaces with customizable labels and colors.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Layout/vstack.en-US.mdx b/apps/docs/pages/docs/Components/Layout/vstack.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: VStack component for React Native to arrange children vertically with consistent spacing. Build vertical layouts easily.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Lists/flashlist.en-US.mdx b/apps/docs/pages/docs/Components/Lists/flashlist.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: FlashList component for React Native using Shopify's high-performance list. Optimized alternative to FlatList with Ficus UI styling.
 ---
 
 import { ExpoDemo } from '@components/expo-demo';
diff --git a/apps/docs/pages/docs/Components/Lists/list.en-US.mdx b/apps/docs/pages/docs/Components/Lists/list.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: List component for React Native wrapping FlatList with Ficus UI style props. Render scrollable lists with custom styling.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Lists/sectionlist.en-US.mdx b/apps/docs/pages/docs/Components/Lists/sectionlist.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: SectionList component for React Native with Ficus UI style props. Render grouped lists with section headers and custom styling.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Touchables/button.en-US.mdx b/apps/docs/pages/docs/Components/Touchables/button.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Button component for React Native with multiple sizes, variants (solid, outline, ghost, link), colors, and loading states.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Touchables/icon-button.en-US.mdx b/apps/docs/pages/docs/Components/Touchables/icon-button.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: IconButton component for React Native - icon-only buttons with multiple sizes, variants, and round options for action icons.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Touchables/pressable.en-US.mdx b/apps/docs/pages/docs/Components/Touchables/pressable.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Pressable component for React Native with Ficus UI style props. Create custom touchable elements with pressed state styling.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Touchables/touchable-highlight.en-US.mdx b/apps/docs/pages/docs/Components/Touchables/touchable-highlight.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: TouchableHighlight component for React Native with Ficus UI styling. Highlight color underlay effect on press for touch feedback.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Touchables/touchable-opacity.en-US.mdx b/apps/docs/pages/docs/Components/Touchables/touchable-opacity.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: TouchableOpacity component for React Native with Ficus UI styling. Opacity fade effect on press for touch feedback.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/Touchables/touchable-without-feedback.en-US.mdx b/apps/docs/pages/docs/Components/Touchables/touchable-without-feedback.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: TouchableWithoutFeedback component for React Native with Ficus UI styling. Touchable wrapper with no visual feedback on press.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/avatar.en-US.mdx b/apps/docs/pages/docs/Components/avatar.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Avatar component for React Native to display user profile pictures, initials, or fallback icons. Supports AvatarGroup and AvatarBadge.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/badge.en-US.mdx b/apps/docs/pages/docs/Components/badge.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Badge component for React Native to highlight status or labels. Supports solid, subtle, and outline variants with customizable colors.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/divider.en-US.mdx b/apps/docs/pages/docs/Components/divider.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Divider component for React Native to separate content with horizontal or vertical lines. Customizable color and thickness.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/draggable-modal.en-US.mdx b/apps/docs/pages/docs/Components/draggable-modal.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: DraggableModal bottom sheet component for React Native using react-native-bottom-sheet. Swipeable modal with customizable snap points.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/icon.en-US.mdx b/apps/docs/pages/docs/Components/icon.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Icon component for React Native using react-native-vector-icons. Support for Ionicons and other icon sets with customizable size and color.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/image.en-US.mdx b/apps/docs/pages/docs/Components/image.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Image component for React Native with Ficus UI style props. Wrapper around React Native Image with borderRadius, sizing, and spacing support.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/modal.en-US.mdx b/apps/docs/pages/docs/Components/modal.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Modal component for React Native using react-native-modal. Create popup dialogs with useDisclosure hook for open/close state management.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/spinner.en-US.mdx b/apps/docs/pages/docs/Components/spinner.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Spinner loading indicator component for React Native. Wrapper around ActivityIndicator with Ficus UI style props and theme colors.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Components/text.en-US.mdx b/apps/docs/pages/docs/Components/text.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Text component for React Native with style props for fontSize, fontWeight, fontFamily, and text decoration. Ficus UI typography system.
 ---
 
 import { CodeEditor } from '@components/code-editor';
diff --git a/apps/docs/pages/docs/Hooks/useColorMode.en-US.mdx b/apps/docs/pages/docs/Hooks/useColorMode.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: useColorMode hook for React Native to get and set light/dark mode. Methods for setColorMode and toggleColorMode.
 ---
 
 # useTheme
diff --git a/apps/docs/pages/docs/Hooks/useColorModeValue.en-US.mdx b/apps/docs/pages/docs/Hooks/useColorModeValue.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: useColorModeValue hook for React Native to return different values based on light or dark mode. Simplify theme-aware styling.
 ---
 
 # useTheme
diff --git a/apps/docs/pages/docs/Hooks/useDisclosure.en-US.mdx b/apps/docs/pages/docs/Hooks/useDisclosure.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: useDisclosure hook for React Native to manage open/close states. Perfect for modals, drawers, and toggleable UI elements.
 ---
 
 # useDisclosure
diff --git a/apps/docs/pages/docs/Hooks/useMediaQuery.en-US.mdx b/apps/docs/pages/docs/Hooks/useMediaQuery.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: useMediaQuery hook for React Native to detect screen width ranges. Create responsive layouts with minWidth and maxWidth conditions.
 ---
 
 # useMediaQuery
diff --git a/apps/docs/pages/docs/Hooks/useTheme.en-US.mdx b/apps/docs/pages/docs/Hooks/useTheme.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: useTheme hook for React Native Ficus UI to access the theme object from context. Get colors, spacing, and component styles.
 ---
 
 # useTheme
diff --git a/apps/docs/pages/docs/Hooks/useToast.en-US.mdx b/apps/docs/pages/docs/Hooks/useToast.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: useToast hook for React Native toast notifications. Show success, error, warning, and info messages with customizable layouts.
 ---
 
 # useToast
diff --git a/apps/docs/pages/docs/customization.en-US.mdx b/apps/docs/pages/docs/customization.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Customize Ficus UI themes with custom colors, fonts, spacing, and component styles. Create your own design system for React Native apps.
 ---
 
 import { Link } from 'nextra-theme-docs';
diff --git a/apps/docs/pages/docs/dark-mode.en-US.mdx b/apps/docs/pages/docs/dark-mode.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Implement dark mode in React Native with Ficus UI. Use the _dark prop to define light and dark theme styles for any component.
 ---
 
 # Dark Mode 🌜
diff --git a/apps/docs/pages/docs/ficus.en-US.mdx b/apps/docs/pages/docs/ficus.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Use the ficus() function to add Ficus UI style props to any React Native component. Create custom styled components with base styles.
 ---
 
 # ficus()
diff --git a/apps/docs/pages/docs/getting-started.en-US.mdx b/apps/docs/pages/docs/getting-started.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Learn how to install and set up React Native Ficus UI in your project. Quick start guide with npm, yarn, and pnpm installation instructions.
 ---
 
 import { Link } from 'nextra-theme-docs';
diff --git a/apps/docs/pages/docs/migration-from-v1.en-US.mdx b/apps/docs/pages/docs/migration-from-v1.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Migrate from Ficus UI v1 to v2. Breaking changes guide covering FicusProvider, theme structure, Switch, Button, and Select components.
 ---
 
 import { Link } from 'nextra-theme-docs';
diff --git a/apps/docs/pages/docs/responsive.en-US.mdx b/apps/docs/pages/docs/responsive.en-US.mdx
@@ -1,5 +1,6 @@
 ---
 searchable: true
+description: Build responsive React Native layouts with Ficus UI breakpoints. Use array or object syntax to define styles for different screen sizes.
 ---
 
 # Responsive styles
diff --git a/apps/docs/theme.config.tsx b/apps/docs/theme.config.tsx
@@ -111,9 +111,10 @@ const config: DocsThemeConfig = {
   },
   head: function useHead() {
     const config = useConfig<{ description?: string; image?: string }>();
-    const description =
+    const defaultDescription =
       'Ficus UI is a simple, modular and accessible UI library for React Native, forked from Magnus UI and inspired by Chakra UI';
-    const image = '/img/banner.png';
+    const description = config.frontMatter.description || defaultDescription;
+    const image = config.frontMatter.image || '/img/banner.png';
     return (
       <>
         <link rel="icon" type="image/x-icon" href="/favicon/favicon.ico" />
