> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-sdk-components.md).

# React SDK Components

- [Onboarding](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding.md)
- [Onboarding Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding/onboarding-component.md): The Onboarding component is a versatile React component designed for creating interactive onboarding experiences. It allows you to guide users through a series of screens, collect their responses.
- [Get Started Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding/get-started-component.md): The GetStarted component is a part of the Quest Labs React SDK. It provides a quick start guide for users to explore and engage with Application.
- [Tutorial/Quest List Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding/tutorial-quest-list-component.md): A versatile UI element for managing and tracking task completion. Displays tasks, tracks progress with a progress bar, and shows checkmarks for completed tasks.
- [Walk Through Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/onboarding/walk-through-component.md): The WalkThrough component is used to guide users through a series of steps in a quest or tutorial. It provides a visual overlay with step-by-step instructions and can be customized to fit the specific
- [Gamification](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification.md)
- [Challenges Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification/challenges-component.md)
- [DailyStreak Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification/dailystreak-component.md): The DailyStreak component is a versatile React component designed to display and track daily streaks for a specific metric. It provides visual indicators for the user's progress and includes customiza
- [Leaderboard Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification/leaderboard-component.md): The Leaderboard component efficiently displays and manages leaderboards in React, offering customizable styling. Users can easily monitor progress and compete through its clear interface.
- [GamifiedQuiz component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification/gamifiedquiz-component.md)
- [User Assistance](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance.md)
- [Feedback Workflow Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/feedback-workflow-component.md): A versatile interface for user communication, offering options to report issues, provide feedback, request features, or contact support, ensuring user engagement and problem-solving.
- [Inline Feedback Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/inline-feedback-component.md): A user-friendly tool for collecting feedback, featuring email, message, name, and star ratings for effective user input.
- [Survey Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/survey-component.md): Offer a versatile survey solution for your app, enabling comprehensive data collection across various use cases. Provide a dedicated Surveys category with diverse templates for seamless integration in
- [Search Bar Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/search-bar-component.md): This component provides a search bar with customizable appearance and interactive search results. Users can navigate through search results using keyboard shortcuts and open relevant links.
- [Help Hub Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/help-hub-component.md): The Help Hub component is a user interface component that offers a comprehensive help center feature within your application. It provides users with access to information, an AI chatbot.
- [CreditsPopup Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/user-assistance/creditspopup-component.md): The CreditsPopup component is a React component that provides a customizable popup for displaying information, alerts, or notifications to users.
- [Expansion](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/expansion.md)
- [Referral Components](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/expansion/referral-components.md): The Referral components are  reusable React components designed to facilitate user referrals and rewards. It allows users to earn rewards by sharing a referral code with friends.
- [Cross-Selling Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/expansion/cross-selling-component.md): Boost revenue and enhance user satisfaction with our automated upselling. Tailored suggestions for additional services or products are seamlessly offered based on individual product usage, optimizing
- [Miscellaneous](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous.md)
- [Confetti Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/confetti-component.md): This documentation provides information on how to use the confetti function to create a confetti animation on a webpage.
- [Alert Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/alert-component.md): The toast notification system allows you to display temporary pop-up messages (toasts) with different styles (success, warning, info, error) in your application.
- [Login Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/login-component.md): Our login component provides a simple means to incorporate secure user authentication into React apps. Easily tailor the login UI to fit your project's needs with various customization options.
- [One to one Survey Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/one-to-one-survey-component.md): The Quest Survey component is a  customizable feature that empowers users to create one-to-one surveys and quizzes.
- [Pricing & Payment Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/pricing-and-payment-component.md): Empower users to design custom plans and effortlessly handle payments via Stripe with this versatile component.
- [Badge Component](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/badge-component.md): The Badge component visually represents user achievements, showcasing earned badges within your application.
- [Toast Service](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/toast-service.md): The Toast component is a React functional component responsible for displaying notifications to users in a non-intrusive and visually appealing manner.
- [Survey](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey.md): Your thoughts shape our tomorrow! Take a moment to share your insights in our survey and fuel our journey towards growth and excellence. Together, let's build a better future.
- [User Experience Feedback Survey](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/user-experience-feedback-survey.md): Rate your experience with us to help improve our services. Share specific thoughts and suggestions for enhancements to shape a more seamless journey.
- [Feature Usage Survey](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/feature-usage-survey.md): Discover and rate features to help refine our tools. Share your usage patterns and suggest enhancements to shape our platform's future.
- [Customer Satisfaction Surveyy](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/customer-satisfaction-surveyy.md): Rate our service to help us improve and excel. Share the highlights of your experience and what made it memorable. Your feedback is our roadmap to better serve you.
- [Net Promoter Score](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/net-promoter-score.md): Unlock the power of your advocacy score and shape our future with your feedback. Help us build trust and create valuable recommendations.
- [Onboarding Experience Survey](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/onboarding-experience-survey.md): Share your initial experience and whether you needed more guidance. Tell us about helpful tools and suggest improvements for a smoother journey.
- [Customer Support Satisfaction Survey](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/survey/customer-support-satisfaction-survey.md): Rate our support services to help us excel and improve. Share your insights and join us in striving for customer care excellence.
- [Embedded Analytics](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics.md)
- [Line Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/line-chart.md): Optimize user engagement with activity trends and personalized analytics; discover untapped features and track performance benchmarks for continuous improvement.
- [Scatter Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/scatter-chart.md): Analyze the correlation between feature usage and user success, using scatter plots to highlight the impact of analytics and benchmark achievements.
- [Combo Bar/Line](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/combo-bar-line.md): Analyze feature adoption, track user success, and visualize efficiency gains with combined charts to highlight the impact of new tools and analytics.
- [Stacked Bar Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/stacked-bar-chart.md): Analyze user engagement, track feature adoption, and display benchmark progress to optimize and improve performance.
- [Horizontal Bar Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/horizontal-bar-chart.md): Compare feature effectiveness, track performance improvements, and illustrate engagement to highlight the impact of personalized analytics.
- [Stepped Line Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/stepped-line-chart.md): Analyze step-by-step engagement changes, feature adoption, and benchmark achievements to boost activity, promote lesser-used functionalities, and enhance performance.
- [Pie chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/pie-chart.md): Analyze feature usage, user engagement, and performance goal achievement to guide enhancements, reevaluate sections, and motivate continuous improvement.
- [Doughnut Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/doughnut-chart.md): Analyze feature usage and user engagement by segment, and use benchmark visuals to guide training, boost satisfaction, and identify areas for improvement.
- [Multi Series Pie](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/multi-series-pie.md): Analyze user engagement, feature adoption trends, and performance benchmarks by user group to identify usage patterns and enhance platform engagement.
- [Bubble Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/bubble-chart.md): Compare feature usage, identify impactful analytics tools, and track benchmark progress with bubble sizes reflecting engagement, success, and goal attainment.
- [Floating Bar Chart](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/embedded-analytics/floating-bar-chart.md): Illustrate engagement score shifts, feature usage spread, and progress towards performance benchmarks to highlight the effectiveness of personalized insights and targeted improvements.