### SoftProgress Component Examples (React)

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Demonstrates the SoftProgress component for displaying task completion status. It includes examples of gradient and contained variants, different color options, and progress bars with labels. Requires 'components/SoftProgress'.

```jsx
import SoftProgress from "components/SoftProgress";

function ProgressExamples() {
  return (
    <>
      {/* Basic progress */}
      <SoftProgress value={50} />

      {/* Gradient progress (default) */}
      <SoftProgress variant="gradient" color="info" value={75} />

      {/* Contained progress */}
      <SoftProgress variant="contained" color="success" value={90} />

      {/* Different colors */}
      <SoftProgress variant="gradient" color="primary" value={30} />
      <SoftProgress variant="gradient" color="warning" value={60} />
      <SoftProgress variant="gradient" color="error" value={45} />
      <SoftProgress variant="gradient" color="dark" value={80} />

      {/* Progress with label */}
      <SoftProgress variant="gradient" color="info" value={65} label />
    </>
  );
}
```

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

### SoftAvatar Component Examples (React)

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Shows how to implement the SoftAvatar component for user images and icons. It supports different sizes, shadow effects, background colors for initials, and can display text or images. Requires 'components/SoftAvatar'.

```jsx
import SoftAvatar from "components/SoftAvatar";

function AvatarExamples() {
  return (
    <>
      {/* Basic avatar with image */}
      <SoftAvatar src="/images/user.jpg" alt="User Name" />

      {/* Different sizes */}
      <SoftAvatar src="/images/user.jpg" size="xs" alt="XS" />
      <SoftAvatar src="/images/user.jpg" size="sm" alt="SM" />
      <SoftAvatar src="/images/user.jpg" size="md" alt="MD" />
      <SoftAvatar src="/images/user.jpg" size="lg" alt="LG" />
      <SoftAvatar src="/images/user.jpg" size="xl" alt="XL" />
      <SoftAvatar src="/images/user.jpg" size="xxl" alt="XXL" />

      {/* Avatar with shadow */}
      <SoftAvatar src="/images/user.jpg" shadow="md" size="lg" alt="Shadowed" />

      {/* Avatar with background color (for initials) */}
      <SoftAvatar bgColor="info" size="lg" shadow="sm">
        JD
      </SoftAvatar>

      {/* Avatar with different background colors */}
      <SoftAvatar bgColor="primary" size="md">AB</SoftAvatar>
      <SoftAvatar bgColor="success" size="md">CD</SoftAvatar>
      <SoftAvatar bgColor="warning" size="md">EF</SoftAvatar>
    </>
  );
}
```

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

### Configure DashboardLayout Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Shows the setup of a main dashboard layout wrapper that manages sidenav spacing and provides a consistent structure for page content, including a navbar and footer.

```jsx
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
import Footer from "examples/Footer";
import SoftBox from "components/SoftBox";

function MyDashboardPage() {
  return (
    <DashboardLayout>
      <DashboardNavbar />
      <SoftBox py={3}>
        <h1>My Dashboard Content</h1>
      </SoftBox>
      <Footer />
    </DashboardLayout>
  );
}
```

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

### SoftAlert Component Examples (React)

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Demonstrates the usage of the SoftAlert component for displaying dismissible notifications with different color variants. It requires the 'components/SoftAlert' module and optionally '@mui/material/Icon' for icons.

```jsx
import SoftAlert from "components/SoftAlert";
import Icon from "@mui/material/Icon";

function AlertExamples() {
  return (
    <>
      {/* Info alert (default) */}
      <SoftAlert color="info">
        <Icon fontSize="small">info</Icon>&nbsp;
        This is an informational message.
      </SoftAlert>

      {/* Success alert */}
      <SoftAlert color="success">
        <Icon fontSize="small">check</Icon>&nbsp;
        Operation completed successfully!
      </SoftAlert>

      {/* Warning alert */}
      <SoftAlert color="warning">
        <Icon fontSize="small">warning</Icon>&nbsp;
        Please review before proceeding.
      </SoftAlert>

      {/* Error alert */}
      <SoftAlert color="error">
        <Icon fontSize="small">error</Icon>&nbsp;
        An error occurred. Please try again.
      </SoftAlert>

      {/* Dismissible alert */}
      <SoftAlert color="primary" dismissible>
        This alert can be dismissed by clicking the X button.
      </SoftAlert>

      {/* Dark alert */}
      <SoftAlert color="dark">
        Dark themed alert message.
      </SoftAlert>
    </>
  );
}
```

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

### SoftBadge Component Examples (React)

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Illustrates the various ways to use the SoftBadge component for labels, status indicators, and tags. It supports different variants, sizes, and styles like gradient, contained, circular, and bordered badges. Requires 'components/SoftBadge'.

```jsx
import SoftBadge from "components/SoftBadge";

function BadgeExamples() {
  return (
    <>
      {/* Gradient badge (default) */}
      <SoftBadge variant="gradient" color="success" badgeContent="Active" />

      {/* Contained badge */}
      <SoftBadge variant="contained" color="info" badgeContent="New" />

      {/* Different sizes */}
      <SoftBadge variant="gradient" color="warning" size="xs" badgeContent="XS" />
      <SoftBadge variant="gradient" color="warning" size="sm" badgeContent="SM" />
      <SoftBadge variant="gradient" color="warning" size="md" badgeContent="MD" />
      <SoftBadge variant="gradient" color="warning" size="lg" badgeContent="LG" />

      {/* Circular badge */}
      <SoftBadge variant="gradient" color="error" circular badgeContent="99+" />

      {/* Indicator (dot) badge */}
      <SoftBadge variant="gradient" color="success" indicator />

      {/* Badge with border */}
      <SoftBadge variant="gradient" color="primary" border badgeContent="Premium" />

      {/* Container badge */}
      <SoftBadge variant="contained" color="dark" container badgeContent="Container" />
    </>
  );
}
```

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

### Initialize Application with Providers

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Sets up the React application entry point by wrapping the main App component with BrowserRouter for navigation and the SoftUIControllerProvider for global UI state management.

```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "App";
import { SoftUIControllerProvider } from "context";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <SoftUIControllerProvider>
      <App />
    </SoftUIControllerProvider>
  </BrowserRouter>
);
```

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

### React Theme Customization with MUI

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Demonstrates extending MUI's createTheme with Soft UI design tokens for colors, typography, and shadows. It shows how to use theme functions for responsive styling and transitions within components.

```jsx
// Using theme functions in components
import SoftBox from "components/SoftBox";

function ThemedComponent() {
  return (
    <SoftBox
      sx={({ breakpoints, transitions, functions: { pxToRem }, palette }) => ({
        // Responsive padding
        p: pxToRem(24),

        // Use theme colors
        backgroundColor: palette.background.default,
        color: palette.text.main,

        // Responsive breakpoints
        [breakpoints.up("md")]: {
          padding: pxToRem(32),
        },

        // Theme transitions
        transition: transitions.create(["background-color"], {
          easing: transitions.easing.easeInOut,
          duration: transitions.duration.standard,
        }),
      })}
    >
      Themed content with responsive styling
    </SoftBox>
  );
}

// Available theme functions:
// - pxToRem(value): Convert pixels to rem units
// - rgba(color, opacity): Create rgba color string
// - linearGradient(color1, color2): Create CSS gradient
// - hexToRgb(hex): Convert hex to RGB values
// - boxShadow(offset, radius, color, opacity, inset): Generate box-shadow
```

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

### Manage Global UI State with SoftUIController

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Demonstrates how to consume the SoftUIController context to read global state and dispatch actions to update UI settings such as sidenav visibility, colors, and layout direction.

```jsx
import { useSoftUIController, setMiniSidenav, setSidenavColor, setDirection } from "context";

function MyComponent() {
  const [controller, dispatch] = useSoftUIController();
  const { miniSidenav, transparentSidenav, sidenavColor, direction, layout } = controller;

  const handleToggleSidenav = () => {
    setMiniSidenav(dispatch, !miniSidenav);
  };

  const handleColorChange = () => {
    setSidenavColor(dispatch, "primary");
  };

  const handleRTL = () => {
    setDirection(dispatch, "rtl");
  };

  return (
    <div>
      <p>Current layout: {layout}</p>
      <button onClick={handleToggleSidenav}>Toggle Sidenav</button>
    </div>
  );
}
```

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

### Implement Sidenav Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Illustrates how to initialize the Sidenav component with a route configuration array. It handles collapsible menu items, titles, and dividers for structured application navigation.

```jsx
import Sidenav from "examples/Sidenav";
import brandLogo from "assets/images/logo.png";

const routes = [
  { type: "collapse", name: "Dashboard", key: "dashboard", route: "/dashboard", icon: <Icon>dashboard</Icon>, component: <Dashboard />, noCollapse: true },
  { type: "collapse", name: "Tables", key: "tables", route: "/tables", icon: <Icon>table_view</Icon>, component: <Tables />, noCollapse: true },
  { type: "title", title: "Account", key: "account-pages" },
  { type: "collapse", name: "Profile", key: "profile", route: "/profile", icon: <Icon>person</Icon>, component: <Profile />, noCollapse: true },
  { type: "divider", key: "divider-1" }
];

function AppWithSidenav() {
  return (
    <Sidenav color="info" brand={brandLogo} brandName="My Dashboard" routes={routes} />
  );
}
```

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

### Implement SoftPagination Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Demonstrates how to use the SoftPagination component to create a customizable navigation bar for content pages. It supports variant, color, and size props, along with icon-based navigation items.

```jsx
import SoftPagination from "components/SoftPagination";
import Icon from "@mui/material/Icon";

function PaginationExample() {
  return (
    <SoftPagination variant="gradient" color="info" size="medium">
      <SoftPagination item>
        <Icon>keyboard_arrow_left</Icon>
      </SoftPagination>
      <SoftPagination item>1</SoftPagination>
      <SoftPagination item active>2</SoftPagination>
      <SoftPagination item>3</SoftPagination>
      <SoftPagination item>4</SoftPagination>
      <SoftPagination item>5</SoftPagination>
      <SoftPagination item>
        <Icon>keyboard_arrow_right</Icon>
      </SoftPagination>
    </SoftPagination>
  );
}
```

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

### Implement Layouts with SoftBox Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Shows usage of the SoftBox component, an extension of MUI Box, to create styled containers with gradients, shadows, border radii, and flexbox configurations.

```jsx
import SoftBox from "components/SoftBox";

function BoxExamples() {
  return (
    <>
      <SoftBox p={3} mb={2}>
        <p>Simple container</p>
      </SoftBox>

      <SoftBox
        variant="gradient"
        bgColor="info"
        color="white"
        borderRadius="lg"
        shadow="md"
        p={3}
      >
        Gradient info box
      </SoftBox>

      <SoftBox
        variant="contained"
        bgColor="dark"
        color="white"
        opacity={0.8}
        borderRadius="xl"
        shadow="lg"
        p={4}
      >
        Dark contained box
      </SoftBox>

      <SoftBox
        display="flex"
        justifyContent="space-between"
        alignItems="center"
        bgColor="white"
        shadow="sm"
        borderRadius="md"
        p={2}
      >
        <span>Left content</span>
        <span>Right content</span>
      </SoftBox>
    </>
  );
}
```

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

### Display MiniStatisticsCard Components

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Demonstrates the usage of MiniStatisticsCard to display quantitative data. It supports various configurations for icons, percentage trends, and background colors within a grid layout.

```jsx
import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
import Grid from "@mui/material/Grid";

function StatisticsSection() {
  return (
    <Grid container spacing={3}>
      <Grid item xs={12} sm={6} xl={3}>
        <MiniStatisticsCard title={{ text: "today's money", fontWeight: "medium" }} count="$53,000" percentage={{ color: "success", text: "+55%" }} icon={{ color: "info", component: "paid" }} />
      </Grid>
      <Grid item xs={12} sm={6} xl={3}>
        <MiniStatisticsCard title={{ text: "today's users" }} count="2,300" percentage={{ color: "success", text: "+3%" }} icon={{ color: "info", component: "public" }} direction="left" />
      </Grid>
    </Grid>
  );
}
```

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

### SoftPagination Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

A customizable pagination component for navigating through content. Supports different variants, colors, and sizes.

```APIDOC
## SoftPagination Component

### Description
Pagination component for navigating through pages of content with color and size customization.

### Usage
```jsx
import SoftPagination from "components/SoftPagination";
import Icon from "@mui/material/Icon";

function PaginationExample() {
  return (
    <SoftPagination variant="gradient" color="info" size="medium">
      <SoftPagination item>
        <Icon>keyboard_arrow_left</Icon>
      </SoftPagination>
      <SoftPagination item>1</SoftPagination>
      <SoftPagination item active>2</SoftPagination>
      <SoftPagination item>3</SoftPagination>
      <SoftPagination item>4</SoftPagination>
      <SoftPagination item>5</SoftPagination>
      <SoftPagination item>
        <Icon>keyboard_arrow_right</Icon>
      </SoftPagination>
    </SoftPagination>
  );
}
```

### Props
- `variant` (string): The visual style of the pagination (e.g., 'gradient', 'contained').
- `color` (string): The color theme of the pagination (e.g., 'info', 'primary').
- `size` (string): The size of the pagination component (e.g., 'small', 'medium', 'large').
- `item` (boolean): Indicates if the child element is a pagination item.
```

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

### React Color Palette Reference

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Provides a reference for the available color options within the Soft UI theme, including standard named colors, gradients, and specific colors for alerts and badges.

```javascript
// Available color options for components
const colorOptions = [
  "primary",   // #cb0c9f (magenta)
  "secondary", // #8392ab (gray-blue)
  "info",      // #17c1e8 (cyan)
  "success",   // #82d616 (green)
  "warning",   // #fbcf33 (yellow)
  "error",     // #ea0606 (red)
  "light",     // #e9ecef (light gray)
  "dark",      // #344767 (dark blue-gray)
];

// Gradient colors have main and state values
const gradients = {
  primary: { main: "#7928ca", state: "#ff0080" },
  info: { main: "#2152ff", state: "#21d4fd" },
  success: { main: "#17ad37", state: "#98ec2d" },
  // ... etc
};
```

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

### SoftAvatar Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

The SoftAvatar component displays user images or initials with various size, shadow, and background color options.

```APIDOC
## SoftAvatar Component

### Description
Displays user avatars with support for images or text initials.

### Parameters
- **src** (string) - Optional - Image source URL.
- **size** (string) - Optional - Size (xs, sm, md, lg, xl, xxl).
- **shadow** (string) - Optional - Shadow intensity (sm, md, lg).
- **bgColor** (string) - Optional - Background color for initials (primary, info, success, etc.).
```

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

### SoftProgress Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

The SoftProgress component provides a visual representation of completion status using progress bars.

```APIDOC
## SoftProgress Component

### Description
A progress bar component to indicate task completion status.

### Parameters
- **value** (number) - Required - The completion percentage (0-100).
- **variant** (string) - Optional - 'gradient' or 'contained'.
- **color** (string) - Optional - Theme color.
- **label** (boolean) - Optional - Displays a progress label.
```

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

### MiniStatisticsCard Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

A compact card component designed to display key statistics, including titles, counts, percentages, and icons.

```APIDOC
## MiniStatisticsCard Component

### Description
Statistics card component for displaying key metrics with icons, counts, and percentage changes.

### Usage
```jsx
import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
import Grid from "@mui/material/Grid";

function StatisticsSection() {
  return (
    <Grid container spacing={3}>
      <Grid item xs={12} sm={6} xl={3}>
        <MiniStatisticsCard
          title={{ text: "today's money", fontWeight: "medium" }}
          count="$53,000"
          percentage={{ color: "success", text: "+55%" }}
          icon={{ color: "info", component: "paid" }}
        />
      </Grid>
      {/* ... other cards */}
    </Grid>
  );
}
```

### Props
- `title` (object): Configuration for the card title. Expected to have a `text` property (string) and optionally `fontWeight` (string).
- `count` (string): The main numerical value or text to display.
- `percentage` (object): Configuration for the percentage change. Expected to have `color` (string) and `text` (string) properties.
- `icon` (object): Configuration for the icon. Expected to have `color` (string) and `component` (string) properties.
- `bgColor` (string): Optional background color for the card.
- `direction` (string): Optional direction for the percentage text (e.g., 'left').
```

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

### DashboardLayout Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

The main layout wrapper for dashboard pages, managing sidenav visibility and providing a consistent structure.

```APIDOC
## DashboardLayout Component

### Description
Layout wrapper component that handles sidenav margin adjustments and sets the dashboard layout context.

### Usage
```jsx
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
import Footer from "examples/Footer";
import SoftBox from "components/SoftBox";

function MyDashboardPage() {
  return (
    <DashboardLayout>
      <DashboardNavbar />
      <SoftBox py={3}>
        {/* Your page content goes here */}
        <h1>My Dashboard Content</h1>
      </SoftBox>
      <Footer />
    </DashboardLayout>
  );
}
```

### Props
This component primarily serves as a wrapper and does not expose direct props for customization in this example. It implicitly handles layout adjustments based on the presence of `DashboardNavbar`, `Sidenav`, and `Footer`.
```

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

### React Routes Configuration

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Defines the navigation structure, associating routes with specific page components and icons for the sidenav. It utilizes a declarative approach to manage application routing.

```jsx
import Dashboard from "layouts/dashboard";
import Tables from "layouts/tables";
import Billing from "layouts/billing";
import Profile from "layouts/profile";
import SignIn from "layouts/authentication/sign-in";
import SignUp from "layouts/authentication/sign-up";

// Custom icons
import Shop from "examples/Icons/Shop";
import Office from "examples/Icons/Office";
import Document from "examples/Icons/Document";
import CustomerSupport from "examples/Icons/CustomerSupport";

const routes = [
  {
    type: "collapse",      // Renders as sidenav item
    name: "Dashboard",     // Display name
    key: "dashboard",      // Unique key for React
    route: "/dashboard",   // URL path
    icon: <Shop size="12px" />,
    component: <Dashboard />,
    noCollapse: true,      // No nested routes
  },
  {
    type: "collapse",
    name: "Tables",
    key: "tables",
    route: "/tables",
    icon: <Office size="12px" />,
    component: <Tables />,
    noCollapse: true,
  },
  { type: "title", title: "Account Pages", key: "account-pages" },
  {
    type: "collapse",
    name: "Profile",
    key: "profile",
    route: "/profile",
    icon: <CustomerSupport size="12px" />,
    component: <Profile />,
    noCollapse: true,
  },
  {
    type: "collapse",
    name: "Sign In",
    key: "sign-in",
    route: "/authentication/sign-in",
    icon: <Document size="12px" />,
    component: <SignIn />,
    noCollapse: true,
  },
];

export default routes;
```

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

### SoftBadge Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

The SoftBadge component is used for labels, status indicators, and tags with support for multiple variants, sizes, and shapes.

```APIDOC
## SoftBadge Component

### Description
A versatile badge component for displaying status or labels.

### Parameters
- **variant** (string) - Optional - 'gradient' or 'contained'.
- **color** (string) - Optional - Theme color (success, info, warning, error, primary, dark).
- **size** (string) - Optional - Size of the badge (xs, sm, md, lg).
- **circular** (boolean) - Optional - Makes the badge circular.
- **indicator** (boolean) - Optional - Renders as a small dot indicator.
- **badgeContent** (string/node) - Optional - The content to display inside the badge.
```

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

### SoftTypography Component Usage in React

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Demonstrates the SoftTypography component for styled text in React. Supports various font weights, colors, text transformations, and gradient effects. It's a versatile component for all text-based elements.

```jsx
import SoftTypography from "components/SoftTypography";

function TypographyExamples() {
  return (
    <>
      {/* Heading with bold weight */}
      <SoftTypography variant="h4" fontWeight="bold" color="dark">
        Dashboard Title
      </SoftTypography>

      {/* Subtitle with medium weight */}
      <SoftTypography variant="h6" fontWeight="medium" color="text">
        Section subtitle
      </SoftTypography>

      {/* Body text with color options */}
      <SoftTypography variant="body2" color="secondary">
        This is secondary body text with regular styling.
      </SoftTypography>

      {/* Button text with uppercase transform */}
      <SoftTypography
        variant="button"
        fontWeight="bold"
        textTransform="uppercase"
        color="info"
      >
        Action Label
      </SoftTypography>

      {/* Gradient text effect */}
      <SoftTypography
        variant="h3"
        fontWeight="bold"
        textGradient
        color="primary"
      >
        Gradient Heading
      </SoftTypography>

      {/* Caption with opacity */}
      <SoftTypography variant="caption" color="text" opacity={0.7}>
        Last updated: 2 hours ago
      </SoftTypography>
    </>
  );
}

```

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

### Sidenav Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

A customizable sidebar navigation component that includes collapsible menu items, brand logo, and color options.

```APIDOC
## Sidenav Component

### Description
Sidebar navigation component with collapsible items, brand logo, and color customization.

### Usage
```jsx
import Sidenav from "examples/Sidenav";
import brandLogo from "assets/images/logo.png";
import Icon from "@mui/material/Icon";

// Define routes for sidenav
const routes = [
  {
    type: "collapse",
    name: "Dashboard",
    key: "dashboard",
    route: "/dashboard",
    icon: <Icon>dashboard</Icon>,
    component: <Dashboard />,
    noCollapse: true,
  },
  // ... other routes
];

function AppWithSidenav() {
  return (
    <Sidenav
      color="info"
      brand={brandLogo}
      brandName="My Dashboard"
      routes={routes}
    />
  );
}
```

### Props
- `color` (string): The color of the sidenav (e.g., 'info', 'primary').
- `brand` (string/object): The brand logo image source.
- `brandName` (string): The name displayed with the brand logo.
- `routes` (array): An array of route objects defining the navigation structure. Each route object can have properties like `type`, `name`, `key`, `route`, `icon`, `component`, `noCollapse`.
```

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

### SoftInput Component Usage in React

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Shows the SoftInput component for form inputs in React. Features include placeholder text, optional icons (left or right), various input types, size adjustments (large, small), and validation states (success, error).

```jsx
import SoftInput from "components/SoftInput";

function InputExamples() {
  return (
    <>
      {/* Basic input */}
      <SoftInput placeholder="Enter text..." />

      {/* Input with left icon */}
      <SoftInput
        placeholder="Search..."
        icon={{ component: "search", direction: "left" }}
      />

      {/* Input with right icon */}
      <SoftInput
        placeholder="Email address"
        icon={{ component: "email", direction: "right" }}
        type="email"
      />

      {/* Large input */}
      <SoftInput
        placeholder="Large input"
        size="large"
      />

      {/* Small input */}
      <SoftInput
        placeholder="Small input"
        size="small"
      />

      {/* Success state */}
      <SoftInput
        placeholder="Valid input"
        success
      />

      {/* Error state */}
      <SoftInput
        placeholder="Invalid input"
        error
      />

      {/* Disabled input */}
      <SoftInput
        placeholder="Disabled input"
        disabled
      />
    </>
  );
}

```

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

### SoftButton Component Usage in React

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

Illustrates the SoftButton component for creating interactive buttons in React. Offers multiple variants (gradient, contained, outlined, text), color schemes, sizes, and special styles like circular and icon-only buttons.

```jsx
import SoftButton from "components/SoftButton";
import Icon from "@mui/material/Icon";

function ButtonExamples() {
  return (
    <>
      {/* Gradient button (default) */}
      <SoftButton variant="gradient" color="info">
        Gradient Info
      </SoftButton>

      {/* Contained button */}
      <SoftButton variant="contained" color="success" size="large">
        Large Success
      </SoftButton>

      {/* Outlined button */}
      <SoftButton variant="outlined" color="warning" size="small">
        Small Warning
      </SoftButton>

      {/* Text button */}
      <SoftButton variant="text" color="error">
        Text Error
      </SoftButton>

      {/* Circular button */}
      <SoftButton variant="gradient" color="dark" circular>
        Circular
      </SoftButton>

      {/* Icon only button */}
      <SoftButton variant="gradient" color="primary" iconOnly circular>
        <Icon>add</Icon>
      </SoftButton>

      {/* Full width button */}
      <SoftButton variant="gradient" color="info" fullWidth>
        Full Width Button
      </SoftButton>

      {/* Button as link */}
      <SoftButton
        component="a"
        href="https://example.com"
        target="_blank"
        variant="gradient"
        color="secondary"
      >
        External Link
      </SoftButton>
    </>
  );
}

```

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

### SoftAlert Component

Source: https://context7.com/creativetimofficial/soft-ui-dashboard-react/llms.txt

The SoftAlert component is a dismissible notification element that supports various color variants for different message types.

```APIDOC
## SoftAlert Component

### Description
A dismissible alert component used to display status notifications or messages to the user.

### Parameters
- **color** (string) - Optional - Sets the alert theme color (info, success, warning, error, primary, dark).
- **dismissible** (boolean) - Optional - If true, displays a close button to hide the alert.

### Usage Example
<SoftAlert color="success" dismissible>Operation successful!</SoftAlert>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.