### Install next

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the next package, a React framework for building full-stack web applications. It enables server-side rendering, static site generation, and more.

```bash
npm install next@15.0.3
```

--------------------------------

### Install @emotion/styled

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the @emotion/styled package, allowing developers to create styled components using Emotion. It integrates seamlessly with the Emotion runtime.

```bash
npm install @emotion/styled@11.13.0
```

--------------------------------

### Install react-slick

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the react-slick package, a React carousel component based on Slick Carousel. It provides a responsive and touch-friendly slider.

```bash
npm install react-slick@0.30.2
```

--------------------------------

### Install axios

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the axios package, a popular promise-based HTTP client for the browser and Node.js. It simplifies making HTTP requests.

```bash
npm install axios@1.7.7
```

--------------------------------

### Install yet-another-react-lightbox

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the yet-another-react-lightbox package, a lightweight and customizable lightbox component for React. It's used for displaying images and other media.

```bash
npm install yet-another-react-lightbox@3.21.7
```

--------------------------------

### Install react

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the react package, the core JavaScript library for building user interfaces. It allows developers to create reusable UI components.

```bash
npm install react@18.3.1
```

--------------------------------

### Example Team6 Component Usage

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/team/team6.md

An example of how to use the Team6 component in a React application, providing sample data for the heading, members, image, and action button.

```TypeScript
import Team6 from 'src/blocks/team/Team6';

const App = () => {
  const teamMembers = [
    { name: 'John Doe', role: 'CEO', avatar: '/images/john-doe.jpg' },
    { name: 'Jane Smith', role: 'CTO', avatar: '/images/jane-smith.jpg' },
    { name: 'Peter Jones', role: 'Lead Developer', avatar: '/images/peter-jones.jpg' },
  ];

  const contactButton = {
    text: 'Contact Us',
    onClick: () => console.log('Contact button clicked!'),
  };

  const teamImage = {
    light: '/images/team-light.svg',
    dark: '/images/team-dark.svg',
  };

  return (
    <Team6
      heading="Meet Our Team"
      caption="Our team consists of dedicated professionals..."
      members={teamMembers}
      image={teamImage}
      actionBtn={contactButton}
      description="Our team is passionate about delivering top-notch solutions..."
    />
  );
};
```

--------------------------------

### Install @emotion/react

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the @emotion/react package, which provides the core functionality for using Emotion with React. It enables dynamic styling and theming.

```bash
npm install @emotion/react@11.13.3
```

--------------------------------

### SmallHero4 Component Usage Example (React/JSX)

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/smallhero/smallhero4.md

This example demonstrates how to use the SmallHero4 React component in a JSX file. It shows how to pass various props, including an optional chip with a link, a heading, a caption, an optional explore button, and an image source. This illustrates the component's flexibility in content presentation.

```jsx
import SmallHero4 from '@/blocks/small-hero/SmallHero4';

// Example usage within another React component
const MyHeroSection = () => {
  return (
    <SmallHero4
      chip={{ label: 'Featured', link: { href: '/featured', passHref: true } }}
      heading="Discover Our New Collection"
      caption="Explore the latest trends in our new arrivals."
      exploreBtn={{ href: '/explore', children: 'Explore Now' }}
      image={{ light: '/images/hero-light.svg', dark: '/images/hero-dark.svg' }}
    />
  );
};

export default MyHeroSection;

```

--------------------------------

### Add Translation Key (JSON)

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/admin/development/menu.md

Provides an example of adding new translation keys to a JSON file for internationalization, which can then be used with the `FormattedMessage` component.

```json
{
  "newGroup": "New Group",
  "newItem": "New Item"
}
```

--------------------------------

### Install slick-carousel

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the slick-carousel package, a dependency for react-slick. It's a powerful, flexible, and feature-rich carousel library.

```bash
npm install slick-carousel@1.8.1
```

--------------------------------

### ComingSoon Component Usage

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/comingsoon.md

Demonstrates how to use the ComingSoon component with its various props. This example shows how to configure the chip, description, and primary button for email submissions.

```tsx
import ComingSoon from '@/blocks/ComingSoon';

<ComingSoon
  chip={{ chipCaption: 'New Feature' }}
  description="We are working on something amazing. Stay tuned for updates!"
  primaryBtn={{ children: 'Subscribe', onClick: () => alert('Subscribed!') }}
/>;
```

--------------------------------

### Pricing3 Component Usage (TypeScript/React)

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/pricing/pricing3.md

Demonstrates the usage of the Pricing3 component, showing how to pass props like heading, caption, defaultUnit, and an array of plan objects. This example illustrates the structure for defining pricing plans.

```TypeScript
import Pricing3 from "@/blocks/pricing/Pricing3";

const Page = () => {
  const pricingData = {
    heading: "Our Pricing Plans",
    caption: "Choose the plan that's right for you.",
    defaultUnit: "per month",
    plans: [
      {
        title: "Basic",
        price: 19,
        features: ["Feature A", "Feature B", "Feature C"],
        cta: { label: "Get Started", link: "/signup?plan=basic" },
      },
      {
        title: "Pro",
        price: 49,
        features: ["Feature A", "Feature B", "Feature C", "Feature D"],
        cta: { label: "Get Started", link: "/signup?plan=pro" },
      },
      {
        title: "Enterprise",
        price: 99,
        features: ["Feature A", "Feature B", "Feature C", "Feature D", "Feature E"],
        cta: { label: "Contact Us", link: "/contact" },
      },
    ],
  };

  return <Pricing3 {...pricingData} />;
};

export default Page;
```

--------------------------------

### Install leaflet

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the leaflet package, a leading open-source JavaScript library for mobile-friendly interactive maps. It is lightweight and feature-rich.

```bash
npm install leaflet@1.9.4
```

--------------------------------

### Onboard Component Usage

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/onboard.md

Demonstrates how to use the Onboard component with various props. It includes a heading, caption, and optional primary and secondary buttons, showcasing the component's flexibility for onboarding flows.

```tsx
import Onboard from "@/blocks/Onboard";

// Example usage:
<Onboard
  heading="Welcome to Our Platform"
  caption="Get started by exploring the features we offer and sign up for early access."
  primaryBtn={{ children: 'Get Started', onClick: () => alert('Primary Button Clicked!') }}
  secondaryBtn={{ children: 'Learn More', onClick: () => alert('Secondary Button Clicked!') }}
/>
```

--------------------------------

### Faq3 Component Usage

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/faq/faq3.md

This snippet demonstrates the usage of the Faq3 component, showcasing how to pass various props to configure the FAQ section, including the heading, caption, default expanded panel, FAQ list, get in touch details, and background image.

```typescript
import Faq3 from "@/blocks/faq/Faq3";

// Example usage of the Faq3 component
<Faq3
  heading="Frequently Asked Questions"
  caption="Here you can find answers to the most common questions about our services."
  defaultExpanded="panel0"
  faqList={[
    { question: "What is the return policy?", answer: "Returns are accepted within 30 days." },
    { question: "How do I track my order?", answer: "You can track your order via the 'My Orders' page." },
  ]}
  getInTouch={{
    title: "Need More Help?",
    description: "Contact our support team for further assistance.",
    link: { href: "/contact", children: "Contact Us" },
  }}
  bgImage="https://example.com/background.jpg"
/>;
```

--------------------------------

### Install @mui/lab

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the @mui/lab package from Material-UI, which includes experimental and advanced components. These components extend the core Material-UI library.

```bash
npm install @mui/lab@6.0.0-beta.15
```

--------------------------------

### Clientele4 Component Usage

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/clientele/clientele4.md

Example of how to use the Clientele4 component, including passing a title and a list of client objects. The component is built with React and TypeScript.

```jsx
import Clientele4 from '@/blocks/clientele/Clientele4';

const App = () => {
  const clienteleData = [
    { src: '/images/client1.png', alt: 'Client 1' },
    { src: '/images/client2.png', alt: 'Client 2' },
    // ... more clients
  ];

  return (
    <div>
      <Clientele4 title="Our Valued Partners" clienteleList={clienteleData} />
    </div>
  );
};

export default App;
```

--------------------------------

### Install stylis-plugin-rtl

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the stylis-plugin-rtl package, a plugin for stylis that adds support for Right-to-Left (RTL) text direction. It's useful for internationalization.

```bash
npm install stylis-plugin-rtl@2.1.1
```

--------------------------------

### Install react-hook-form

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the react-hook-form package, a library for building forms in React using hooks. It simplifies form state management and validation.

```bash
npm install react-hook-form@7.53.2
```

--------------------------------

### TopOffer2 Component Usage

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/topoffer/topoffer2.md

This snippet demonstrates the usage of the TopOffer2 component, showcasing how to import and integrate it into an application. It highlights the component's structure and the necessary props for its functionality.

```tsx
import TopOffer2 from '@/blocks/top-offer/TopOffer2';

// Example usage within a React component:
<TopOffer2 
  heading="Join Our Newsletter"
  caption="Stay updated with the latest news and offers."
  primaryBtn={{ text: 'Subscribe', onClick: handleSubscribe, variant: 'contained' }}
  icon={{ name: 'email' }}
  handleClick={() => console.log('Alert closed')}
/>
```

--------------------------------

### Faq5 Component Usage

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/faq/faq5.md

This snippet demonstrates the usage of the Faq5 component, showcasing how to pass various props to configure the FAQ section. It includes setting the main heading, an optional caption, controlling default expanded panels, providing a list of FAQ items, and configuring an optional image and a 'Get in Touch' section.

```tsx
import Faq5 from "src/blocks/faq/Faq5";

// Example usage of the Faq5 component
<Faq5
  heading="Frequently Asked Questions"
  caption="Here are answers to some of the most common questions we receive."
  defaultExpanded="panel0"
  faqList={[
    { question: "What is your return policy?", answer: "You can return items within 30 days of purchase." },
    { question: "How do I track my order?", answer: "You can track your order using the tracking number provided in your shipping confirmation email." },
  ]}
  image={{ src: "https://via.placeholder.com/400x300.png", alt: "FAQ Image" }}
  getInTouch={{
    title: "Need More Help?",
    description: "If you have further questions or need assistance, feel free to contact us.",
    link: { href: "/contact", children: "Contact Us" },
  }}
/>;
```

--------------------------------

### Install framer-motion

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the framer-motion package, a library for creating animations and gestures in React applications. It provides a declarative API for complex animations.

```bash
npm install framer-motion@11.11.17
```

--------------------------------

### Install @mui/material-nextjs

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the @mui/material-nextjs package, which provides Next.js integration for Material-UI. It includes server-side rendering support and optimizations for Next.js applications.

```bash
npm install @mui/material-nextjs@6.1.7
```

--------------------------------

### Clientele7 Component Usage (TypeScript/JSX)

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/clientele/clientele7.md

This snippet demonstrates the usage of the Clientele7 component, showcasing how to pass props for the title, client logos, and an optional explore button. It highlights the structure for defining client data and button configurations.

```jsx
import Clientele7 from 'src/blocks/clientele/Clientele7';

// Example usage:
<Clientele7 
  title="Our Valued Partners"
  clienteleList={[
    { src: '/images/clientA.png', alt: 'Client A' },
    { src: '/images/clientB.png', alt: 'Client B' },
    { src: '/images/clientC.png', alt: 'Client C' },
  ]}
  exploreBtn={{
    variant: 'contained',
    color: 'secondary',
    href: '/partners',
    children: 'View Partners'
  }}
/>;
```

--------------------------------

### TopOffer3 Component Usage

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/topoffer/topoffer3.md

This snippet demonstrates the usage of the TopOffer3 component, showcasing how to pass props for the offer details and an optional click handler for closing the alert.

```tsx
import TopOffer3 from '@/blocks/top-offer/TopOffer3';

// Example usage:
<TopOffer3
  offer={{
    label: 'Limited Time Offer!',
    link: {{ href: '/special', title: 'Learn More' }}
  }}
  handleClick={() => console.log('Alert closed')}
/>;
```

--------------------------------

### Standard License JavaScript Package

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/main/whats-in-the-package.md

The Standard license package includes a JavaScript zip file containing UI-kit and Admin directories, each with 'seed' and 'full-version' subdirectories.

```javascript
javascript.zip
      ├─ ui-kit
          ├─ seed
          ├─ full-version
      ├─ admin
          ├─ seed
          ├─ full-version
```

--------------------------------

### Install @emotion/cache

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the @emotion/cache package, a CSS-in-JS library for efficient styling in React applications. It helps in creating and managing style caches.

```bash
npm install @emotion/cache@11.13.1
```

--------------------------------

### Install stylis

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the stylis package, a powerful CSS parser and prefixer. It's often used in CSS-in-JS solutions for processing CSS rules.

```bash
npm install stylis@4.3.4
```

--------------------------------

### SmallHero2 Component Usage

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/components/smallhero/smallhero2.md

Demonstrates how to use the SmallHero2 component with its various props. This example shows how to configure the chip with a label and link, set a headline, and provide a caption.

```typescript
import SmallHero2 from '@/blocks/small-hero/SmallHero2';

// Example usage:
<SmallHero2 
  chip={{ label: 'New!', link: { href: '/new', passHref: true } }}
  headLine="Introducing Our Latest Product"
  captionLine="Discover the features and benefits of our newest release."
/>
```

--------------------------------

### Install react-leaflet

Source: https://github.com/phoenixcoded/docs-saasable/blob/main/uikit/development/dependencies.md

Installs the react-leaflet package, which provides React components for Leaflet maps. It allows seamless integration of Leaflet maps into React applications.

```bash
npm install react-leaflet@5.0.0-rc.1
```