nocobase/docs/en-US/development/client/settings-center.md

# Settings Center

<img src="./settings-center/settings-tab.jpg" style="max-width: 100%;"/>

## Example

```tsx | pure
import { SettingsCenterProvider } from '@nocobase/client';
import React, { useContext } from 'react';

const HelloTab => () => <div>Hello Tab</div>;

export default React.memo((props) => {
  return (
    <SettingsCenterProvider
      settings={{
        'sample-hello': {
          title: 'Hello',
          icon: 'ApiOutlined',
          tabs: {
            tab1: {
              title: 'Hello Tab',
              component: HelloTab,
            },
          },
        },
      }}
    >{props.children}</SettingsCenterProvider>
  );
});
```

See [samples/hello](https://github.com/nocobase/nocobase/tree/develop/packages/samples/hello) for full examples.