First component — Standards Docs

Mount the SchemaClientProvider and render a records view for a registered object.

Set up the provider in a providers.tsx file:

// @noverify
"use client";

import { SchemaClientProvider } from "@stndrds/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <SchemaClientProvider config={{ baseUrl: process.env.NEXT_PUBLIC_API_URL! }}>
      {children}
    </SchemaClientProvider>
  );
}

Then render a records view on your page:

// @noverify
import { ViewAwareRecordsView } from "@stndrds/ui";

export default function ContactsPage() {
  return <ViewAwareRecordsView objectId="contact" />;
}

SchemaClientProvider creates an internal QueryClient automatically. Pass your own via the queryClient prop if you need to share a single instance across your app.

If you pass an external queryClient, wrap SchemaClientProvider inside your existing QueryClientProvider. Standards' internal providers must sit inside the TanStack query context.

ViewAwareRecordsView fetches the object's default list view from the API and renders tabs, filters, and the grid automatically. It requires SchemaClientProvider to be present in the component tree.

For the full provider configuration — translations, modal stack, icon renderer — see the React frontend guide.