10 React Components Every Developer Needs

After building dozens of React apps, the same 10 components show up in every single one. Button, Input, Modal, Dropdown, Table, Tabs, Toast, Tooltip, Avatar, Pagination. Master these and you can ship 80% of any UI.

This guide walks through each one with usage patterns, accessibility gotchas, and real code you can steal. If you want to scaffold all 10 in one click, the DocForge AI template marketplace has a free starter.

Key Takeaways

• 10 components cover ~80% of every React UI you'll ever build — buttons, inputs, modals, dropdowns, tables, tabs, toasts, tooltips, avatars, pagination.
• Accessibility is non-negotiable: every interactive component must have keyboard support, focus management, and ARIA semantics baked in.
• Use a component library (shadcn/ui, Radix, Headless UI) for the primitives; build your design system on top.
• Composition beats configuration — favor small components with slots over one component with 20 props.
• The DocForge AI template marketplace has a free starter that scaffolds all 10 components in one click.

1. Button

The most-used component in any app. A good Button supports:

• Variants: primary, secondary, ghost, destructive
• Sizes: sm, md, lg
• Loading state with a spinner
• Disabled state
• Icon support (left and right)
• asChild prop so it can render as a <Link> or <a> when needed

<Button variant="primary" size="md" loading={isSaving}>
  Save changes
</Button>

Accessibility: use a real <button> element (not a <div>), give it a meaningful aria-label when it contains only an icon, and never disable a button without explaining why (use a tooltip).

2. Input & Form Field

Inputs look simple but have the most variation: text, email, password, number, search, with prefixes, suffixes, icons, error states, and helper text. Build a Field wrapper that handles label, error, and helper text — then compose any input inside it.

<Field label="Email" error={errors.email} hint="We'll never share your email.">
  <Input type="email" {...register("email")} />
</Field>

Accessibility: the <label> must be associated with the <input> via htmlFor/id. Error messages should have aria-describedby linking them to the input. Required fields should use aria-required.

3. Modal / Dialog

Modals are where accessibility gets hard. A proper Modal must:

• Trap focus inside the modal while open
• Return focus to the triggering element on close
• Close on Escape and on backdrop click
• Set role="dialog" and aria-modal="true"
• Be teleported to document.body to escape stacking contexts

Use Radix Dialog or Headless UI Dialog — don't build this from scratch.

<Modal open={open} onOpenChange={setOpen} title="Delete project?">
  <p>This action cannot be undone.</p>
  <ModalFooter>
    <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
    <Button variant="destructive" onClick={handleDelete}>Delete</Button>
  </ModalFooter>
</Modal>

4. Dropdown Menu

Dropdowns are deceptively complex — keyboard navigation (arrow keys, Home/End), type-ahead search, sub-menus, dividers, disabled items, and focus management. Use Radix DropdownMenu.

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onSelect={onEdit}>Edit</DropdownMenuItem>
    <DropdownMenuItem onSelect={onDuplicate}>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem onSelect={onDelete} className="text-destructive">
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

5. Data Table

Tables look easy until you need sorting, filtering, pagination, row selection, sticky headers, and responsive behavior on mobile. Build on top of TanStack Table — it's headless, so you control the rendering.

Key patterns:

• Sticky header — position: sticky; top: 0 on <thead>
• Row hover — subtle background change
• Empty state — a friendly message + CTA when there's no data
• Loading state — skeleton rows, not a spinner overlay
• Mobile — collapse to a card list under 640px

<DataTable
  columns={columns}
  data={users}
  pagination
  sorting
  filtering
  pageSize={10}
/>

6. Tabs

Tabs are the simplest component to get wrong. Requirements: arrow-key navigation between tabs, role="tablist"/role="tab"/role="tabpanel", aria-selected, aria-controls, and tabindex management.

Use Radix Tabs. Add an animated underline indicator for polish.

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
  <TabsContent value="activity">…</TabsContent>
  <TabsContent value="settings">…</TabsContent>
</Tabs>

7. Toast Notifications

Toasts give feedback without blocking the user. Use Sonner — it's the cleanest implementation in 2026.

Rules:

• Auto-dismiss after 4-7 seconds (longer for errors)
• Stack multiple toasts; newest on top
• Action button (Undo, Retry) for important toasts
• Pause on hover
• Accessible: announce to screen readers via aria-live="polite"

import { toast } from "sonner";

toast.success("Saved!");
toast.error("Could not save.", { action: { label: "Retry", onClick: save } });
toast.promise(api.save(), { loading: "Saving…", success: "Saved!", error: "Failed." });

8. Tooltip

Tooltips explain icon-only buttons and clarify ambiguous labels. Requirements:

• Delay before showing (300-700ms) to prevent flicker
• Dismiss on Escape and on blur
• Don't use for critical info — it disappears on hover
• role="tooltip" and aria-describedby linking trigger to tooltip
• Never put interactive elements inside a tooltip (use a Popover instead)

Use Radix Tooltip.

<Tooltip>
  <TooltipTrigger asChild>
    <IconButton aria-label="Help">
      <HelpIcon />
    </IconButton>
  </TooltipTrigger>
  <TooltipContent>Calculates tax based on the shipping address.</TooltipContent>
</Tooltip>

9. Avatar

Avatars show user identity. Build for:

• Image with text fallback (initials) when the image fails
• Sizes: xs (24px) through xl (96px)
• Optional status indicator (online, away, busy)
• Group rendering for stacks (+3 more)

<Avatar src={user.avatarUrl} name={user.name} size="md" />
<AvatarGroup max={4}>
  {members.map(m => <Avatar key={m.id} src={m.avatarUrl} name={m.name} />)}
</AvatarGroup>

10. Pagination

Pagination is small but does a lot of work. A good Pagination:

• Shows current page, prev/next, and a window of nearby pages
• Ellipsis (…) when there are many pages
• Disabled prev/next at the ends
• aria-current="page" on the active page
• Optional page-size selector

<Pagination
  page={3}
  totalPages={12}
  onChange={setPage}
  showPageSize
  pageSize={20}
  onPageSizeChange={setPageSize}
/>

How to Scaffold All 10 With AI

You don't have to build these from scratch. The DocForge AI template marketplace has starter projects that pre-ship every component above, wired up with shadcn/ui and Tailwind.

To scaffold all 10 components:

1. Open the templates page and pick a starter (the Dashboard template ships with a table, tabs, dropdown, modal, toast, and pagination out of the box).
2. Click Use this template — it loads the files into the AI chat.
3. Ask the AI: "Add a Button, Input, Tooltip, and Avatar component from shadcn/ui."
4. The AI installs the components and wires them into the existing layout.
5. Iterate: "Add a toast on form submit," "Make the table sortable by date," "Add a tooltip to the help icon."

The whole setup takes 5-10 minutes — vs. half a day to wire up Radix + Tailwind + icons manually.

Try this template: the Dashboard template ships with a sortable data table, tabs, dropdown menus, modals, and toast notifications. One click loads it into the chat with all components wired up.

FAQ: React Components

What React components does every app need?

Every React app needs at minimum: Button, Input, Modal, Dropdown, Table, Tabs, Toast, Tooltip, Avatar, and Pagination. These 10 cover the vast majority of UI patterns.

Should I build React components from scratch or use a library?

Use a headless library (Radix, Headless UI) or a styled library (shadcn/ui, Mantine) for primitives like Modal, Dropdown, and Tabs — accessibility is hard and these have it baked in. Build your design system on top.

What's the best React component library in 2026?

For most projects, shadcn/ui — it copies components into your repo (you own the code), uses Tailwind, and is built on Radix primitives. For larger teams, Mantine. For design-systems teams, Radix Primitives + your own styling.

How do I make React components accessible?

Every interactive component needs: keyboard support (Tab, Enter, Escape, Arrow keys), focus management, correct ARIA roles and labels, and visible focus indicators. Use a headless library for the hard parts.

Can AI generate React components?

Yes — modern AI tools like DocForge AI generate production-ready React components from a prompt. Describe a component ("a dropdown with search and keyboard navigation") and the AI ships the JSX, styles, and accessibility wiring. Start from a template for best results.

Start Building

You now have the 10 components that cover 80% of every React UI. The fastest way to put them into a real project:

1. Open the Dashboard template and click "Use this template."
2. In the AI chat, ask it to add any missing components from the list above.
3. Iterate on variants, sizes, and themes.
4. Deploy when you're happy.

No sign-up. No boilerplate. Just working components in your repo today.