import { DataSourceProvider } from '@object-ui/providers';

<DataSourceProvider dataSource={myCustomDataSource}>
  <App />
</DataSourceProvider>

import { MetadataProvider } from '@object-ui/providers';

<MetadataProvider metadata={myMetadata}>
  <App />
</MetadataProvider>

import { ThemeProvider } from '@object-ui/providers';

<ThemeProvider defaultTheme="system" storageKey="my-app-theme">
  <App />
</ThemeProvider>

import { DataSourceProvider, MetadataProvider, ThemeProvider } from '@object-ui/providers';

function App() {
  return (
    <ThemeProvider>
      <DataSourceProvider dataSource={myDataSource}>
        <MetadataProvider metadata={myMetadata}>
          {/* Your app components */}
        </MetadataProvider>
      </DataSourceProvider>
    </ThemeProvider>
  );
}