@progress/kendo-react-layout 10.2.0-develop.5 → 10.2.0-develop.7

package/index.d.mts

@@ -209,28 +209,58 @@ export declare interface ActionSheetItemProps {
 export declare interface ActionSheetProps {
     /**
      * The collection of items that will be rendered in the ActionSheet.
+     *
+     * @example
+     * ```jsx
+     * const items = [{ text: 'Item 1' }, { text: 'Item 2' }];
+     * <ActionSheet items={items} />
+     * ```
      */
     items?: ActionSheetItemProps[];
     /**
      * Specifies the text that is rendered under the title.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet subTitle="Subtitle text" />
+     * ```
      */
     subTitle?: string | React_2.ReactNode;
     /**
      * Specifies the text that is rendered as title.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet title="Title text" />
+     * ```
      */
     title?: string | React_2.ReactNode;
     /**
      * **Deprecated**. Fires when the modal overlay is clicked. Use `onClose` event instead.
      *
      * @deprecated
+     * @example
+     * ```jsx
+     * <ActionSheet onOverlayClick={(e) => console.log('Overlay clicked')} />
+     * ```
      */
     onOverlayClick?: (event: React_2.SyntheticEvent) => void;
     /**
      * Fires when the modal overlay is clicked.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet onClose={(e) => console.log('Overlay clicked')} />
+     * ```
      */
     onClose?: (event: React_2.SyntheticEvent) => void;
     /**
      * Fires when an ActionSheet item is clicked.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet onItemSelect={(e) => console.log(e.item)} />
+     * ```
      */
     onItemSelect?: (event: {
         syntheticEvent: React_2.SyntheticEvent;
@@ -241,6 +271,10 @@ export declare interface ActionSheetProps {
      * **Deprecated**. Fires when an ActionSheet item is clicked. Use `onItemSelect` event instead.
      *
      * @deprecated
+     * @example
+     * ```jsx
+     * <ActionSheet onItemClick={(e) => console.log(e.item)} />
+     * ```
      */
     onItemClick?: (event: {
         syntheticEvent: React_2.SyntheticEvent;
@@ -249,10 +283,22 @@ export declare interface ActionSheetProps {
     }) => void;
     /**
      * Represents the children that are passed to the ActionSheet.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet>
+     *   <div>Custom Content</div>
+     * </ActionSheet>
+     * ```
      */
     children?: any;
     /**
      * Specifies the `tabIndex` of the ActionSheet.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
@@ -260,16 +306,29 @@ export declare interface ActionSheetProps {
      * Defaults to `true`.
      *
      * @default true
+     * @example
+     * ```jsx
+     * <ActionSheet navigatable={false} />
+     * ```
      */
     navigatable?: boolean;
     /**
      * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
      *
      * @default []
+     * @example
+     * ```jsx
+     * <ActionSheet navigatableElements={['.custom-class']} />
+     * ```
      */
     navigatableElements?: string[];
     /**
      * Controls the popup animation. By default, the open and close animations are disabled.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet animation={true} />
+     * ```
      */
     animation?: boolean;
     /**
@@ -278,28 +337,57 @@ export declare interface ActionSheetProps {
     animationStyles?: React_2.CSSProperties;
     /**
      * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet animationDuration={500} />
+     * ```
      */
     animationDuration?: number | ActionSheetAnimationDuration;
     /**
      * The CSS classes that will be rendered on the inner ActionSheet element.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Specifies the state of the ActionSheet.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet expand={true} />
+     * ```
      */
     expand?: boolean;
     /**
      * Specifies the position of the ActionSheet.
      *
      * @default 'bottom'
+     * @example
+     * ```jsx
+     * <ActionSheet position="top" />
+     * ```
      */
     position?: 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
     /**
      * Specifies the actions rendered at the start of the header.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet prefixActions={<button>Action</button>} />
+     * ```
      */
     prefixActions?: React_2.ReactNode;
     /**
      * Specifies the actions rendered at the end of the header.
+     *
+     * @example
+     * ```jsx
+     * <ActionSheet suffixActions={<button>Action</button>} />
+     * ```
      */
     suffixActions?: React_2.ReactNode;
     /**
@@ -398,18 +486,40 @@ export declare type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
 export declare interface AppBarProps {
     /**
      * Represents the children that are passed to the AppBar.
+     *
+     * @example
+     * ```jsx
+     * <AppBar>
+     *   <div>Custom Content</div>
+     * </AppBar>
+     * ```
      */
     children?: any;
     /**
      * Sets additional CSS classes to the AppBar.
+     *
+     * @example
+     * ```jsx
+     * <AppBar className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets additional CSS styles to the AppBar.
+     *
+     * @example
+     * ```jsx
+     * <AppBar style={{ backgroundColor: 'blue' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
      * Sets the `id` property of the root AppBar element.
+     *
+     * @example
+     * ```jsx
+     * <AppBar id="appbar1" />
+     * ```
      */
     id?: string;
     /**
@@ -419,6 +529,10 @@ export declare interface AppBarProps {
      * * 'top' (Default)
      * * 'bottom'
      *
+     * @example
+     * ```jsx
+     * <AppBar position="bottom" />
+     * ```
      */
     position?: AppBarPosition;
     /**
@@ -428,6 +542,11 @@ export declare interface AppBarProps {
      * * 'static' (Default)
      * * 'sticky'
      * * 'fixed'
+     *
+     * @example
+     * ```jsx
+     * <AppBar positionMode="sticky" />
+     * ```
      */
     positionMode?: AppBarPositionMode;
     /**
@@ -446,6 +565,10 @@ export declare interface AppBarProps {
      * * 'inherit'
      * * 'inverse'
      *
+     * @example
+     * ```jsx
+     * <AppBar themeColor="primary" />
+     * ```
      */
     themeColor?: AppBarThemeColor;
 }
@@ -610,27 +733,47 @@ export declare const Avatar: React_2.FunctionComponent<AvatarProps>;
 export declare interface AvatarProps {
     /**
      * Sets the Avatar children elements.
+     *
+     * @example
+     * ```jsx
+     * <Avatar>AB</Avatar>
+     * ```
      */
     children?: React.ReactNode;
     /**
      * Sets additional CSS styles to the Avatar.
+     *
+     * @example
+     * ```jsx
+     * <Avatar style={{ backgroundColor: 'blue' }}>AB</Avatar>
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Add additional classes to the Avatar.
+     * Sets additional classes to the Avatar.
+     *
+     * @example
+     * ```jsx
+     * <Avatar className="custom-class">AB</Avatar>
+     * ```
      */
     className?: string;
     /**
-     * Set the type of the Avatar.
+     * Sets the type of the Avatar.
      *
      * The supported values are:
      * * `image`
      * * `text`
      * * `icon`
+     *
+     * @example
+     * ```jsx
+     * <Avatar type="image" src="avatar.jpg" />
+     * ```
      */
     type?: avatarType | string;
     /**
-     * Configures the `size` of the Button.
+     * Configures the `size` of the Avatar.
      *
      * The available options are:
      * - small
@@ -639,10 +782,15 @@ export declare interface AvatarProps {
      * - null&mdash;Does not set a size `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <Avatar size="large">AB</Avatar>
+     * ```
      */
     size?: null | 'small' | 'medium' | 'large';
     /**
-     * Configures the `roundness` of the Button.
+     * Configures the `roundness` of the Avatar.
      *
      * The available options are:
      * - small
@@ -652,14 +800,24 @@ export declare interface AvatarProps {
      * - null&mdash;Does not set a rounded `className`.
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <Avatar rounded="full">AB</Avatar>
+     * ```
      */
     rounded?: null | 'small' | 'medium' | 'large' | 'full';
     /**
      * Sets a border to the Avatar.
+     *
+     * @example
+     * ```jsx
+     * <Avatar border>AB</Avatar>
+     * ```
      */
     border?: boolean;
     /**
-     * Configures the `fillMode` of the Button.
+     * Configures the `fillMode` of the Avatar.
      *
      * The available options are:
      * - solid
@@ -667,10 +825,15 @@ export declare interface AvatarProps {
      * - null&mdash;Does not set a fillMode `className`.
      *
      * @default `solid`
+     *
+     * @example
+     * ```jsx
+     * <Avatar fillMode="outline">AB</Avatar>
+     * ```
      */
     fillMode?: null | 'solid' | 'outline';
     /**
-     * Configures the `themeColor` of the Button.
+     * Configures the `themeColor` of the Avatar.
      *
      * The available options are:
      * - base
@@ -687,6 +850,11 @@ export declare interface AvatarProps {
      * - null&mdash;Does not set a themeColor `className`.
      *
      * @default `base`
+     *
+     * @example
+     * ```jsx
+     * <Avatar themeColor="primary">AB</Avatar>
+     * ```
      */
     themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'error' | 'warning' | 'dark' | 'light' | 'inverse';
 }
@@ -859,40 +1027,87 @@ export declare interface BottomNavigationItemHandle {
 export declare interface BottomNavigationItemProps {
     /**
      * Sets additional CSS classes to the BottomNavigation item.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets additional CSS styles to the BottomNavigation item.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem style={{ color: 'red' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Disables the BottomNavigation item.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Specifies if the BottomNavigation item is selected.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem selected={true} />
+     * ```
      */
     selected?: boolean;
     /**
      * Defines the name for an existing icon in a KendoReact theme.
      * The icon is rendered inside the BottomNavigation item by a `span.k-icon` element.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem icon="home" />
+     * ```
      */
     icon?: string;
     /**
      * Defines an SVG icon.
      * The icon is rendered inside the BottomNavigation item.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <BottomNavigationItem svgIcon={gearIcon} />
+     * ```
      */
     svgIcon?: SVGIcon;
     /**
      * Specifies the text content of the BottomNavigation item.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem text="Home" />
+     * ```
      */
     text?: React.ReactNode;
     /**
      * Sets the `tabIndex` property of the BottomNavigation item. Defaults to `0`.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem tabIndex={-1} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Sets a custom property. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigationItem customProp="customValue" />
+     * ```
      */
     [customProp: string]: any;
     /**
@@ -931,18 +1146,38 @@ export declare type BottomNavigationPositionMode = 'sticky' | 'fixed';
 export declare interface BottomNavigationProps {
     /**
      * Sets additional CSS classes to the BottomNavigation.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Sets additional CSS styles to the BottomNavigation.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation style={{ backgroundColor: 'blue' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Sets the `id` property of the root BottomNavigation element.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation id="bottomNav1" />
+     * ```
      */
     id?: string;
     /**
      * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
@@ -960,6 +1195,11 @@ export declare interface BottomNavigationProps {
      * * `dark` &mdash; Applies coloring based on the dark theme color.
      * * `light` &mdash; Applies coloring based on the light theme color.
      * * `inverse` &mdash; Applies coloring based on the inverted theme color.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation themeColor="primary" />
+     * ```
      */
     themeColor?: BottomNavigationThemeColor;
     /**
@@ -986,6 +1226,11 @@ export declare interface BottomNavigationProps {
      * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
      * and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
      * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation positionMode="sticky" />
+     * ```
      */
     positionMode?: BottomNavigationPositionMode;
     /**
@@ -995,23 +1240,50 @@ export declare interface BottomNavigationProps {
      * The possible values are:
      * * `vertical`(Default) &mdash; Renders the text below the icon.
      * * `horizontal` &mdash; Renders the text and the icon on the same line.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation itemFlow="horizontal" />
+     * ```
      */
     itemFlow?: BottomNavigationItemFlow;
     /**
      * Sets a border to the BottomNavigation.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation border={true} />
+     * ```
      */
     border?: boolean;
     /**
      * Disables the whole BottomNavigation.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug overview_bottomnavigation %})).
+     *
+     * @example
+     * ```jsx
+     * const items = [{ text: 'Home', icon: 'home' }, { text: 'Profile', icon: 'user' }];
+     * <BottomNavigation items={items} />
+     * ```
      */
     items?: Array<BottomNavigationItemProps>;
     /**
      * Overrides the default component's content responsible for visualizing a single item
      * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-custom-rendering)).
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.text}</div>;
+     * <BottomNavigation item={CustomItem} />
+     * ```
      */
     item?: React.ComponentType<BottomNavigationItemProps>;
     /**
@@ -1022,10 +1294,20 @@ export declare interface BottomNavigationProps {
     itemRender?: (span: React.ReactElement<HTMLSpanElement>, itemProps: BottomNavigationItemProps) => React.ReactNode;
     /**
      * Fires when a BottomNavigation item is selected.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation onSelect={(e) => console.log(e.item)} />
+     * ```
      */
     onSelect?: (event: BottomNavigationSelectEvent) => void;
     /**
      * Triggered on `onKeyDown` event.
+     *
+     * @example
+     * ```jsx
+     * <BottomNavigation onKeyDown={(e) => console.log('Key pressed')} />
+     * ```
      */
     onKeyDown?: (event: BottomNavigationEvent) => void;
 }
@@ -1398,34 +1680,79 @@ export declare interface BreadcrumbOrderedListProps {
 export declare interface BreadcrumbProps {
     /**
      * Sets the `id` property of the top `div` element of the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb id="breadcrumb1" />
+     * ```
      */
     id?: string;
     /**
      * Sets additional CSS styles to the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb style={{ backgroundColor: 'lightgray' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
      * Sets additional classes to the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb className="custom-breadcrumb" />
+     * ```
      */
     className?: string;
     /**
      * Represents the Breadcrumb ordered list component.
+     *
+     * @example
+     * ```jsx
+     * const CustomOrderedList = (props) => <ol {...props} />;
+     * <Breadcrumb breadcrumbOrderedList={CustomOrderedList} />
+     * ```
      */
     breadcrumbOrderedList?: React_2.ComponentType<BreadcrumbOrderedListProps>;
     /**
      * Represents the Breadcrumb list item component.
+     *
+     * @example
+     * ```jsx
+     * const CustomListItem = (props) => <li {...props} />;
+     * <Breadcrumb breadcrumbListItem={CustomListItem} />
+     * ```
      */
     breadcrumbListItem?: React_2.ComponentType<BreadcrumbListItemProps>;
     /**
      * Represents the Breadcrumb delimiter component.
+     *
+     * @example
+     * ```jsx
+     * const CustomDelimiter = () => <span>/</span>;
+     * <Breadcrumb breadcrumbDelimiter={CustomDelimiter} />
+     * ```
      */
     breadcrumbDelimiter?: React_2.ComponentType<BreadcrumbDelimiterProps>;
     /**
      * Represents the Breadcrumb link component.
+     *
+     * @example
+     * ```jsx
+     * const CustomLink = (props) => <a {...props} />;
+     * <Breadcrumb breadcrumbLink={CustomLink} />
+     * ```
      */
     breadcrumbLink?: React_2.ComponentType<BreadcrumbLinkProps>;
     /**
      * Represents the data of the Breadcrumb from type DataModel.
+     *
+     * @example
+     * ```jsx
+     * const data = [{ id: '1', text: 'Home' }, { id: '2', text: 'Products' }];
+     * <Breadcrumb data={data} />
+     * ```
      */
     data: DataModel[];
     /**
@@ -1437,46 +1764,101 @@ export declare interface BreadcrumbProps {
      * * `large`
      *
      * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb size="large" />
+     * ```
      */
     size?: 'small' | 'medium' | 'large';
     /**
      * The Breadcrumb direction `ltr` or `rtl`.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb dir="rtl" />
+     * ```
      */
     dir?: 'ltr' | 'rtl';
     /**
      * Sets the `tabIndex` attribute to the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Determines the `disabled` mode of the Breadcrumb. If `true`, the component is disabled.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Represents the `value` field. Used for setting the key of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb valueField="customId" />
+     * ```
      */
     valueField?: string;
     /**
      * Represents the `text` field. Used for setting the `text` inside the BreadcrumbLink component.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb textField="customText" />
+     * ```
      */
     textField?: string;
     /**
      * Represents the `icon` field. Used for setting the `icon` inside the BreadcrumbLink component.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb iconField="customIcon" />
+     * ```
      */
     iconField?: string;
     /**
      * Represents the `iconClass` field. Used for setting the `iconClass` inside the BreadcrumbLink component.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb iconClassField="customIconClass" />
+     * ```
      */
     iconClassField?: string;
     /**
      * Represents the `onItemSelect` event. Triggered after click on the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb onItemSelect={(e) => console.log(e.id)} />
+     * ```
      */
     onItemSelect?: (event: BreadcrumbLinkMouseEvent) => void;
     /**
      * Represents the `onKeyDown` event. Triggered after keyboard click on the Breadcrumb.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb onKeyDown={(e) => console.log(e.id)} />
+     * ```
      */
     onKeyDown?: (event: BreadcrumbLinkKeyDownEvent) => void;
     /**
      * Represents the label of the Breadcrumb component.
+     *
+     * @example
+     * ```jsx
+     * <Breadcrumb ariaLabel="Breadcrumb navigation" />
+     * ```
      */
     ariaLabel?: string;
 }
@@ -1495,33 +1877,68 @@ export declare enum cardActionsLayout {
 export declare interface CardActionsProps {
     /**
      * Sets the CardActions children elements.
+     *
+     * @example
+     * ```jsx
+     * <CardActions>
+     *   <Button>Action 1</Button>
+     *   <Button>Action 2</Button>
+     * </CardActions>
+     * ```
      */
     children?: React.ReactNode;
     /**
      * Sets additional CSS styles to the CardActions.
+     *
+     * @example
+     * ```jsx
+     * <CardActions style={{ justifyContent: 'center' }}>
+     *   <Button>Action</Button>
+     * </CardActions>
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Add additional classes to the CardActions.
+     * Sets additional classes to the CardActions.
+     *
+     * @example
+     * ```jsx
+     * <CardActions className="custom-class">
+     *   <Button>Action</Button>
+     * </CardActions>
+     * ```
      */
     className?: string;
     /**
-     * Set the layout of the actions.
+     * Sets the layout of the actions.
      *
      * The supported values are:
      * * (Default) `start`
      * * `center`
      * * `end`
      * * `stretched`
+     *
+     * @example
+     * ```jsx
+     * <CardActions layout="center">
+     *   <Button>Action</Button>
+     * </CardActions>
+     * ```
      */
     layout?: cardActionsLayout | string;
     /**
      * Specifies the orientation of the Card action buttons.
      *
-     * * The possible values are:
+     * The possible values are:
      * * (Default) `horizontal`
      * * `vertical`
      *
+     * @example
+     * ```jsx
+     * <CardActions orientation="vertical">
+     *   <Button>Action</Button>
+     * </CardActions>
+     * ```
      */
     orientation?: cardOrientation | string;
 }
@@ -1531,14 +1948,29 @@ export declare const CardBody: React_2.FunctionComponent<CardBodyProps>;
 declare interface CardBodyProps {
     /**
      * Sets the CardBody children elements.
+     *
+     * @example
+     * ```jsx
+     * <CardBody>Body Content</CardBody>
+     * ```
      */
     children?: React.ReactNode;
     /**
      * Sets additional CSS styles to the CardBody.
+     *
+     * @example
+     * ```jsx
+     * <CardBody style={{ padding: '20px' }}>Body Content</CardBody>
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Add additional classes to the CardBody.
+     * Sets additional classes to the CardBody.
+     *
+     * @example
+     * ```jsx
+     * <CardBody className="custom-class">Body Content</CardBody>
+     * ```
      */
     className?: string;
 }
@@ -1548,14 +1980,29 @@ export declare const CardFooter: React_2.FunctionComponent<CardFooterProps>;
 declare interface CardFooterProps {
     /**
      * Sets the CardFooter children elements.
+     *
+     * @example
+     * ```jsx
+     * <CardFooter>Footer Content</CardFooter>
+     * ```
      */
     children?: React.ReactNode;
     /**
      * Sets additional CSS styles to the CardFooter.
+     *
+     * @example
+     * ```jsx
+     * <CardFooter style={{ textAlign: 'center' }}>Footer Content</CardFooter>
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Add additional classes to the CardFooter.
+     * Sets additional classes to the CardFooter.
+     *
+     * @example
+     * ```jsx
+     * <CardFooter className="custom-class">Footer Content</CardFooter>
+     * ```
      */
     className?: string;
 }
@@ -1579,14 +2026,29 @@ export declare const CardHeader: React_2.FunctionComponent<CardHeaderProps>;
 declare interface CardHeaderProps {
     /**
      * Sets the CardHeader children elements.
+     *
+     * @example
+     * ```jsx
+     * <CardHeader>Header Content</CardHeader>
+     * ```
      */
     children?: React.ReactNode;
     /**
      * Sets additional CSS styles to the CardHeader.
+     *
+     * @example
+     * ```jsx
+     * <CardHeader style={{ fontWeight: 'bold' }}>Header Content</CardHeader>
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Add additional classes to the CardHeader.
+     * Sets additional classes to the CardHeader.
+     *
+     * @example
+     * ```jsx
+     * <CardHeader className="custom-class">Header Content</CardHeader>
+     * ```
      */
     className?: string;
 }
@@ -1596,18 +2058,38 @@ export declare const CardImage: React_2.FunctionComponent<CardImageProps>;
 declare interface CardImageProps {
     /**
      * Sets additional CSS styles to the CardImageProps.
+     *
+     * @example
+     * ```jsx
+     * <CardImage style={{ borderRadius: '50%' }} src="image.jpg" />
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Add additional classes to the CardImageProps.
+     * Sets additional classes to the CardImageProps.
+     *
+     * @example
+     * ```jsx
+     * <CardImage className="custom-class" src="image.jpg" />
+     * ```
      */
     className?: string;
     /**
-     * Set the source of the image.
+     * Sets the source of the image.
+     *
+     * @example
+     * ```jsx
+     * <CardImage src="image.jpg" />
+     * ```
      */
     src?: string;
     /**
      * Specifies an alternate text for the image.
+     *
+     * @example
+     * ```jsx
+     * <CardImage src="image.jpg" alt="Description of the image" />
+     * ```
      */
     alt?: string;
 }
@@ -1620,22 +2102,44 @@ export declare enum cardOrientation {
 export declare interface CardProps {
     /**
      * Sets the Card children elements.
+     *
+     * @example
+     * ```jsx
+     * <Card>
+     *   <CardBody>Content</CardBody>
+     * </Card>
+     * ```
      */
     children?: React.ReactNode;
     /**
      * Sets the [dir](https://www.w3schools.com/tags/att_global_dir.asp) of the Card.
+     *
+     * @example
+     * ```jsx
+     * <Card dir="rtl">Content</Card>
+     * ```
      */
     dir?: string;
     /**
      * Sets additional CSS styles to the Card.
+     *
+     * @example
+     * ```jsx
+     * <Card style={{ backgroundColor: 'blue' }}>Content</Card>
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Add additional classes to the Card.
+     * Sets additional classes to the Card.
+     *
+     * @example
+     * ```jsx
+     * <Card className="custom-class">Content</Card>
+     * ```
      */
     className?: string;
     /**
-     * Set the type of the Card.
+     * Sets the type of the Card.
      *
      * The supported values are:
      * * `default`
@@ -1644,18 +2148,33 @@ export declare interface CardProps {
      * * `success`
      * * `warning`
      * * `error`
+     *
+     * @example
+     * ```jsx
+     * <Card type="primary">Content</Card>
+     * ```
      */
     type?: cardType | string;
     /**
-     * Set the orientation of the Card.
+     * Sets the orientation of the Card.
      *
      * The supported values are:
      * * `horizontal` - Default
      * * `vertical`
+     *
+     * @example
+     * ```jsx
+     * <Card orientation="vertical">Content</Card>
+     * ```
      */
     orientation?: cardOrientation | string;
     /**
-     * Sets a custom property to component DOM element.
+     * Sets a custom property to the component DOM element.
+     *
+     * @example
+     * ```jsx
+     * <Card data-custom="value">Content</Card>
+     * ```
      */
     [customProp: string]: any;
 }
@@ -1665,14 +2184,29 @@ export declare const CardSubtitle: React_2.FunctionComponent<CardSubtitleProps>;
 declare interface CardSubtitleProps {
     /**
      * Sets the CardSubtitle children elements.
+     *
+     * @example
+     * ```jsx
+     * <CardSubtitle>Subtitle Text</CardSubtitle>
+     * ```
      */
     children?: React.ReactNode;
     /**
      * Sets additional CSS styles to the CardSubtitle.
+     *
+     * @example
+     * ```jsx
+     * <CardSubtitle style={{ color: 'red' }}>Subtitle Text</CardSubtitle>
+     * ```
      */
     style?: React.CSSProperties;
     /**
-     * Add additional classes to the CardSubtitle.
+     * Sets additional classes to the CardSubtitle.
+     *
+     * @example
+     * ```jsx
+     * <CardSubtitle className="custom-class">Subtitle Text</CardSubtitle>
+     * ```
      */
     className?: string;
 }
@@ -1722,14 +2256,29 @@ export declare const ContextMenu: {
 export declare interface ContextMenuProps extends Omit<MenuProps, 'onClose' | 'openOnClick' | 'hoverOpenDelay' | 'hoverCloseDelay'> {
     /**
      * Controls the Popup visibility of the ContextMenu.
+     *
+     * Example:
+     * ```jsx
+     * <ContextMenu show={true} />
+     * ```
      */
     show: boolean;
     /**
      * Specifies the absolute position of the ContextMenu. The Popover opens next to that point.
+     *
+     * Example:
+     * ```jsx
+     * <ContextMenu offset={{ left: 100, top: 200 }} />
+     * ```
      */
     offset: Offset;
     /**
      * Triggers when the ContextMenu needs to hide.
+     *
+     * Example:
+     * ```jsx
+     * <ContextMenu onClose={(e) => console.log('ContextMenu closed')} />
+     * ```
      */
     onClose: (event: React_2.SyntheticEvent<HTMLElement>) => void;
 }
@@ -1932,6 +2481,11 @@ export declare interface DrawerItemHandle {
 export declare interface DrawerItemProps {
     /**
      * Represents the children that are passed to the DrawerItem.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem>Item Content</DrawerItem>
+     * ```
      */
     children?: any;
     /**
@@ -1944,36 +2498,77 @@ export declare interface DrawerItemProps {
     style?: React.CSSProperties;
     /**
      * Specifies if the Drawer item is disabled.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem disabled={true} />
+     * ```
      */
     disabled?: boolean;
     /**
      * Defines the name for an existing icon in a KendoReact theme.
-     * The icon is rendered inside the Drawer item by a `span.k-icon` element.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem icon="home" />
+     * ```
      */
     icon?: string;
     /**
      * Defines the SVG icon of the item.
+     *
+     * Example:
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <DrawerItem svgIcon={gearIcon} />
+     * ```
      */
     svgIcon?: SVGIcon;
     /**
      * Specifies if the Drawer item is initially selected.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem selected={true} />
+     * ```
      */
     selected?: boolean;
     /**
      * Specifies if this is a separator item.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem separator={true} />
+     * ```
      */
     separator?: boolean;
     /**
      * Specifies the text content of the Drawer item.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem text="Dashboard" />
+     * ```
      */
     text?: string;
     /**
      * Sets the index of the DrawerItem that is used to identify it.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem index={0} />
+     * ```
      */
     index?: number;
     /**
      * Sets the `tabIndex` property of the DrawerItem.
      * Defaults to `0`.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem tabIndex={1} />
+     * ```
      */
     tabIndex?: number;
     /**
@@ -1982,7 +2577,11 @@ export declare interface DrawerItemProps {
     [customProp: string]: any;
     /**
      * This property is used in scenarios with hierarchical drawer. The rendering of the component requires each node to have a "`k-level-` + the level of nesting" className.
-     * The nesting levels should be handled by the developer. The root level items have a level of 0.
+     *
+     * Example:
+     * ```jsx
+     * <DrawerItem level={1} />
+     * ```
      */
     level?: number;
     /**
@@ -2058,16 +2657,31 @@ export declare interface DrawerNavigationProps {
 export declare interface DrawerProps {
     /**
      * Specifies the animation settings of the Drawer.
-     * If boolean enables or disables the default animation.
-     * Use DrawerAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer animation={{ duration: 300 }} />
+     * ```
      */
     animation?: boolean | DrawerAnimation;
     /**
      * Specifies the state of the Drawer. Defaults to `false` ([see example]({% slug expanded_state_drawer %})).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer expanded={true} />
+     * ```
      */
     expanded?: boolean;
     /**
      * Sets the Drawer items declaratively.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer>
+     *   <DrawerItem text="Home" />
+     * </Drawer>
+     * ```
      */
     children?: any;
     /**
@@ -2083,14 +2697,21 @@ export declare interface DrawerProps {
      */
     dir?: string;
     /**
-     * Specifies the mode in which the Drawer will be displayed.
-     * The possible values are `overlay` and `push`.
-     * Defaults to `overlay` ([see example]({% slug display_modes_drawer %}#toc-expand-modes)).
+     * Specifies the mode in which the Drawer will be displayed ([see example]({% slug display_modes_drawer %}#toc-expand-modes)).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer mode="push" />
+     * ```
      */
     mode?: 'overlay' | 'push';
     /**
-     * Specifies the position of the Drawer.
-     * The possible values are `start` and `end` ([see example]({% slug positioning_drawer %})).
+     * Specifies the position of the Drawer ([see example]({% slug positioning_drawer %})).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer position="end" />
+     * ```
      */
     position?: 'start' | 'end';
     /**
@@ -2099,38 +2720,75 @@ export declare interface DrawerProps {
     style?: React_2.CSSProperties;
     /**
      * Sets the `tabIndex` property of the Drawer.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
-     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
-     * ([see example]({% slug display_modes_drawer %}#toc-mini-view))).
+     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed ([see example]({% slug display_modes_drawer %}#toc-mini-view)).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer mini={true} />
+     * ```
      */
     mini?: boolean;
     /**
      * Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to `50`.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer miniWidth={60} />
+     * ```
      */
     miniWidth?: number;
     /**
      * Defines the width of the Drawer when it is expanded. Defaults to `240`.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer width={300} />
+     * ```
      */
     width?: number;
     /**
      * The collection of items that will be rendered in the Drawer ([see example]({% slug overview_drawer %})).
+     *
+     * Example:
+     * ```jsx
+     * <Drawer items={[{ text: 'Home' }, { text: 'Settings' }]} />
+     * ```
      */
     items?: Array<DrawerItemProps>;
     /**
      * Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering %})).
      *
-     * The default Component is: [DrawerItem]({% slug api_layout_draweritem %}).
+     * Example:
+     * ```jsx
+     * <Drawer item={CustomDrawerItem} />
+     * ```
      */
     item?: React_2.ComponentType<DrawerItemProps>;
     /**
      * The event handler that will be fired when the overlay is clicked.
      * Used in overlay mode only.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer onOverlayClick={(e) => console.log('Overlay clicked')} />
+     * ```
      */
     onOverlayClick?: (event: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
      * Fires when a Drawer item is selected.
+     *
+     * Example:
+     * ```jsx
+     * <Drawer onSelect={(e) => console.log('Item selected', e)} />
+     * ```
      */
     onSelect?: (event: DrawerSelectEvent) => void;
 }
@@ -2359,6 +3017,11 @@ export declare interface GridLayoutAlign {
 export declare interface GridLayoutColumnProps {
     /**
      * Specifies the width of the GridLayout column ([see example]({% slug overview_gridlayout %}#kendoreact-gridlayout-overview)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout cols={[{ width: '200px' }]} />
+     * ```
      */
     width?: number | string;
 }
@@ -2431,37 +3094,77 @@ export declare interface GridLayoutItemHandle {
  */
 export declare interface GridLayoutItemProps {
     /**
-     * The React elements that will be rendered inside the GridLayoutItem.
+     * The React elements that will be rendered inside the GridLayoutItem ([see example]({% slug items_gridlayout %}#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem>Content</GridLayoutItem>
+     * ```
      */
     children?: React_2.ReactNode;
     /**
-     * Sets additional CSS classes to the GridLayoutItem.
+     * Sets additional CSS classes to the GridLayoutItem ([see example]({% slug items_gridlayout %}#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem className="custom-class" />
+     * ```
      */
     className?: string;
     /**
-     * Sets additional CSS styles to the GridLayoutItem.
+     * Sets additional CSS styles to the GridLayoutItem ([see example]({% slug items_gridlayout %}#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem style={{ backgroundColor: 'red' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
-     * Sets the `id` property of the root GridLayoutItem element.
+     * Sets the `id` property of the root GridLayoutItem element ([see example]({% slug items_gridlayout %}#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem id="item-1" />
+     * ```
      */
     id?: string;
     /**
      * Defines the column line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem col={1} />
+     * ```
      */
     col?: number;
     /**
      * Specifies the number of columns over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
      * Defaults to `1`.
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem colSpan={2} />
+     * ```
      */
     colSpan?: number;
     /**
      * Defines the row line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem row={1} />
+     * ```
      */
     row?: number;
     /**
      * Specifies the number of rows over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
      * Defaults to `1`.
+     *
+     * Example:
+     * ```jsx
+     * <GridLayoutItem rowSpan={2} />
+     * ```
      */
     rowSpan?: number;
 }
@@ -2471,19 +3174,42 @@ export declare interface GridLayoutItemProps {
  */
 export declare interface GridLayoutProps {
     /**
-     * The React elements that will be rendered inside the GridLayout.
+     * The React elements that will be rendered inside the GridLayout ([see example]({% slug overview_gridlayout %}#toc-children)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout>
+     *   <div>Item 1</div>
+     *   <div>Item 2</div>
+     * </GridLayout>
+     * ```
      */
     children?: React_2.ReactNode;
     /**
-     * Sets additional CSS classes to the GridLayout.
+     * Sets additional CSS classes to the GridLayout ([see example]({% slug overview_gridlayout %}#toc-classname)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout className="custom-class" />
+     * ```
      */
     className?: string;
     /**
-     * Sets additional CSS styles to the GridLayout.
+     * Sets additional CSS styles to the GridLayout ([see example]({% slug overview_gridlayout %}#toc-style)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout style={{ gap: '10px' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
-     * Sets the `id` property of the root GridLayout element.
+     * Sets the `id` property of the root GridLayout element ([see example]({% slug overview_gridlayout %}#toc-id)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout id="grid-layout" />
+     * ```
      */
     id?: string;
     /**
@@ -2492,11 +3218,15 @@ export declare interface GridLayoutProps {
      * * The possible keys are:
      * * `rows`
      * * `columns`
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout gap={{ rows: '10px', columns: '20px' }} />
+     * ```
      */
     gap?: GridLayoutGap;
     /**
-     * Specifies the horizontal and vertical alignment of the inner GridLayout elements (see demos
-     * [here]({% slug layout_gridlayout %}#horizontal-alignment) and [here]({% slug layout_gridlayout %}#vertical-alignment)).
+     * Specifies the horizontal and vertical alignment of the inner GridLayout elements ([see example]({% slug layout_gridlayout %}#horizontal-alignment)).
      *
      * The possible keys are:
      * * `horizontal`&mdash;Defines the possible horizontal alignment of the inner GridLayout elements.
@@ -2509,14 +3239,29 @@ export declare interface GridLayoutProps {
      *   * `middle`&mdash;Uses the middle point of the container.
      *   * `bottom`&mdash;Uses the bottom point of the container.
      *   * (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout align={{ horizontal: 'center', vertical: 'middle' }} />
+     * ```
      */
     align?: GridLayoutAlign;
     /**
      * Specifies the default number of columns and their widths ([see example]({% slug layout_gridlayout %}#toc-rows-and-columns)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout cols={[{ width: '100px' }, { width: '200px' }]} />
+     * ```
      */
     cols?: GridLayoutColumnProps[];
     /**
      * Specifies the default number of rows and their height ([see example]({% slug layout_gridlayout %}#toc-rows-and-columns)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout rows={[{ height: '50px' }, { height: '100px' }]} />
+     * ```
      */
     rows?: GridLayoutRowProps[];
 }
@@ -2527,6 +3272,11 @@ export declare interface GridLayoutProps {
 export declare interface GridLayoutRowProps {
     /**
      * Specifies the height of the GridLayout row ([see example]({% slug overview_gridlayout %}#kendoreact-gridlayout-overview)).
+     *
+     * Example:
+     * ```jsx
+     * <GridLayout rows={[{ height: '100px' }]} />
+     * ```
      */
     height?: number | string;
 }
@@ -2808,58 +3558,141 @@ export declare interface MenuItemProps extends BaseMenuItem {
 export declare interface MenuProps {
     /**
      * Specifies whether the Menu will be vertical ([see example]({% slug vertical_menu %})).
+     *
+     * @example
+     * ```jsx
+     * <Menu vertical />
+     * ```
      */
     vertical?: boolean;
     /**
      * Sets the Menu items.
+     *
+     * @example
+     * ```jsx
+     * const items = [{ text: 'Item 1' }, { text: 'Item 2' }];
+     * <Menu items={items} />
+     * ```
      */
     items?: MenuItemModel[];
     /**
      * Sets the Menu items declaratively.
+     *
+     * @example
+     * ```jsx
+     * <Menu>
+     *   <MenuItem text="Item 1" />
+     *   <MenuItem text="Item 2" />
+     * </Menu>
+     * ```
      */
     children?: React.ReactNode;
     /**
      * Sets additional CSS styles to the Menu.
+     *
+     * @example
+     * ```jsx
+     * <Menu style={{ backgroundColor: 'lightblue' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Sets the ID of the Menu.
+     *
+     * @example
+     * ```jsx
+     * <Menu id="custom-menu" />
+     * ```
      */
     id?: string;
     /**
-     * Controls the Popup animation. By default, the opening and closing animations are enabled and set to `300`.
+     * Controls the Popup animation.
+     *
+     * @example
+     * ```jsx
+     * <Menu animate={{ openDuration: 200, closeDuration: 200 }} />
+     * ```
      */
     animate?: boolean | PopupAnimation;
     /**
      * Sets the direction of the Menu.
+     *
+     * @example
+     * ```jsx
+     * <Menu dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
-     * Specifies the delay in milliseconds before the Menu items are opened on item mouse-hover ([see example]({% slug opening_closing_menu %}#toc-delay-on-hover)). Defaults to `100`. If `openOnClick` is `true`, defaults to `0`.
+     * Specifies the delay in milliseconds before the Menu items are closed on
+     * item mouse-leave ([see example]({% slug opening_closing_menu %}#toc-delay-on-hover)).
+     * Used to avoid accidental closure on leaving. Defaults to `100`.
+     *
+     * @example
+     * ```jsx
+     * <Menu hoverOpenDelay={200} />
+     * ```
      */
     hoverOpenDelay?: number;
     /**
-     * Specifies the delay in milliseconds before the Menu items are closed on item mouse-leave ([see example]({% slug opening_closing_menu %}#toc-delay-on-hover)). Used to avoid accidental closure on leaving. Defaults to `100`.
+     * Specifies the delay in milliseconds before the Menu items are closed on item mouse-leave ([see example]({% slug opening_closing_menu %}#toc-delay-on-hover)).
+     *
+     * @example
+     * ```jsx
+     * <Menu hoverCloseDelay={200} />
+     * ```
      */
     hoverCloseDelay?: number;
     /**
      * If `openOnClick` is set to `true`, the items are opened on mouse hover only after an initial click.
+     *
+     * @example
+     * ```jsx
+     * <Menu openOnClick />
+     * ```
      */
     openOnClick?: boolean;
     /**
-     * A React functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
+     * A React functional or class component which is used for rendering the innermost part of
+     *  the Menu item ([see example]({% slug rendering_menu %}#toc-items)).
+     *  By default, the innermost item part includes only the text for the item.
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.text}</div>;
+     * <Menu itemRender={CustomItem} />
+     * ```
      */
     itemRender?: any;
     /**
-     * A React functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
+     * A React functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)).
+     *  The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
+     *
+     * @example
+     * ```jsx
+     * const CustomLink = (props) => <a href={props.href}>{props.text}</a>;
+     * <Menu linkRender={CustomLink} />
+     * ```
      */
     linkRender?: any;
     /**
-     * Sets the ids of the Menu items that will not be closed on mouse-leave. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child item acquires a `0_0` id and the second acquires a `0_1` id.
+     * Sets the ids of the Menu items that will not be closed on mouse-leave. The ids are hierarchical and zero-based.
+     * The first root item has a `0` id. If the first root item has children,
+     * the first child item acquires a `0_0` id and the second acquires a `0_1` id.
+     *
+     * @example
+     * ```jsx
+     * <Menu customCloseItemIds={['0', '0_1']} />
+     * ```
      */
     customCloseItemIds?: string[];
     /**
      * Adds a custom className to the Menu top element.
+     *
+     * @example
+     * ```jsx
+     * <Menu className="custom-menu" />
+     * ```
      */
     className?: string;
     /**
@@ -2868,6 +3701,11 @@ export declare interface MenuProps {
     role?: string;
     /**
      * Fires when a Menu item is selected.
+     *
+     * @example
+     * ```jsx
+     * <Menu onSelect={(event) => console.log(event.item.text)} />
+     * ```
      */
     onSelect?: (event: MenuSelectEvent) => void;
     /**
@@ -3135,14 +3973,32 @@ declare interface PanelBarItemState {
 export declare interface PanelBarProps {
     /**
      * The child can be either a single PanelBarItem or a PanelBarItem array.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar>
+     *   <PanelBarItem title="Item 1" />
+     *   <PanelBarItem title="Item 2" />
+     * </PanelBar>
+     * ```
      */
     children?: React.ReactNode;
     /**
      * The class name that is set to the PanelBar.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar className="custom-panelbar" />
+     * ```
      */
     className?: string;
     /**
      * Sets the animation state of the PanelBar.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar animation={false} />
+     * ```
      */
     animation?: boolean;
     /**
@@ -3151,38 +4007,83 @@ export declare interface PanelBarProps {
      * The available modes are:
      * - `"single"`&mdash;Allows you to expand only one item at a time. The expanding of an item collapses the item that was previously expanded.
      * - `"multiple"` (default)&mdash;Allows you to expand two or more items at a time. Items can also be toggled.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar expandMode="single" />
+     * ```
      */
     expandMode?: PanelBarExpandMode;
     /**
      * Sets the direction of the PanelBar component.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * If set, overrides the currently selected property in the PanelBar state. Takes the `id` of the item.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar selected="item1" />
+     * ```
      */
     selected?: string;
     /**
      * Sets the initial expanded state of the PanelBar. Takes the `id` of the item.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar expanded={['item1', 'item2']} />
+     * ```
      */
     expanded?: string[];
     /**
      * Sets the initial focused state of the PanelBar. Takes the `id` of the item.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar focused="item1" />
+     * ```
      */
     focused?: string;
     /**
      * Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar keepItemsMounted />
+     * ```
      */
     keepItemsMounted?: boolean;
     /**
      * Determines if the PanelBar is going to be used in controlled state.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar isControlled />
+     * ```
      */
     isControlled?: boolean;
     /**
      * Fires each time the user makes a selection ([see example]({% slug controlling_state_panelbar %})).
+     *
+     * @example
+     * ```jsx
+     * <PanelBar onSelect={(event) => console.log(event.item)} />
+     * ```
      */
     onSelect?: (event: PanelBarSelectEventArguments) => void;
     /**
      * Sets additional CSS styles to the PanelBar.
+     *
+     * @example
+     * ```jsx
+     * <PanelBar style={{ backgroundColor: 'lightblue' }} />
+     * ```
      */
     style?: React.CSSProperties;
 }
@@ -3458,18 +4359,38 @@ export declare interface SplitterPaneProps extends KendoReactComponentBaseProps
 export declare interface SplitterProps extends KendoReactComponentBaseProps {
     /**
      * Sets the options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for controlled state.
+     *
+     * @example
+     * ```jsx
+     * <Splitter panes={[{ size: '50%' }, { size: '50%' }]} />
+     * ```
      */
     panes?: SplitterPaneProps[];
     /**
      * Sets the initial options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for uncontrolled state.
+     *
+     * @example
+     * ```jsx
+     * <Splitter defaultPanes={[{ size: '30%' }, { size: '70%' }]} />
+     * ```
      */
     defaultPanes?: SplitterPaneProps[];
     /**
      * Specifies the orientation of the panes within the Splitter ([more information and examples]({% slug orientation_splitter %})). Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically.
+     *
+     * @example
+     * ```jsx
+     * <Splitter orientation="vertical" />
+     * ```
      */
     orientation?: 'vertical' | 'horizontal';
     /**
      * Fires after a Splitter pane is resized or collapsed. Useful for updating the pane options and triggering layout calculations on components which are positioned inside the panes.
+     *
+     * @example
+     * ```jsx
+     * <Splitter onChange={(event) => console.log(event.newState)} />
+     * ```
      */
     onChange?: (event: SplitterOnChangeEvent) => void;
 }
@@ -3727,93 +4648,190 @@ export declare interface StepperHandle {
  */
 export declare interface StepperProps {
     /**
-     * Sets the duration of the Stepper animation. Defaults to `400ms`.
+     * Sets the duration of the Stepper animation in milliseconds. Defaults to `400ms`.
+     *
+     * @example
+     * ```jsx
+     * <Stepper animationDuration={400} />
+     * ```
      */
     animationDuration?: boolean | number;
     /**
-     * Represents the children that are passed to the Stepper.
+     * Represents the children elements passed to the Stepper.
+     *
+     * @example
+     * ```jsx
+     * <Stepper>
+     *   <Step label="Step 1" />
+     *   <Step label="Step 2" />
+     * </Stepper>
+     * ```
      */
     children?: any;
     /**
      * Specifies a list of CSS classes that will be added to the Stepper.
+     *
+     * @example
+     * ```jsx
+     * <Stepper className="custom-stepper" />
+     * ```
      */
     className?: string;
     /**
-     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     * Represents the `dir` HTML attribute, used to switch between LTR and RTL.
+     *
+     * @example
+     * ```jsx
+     * <Stepper dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
-     * Disables the whole Stepper.
+     * Disables the entire Stepper.
+     *
+     * @example
+     * ```jsx
+     * <Stepper disabled />
+     * ```
      */
     disabled?: boolean;
     /**
-     * Specifies a custom icon that will be rendered inside the step for invalid steps.
+     * Specifies a custom icon rendered inside the step for invalid steps.
+     *
+     * @example
+     * ```jsx
+     * <Stepper errorIcon="k-icon k-i-warning" />
+     * ```
      */
     errorIcon?: string;
     /**
-     * Specifies a custom SVG icon that will be rendered inside the step for invalid steps.
+     * Specifies a custom SVG icon rendered inside the step for invalid steps.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <Stepper errorSVGIcon={gearIcon} />
+     * ```
      */
     errorSVGIcon?: SVGIcon;
     /**
-     * Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering_stepper %})).
+     * Overrides the default component responsible for rendering a single step ([see example]({% slug custom_rendering_stepper %})).
      *
-     * The default Component is: [Step]({% slug api_layout_step %}).
+     * @example
+     * ```jsx
+     * const CustomStep = (props) => <div>{props.label}</div>;
+     * <Stepper item={CustomStep} />
+     * ```
      */
     item?: React_2.ComponentType<StepProps>;
     /**
-     * The collection of steps that will be rendered in the Stepper ([see example]({% slug overview_stepper %})).
+     * The collection of steps rendered in the Stepper ([see example]({% slug overview_stepper %})).
+     *
+     * @example
+     * ```jsx
+     * <Stepper items={[{ label: 'Step 1' }, { label: 'Step 2' }]} />
+     * ```
      */
     items: Array<StepProps>;
     /**
-     * Specifies the linear flow of the Stepper.
-     * ([see example]({% slug linear_mode_stepper %})).
+     * Specifies whether the Stepper enforces a linear flow ([see example]({% slug linear_mode_stepper %})).
+     *
+     * @example
+     * ```jsx
+     * <Stepper linear />
+     * ```
      */
     linear?: boolean;
     /**
-     * Specifies the display mode of the Stepper
-     * ([see example]({% slug display_modes_stepper %})).
-     * * The possible values are:
-     * * (Default) `steps`. Render step indicator and optional label.
-     * * `labels`. Render labels only.
+     * Specifies the display mode of the Stepper ([see example]({% slug display_modes_stepper %})).
+     *
+     * The possible values are:
+     * * (Default) `steps`&mdash;Renders step indicators and optional labels.
+     * * `labels`&mdash;Renders labels only.
+     *
+     * @example
+     * ```jsx
+     * <Stepper mode="labels" />
+     * ```
      */
     mode?: 'steps' | 'labels';
     /**
-     * Specifies the orientation of the Stepper
-     * ([see example]({% slug orientation_stepper %})).
+     * Specifies the orientation of the Stepper ([see example]({% slug orientation_stepper %})).
      *
      * The possible values are:
      * * (Default) `horizontal`
      * * `vertical`
+     *
+     * @example
+     * ```jsx
+     * <Stepper orientation="vertical" />
+     * ```
      */
     orientation?: 'horizontal' | 'vertical';
     /**
-     * Applicable for scenarios when keyboard is used for navigation. Indicates whether
-     * the selection will change upon focus change or it will require additional action
-     * (Enter or Space key press) in order to select the focused step. Defaults to `false`.
+     * Indicates whether the selection will change upon focus change or require additional action (Enter or Space key press) to select the focused step. Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <Stepper selectOnFocus />
+     * ```
      */
     selectOnFocus?: boolean;
     /**
      * Sets additional CSS styles to the Stepper.
+     *
+     * @example
+     * ```jsx
+     * <Stepper style={{ backgroundColor: 'lightblue' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
-     * Specifies a custom icon that will be rendered inside the step for valid steps.
+     * Specifies a custom icon rendered inside the step for valid steps.
+     *
+     * @example
+     * ```jsx
+     * <Stepper successIcon="k-icon k-i-check" />
+     * ```
      */
     successIcon?: string;
     /**
-     * Specifies a custom SVG icon that will be rendered inside the step for valid steps.
+     * Specifies a custom SVG icon rendered inside the step for valid steps.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <Stepper successSVGIcon={gearIcon} />
+     * ```
      */
     successSVGIcon?: SVGIcon;
     /**
-     * Specifies the index of the selected Step.
+     * Specifies the index of the selected step.
+     *
+     * @example
+     * ```jsx
+     * <Stepper value={1} />
+     * ```
      */
     value: number;
     /**
-     * The event handler that will be fired when the value is changed.
+     * Fires when the value is changed.
+     *
+     * @example
+     * ```jsx
+     * <Stepper onChange={(event) => console.log(event.value)} />
+     * ```
      */
     onChange?: (event: StepperChangeEvent) => void;
     /**
-     * The event handler that will be fired when a Step is focused.
+     * Fires when a step is focused.
+     *
+     * @example
+     * ```jsx
+     * <Stepper onFocus={(event) => console.log(event.step)} />
+     * ```
      */
     onFocus?: (event: StepperFocusEvent) => void;
 }
@@ -4251,10 +5269,20 @@ export declare interface TabStripNavigationProps {
 export declare interface TabStripProps extends KendoReactComponentBaseProps, TabStripScrollableProps {
     /**
      * Enables the tab animation.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip animation={true} />
+     * ```
      */
     animation?: boolean;
     /**
      * Sets the index of the selected TabStripTab component ([see example]({% slug tabs_tabstrip %}#toc-tabs-on-initial-loading)).
+     *
+     * @example
+     * ```jsx
+     * <TabStrip selected={0} />
+     * ```
      */
     selected?: number;
     /**
@@ -4263,6 +5291,11 @@ export declare interface TabStripProps extends KendoReactComponentBaseProps, Tab
     style?: any;
     /**
      * Sets the style of the TabStripContent component.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip tabContentStyle={{ padding: '10px' }} />
+     * ```
      */
     tabContentStyle?: any;
     /**
@@ -4273,6 +5306,11 @@ export declare interface TabStripProps extends KendoReactComponentBaseProps, Tab
      * - `"bottom"`&mdash;Renders the `TabStripNavigation` to the bottom of the TabStrip.
      * - `"left"`&mdash;Renders the `TabStripNavigation` to the left of the TabStrip.
      * - `"right"`&mdash;Renders the `TabStripNavigation` to the right of the TabStrip.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip tabPosition="bottom" />
+     * ```
      */
     tabPosition?: string;
     /**
@@ -4284,37 +5322,76 @@ export declare interface TabStripProps extends KendoReactComponentBaseProps, Tab
      * - `"end"`&mdash;Aligns the tabs at the end of the `TabStripNavigation`.
      * - `"justify"`&mdash;Justifies the tabs inside the `TabStripNavigation`.
      * - `"stretched"`&mdash;Stretches the tabs inside the `TabStripNavigation`.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip tabAlignment="center" />
+     * ```
      */
     tabAlignment?: string;
     /**
      * Sets the `tabIndex` of the TabStripNavigation.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Sets the direction of the TabStrip component.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
      * Specifies the CSS class names of the TabStrip component.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Specifies the possible sizes of the TabStrip.
-     *  * @default `medium`
+     *
+     * @example
+     * ```jsx
+     * <TabStrip size="small" />
+     * ```
      */
     size?: TabStripSize;
     /**
      * Defines if the tabs will remain mounted after another tab is selected. Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip keepTabsMounted={true} />
+     * ```
      */
     keepTabsMounted?: boolean;
     /**
      * @default false
-     * Defines if the all component tabs will be rendered by default. Defaults to `false`.
+     * Defines if all component tabs will be rendered by default. Defaults to `false`.
      * If set to `false`, the component will render only the currently selected tab. This can be useful when the content of the tabs is heavy and you want to improve the initial loading time. Check also the [keepTabsMounted]({% slug api_layout_tabstripprops %}#toc-keeptabsmounted) prop.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip renderAllContent={true} />
+     * ```
      */
     renderAllContent?: boolean;
     /**
      * Fires each time the user makes a selection.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip onSelect={(e) => console.log(e.selected)} />
+     * ```
      */
     onSelect?: (e: TabStripSelectEventArguments) => void;
 }
@@ -4577,18 +5654,38 @@ export declare interface TileLayoutItem {
 export declare interface TileLayoutProps {
     /**
      * Sets the `id` property of the root element.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout id="tile-layout" />
+     * ```
      */
     id?: string;
     /**
      * Sets additional CSS styles to the TileLayout.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout style={{ backgroundColor: 'lightgray' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
      * Sets additional classes to the TileLayout.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout className="custom-class" />
+     * ```
      */
     className?: string;
     /**
      * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout dir="rtl" />
+     * ```
      */
     dir?: string;
     /**
@@ -4597,37 +5694,77 @@ export declare interface TileLayoutProps {
      * * The possible keys are:
      * * `rows`
      * * `columns`
+     *
+     * @example
+     * ```jsx
+     * <TileLayout gap={{ rows: 10, columns: 10 }} />
+     * ```
      */
     gap?: TileLayoutGap;
     /**
      * Specifies the default number of columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout columns={4} />
+     * ```
      */
     columns?: number;
     /**
      * Specifies the default width of the columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout columnWidth={200} />
+     * ```
      */
     columnWidth?: number | string;
     /**
      * Specifies the default height of the rows ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout rowHeight={100} />
+     * ```
      */
     rowHeight?: number | string;
     /**
      * Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout dataItemKey="id" />
+     * ```
      */
     dataItemKey?: string;
     /**
      * The collection of items that will be rendered in the TileLayout
      * ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout items={[{ header: 'Header', body: 'Body' }]} />
+     * ```
      */
     items?: TileLayoutItem[];
     /**
      * The list of tiles' positions which are used when the TileLayout is in controlled mode
      * ([see example]({% slug tiles_tilelayout %}#toc-controlling-the-position)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout positions={[{ col: 1, row: 1 }]} />
+     * ```
      */
     positions?: TilePosition[];
     /**
      * Fires when the user repositions the tile by either dragging or resizing
      * ([see example]({% slug tiles_tilelayout %}#toc-controlling-the-position)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout onReposition={(e) => console.log(e.value)} />
+     * ```
      */
     onReposition?: (event: TileLayoutRepositionEvent) => void;
     /**
@@ -4635,12 +5772,22 @@ export declare interface TileLayoutProps {
      * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
      * Defaults to `column`
      * ([see example]({% slug autoflows_tilelayout %})).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout autoFlow="row" />
+     * ```
      */
     autoFlow?: TileLayoutAutoFlow;
     /**
-     * Use this callback to prevent or allow dragging of the tiles based on specific dom event.
+     * Use this callback to prevent or allow dragging of the tiles based on specific DOM events.
      * Setting `ignoreDrag={(e) => { return !(e.target.classList.contains("k-card-title")); }}` will make only the headers draggable.
      * Setting `ignoreDrag={(e) => { return e.target.nodeName == "INPUT"; }}` will ignore dragging input elements.
+     *
+     * @example
+     * ```jsx
+     * <TileLayout ignoreDrag={(e) => e.target.nodeName === 'INPUT'} />
+     * ```
      */
     ignoreDrag?: (event: any) => boolean;
 }
@@ -4738,26 +5885,56 @@ export declare interface TimelineDirectionsProps {
 export declare interface TimelineEventProps {
     /**
      * Specifies if the event card is default collapsed.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ opened: true, title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     opened?: boolean;
     /**
      * Specifies the text that is rendered as body of the event card.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ description: 'Event details', title: 'Event 1', date: new Date() }]} />
+     * ```
      */
     description: string;
     /**
-     * Represent event point on the axis.
+     * Represents the event point on the axis.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ date: new Date(), title: 'Event 1', description: 'Details' }]} />
+     * ```
      */
     date: Date;
     /**
-     * Specifies the text that is rendered as title.
+     * Specifies the text that is rendered as the title of the event card.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     title: string;
     /**
      * Specifies the text that is rendered under the title.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ subtitle: 'Subtitle', title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     subtitle?: string;
     /**
      * Specifies the images that are rendered under the description.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ images: [{ src: 'image.jpg', alt: 'Image' }], title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     images?: {
         src: string;
@@ -4765,6 +5942,11 @@ export declare interface TimelineEventProps {
     }[];
     /**
      * Specifies the corresponding links that are rendered under the images.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ actions: [{ text: 'Learn More', url: 'https://example.com' }], title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     actions?: {
         text: string;
@@ -4777,45 +5959,98 @@ export declare interface TimelineEventProps {
 }
 
 export declare interface TimelineProps {
+    /**
+     * The collection of events to be displayed in the Timeline.
+     *
+     * @example
+     * ```jsx
+     * <Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
+     */
     events: TimelineEventProps[];
     /**
      * Specifies the CSS class names which are set to the Timeline.
+     *
+     * @example
+     * ```jsx
+     * <Timeline className="custom-class" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     className?: string;
     /**
-     * Specifies option for expanding and collapsing the event card.
+     * Specifies whether the event cards can be expanded or collapsed.
+     *
+     * @example
+     * ```jsx
+     * <Timeline collapsibleEvents={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     collapsibleEvents?: boolean;
     /**
      * Switches the Timeline to horizontal mode.
+     *
+     * @example
+     * ```jsx
+     * <Timeline horizontal={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     horizontal?: boolean;
     /**
      * The date format for displaying the event date.
+     *
+     * @example
+     * ```jsx
+     * <Timeline dateFormat="dd/MM/yyyy" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     dateFormat?: string;
     /**
-     * Render events alternatingly on both sides of the axis.
+     * Renders events alternatingly on both sides of the axis.
+     *
+     * @example
+     * ```jsx
+     * <Timeline alterMode={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     alterMode?: boolean;
     /**
-     * Specifies the time for sliding to next event in horizontal mode and time for collapsing the event in vertical mode.
+     * Specifies the time for sliding to the next event in horizontal mode and collapsing the event in vertical mode.
      * The default value are:
      * - `300ms` for horizontal
      * - `400ms` for vertical
+     *
+     * @example
+     * ```jsx
+     * <Timeline transitionDuration={500} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     transitionDuration?: number;
     /**
-     * If set to `true`, the user can use dedicated shortcuts to interact with the Timeline.
+     * Enables keyboard navigation for the Timeline.
      * By default, navigation is disabled.
+     *
+     * @example
+     * ```jsx
+     * <Timeline navigatable={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     navigatable?: boolean;
     /**
-     * An event that is called when event card is toggled.
+     * Fires when an event card is toggled.
+     *
+     * @example
+     * ```jsx
+     * <Timeline onChange={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     onChange?: (event: EventDataProps) => void;
     /**
-     * An event that is called when card action is clicked.
+     * Fires when a card action is clicked.
+     *
+     * @example
+     * ```jsx
+     * <Timeline onActionClick={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
+     * ```
      */
     onActionClick?: (event: EventDataProps) => void;
 }