react-ui-shadcn-tailwind

name	react-ui-shadcn-tailwind
description	Generate modern React UI components using shadcn/ui and Tailwind CSS. Create forms, dashboards, data tables, and interactive components with consistent design patterns.
allowed-tools	fs_read fs_write execute_bash
metadata	{"tags":"design,react,ui,webapp","groups":"react","invocation":"model","author":"kiro-cli","version":"1.0","category":"frontend","compatibility":"Requires React, Tailwind CSS, shadcn/ui installed"}

React UI Generation with shadcn/ui and Tailwind

Instructions

1. Set up shadcn/ui and Tailwind

Initialize shadcn/ui in existing React project:

npx shadcn-ui@latest init

Install additional components:

npx shadcn-ui@latest add button card form input label select textarea
npx shadcn-ui@latest add table dialog sheet toast tabs badge
npx shadcn-ui@latest add dropdown-menu avatar separator progress

2. Form components with validation

Advanced form with react-hook-form:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

const formSchema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  email: z.string().email("Invalid email address"),
  role: z.string().min(1, "Please select a role"),
  bio: z.string().max(500, "Bio must be less than 500 characters"),
})

export function UserProfileForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      role: "",
      bio: "",
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle>User Profile</CardTitle>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Name</FormLabel>
                  <FormControl>
                    <Input placeholder="Enter your name" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            
            <FormField
              control={form.control}
              name=
              =  }) => (
                
                  Email
                  
                    
                  
                  
                
              )}
            />
            
             (
                
                  Role
                  
                    
                      
                        
                      
                    
                    
                      Admin
                      User
                      Moderator
                    
                  
                  
                
              )}
            />
            
             (
                
                  Bio
                  
                    
                  
                  
                
              )}
            />
            
            
              Save Profile
            
          
        
      
    
  )
}

3. Data table with sorting and filtering

Advanced data table component:

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { MoreHorizontal, Search, Filter } from "lucide-react"

interface User {
  id: string
  name: string
  email: string
  : 
  :  | 
  : 
}

 : [] = [
  { : , : , : , : , : , :  },
  { : , : , : , : , : , :  },
]

  () {
   [users, setUsers] = useState<[]>(mockUsers)
   [searchTerm, setSearchTerm] = ()
   [statusFilter, setStatusFilter] = useState<>()

   filteredUsers = users.( {
     matchesSearch = user..().(searchTerm.()) ||
                         user..().(searchTerm.())
     matchesStatus = statusFilter ===  || user. === statusFilter
     matchesSearch && matchesStatus
  })

   (
    
  )
}

4. Dashboard layout with metrics

Dashboard with cards and charts:

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Users, DollarSign, Activity, TrendingUp } from "lucide-react"

export function Dashboard() {
  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">Dashboard</h1>
        <Badge variant="outline">Last updated: 2 min ago</Badge>
      

      {/* Metrics Cards */}
      
        
          
            Total Revenue
            
          
          
            $45,231.89
            +20.1% from last month
          
        

        
          
            Active Users
            
          
          
            2,350
            +180.1% from last month
          
        

        
          
            Sales
            
          
          
            12,234
            +19% from last month
          
        

        
          
            Active Now
            
          
          
            573
            +201 since last hour
          
        
      

      {/* Detailed Analytics */}
      
        
          Overview
          Analytics
          Reports
        

        
          
            
              
                Recent Activity
              
              
                
                  
                  
                    New user registered
                    2 minutes ago
                  
                
                
                  
                  
                    Payment received
                    5 minutes ago
                  
                
              
            

            
              
                Progress
              
              
                
                  
                    Monthly Goal
                    75%
                  
                  
                
                
                  
                    Weekly Target
                    60%
                  
                  
                
              
            
          
        
      
    
  )
}

5. Modal dialogs and sheets

Reusable modal patterns:

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function CreateUserModal() {
  const [open, setOpen] = useState(false)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>Create User</Button>
      </>
      
        
          Create New User
        
        
          
            Name
            
          
          
            Email
            
          
        
        
           setOpen(false)}>Cancel
           setOpen(false)}>Create
        
      
    
  )
}

  () {
   (
    
  )
}

Examples

Quick UI generation commands

"Create a user registration form with validation"
"Generate a data table for products with search and filters"
"Build a dashboard with revenue metrics and charts"
"Create a settings modal with theme switcher"
"Generate a responsive navigation with mobile menu"

Custom component patterns

// Reusable card with loading state
export function LoadingCard({ title, children, isLoading }: {
  title: string
  children: React.ReactNode
  isLoading?: boolean
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="flex items-center justify-center h-32">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
          </div>
        ) : (
          children
        )}
      </CardContent>
    </Card>
  )
}

Troubleshooting

• Components not styled: Verify Tailwind CSS is properly configured and imported
• shadcn/ui components missing: Run npx shadcn-ui@latest add [component-name]
• Form validation not working: Check zod schema and react-hook-form setup
• Table sorting broken: Implement proper sort state management
• Modal not closing: Ensure proper state management with open/onOpenChange
• Responsive issues: Use Tailwind responsive prefixes (sm:, md:, lg:, xl:)