### Install @kubed/icons Package

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/Icons/Icons.mdx

Install the icon component package using npm.

```bash
npm install @kubed/icons
```

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

### Basic Navs Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Navs.mdx

Demonstrates the basic usage of the Navs component with a simple data array.

```javascript
() => {
  const data = [
    { value: 'KubeSphere',label:'KubeSphere' },
    { value: 'Jenkins',label:'Jenkins' },
    { value: 'Kubernetes',label:'Kubernetes' }
  ]
  return (
    <Navs data={data} />
  )
}
```

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

### Full Table Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Table.mdx

This snippet shows a complete example of how to use the Table component, including its data structure and state management. It renders a table and displays its state as a JSON string.

```javascript
import React, { useState } from 'react';
import { Table } from '@kubed/components';

export default () => {
  const [state] = useState({
    columns: [
      {
        title: 'Name',
        field: 'name',
        key: 'name',
      },
      {
        title: 'Status',
        field: 'status',
        key: 'status',
      },
    ],
    data: [
      {
        name: 'Instance 1',
        status: 'Running',
      },
      {
        name: 'Instance 2',
        status: 'Stopped',
      },
    ],
  });

  const table = {
    ...state,
    // Example of how to use the options prop
    fields: [
      {
        key: 'name',
        label: 'Name',
        options: [
          {
            key: '0',
            label: '0',
          },
          {
            key: '1',
            label: '1',
          },
        ],
      },
      {
        key: 'status1',
        label: 'Status',
        options: [
          {
            key: 'status-0',
            label: 'status-0',
          },
          {
            key: 'status-1',
            label: 'status-1',
          },
        ],
      },
    ],
  };

  return (
    <>
      <Table table={table} />
      <pre>{JSON.stringify(state, null, 2)}</pre>
    </>
  );
};

```

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

### Install Kube Design Packages

Source: https://github.com/kubesphere/kube-design/blob/master/README.md

Install the necessary Kube Design packages using Yarn or npm.

```sh
$ yarn add @kubed/components @kubed/hooks @kubed/icons

# or

$ npm i @kubed/components @kubed/hooks @kubed/icons
```

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

### Base Table Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Table.mdx

Demonstrates the fundamental structure of a BaseTable with headers and body rows. Import BaseTable from '@kubed/components'.

```jsx
import { BaseTable } from '@kubed/components';
() => {
  const { Table, TableHead, TableBody, TableRow, TableCell } = BaseTable;
  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Header 1</TableCell>
            <TableCell>Header 2</TableCell>
            <TableCell>Header 3</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Cell 4</TableCell>
            <TableCell>Cell 5</TableCell>
            <TableCell>Cell 6</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </>
  );
};
```

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

### Run Development Server

Source: https://github.com/kubesphere/kube-design/blob/master/docs/README.md

Use npm or yarn to start the development server for the Next.js project. Open http://localhost:3000 in your browser to view the application.

```bash
npm run dev
# or
yarn dev
```

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

### Default Generated Configuration Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Table.mdx

An example of a default configuration generated by `getDefaultTableOptions`, including registration of handlers based on manual control.

```javascript
{
  storageStateKeys: ['columnVisibility'],
  registerHandlers: manual
    ? [
        {
          handlerName: 'onParamsChange',
          stateKeys: ['pagination', 'columnFilters', 'sorting'],
        },
      ]
    : [],
}
```

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

### Customizing Themes with KubedConfigProvider

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/guide/KubedConfigProvider.mdx

Shows how to define and apply custom dark and light themes using themeUtils.createFromDark and themeUtils.createFromLight. The example includes a button to toggle between the custom themes.

```jsx
import { KubedConfigProvider, Button, themeUtils } from "@kubed/components"
function App() {
  const customDarkTheme = themeUtils.createFromDark({
    type: "customDark",
    palette: {
      accents_1: "#1098AD",
      accents_2: "#3BC9DB",
    },
  })
  const customLightTheme = themeUtils.createFromLight({
    type: "customLight",
    palette: {
      accents_1: "#F76707",
      accents_2: "#FFA94D",
    },
  })
  const [themeType, setThemeType] = useState("customDark")
  return (
    <KubedConfigProvider
      themes={[customDarkTheme, customLightTheme]}
      themeType={themeType}
    >
      <Button
        onClick={() => {
          if (themeType === "customDark") {
            setThemeType("customLight")
          } else {
            setThemeType("customDark")
          }
        }}
      >
        button
      </Button>
    </KubedConfigProvider>
  )
}
```

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

### Basic KubedConfigProvider Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/guide/KubedConfigProvider.mdx

Demonstrates the basic setup of KubedConfigProvider at the application root. Import the component and wrap your main App component with it, specifying theme type and locale.

```jsx
import { KubedConfigProvider } from "@kubed/components";

<KubedConfigProvider themeType={'dark'} locale={'zh'}>
  <App />
</KubedConfigProvider>;
```

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

### Applying a Custom Dark Theme

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/guide/ThemeObject.mdx

Demonstrates how to create and apply a custom dark theme using `themeUtils.createFromDark` within `KubedConfigProvider`. This example customizes the theme's palette, layout input sizes, and button shadow.

```jsx
import { KubedConfigProvider, Button, themeUtils } from "@kubed/components"
function App() {
  const customDarkTheme = themeUtils.createFromDark({
    type: "customDark",
    palette: {
      colors: {
        green: ["#E9EDFC", "#E9EDFC", "#E9EDFC", "#E9EDFC", "#E9EDFC"],
      },
    },
    layout: {
      inputSizes: {
        sm: "24px",
      },
    },
    expressiveness: {
      buttonShadow: () => "10px 10px 10px hotpink",
    },
  })
  return (
    <KubedConfigProvider themes={[customDarkTheme]} themeType={\"customDark\"}>
      <Button color="primary" shadow>
        button
      </Button>
    </KubedConfigProvider>
  )
}
```

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

### useToggle Hook Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/hooks/useToggle.mdx

Demonstrates how to use the useToggle hook to switch between 'light' and 'dark' themes. It shows how to toggle to the next value, or set it to a specific value.

```jsx
import { useToggle } from '@kubed/hooks';
import { Button } from '@kubed/components'

export default function App() {
const [value, toggle] = useToggle('light', ['light', 'dark']);
   return (
     <div>
       <p>themeType: {`${value}`}</p>
       <Group spacing="xl">
         <Button onClick={() => toggle()}>toggle</Button>
         <Button onClick={() => toggle('light')}>Set light</Button>
         <Button onClick={() => toggle('dark')}>Set dark</Button>
       </Group>
     </div>
   );
}

```

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

### Imperative Modal Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Modal.mdx

Shows how to open a modal imperatively using the `useModal` hook. This is useful for complex interactions or nested modals.

```javascript
() => {
  const modal = useModal();

  const openChildModal = () => {
    modal.open({
      title: 'Imperative Modal',
      description: 'description text',
      content: 'modal content',
    });
  };

  const content = <Button onClick={openChildModal}>Nest Imperative Modal</Button>;

  const openModal = () => {
    modal.open({
      title: 'Imperative Modal',
      description: 'description text',
      content,
    });
  };

  return <Button onClick={openModal}>Imperative Modal</Button>;
}
```

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

### Column Offset Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Grid.mdx

Shows how to use the 'offset' prop on Col components to create space or indentation from the left side of the grid.

```javascript
() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row>
      <Col span={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
      <Col span={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
      <Col span={3} offset={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
    </Row>
  )
}
```

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

### Full Table Example with Data Handling and Selection

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Table.mdx

This snippet demonstrates a comprehensive implementation of the Table component, including column definitions, data fetching simulation, pagination, sorting, filtering, and row selection. It utilizes `DataTable` and `Dropdown` for interactive elements.

```javascript
import { Table, DataTable, Dropdown, Menu } from '@kubed/components;

export const App = () => {
  const defaultColumns = React.useMemo(
    () => [
      {
        header: 'Name',
        footer: (props) => props.column.id,
        columns: [
          {
            accessorFn: (row) => {
              return row.firstName;
            },
            accessorKey: 'firstName',
            cell: (info) => info.getValue(),
            footer: (props) => props.column.id,
          },
          {
            accessorFn: (row) => row.lastName,
            id: 'lastName',
            cell: (info) => info.getValue(),
            header: () => <span>Last Name</span>,
            footer: (props) => props.column.id,
            enableHiding: true,
          },
        ],
      },
      {
        header: 'Info',
        footer: (props) => props.column.id,
        columns: [
          {
            accessorKey: 'age',
            header: () => 'Age',
            footer: (props) => props.column.id,
            meta: {
              sortable: true,
            },
          },
          {
            header: 'More Info',
            columns: [
              {
                accessorKey: 'visits',
                header: () => <span>Visits</span>,
                footer: (props) => props.column.id,
              },
              {
                accessorKey: 'status',
                header: 'Status',
                footer: (props) => props.column.id,
                meta: {
                  searchKey: 'status1',
                },
              },
              {
                accessorKey: 'progress',
                header: 'Profile Progress',
                footer: (props) => props.column.id,
              },
            ],
          },
        ],
      },
      {
        id: 'actions',
        cell: () => (
          <Dropdown
            content={
              <Menu>
                <MenuItem>Edit</MenuItem>
              </Menu>
            }
          >
            <Button variant="text" radius="lg">
              More
            </Button>
          </Dropdown>
        ),
      },
    ],
    []
  );

  const [params, setParams] = React.useState({
    pagination: {
      pageIndex: 0,
      pageSize: 10,
    },
    columnFilters: [],
    sorting: [],
  });
  const { pagination = {} } = params;
  const [rowSelection, setRowSelection] = React.useState({}); //manage your own row selection state

  const handleParams = (p, key) => {
    setRowSelection({});
    const { pagination: page } = p;
    if (key === 'pagination') {
      setParams(p);
    } else {
      setParams({
        ...p,
        pagination: {
          ...page,
          pageIndex: 0,
        },
      });
    }
  };
  const [loading, setLoading] = React.useState(true);
  React.useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, [params]);
  const [columns] = React.useState(() => [
    {
      id: 'selection',
      header: ({ table }) => (
        <Checkbox
          checked={table.getIsAllRowsSelected()}
          indeterminate={table.getIsSomeRowsSelected()}
          onChange={table.getToggleAllRowsSelectedHandler()} //or getToggleAllPageRowsSelectedHandler
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          disabled={!row.getCanSelect()}
          onChange={row.getToggleSelectedHandler()}
        />
      ),
    },
    ...defaultColumns,
  ]);
  const total = 100;
  const data = React.useMemo(() => {
    if (loading) {
      return [];
    }
    return Array.from({ length: pagination.pageSize })
      .fill(1)
      .map((_, i) => {
        return {
          firstName: `page-${pagination.pageIndex}-firstName-${i}`,
          lastName: `lastName-${i}`,
          age: i,
          visits: i,
          status: `status-${i}`,
          progress: i,
        };
      });
  }, [params, loading]);

  const state = React.useMemo(() => {
    return {
      ...params,
      rowSelection,
    };
  }, [params, rowSelection]);

  const forceUpdate = React.useReducer(() => ({}), {})[1];

  const defaultOption = React.useState(
    DataTable.getDefaultTableOptions({
      tableName: 'table1',
      manual: true,
      enableSelection: true,
      enableMultiSelection: true,
    })
  )[0];

  const table = DataTable.useTable({
    ...defaultOption,
    data,
    loading,
    columns,
    onRowSelectionChange: setRowSelection,
    onParamsChange: handleParams,
    rowCount: total,
    //  getRowId: (row) => row.firstName,
    state,
    meta: {
      ...defaultOption.meta,
      tableName: defaultOption.meta.tableName,
      getProps: {
        filters: () => {
          return {
            simpleMode: false,
            suggestions: [
              {
                key: 'age',
                label: 'Age',
                options: [
                  {
                    key: '0',

```

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

### Basic Banner Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Banner.mdx

Demonstrates the basic setup and content for a Banner component, including navigation and informational tips. Use this for introducing sections or products with associated navigation and help text.

```javascript
() => {
  const data = [
  {
    label: 'KubeSphere',
    value: 'KubeSphere',
  },
  {
    label: 'Jenkins',
    value: 'Jenkins',
  },
  {
    label: 'Kubernetes',
    value: 'Kubernetes',
  },
 ];
 const { Cluster } = KubeIcon;
 return (
    <div style={{ height: '300px', width: '100%', backgroundColor: '#eff4f9', padding: '20px' }}>
      <Banner
        icon={<Cluster />}
        title="集群节点"
        description="集群节点提供了当前集群下节点的运行状态，以及可以编辑删除节点"
        navs={data}
      >
        <Navs data={data} />
        <BannerTip title="集群节点的类型?" key="node-type">
          节点分为主控 (Master) 节点和工作 (Worker) 节点
        </BannerTip>
        <BannerTip title="什么是节点污点?" key="node-dirty">
          节点污点 (Taints) 可以阻止某些容器组 (Pod) 部署至该节点中, 与容忍度 (Tolerations) 一起工作确保容器组不会被调度到不合适的节点上
        </BannerTip>
      </Banner>
    </div>
  )
}
```

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

### Update Notification Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Notify.mdx

Illustrates how to update an existing notification. A loading notification is initially displayed, and then updated to a success message using its `id`.

```javascript
() => {
  let notifyId;
  const trigger = () => {
    notifyId = notify.loading('uploading...');
  };

  const update = () => {
    notify.success('upload success !', { id: notifyId });
  };

  return (
    <div>
      <Group>
        <Button onClick={trigger}>Make me a notify</Button>
        <Button onClick={update}>Update the notify</Button>
      </Group>
      <Notify position="top-right" />
    </div>
  );
}
```

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

### Customizable Grid Columns

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Grid.mdx

Demonstrates how to customize the total number of grids in a Row by setting the 'columns' prop. This example sets the grid system to 24 columns.

```javascript
() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row columns={24}>
      <Col span={12}>
        <PlaceHolder>col-12</PlaceHolder>
      </Col>
      <Col span={6}>
         <PlaceHolder>col-6</PlaceHolder>
      </Col>
      <Col span={6}>
        <PlaceHolder>col-6</PlaceHolder>
      </Col>
    </Row>
  )
}
```

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

### BaseTable Column Fixed Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Table.mdx

Demonstrates how to create a table with fixed left and right columns, as well as a sticky header. This is useful for tables with many columns where key information needs to remain visible.

```jsx
import { BaseTable } from '@kubed/components';
import * as React from 'react';

() => {
  const { Table, TableHead, TableBody, TableRow, TableCell } = BaseTable;
  const data = React.useMemo(() => {
    return [...Array(100)].fill(1).map((_, i) => ({
      col1: i,
      col2: `col2-${i}`,
      col3: `col3-${i}`,
    }));
  }, []);
  return (
    <div
      style={{
        height: '300px',
        overflow: 'auto',
        width: 500,
      }}
    >
      <Table
        stickyHeader
        style={{
          width: 700,
          minWidth: '100%',
        }}
      >
        <colgroup>
          <col width="100" />
          <col width="200" />
          <col />
          <col />
          <col />
          <col width="100" />
        </colgroup>
        <TableHead hasBorder>
          <TableRow>
            <TableCell fixed="left" fixedWidth={0} width={100}>
              Header 1
            </TableCell>
            <TableCell fixed="left" fixedWidth={100} fixedLastLeft>
              Header 2
            </TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell fixed="right" fixedLastRight fixedWidth={0}>
              Header 3
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody hasBorder>
          {data.map((row) => (
            <TableRow key={row.col1}>
              <TableCell fixed="left" fixedWidth={0}>
                {row.col1}
              </TableCell>
              <TableCell fixed="left" fixedWidth={100} fixedLastLeft>
                <div> {row.col2}</div>
              </TableCell>
              <TableCell>
                <div>{row.col3}</div>
              </TableCell>
              <TableCell>{row.col3}</TableCell>
              <TableCell>{row.col3}</TableCell>
              <TableCell fixed="right" fixedLastRight fixedWidth={0}>
                {row.col3}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

```

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

### Search Box Input

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Input.mdx

An example of creating a search box by combining a standard input with a search button, utilizing icons for prefix and suffix.

```javascript
() => {
const { Magnifier, Appcenter } = KubeIcon;
return (
  <Group direction="column">
    <Input prefix={<Magnifier size={16} />} suffix={<Loading size={16} />} />
    <Input prefix="https://" suffix={<Appcenter size={16} />} />
  </Group>
)
}
```

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

### Tabs with Grow Behavior

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Tabs.mdx

Shows how to make the Tabs component take up available horizontal space using the 'grow' prop. This example uses the 'line' variant.

```javascript
() => (
  <Tabs grow variant="line">
    <Tab label="One" key="one">
      one
    </Tab>
    <Tab label="Two" key="two">
      Two
    </Tab>
    <Tab label="Three" key="three">
      Three
    </Tab>
  </Tabs>
)
```

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

### useBooleanToggle Hook Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/hooks/useToggle.mdx

Illustrates the use of the useBooleanToggle hook for toggling between true and false. It includes functions to toggle, set to false, and set to true.

```jsx
import { useBooleanToggle } from '@kubed/hooks';
import { Button } from '@kubed/components'

export default function App() {
const [value, toggle] = useBooleanToggle();
   return (
     <div>
       <p>state：{`${value}`}</p>
       <Group spacing="xl">
         <Button onClick={() => toggle()}>change</Button>
         <Button onClick={() => toggle(false)}>Set false</Button>
         <Button onClick={() => toggle(true)}>Set true</Button>
       </Group>
     </div>
   );
}

```

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

### Radio Group Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Radio.mdx

Illustrates how to group multiple Radio components using `RadioGroup`. The `onChange` handler is triggered when a new radio button is selected within the group.

```javascript
() => {
  const onChange = (val) => {
    console.log(val);
  };
  return (
    <>
      <RadioGroup onChange={onChange}>
        <Radio label="China" value="China" />
        <Radio label="USA" value="USA" />
      </RadioGroup>
    </>
  );
}
```

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

### Customizing Theme Palette Colors

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/guide/ThemeObject.mdx

Shows how to customize the primary color of a theme by overriding the `palette.colors.green` property. This example uses `themeUtils.createFromDark` to define a custom theme with a specific green color scale.

```jsx
() => {
const customDarkTheme = themeUtils.createFromDark({
    type: "customDark",
    palette: {
      colors: {
        green: ["#E3FAFC", "#C5F6FA", "#99E9F2", "#66D9E8", "#3BC9DB"],
      },
    //  primary: "#3BC9DB",
    }
  });
 return <KubedConfigProvider themes={[customDarkTheme]} themeType={"customDark"}> 
      <Button color="primary" shadow>
        button
      </Button>
    </KubedConfigProvider>;
};
```

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

### Basic AutoComplete Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/AutoComplete.mdx

Demonstrates how to set up a basic AutoComplete component. It requires setting the `options` property for data and handling search events with `onSearch`. The `value`, `onSelect`, and `onChange` props are also shown.

```javascript
() => {
  const [value, setValue] = React.useState('');
  const [options, setOptions] = React.useState([]);
  const mockVal = (str, repeat = 1) => ({
     value: str.repeat(repeat),
  });
  const onSearch = (searchText) => {
     setOptions(
       !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]
     );
  };
  const onSelect = (data) => {
     console.log('onSelect', data);
  };
  const onChange = (data) => {
    setValue(data);
  };
  return (
     <AutoComplete
        value={value}
        options={options}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={onSearch}
        onChange={onChange}
     />
  )
}
```

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

### Custom Selection Rendering

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Select.mdx

Customize how selected options are rendered in the select box by specifying the `optionLabelProp`. This example shows rendering country flags and names.

```javascript
() => {
  function handleChange(value){
    console.log(`selected ${value}`);
  }
  return (
    <Select
      mode="multiple"
      style={{ width:'100%'}}
      placeholder="select one country"
      defaultValue={['china']}
      onChange={handleChange}
      optionLabelProp="label"
    >
       <Option value="china" label="China">
         <div className="demo-option-label-item">
            <span role="img" aria-label="China">
                🇨🇳
              </span>
              China (中国)
            </div>
       </Option>
       <Option value="usa" label="USA">
          <div className="demo-option-label-item">
            <span role="img" aria-label="USA">
               🇺🇸
            </span>
            USA (美国)
          </div>
       </Option>
       <Option value="japan" label="Japan">
          <div className="demo-option-label-item">
             <span role="img" aria-label="Japan">
                🇯🇵
             </span>
                Japan (日本)
             </div>
       </Option>
       <Option value="korea" label="Korea">
          <div className="demo-option-label-item">
             <span role="img" aria-label="Korea">
                🇰🇷
             </span>
             Korea (韩国)
          </div>
       </Option>
    </Select>
  )
}
```

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

### Long Notification Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Notify.mdx

Shows how to display a long notification message. The `notify.success` function is used with a lengthy string to demonstrate truncation or wrapping behavior.

```javascript
() => {
  const trigger = () =>
    notify.success(
      'Here is your toast.Here is your toast.Here is your toast.Here is your toast.Here is your toast.Here is your toast.Here is your toast.'
    );
  return (
    <div>
      <Button onClick={trigger}>Make me a toast</Button>
      <Notify position="top-right" />
    </div>
  );
}
```

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

### Initialize Application with KubedConfigProvider

Source: https://github.com/kubesphere/kube-design/blob/master/README.md

Wrap your React application with KubedConfigProvider and include CssBaseline for style normalization.

```jsx
import { CssBaseline, KubedConfigProvider } from '@kubed/components';

const Application = () => (
  <KubedConfigProvider>
    <CssBaseline /> // ---> Normalize styles
    <AppComponent /> // ---> Root of your application
  </KubedConfigProvider>
)
```

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

### Styled Popover

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Popover.mdx

Shows how to style a Popover component with custom title, content, width, and maxWidth. This example uses a button with an extra-large radius as the trigger.

```javascript
() => (
  <div>
    <Popover
      title="popover title"
      content="Display additional, floating content on click"
      maxWidth={200}
      width={150}
    >
      <Button radius="xl">KubeSphere</Button>
    </Popover>
  </div>
)
```

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

### Input with Prefix and Suffix

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Input.mdx

Shows how to use the `addonBefore` and `addonAfter` props to add content before and after the input field, as well as using `prefix` and `suffix` for icons.

```javascript
() => {
  const { Appcenter } = KubeIcon;
  return (
    <Group>
      <Input addonBefore="https://" width={350} />
      <Input addonAfter=".com" width={350} prefix={<Appcenter size={16} />} />
    </Group>
  )
}
```

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

### Basic Input Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Input.mdx

Demonstrates the basic usage of the Input component with a placeholder and a specified width.

```javascript
<Input placeholder="input here..." width={360} />
```

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

### Basic Select Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Select.mdx

Demonstrates the basic usage of the Select component, including setting placeholders, default values, disabled states, loading indicators, and clearable options.

```javascript
() => {
  const { Option } = Select;
  return (
  <>
     <Select style={{ width: '180px' }} placeholder="请选择" allowClear>
       <Option value="China">按 CPU 平均负载排行</Option>
       <Option value="USA">按内存用量排行</Option>
       <Option value="Russian">按磁盘用量排行</Option>
       <Option value="France">按磁盘用量排行2</Option>
     </Select>
     <Select defaultValue="China" style={{ width: '120px', marginLeft:'20px'}} disabled>
       <Option value="China">China</Option>
     </Select>
     <Select defaultValue="China" style={{ width: '120px',marginLeft:'20px'}} loading>
       <Option value="china">China</Option>
     </Select>
     <Select defaultValue="China" style={{ width: '120px', marginLeft:'20px'}} allowClear>
        <Option value="china">China</Option>
     </Select>
   </>
  )
}
```

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

### Basic Menu Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Menu.mdx

Demonstrates how to use the Menu component with nested MenuItem components. Includes icons and click callbacks for interactive elements.

```javascript
() => {
  const { Add, Stop, Pen, Trash } = KubeIcon;
  const clickCallback = () => {
    console.log('you click me')
  }
  return (
    <Card style={{ width: '230px' }}>
      <Menu>
        <MenuLabel>menu label</MenuLabel>
        <MenuItem icon={<Add />} onClick={clickCallback}>Add</MenuItem>
        <MenuItem icon={<Stop />}>Stop</MenuItem>
        <MenuItem icon={<Pen />}>Edit</MenuItem>
        <Divider />
        <MenuItem icon={<Trash />}>Delete</MenuItem>
      </Menu>
    </Card>
  )
}
```

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

### Basic Dropdown with Menu

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Dropdown.mdx

Demonstrates a basic dropdown with a menu containing various actions. The default trigger is click. Ensure KubeIcon and Button components are available.

```javascript
() => {
const { Add, Stop, Pen, Trash, More } = KubeIcon;
const MenuComponent = (
  <Menu>
    <MenuLabel>menu label</MenuLabel>
    <MenuItem icon={<Add />}>Add</MenuItem>
    <MenuItem icon={<Stop />}>Stop</MenuItem>
    <MenuItem icon={<Pen />}>Edit</MenuItem>
    <MenuItem icon={<Trash />}>Delete</MenuItem>
  </Menu>
);
return (
  <div style={{ height: '100px', width: '100%', backgroundColor: '#f9fbfd' }}>
    <Dropdown content={MenuComponent}>
      <Button variant="text" radius="lg">
        <More size={16} />
      </Button>
    </Dropdown>
  </div>
)
}
```

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

### Basic Badge Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Badge.mdx

Demonstrates the simplest way to use the Badge component with text or numbers.

```javascript
() => (
  <Group>
    <Badge>KubeSphere</Badge>
    <Badge color="warning">12</Badge>
  </Group>
)
```

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

### InputNumber Basic Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/InputNumber.mdx

Demonstrates the basic usage of the InputNumber component with minimum, maximum, and step value configurations.

```javascript
<InputNumber min={-2} max={10} step={3}/>
```

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

### Loading Component Basic Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Loading.mdx

Demonstrates the basic usage of the Loading component with different sizes (small, medium, large).

```javascript
() => (
  <Group>
    <Loading size="sm" />
    <Loading size="md" />
    <Loading size="lg" />
  </Group>
)
```

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

### useDidUpdate Hook Example

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/hooks/useDidUpdate.mdx

Demonstrates how to use the useDidUpdate hook to perform an action only after the component has updated based on dependency changes. It initializes a counter and an update counter, and increments the update counter each time the main counter changes.

```jsx
import React from 'react';
import { useDidUpdate } from '@kubed/hooks';
import { Button, Group } from '@kubed/components'

export default function App() {
   const [counter, setCounter] = React.useState(0);
   const [updateCount, setUpdateCount] = React.useState(0);
     useDidUpdate(() => {
       setUpdateCount((updateCount) => updateCount + 1)
     }, [counter]);

     return (
       <div>
         <p>counter:{counter}</p>
         <p>updateCount: {updateCount}</p>
         <Group spacing="xl">
           <Button onClick={() => setCounter((counter) =>counter + 1 )}> counter +1 </Button>
         </Group>
       </div>
     );
}
```

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

### Basic Container

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Container.mdx

Demonstrates the basic usage of the Container component. Use this for simple content wrapping with a background.

```javascript
<Container  style={{ background:'#eee'}}>

</Container>
```

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

### Basic Modal Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Modal.mdx

Demonstrates how to open and close a basic modal dialog. Use this when requiring user interaction or feedback.

```javascript
() => {
  const [visible, setVisible] = React.useState(false);
  const { Cluster } = KubeIcon;
  const ref = React.createRef();

  const openModal = () => {
    setVisible(true);
  };

  const closeModal = () => {
    console.log(ref.current);
    setVisible(false);
  };

  return (
    <>
      <Button onClick={openModal}>Open Modal</Button>
      <Modal
        ref={ref}
        visible={visible}
        title="Modal demo"
        description="Modal description"
        titleIcon={<Cluster size={40} />}
        onCancel={closeModal}
      >
        Modal content
      </Modal>
    </>
  );
}
```

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

### Basic Switch

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Switch.mdx

Demonstrates the basic usage of the Switch component with a label.

```javascript
() => <Switch label="Label" />
```

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

### Container Size and Padding

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Container.mdx

Shows how to apply different sizes and padding to the Container component. Use 'size' and 'padding' props for responsive layouts.

```javascript
<>
  <Container size="xl" padding="xl" style={{ background: '#eee' }}>
    container
  </Container>
  <Container size="sm" padding="sm" style={{ marginTop:'30px',background: '#eee'}}>
    container
  </Container>
</>
```

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

### Basic Grid Layout

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Grid.mdx

Demonstrates the fundamental usage of Row and Col components to create a basic grid layout with columns of equal width.

```javascript
() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row>
      <Col span={4}>
          <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}
```

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

### Basic Table Usage with React Table

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Table.mdx

Demonstrates how to use the DataTable and Table components for basic data display. It configures default table options, defines columns, and provides sample data. This snippet is useful for setting up a functional table with filtering capabilities.

```jsx
import * as React from 'react';
import { DataTable, Table } from '@kubed/components';

() => {
  const [defaultOptions] = React.useState(
    DataTable.getDefaultTableOptions({
      tableName: 'table-demo',
      manual: false,
      enableFilters: true,
      enablePagination: false,
    })
  );
  const [columnFilters, setColumnFilters] = React.useState([]);
  const columns = React.useMemo(() => {
    return [
      {
        accessorKey: 'name',
        header: 'Name',
        cell: (info) => info.getValue(),
      },
      {
        accessorKey: 'age',
        header: 'Age',
        cell: (info) => info.getValue(),
        filterFn: 'equals',
      },
      {
        accessorKey: 'address',
        header: 'Address',
        cell: (info) => info.getValue(),
      },
    ];
  }, []);
  const data = React.useMemo(() => {
    return [
      { name: 'KubeSphere', age: 1, address: 'Beijing' },
      { name: 'KubeSphere', age: 3, address: 'Beijing' },
      { name: 'KubeSphere', age: 2, address: 'Beijing' },
    ];
  }, []);
  const table = DataTable.useTable({
    ...defaultOptions,
    columns,
    data,
    meta: {
      ...defaultOptions.meta,
      getProps: {
        filters: () => {
          return {
            simpleMode: false,
            suggestions: [
              {
                key: 'age',
                label: 'Age',
                options: Array(4)
                  .fill(1)
                  .map((i, index) => ({ key: index, label: `Age ${index}` })),
              },
            ],
          };
        },
      },
    },
  });
  return <Table table={table} />;
};

```

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

### Basic Tooltip Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Tooltip.mdx

Demonstrates the fundamental usage of the Tooltip component to display a simple text popup on mouse enter.

```javascript
() => (
  <Tooltip content="Tooltip content">
    <Button>Tooltip</Button>
  </Tooltip>
)
```

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

### Basic Tabs Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Tabs.mdx

Demonstrates the fundamental implementation of the Tabs component with multiple Tab items.

```javascript
() => (
  <Tabs>
    <Tab label="One" key="one">
      one
    </Tab>
    <Tab label="Two" key="two">
      Two
    </Tab>
    <Tab label="Three" key="three">
      Three
    </Tab>
  </Tabs>
)
```

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

### Basic Tag Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Tag.mdx

Demonstrates the fundamental usage of the Tag component. Use this for simple text labels.

```javascript
() => (
  <Group>
    <Tag>KubeSphere</Tag>
    <Tag title="job-name">KubeSphere</Tag>
  </Group>
)
```

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

### Basic Form Usage

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Form.mdx

Demonstrates a simple form with input fields for username, UID, and group. Includes validation rules and help text. Use for standard data entry forms.

```javascript
() => {
  const onFinish = (values) => {
    console.log(values);
  };
  return (
    <Form onFinish={onFinish} initialValues={{ username: 'wayne' }}>
      <Row gutter={[10, 40]}>
        <Col span={6}>
          <FormItem
            name="username"
            label="Username"
            help="user name must input"
            rules={[{ required: true, message: 'Please input your username!' }]}>
            <Input />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem
            name="uid"
            label="username"
            help="help content"
            rules={[{ required: true, message: 'Please input your uid!' }]}>
            <Input />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem name="group" label="Group" help="help content" tooltip="tooltip 内容 content">
            <Input />
          </FormItem>
        </Col>
      </Row>
      <button type="submit">Submit</button>
    </Form>
  );
};
```

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

### Customizing Theme Layout Input Sizes

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/guide/ThemeObject.mdx

Demonstrates how to customize the input sizes for different breakpoints (xs, sm, md, lg, xl) within a theme. This allows for consistent sizing of input elements across various screen sizes.

```jsx
() => {
const customDarkTheme = themeUtils.createFromDark({
    type: "customDark",
    layout: {
      inputSizes: {
        xs:'16px',
        sm: "24px",
        md: "32px",
        lg: "40px",
        xl: "48px",
      },
    },
  });
 return  <KubedConfigProvider themes={[customDarkTheme]} themeType={"customDark"}>
      <Button color='primary' size="xs">KubeSphere</Button>
      <Button color='primary' size="sm">KubeSphere</Button>
      <Button color='primary' size="md">KubeSphere</Button>
      <Button color='primary' size="lg">KubeSphere</Button>
      <Button color='primary' size="xl">KubeSphere</Button>
    </KubedConfigProvider>;
};
```

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

### Tooltip in Control Mode

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Tooltip.mdx

Demonstrates how to control the visibility of the tooltip programmatically using state.

```javascript
() => {
  const [visible, setVisible] = React.useState(true);
  const show = () => setVisible(true);
  const hide = () => setVisible(false);
  return (
    <Tooltip content="tooltip">
      <Button onClick={visible ? hide : show}>Reference</Button>
    </Tooltip>
  )
}
```

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

### Imperative Confirm Modal

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Modal.mdx

Demonstrates how to open a confirmation modal imperatively using `useModal.confirm`. Use this for actions that require user confirmation.

```javascript
() => {
  const modal = useModal();
  return (
    <Button
      onClick={() => {
        modal.confirm({ title: 'confirm modal', content: 'confirm content' });
      }}
    >
      Imperative Modal
    </Button>
  );
}
```

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

### Basic Usage of useClipboard Hook

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/hooks/useClipboard.mdx

Demonstrates how to use the useClipboard hook to copy a message and reset the clipboard state. It displays the copied status and any errors encountered.

```jsx
import { useClipboard } from '@kubed/hooks';
import { Button, Group } from '@kubed/components'

export default function App() {
   const {copy, reset, error, copied } = useClipboard();

     return (
       <div>
         <p>{"copied: "+copied}</p>
         <p>error: {error}</p>
         <Group spacing="xl">
           <Button onClick={() => copy('copy message')}> copy </Button>
           <Button onClick={() => reset() }> reset </Button>
         </Group>
       </div>
     );
}
```

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

### Tooltip Placement Options

Source: https://github.com/kubesphere/kube-design/blob/master/docs/docs/en/components/Tooltip.mdx

Illustrates various placement options for the Tooltip, including 'top', 'right', 'left', 'bottom', and their aligned variants.

```javascript
() => (
  <>
    <Row style={{ width: '500px' }}>
      <Col span={4}>
        <Tooltip content="Tooltip content Tooltip content" placement="top">
          <Button style={{ minWidth: '100px' }}>top</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip content="Tooltip content Tooltip content" placement="top-start">
          <Button style={{ minWidth: '100px' }}>top-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip content="Tooltip content Tooltip content" placement="top-end">
          <Button style={{ minWidth: '100px' }}>top-end</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="right"
        >
          <Button style={{ minWidth: '100px' }}>right</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="right-start"
        >
          <Button style={{ minWidth: '100px' }}>right-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="right-end"
        >
          <Button style={{ minWidth: '100px' }}>right-end</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="left"
        >
          <Button style={{ minWidth: '100px' }}>left</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="left-start"
        >
          <Button style={{ minWidth: '100px' }}>left-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="left-end"
        >
          <Button style={{ minWidth: '100px' }}>left-end</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="bottom"
        >
          <Button style={{ minWidth: '100px' }}>bottom</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="bottom-start"
        >
          <Button style={{ minWidth: '100px' }}>bottom-start</Button>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip
          content="Tooltip content Tooltip content Tooltip content Tooltip content"
          placement="bottom-end"
        >
          <Button style={{ minWidth: '100px' }}>bottom-end</Button>
        </Tooltip>
      </Col>
    </Row>
  </>
)
```