Founded Labs

Installation

No MCP yet? Connect your agent.

Usage

import { View } from "react-native"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"

<RadioGroup defaultValue="comfortable">
  <View className="flex flex-row items-center gap-3">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </View>
  <View className="flex flex-row items-center gap-3">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </View>
  <View className="flex flex-row items-center gap-3">
    <RadioGroupItem value="compact" id="r3" />
    <Label htmlFor="r3">Compact</Label>
  </View>
</RadioGroup>

Examples

import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import * as Haptics from 'expo-haptics';
import * as React from 'react';
import { View } from 'react-native';

export function RadioGroupPreview() {
  const [value, setValue] = React.useState('comfortable');

  function onLabelPress(label: string) {
    return () => {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
      setValue(label);
    };
  }

  function onValueChange(value: string) {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    setValue(value);
  }

  return (
    <RadioGroup value={value} onValueChange={onValueChange}>
      <View className="flex flex-row items-center gap-3">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1" onPress={onLabelPress('default')}>
          Default
        </Label>
      </View>
      <View className="flex flex-row items-center gap-3">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2" onPress={onLabelPress('comfortable')}>
          Comfortable
        </Label>
      </View>
      <View className="flex flex-row items-center gap-3">
        <RadioGroupItem value="compact" id="r3" />
        <Label htmlFor="r3" onPress={onLabelPress('compact')}>
          Compact
        </Label>
      </View>
    </RadioGroup>
  );
}

Agent guide

Add the cn helper and the theme color variables the files useWhen: The project has no components.json file.From the collection

The files import cn from @/lib/utils:

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Class names such as bg-background, text-muted-foreground, border-border, bg-primary, and rounded-lg resolve through these theme variables. Define them in the global CSS and map each color in the Tailwind theme as hsl(var(--name)), with --radius mapped to borderRadius.lg (md is calc(var(--radius) - 2px), sm is calc(var(--radius) - 4px)).

Light:

VariableValue
--backgroundhsl(0 0% 100%)
--foregroundhsl(0 0% 3.9%)
--cardhsl(0 0% 100%)
--card-foregroundhsl(0 0% 3.9%)
--popoverhsl(0 0% 100%)
--popover-foregroundhsl(0 0% 3.9%)
--primaryhsl(0 0% 9%)
--primary-foregroundhsl(0 0% 98%)
--secondaryhsl(0 0% 96.1%)
--secondary-foregroundhsl(0 0% 9%)
--mutedhsl(0 0% 96.1%)
--muted-foregroundhsl(0 0% 45.1%)
--accenthsl(0 0% 96.1%)
--accent-foregroundhsl(0 0% 9%)
--destructivehsl(0 84.2% 60.2%)
--borderhsl(0 0% 89.8%)
--inputhsl(0 0% 89.8%)
--ringhsl(0 0% 63%)
--radius0.625rem

Dark:

VariableValue
--backgroundhsl(0 0% 3.9%)
--foregroundhsl(0 0% 98%)
--cardhsl(0 0% 3.9%)
--card-foregroundhsl(0 0% 98%)
--popoverhsl(0 0% 3.9%)
--popover-foregroundhsl(0 0% 98%)
--primaryhsl(0 0% 98%)
--primary-foregroundhsl(0 0% 9%)
--secondaryhsl(0 0% 14.9%)
--secondary-foregroundhsl(0 0% 98%)
--mutedhsl(0 0% 14.9%)
--muted-foregroundhsl(0 0% 63.9%)
--accenthsl(0 0% 14.9%)
--accent-foregroundhsl(0 0% 98%)
--destructivehsl(0 70.9% 59.4%)
--borderhsl(0 0% 14.9%)
--inputhsl(0 0% 14.9%)
--ringhsl(300 0% 45%)
--radius0.625rem

Nativewind projects: the files assume 1rem is 16px, so pass inlineRem: 16 to Nativewind in metro.config.js:

module.exports = withNativeWind(config, { input: './global.css', inlineRem: 16 });