# Registering Components with TamboProvider
URL: /concepts/components/registering-with-tambo-provider

The `@tambo-ai/react` package provides hooks to help with component registration. One of the main approaches is using the `TamboProvider` component for static registration.

## Using the TamboProvider

You can pass a list of components directly to the `TamboProvider` component. All components will be visible to Tambo hooks and components rendered inside the provider.

```tsx title="layout.tsx"
import { TamboProvider } from "@tambo-ai/react";
import { z } from "zod";
import { WeatherDisplay } from "@/components/WeatherDisplay";
import { UserProfile } from "@/components/UserProfile";

// Define simple Zod schemas for component props
const WeatherDisplayProps = z.object({
  city: z.string(),
  temperature: z.number(),
  condition: z.string(),
});

const UserProfileProps = z.object({
  name: z.string(),
  email: z.string(),
  avatar: z.string().optional(),
});

const components = [
  {
    name: "WeatherDisplay",
    description: "A display of the weather in a city",
    component: WeatherDisplay,
    propsSchema: WeatherDisplayProps,
  },
  {
    name: "UserProfile",
    description: "A user profile card with avatar and basic information",
    component: UserProfile,
    propsSchema: UserProfileProps,
  },
];

<TamboProvider components={components}>
  <App />
</TamboProvider>;
```