Docs
Native Modules
FeatureTabs

FeatureTabs Module

Overview

The FeatureTabs module is a powerful and flexible tool designed to enhance the presentation of features on your website. It allows you to showcase multiple sections with tabbed navigation.

To maximize SEO benefits, the core logic of the module is separated into a client-side component (TabSelector.js), while the main presentation and layout are handled in FeatureTabs.js. This separation ensures that your content remains accessible and optimized for search engines.

Location

The source code for the FeatureTabs module can be found in the /modules/native/FeatureTabs folder.

Usage

The FeatureTabs module is highly customizable through props. While most props have default values, they can be easily overridden to tailor the module to your specific requirements.

Props

1. sectionColors

  • Default Value: 
    const defaultSectionColors = {
    background: "bg-background",
    foreground: "text-foreground",
    cardBackground: "bg-accent",
    cardForeground: "text-accent-foreground",
    highlightFeatureColor: "text-green-600 dark:text-green-400"
};
  • Description: The sectionColors prop allows you to customize the color scheme of the FeatureTabs module, ensuring it aligns with your site's design.
  • Property Descriptions:
    • background: Background color for the main section.
    • foreground: Foreground text color for the main section.
    • cardBackground: Background color for the cards containing the tab content.
    • cardForeground: Foreground text color for the cards containing the tab content.
    • highlightFeatureColor: Special highlight color used for emphasizing the final feature in each list.
  • Additional Notes:
    • bg-accent, text-accent-foreground, etc., are theme colors. For more information, refer to the documentation: Theming Documentation.
    • You can easily swap main and accent colors by setting background: "bg-accent" and foreground: "text-accent-foreground".
    • To support dark mode, use classes like bg-white dark:bg-black for color changes based on the theme.
    • The sectionColors object can be partially updated with props. For example, to change only the background color: 
      <FeatureTabs 
    sectionColors={{ 
        background: "bg-blue-200 dark:bg-blue-700" 
    }}
/>

2. text

  • Default Value: 
    const defaultText = {
    tinyheading: "NextJS Rapid Launch Kit",
    headingstart: "Unzip. Install. Build. Launch.",
    headingend: "Profit."
};
  • Description: The text prop allows you to customize the headings and subheadings displayed in the FeatureTabs module.
  • Property Descriptions:
    • tinyheading: A smaller heading that appears above the main heading.
    • headingstart: The initial part of the main heading.
    • headingend: The concluding part of the main heading, usually emphasized.
  • Additional Notes:
    • Customize the text content to align with your brand's messaging.
    • If no text prop is provided, the default values will be used.
    • The text object can be partially updated. For example, to change just the tinyheading: 
      <FeatureTabs 
    text={{ 
        tinyheading: "Your Custom Tiny Heading" 
    }}
/>

3. tabsData

  • Default Value: 
    const defaultTabsData = [
    {
        title: 'UI Modules & Color Schemes',
        icon: HomeModernIcon,
        content: {
            heading: 'UI Modules & Color Schemes',
            description: 'Create beautiful, responsive user interfaces with pre-built components and customizable styles.',
            features: [
                "Ready-to-use NextJS components (like this one you're seeing)",
                "Sleek Tailwind CSS styling",
                "Customizable color schemes",
                "One-click dark mode",
                "Time saved: 15+ hours"
            ],
            imageUrl: '/images/demo/uidesigner.jpg',
            ctaText: 'Learn More',
            ctaUrl: "#"
        }
    },
    // Additional tabs omitted for brevity
];
  • Description: The tabsData prop is an array of objects, each representing a tab in the FeatureTabs module. Each object contains the data needed to render a specific tab.
  • Property Descriptions:
    • title: The title of the tab.
    • icon: The icon displayed in the tab.
    • content: An object containing the heading, description, features list, and other details for the tab's content.
  • Additional Notes:
    • It's preferable to have exactly 4 tabs, as the responsiveness is optimized for all screen sizes.
    • If no tabsData prop is provided, the default values will be used.

Usage Example without Props

To use the FeatureTabs module with all default settings, simply include it in your page as follows:

import FeatureTabs from "@/modules/native/FeatureTabs";
 
const MyPage = () => {
  return (
    <FeatureTabs />
  );
}
 
export default MyPage;

This example will render the module with the default settings, displaying the predefined tabs and content.

Usage Example with Props

Here’s an example demonstrating how to customize the FeatureTabs module with props:

import FeatureTabs from "@/modules/native/FeatureTabs";
 
const MyCustomPage = () => {
  return (
    <FeatureTabs 
      sectionColors={{ 
        background: "bg-gray-100 dark:bg-gray-800", 
        cardBackground: "bg-white dark:bg-gray-900" 
      }}
      text={{ 
        tinyheading: "Discover Our Features", 
        headingstart: "Explore. Customize.", 
        headingend: "Succeed."
      }}
      tabsData={[
        {
          title: 'Custom Feature One',
          icon: HomeModernIcon,
          content: {
            heading: 'Custom Feature One',
            description: 'This is a custom feature description.',
            features: [
              "Customizable user interface",
              "Responsive design",
              "Easy-to-use components",
              "One-click dark mode",
              "Time saved: 10+ hours"
            ],
            imageUrl: '/images/demo/custom-feature.jpg',
            ctaText: 'Get Started',
            ctaUrl: "#"
          }
        },
        // Add more custom tabs as needed
      ]}
    />
  );
}
 
export default MyCustomPage;

In this example:

  • The sectionColors prop is used to customize the background and card colors.
  • The text prop is adjusted to reflect a different messaging strategy.
  • Custom tabsData is provided to replace the default content with your specific features.

Conclusion

The FeatureTabs module is a versatile tool that allows you to effectively present your features in an engaging, tabbed layout. With extensive customization options, you can easily tailor the module to match your brand's design and content requirements. This documentation should help you get started quickly and make the most of the FeatureTabs module in your projects.

CTAIcons