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

Usage Example: An Accessible Dialog

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

typescript

Radix UI is unopinionated about styling, allowing you to integrate it perfectly with any design system, whether it's Tailwind CSS, CSS Modules, or Styled Components.

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

Component Example with ShadCN UI and TypeScript

typescript

Theme Configuration

ShadCN UI allows advanced theme customization:

typescript

Why Choose This Stack? 🧐

Maximum Productivity
- Ready-to-use components
- Built-in TypeScript
- Excellent DX (Developer Experience)
Optimal Performance
- Minimal bundle size
- Server-side rendering
- Progressive hydration
Maintainability
- Accessible source code
- Easy customization
- Active community
Accessibility
- WCAG 2.1 by default
- Assistive testing
- Complete documentation

Best Practices for Your Project 🚀

Component Organization

typescript

Using with React Hook Form and Zod

typescript

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!

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

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}

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

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}

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;

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

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>;