Understanding Radix UI and ShadCN UI in 2 minutes: Boost your React interfaces!

Hey there, React interface creator! 🎨 Today, we're diving into Radix UI and ShadCN UI, two essential libraries for creating modern, accessible, and stylish UI components without reinventing the wheel. This blog is actually built with Next.js 15, TypeScript, Zod for data validation, and ShadCN UI for interface components. Ready to explore?

Radix UI: Accessible Components by Default 🎯

Radix UI is a React component library that emphasizes accessibility and performance. Each component is optimized for Server-Side Rendering (SSR) and complies with ARIA standards, making it an ideal choice for professional applications. 🚀

Why Choose Radix UI?

• ♿️ Built-in WCAG 2.1 accessibility
• 🎯 Zero CSS dependencies
• 🔄 Full SSR support
• ⌨️ Keyboard navigation
• 📱 Native touch support
• 🎨 Flexible styling API

Installing Radix UI

To get started with Radix UI, install the components you need:

bash
1# Installing a specific component
2npm install @radix-ui/react-dialog
3
4# Or installing multiple components
5npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip

Usage Example: An Accessible Dialog

Here's an example of a Dialog with focus management and keyboard events:

typescript
1import * as Dialog from '@radix-ui/react-dialog';
2import { useCallback } from 'react';
3
4export default function MyDialog() {
5  const handleOpenChange = useCallback((open: boolean) => {
6    console.log('Dialog state:', open);
7  }, []);
8
9  return (
10    <Dialog.Root onOpenChange={handleOpenChange}>
11      <Dialog.Trigger asChild>
12        <button className="button-primary">Open Dialog</button>
13      </Dialog.Trigger>
14
15      <Dialog.Portal>
16        <Dialog.Overlay className="fixed inset-0 bg-black/50 animate-fade-in" />
17        <Dialog.Content className="dialog-content">
18          <Dialog.Title className="text-xl font-bold">
19            Welcome 👋
20          </Dialog.Title>
21          <Dialog.Description className="mt-2">
22            This dialog is fully accessible: try using Tab,
23            Escape, or screen readers!
24          </Dialog.Description>
25
26          <Dialog.Close asChild>
27            <button className="button-secondary mt-4">
28              Close
29            </button>
30          </Dialog.Close>
31        </Dialog.Content>
32      </Dialog.Portal>
33    </Dialog.Root>
34  );
35}

ShadCN UI: Radix UI with Style and Best Practices 🌈

ShadCN UI isn't just a collection of styled components: it's a complete toolkit that combines Radix UI, Tailwind CSS, and React development best practices. It includes:

• 🎨 Dark/light themes
• 🔄 Smooth animations
• 📱 Responsive design
• 🎯 Component variants
• ⚡️ Optimized performance

Installing ShadCN UI

bash
1# Initial installation
2npx shadcn@latest init
3
4# Adding specific components
5npx shadcn@latest add button
6npx shadcn@latest add dialog

Component Example with ShadCN UI and TypeScript

typescript
1import { Button } from '@/components/ui/button';
2import { useState } from 'react';
3
4interface Props {
5  variant?: 'default' | 'destructive' | 'outline' | 'ghost';
6  children: React.ReactNode;
7}
8
9export default function MyButton({ variant = 'default', children }: Props) {
10  const [loading, setLoading] = useState(false);
11
12  return (
13    <Button
14      variant={variant}
15      disabled={loading}
16      onClick={() => setLoading(true)}
17      className="transition-all hover:scale-105"
18    >
19      {loading ? 'Loading...' : children}
20    </Button>
21  );
22}

Theme Configuration

ShadCN UI allows advanced theme customization:

typescript
1// tailwind.config.ts
2import { Config } from 'tailwindcss';
3
4export default {
5  darkMode: ['class'],
6  theme: {
7    extend: {
8      colors: {
9        primary: {
10          DEFAULT: 'hsl(var(--primary))',
11          foreground: 'hsl(var(--primary-foreground))',
12        },
13        // Add your custom colors
14      },
15      keyframes: {
16        'fade-in': {
17          '0%': { opacity: '0' },
18          '100%': { opacity: '1' },
19        },
20      },
21      animation: {
22        'fade-in': 'fade-in 0.2s ease-out',
23      },
24    },
25  },
26} satisfies Config;

Why Choose This Stack? 🧐

1. Maximum Productivity

   • Ready-to-use components
   • Built-in TypeScript
   • Excellent DX (Developer Experience)

2. Optimal Performance

   • Minimal bundle size
   • Server-side rendering
   • Progressive hydration

3. Maintainability

   • Accessible source code
   • Easy customization
   • Active community

4. Accessibility

   • WCAG 2.1 by default
   • Assistive testing
   • Complete documentation

Best Practices for Your Project 🚀

1. Component Organization

typescript
1// Structure your components by domain
2src/
3  components/
4    ui/          // ShadCN UI components
5    layout/      // Layout
6    forms/       // Form components
7    features/    // Feature-specific components

2. Using with React Hook Form and Zod

typescript
1import { z } from 'zod';
2import { useForm } from 'react-hook-form';
3import { zodResolver } from '@hookform/resolvers/zod';
4
5const schema = z.object({
6  email: z.string().email(),
7  password: z.string().min(8),
8});
9
10type FormData = z.infer<typeof schema>;

Summary 📝

In two minutes, we've explored:

• Radix UI for accessible and performant React components
• ShadCN UI for a complete Tailwind-based design system
• Best practices for organization and usage
• Integration with TypeScript and Zod

The combination of these tools allows you to create modern, accessible, and maintainable interfaces while maintaining an excellent development experience! 🎉

---

Thank you for taking the time to discover Radix UI and ShadCN UI. Don't hesitate to check out the official Radix UI documentation and ShadCN UI's documentation to deepen your knowledge! See you soon for more React best practices!