100+ Shadcn UI Components for Modern Web Apps Built with Tailwind CSS

import React from 'react'
import { Label } from '@/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

const DefaultRadioCode = () => {
  return (
    <>
      <div className='mt-4'>
        <RadioGroup defaultValue='comfortable'>
          <div className='flex items-top space-x-2'>
            <RadioGroupItem value='default' id='r1' />
            <Label htmlFor='r1' className='font-normal'>
              Default
            </Label>
          </div>
          <div className='flex items-top space-x-2'>
            <RadioGroupItem value='comfortable' id='r2' />
            <Label htmlFor='r2' className='font-normal'>
              {' '}
              Comfortable
            </Label>
          </div>
          <div className='flex items-top space-x-2'>
            <RadioGroupItem value='compact' id='r3' />
            <Label htmlFor='r3' className='font-normal'>
              Compact
            </Label>
          </div>
          <div className='flex items-top space-x-2'>
            <RadioGroupItem value='digital' id='r4' />
            <Label htmlFor='r4' className='font-normal'>
              Digital
            </Label>
          </div>
          <div className='flex items-top space-x-2'>
            <RadioGroupItem value='Enlarge' id='r5' />
            <Label htmlFor='r5' className='font-normal'>
              Enlarge
            </Label>
          </div>
          <div className='flex items-top space-x-2'>
            <RadioGroupItem value='Maximize' id='r6' />
            <Label htmlFor='r6' className='font-normal'>
              Maximize
            </Label>
          </div>
        </RadioGroup>
      </div>
    </>
  )
}

export default DefaultRadioCode

'use client'

import React from 'react'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { toast } from '@/app/hooks/use-toast'
import { Button } from '@/components/ui/button'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

const FormSchema = z.object({
  type: z.enum(['all', 'mentions', 'none']),
})

const FormRadioCode = () => {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  })

  function onSubmit(data: z.infer<typeof FormSchema>) {
    toast({
      title: 'You submitted the following values:',
      description: (
        <pre className='mt-2 w-[340px] rounded-md bg-slate-950 p-4'>
          <code className='text-white'>{JSON.stringify(data, null, 2)}</code>
        </pre>
      ),
    })
  }
  return (
    <>
      <div className='mt-4'>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
            <FormField
              control={form.control}
              name='type'
              render={({ field }) => (
                <FormItem className='space-y-3'>
                  <FormLabel>Notify me about...</FormLabel>
                  <FormControl>
                    <RadioGroup
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                      className='flex flex-col space-y-1'>
                      <FormItem className='flex items-center space-x-3 space-y-0'>
                        <FormControl>
                          <RadioGroupItem value='all' />
                        </FormControl>
                        <FormLabel className='font-normal'>
                          All new messages
                        </FormLabel>
                      </FormItem>
                      <FormItem className='flex items-center space-x-3 space-y-0'>
                        <FormControl>
                          <RadioGroupItem value='mentions' />
                        </FormControl>
                        <FormLabel className='font-normal'>
                          Direct messages and mentions
                        </FormLabel>
                      </FormItem>
                      <FormItem className='flex items-center space-x-3 space-y-0'>
                        <FormControl>
                          <RadioGroupItem value='none' />
                        </FormControl>
                        <FormLabel className='font-normal'>Nothing</FormLabel>
                      </FormItem>
                    </RadioGroup>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type='submit' className='rounded-full'>Submit</Button>
          </form>
        </Form>
      </div>
    </>
  )
}

export default FormRadioCode