When adding authentication to your React app, Clerk provides a set of prebuilt components that make it easy to implement common flows. The main components you will use are <SignIn />, <SignUp />, and <UserButton />. The <SignIn /> component displays a ready-to-use sign-in form, handling all the logic needed for users to log in. The <SignUp /> component provides a sign-up form for new users to register. The <UserButton /> component shows the authenticated user's profile icon, offering a menu for account management and sign out. These components are designed to work seamlessly with your React routes or in modals, making them flexible for different UI needs.

To use Clerk's prebuilt authentication components in your React app, simply import and render them where you want the authentication flow to appear. For example, you can add the <SignIn /> or <SignUp /> components directly to a route. Here is how you might use them in a basic React app:

import { SignIn, SignUp } from "@clerk/clerk-react";

// Example: Using <SignIn /> and <SignUp /> in routes
<Route path="/sign-in" element={<SignIn />} />
<Route path="/sign-up" element={<SignUp />} />

You can also display these components in a modal by conditionally rendering them based on your app's state. This lets you provide a smooth authentication experience without navigating away from the current page.