Radix UI Integration

Key Radix UI Components

🔹 Basic Dialog Component

Radix Dialog provides a fully accessible modal component. It manages focus trapping, keyboard navigation, and screen reader announcements automatically. This example shows how to create a simple dialog with trigger button and content area.

// app/components/dialog-demo.tsx
'use client'

import * as Dialog from '@radix-ui/react-dialog'

export default function DialogDemo() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="px-4 py-2 bg-blue-500 text-white rounded">
        Open Dialog
      </Dialog.Trigger>
      
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg">
          <Dialog.Title className="text-xl font-bold">
            Welcome!
          </Dialog.Title>
          <Dialog.Description className="mt-2">
            This is an accessible dialog component.
          </Dialog.Description>
          <Dialog.Close className="mt-4 px-4 py-2 bg-gray-200 rounded">
            Close
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

🔹 Dropdown Menu Example

Create accessible dropdown menus with keyboard navigation support. Radix handles arrow key navigation, escape to close, and proper ARIA attributes. Perfect for user menus, action lists, and navigation dropdowns in your Next.js app.

// app/components/dropdown-demo.tsx
'use client'

import * as DropdownMenu from '@radix-ui/react-dropdown-menu'

export default function DropdownDemo() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger className="px-4 py-2 bg-gray-800 text-white rounded">
        Options ▼
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content className="bg-white shadow-lg rounded p-2">
          <DropdownMenu.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
            Profile
          </DropdownMenu.Item>
          <DropdownMenu.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
            Settings
          </DropdownMenu.Item>
          <DropdownMenu.Separator className="h-px bg-gray-200 my-1" />
          <DropdownMenu.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer text-red-600">
            Logout
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  )
}

🔹 Tooltip Component

Add helpful tooltips to your UI elements. Radix Tooltip automatically positions itself, handles hover and focus states, and provides smooth animations. Great for providing additional context without cluttering your interface.

// app/components/tooltip-demo.tsx
'use client'

import * as Tooltip from '@radix-ui/react-tooltip'

export default function TooltipDemo() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger className="px-4 py-2 bg-blue-500 text-white rounded">
          Hover me
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content className="bg-gray-900 text-white px-3 py-2 rounded text-sm">
            This is a helpful tooltip!
            <Tooltip.Arrow className="fill-gray-900" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}

🔹 Tabs Component

Organize content into tabbed sections with full keyboard accessibility. Users can navigate between tabs using arrow keys, and screen readers announce tab changes properly. Ideal for settings pages, dashboards, and content organization.

// app/components/tabs-demo.tsx
'use client'

import * as Tabs from '@radix-ui/react-tabs'

export default function TabsDemo() {
  return (
    <Tabs.Root defaultValue="tab1" className="w-full">
      <Tabs.List className="flex border-b">
        <Tabs.Trigger 
          value="tab1" 
          className="px-4 py-2 data-[state=active]:border-b-2 data-[state=active]:border-blue-500"
        >
          Account
        </Tabs.Trigger>
        <Tabs.Trigger 
          value="tab2" 
          className="px-4 py-2 data-[state=active]:border-b-2 data-[state=active]:border-blue-500"
        >
          Settings
        </Tabs.Trigger>
      </Tabs.List>
      
      <Tabs.Content value="tab1" className="p-4">
        Account information goes here
      </Tabs.Content>
      <Tabs.Content value="tab2" className="p-4">
        Settings options go here
      </Tabs.Content>
    </Tabs.Root>
  )
}

🔹 Using in Next.js App

Import and use Radix components in your Next.js pages:

// app/page.tsx
import DialogDemo from './components/dialog-demo'
import DropdownDemo from './components/dropdown-demo'

export default function Home() {
  return (
    <main className="p-8">
      <h1 className="text-3xl font-bold mb-4">Radix UI Demo</h1>
      <div className="space-y-4">
        <DialogDemo />
        <DropdownDemo />
      </div>
    </main>
  )
}