rn-cn-ui 1.0.0

package/README.md

@@ -0,0 +1,101 @@
+# Native UI
+
+A high-quality, open-source UI library for React Native, inspired by shadcn/ui.
+
+## Features
+
+- **Minimal Design**: Clean and modern aesthetic.
+- **Highly Reusable**: Built with reusability in mind.
+- **Class Merging**: Uses `clsx` and `tailwind-merge` for easy styling overrides.
+- **NativeWind**: Built on top of NativeWind for Tailwind CSS in React Native.
+
+## Installation
+
+```bash
+npm install rn-cn-ui
+```
+
+## Usage
+
+### Button
+
+```tsx
+import { Button } from "rn-cn-ui"
+
+<Button label="Click me" onPress={() => console.log("Pressed")} />
+<Button variant="destructive" label="Delete" />
+<Button variant="outline" label="Cancel" />
+```
+
+### Text
+
+```tsx
+import { Text } from "rn-cn-ui"
+
+<Text variant="h1">Heading 1</Text>
+<Text variant="lead">This is a lead text.</Text>
+```
+
+### Input
+
+```tsx
+import { Input, Label } from "rn-cn-ui"
+
+<Label>Email</Label>
+<Input placeholder="Enter your email" />
+```
+
+### Card
+
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from "rn-cn-ui"
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <Text>Content goes here</Text>
+  </CardContent>
+  <CardFooter>
+    <Button label="Action" />
+  </CardFooter>
+</Card>
+```
+
+### Badge
+
+```tsx
+import { Badge } from "rn-cn-ui"
+
+<Badge label="New" />
+<Badge variant="destructive" label="Error" />
+```
+
+### Avatar
+
+```tsx
+import { Avatar, AvatarImage, AvatarFallback, AvatarFallbackText } from "rn-cn-ui"
+
+<Avatar>
+  <AvatarImage source={{ uri: "https://github.com/shadcn.png" }} />
+  <AvatarFallback>
+    <AvatarFallbackText>CN</AvatarFallbackText>
+  </AvatarFallback>
+</Avatar>
+```
+
+## Configuration
+
+Ensure you have `nativewind` and `tailwindcss` configured in your project.
+
+Add the following to your `tailwind.config.js`:
+
+```js
+module.exports = {
+  // ...
+  presets: [require("nativewind/preset")],
+  // ...
+}
+```

package/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['nativewind/babel'],
+};

package/bin/cli.js

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const BASE_URL = "https://raw.githubusercontent.com/KaloyanBehov/native-ui/main"; // TODO: Update this with your repo
+
+const component = process.argv[2];
+const command = process.argv[2];
+
+let componentName = null;
+if (command === 'add') {
+    componentName = process.argv[3];
+} else {
+    componentName = command;
+}
+
+if (!componentName) {
+  console.error('Usage: npx rn-cn-ui add <component-name>');
+  process.exit(1);
+}
+
+async function main() {
+  try {
+    // 1. Fetch registry
+    console.log('Fetching registry...');
+    const registryResponse = await fetch(`${BASE_URL}/registry.json`);
+    
+    if (!registryResponse.ok) {
+      throw new Error(`Failed to fetch registry: ${registryResponse.statusText}`);
+    }
+    
+    const registry = await registryResponse.json();
+
+    if (!registry[componentName]) {
+      console.error(`Component "${componentName}" not found in registry.`);
+      console.log('Available components:', Object.keys(registry).join(', '));
+      process.exit(1);
+    }
+
+    const config = registry[componentName];
+    const targetBaseDir = path.join(process.cwd(), 'src', 'components', 'ui'); 
+
+    // 2. Create directory
+    if (!fs.existsSync(targetBaseDir)) {
+      console.log(`Creating directory: ${targetBaseDir}`);
+      fs.mkdirSync(targetBaseDir, { recursive: true });
+    }
+
+    // 3. Fetch and write files
+    for (const file of config.files) {
+      const fileUrl = `${BASE_URL}/${file}`;
+      const fileName = path.basename(file);
+      const destPath = path.join(targetBaseDir, fileName);
+
+      console.log(`Downloading ${fileName}...`);
+      const fileResponse = await fetch(fileUrl);
+      
+      if (!fileResponse.ok) {
+        console.error(`Failed to download ${fileName}`);
+        continue;
+      }
+
+      const content = await fileResponse.text();
+      fs.writeFileSync(destPath, content);
+    }
+
+    // 4. Install dependencies
+    if (config.dependencies && config.dependencies.length > 0) {
+      console.log(`Installing dependencies: ${config.dependencies.join(', ')}...`);
+      try {
+        const userAgent = process.env.npm_config_user_agent;
+        let installCmd = 'npm install';
+        if (userAgent && userAgent.startsWith('yarn')) {
+            installCmd = 'yarn add';
+        } else if (userAgent && userAgent.startsWith('pnpm')) {
+            installCmd = 'pnpm add';
+        } else if (userAgent && userAgent.startsWith('bun')) {
+            installCmd = 'bun add';
+        }
+
+        execSync(`${installCmd} ${config.dependencies.join(' ')}`, { stdio: 'inherit' });
+      } catch (error) {
+        console.error('Failed to install dependencies manually.');
+      }
+    }
+
+    console.log(`\nSuccessfully added ${componentName}!`);
+
+  } catch (error) {
+    console.error('Error:', error.message);
+    process.exit(1);
+  }
+}
+
+main();

package/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "rn-cn-ui",
+  "version": "1.0.0",
+  "description": "A high-quality, open-source UI library for React Native, inspired by shadcn/ui.",
+  "main": "index.js",
+  "bin": {
+    "rn-cn-ui": "./bin/cli.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-native",
+    "ui",
+    "components",
+    "shadcn",
+    "tailwind",
+    "nativewind"
+  ],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "devDependencies": {
+    "@types/react": "^19.2.13",
+    "@types/react-native": "^0.72.8",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react-native": "^0.563.0",
+    "nativewind": "^4.2.1",
+    "react": "^19.2.4",
+    "react-native": "^0.83.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^3.4.19"
+  }
+}

package/registry.json

@@ -0,0 +1,82 @@
+{
+  "button": {
+    "name": "button",
+    "dependencies": ["class-variance-authority", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/button.tsx"]
+  },
+  "text": {
+    "name": "text",
+    "dependencies": ["class-variance-authority", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/text.tsx"]
+  },
+  "input": {
+    "name": "input",
+    "dependencies": ["clsx", "tailwind-merge"],
+    "files": ["src/components/ui/input.tsx"]
+  },
+  "card": {
+    "name": "card",
+    "dependencies": ["clsx", "tailwind-merge"],
+    "files": ["src/components/ui/card.tsx"]
+  },
+  "badge": {
+    "name": "badge",
+    "dependencies": ["class-variance-authority", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/badge.tsx"]
+  },
+  "avatar": {
+    "name": "avatar",
+    "dependencies": ["clsx", "tailwind-merge"],
+    "files": ["src/components/ui/avatar.tsx"]
+  },
+  "label": {
+    "name": "label",
+    "dependencies": ["class-variance-authority", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/label.tsx"]
+  },
+  "separator": {
+    "name": "separator",
+    "dependencies": ["class-variance-authority", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/separator.tsx"]
+  },
+  "skeleton": {
+    "name": "skeleton",
+    "dependencies": ["clsx", "tailwind-merge"],
+    "files": ["src/components/ui/skeleton.tsx"]
+  },
+  "spinner": {
+    "name": "spinner",
+    "dependencies": ["clsx", "tailwind-merge"],
+    "files": ["src/components/ui/spinner.tsx"]
+  },
+  "switch": {
+    "name": "switch",
+    "dependencies": ["clsx", "tailwind-merge"],
+    "files": ["src/components/ui/switch.tsx"]
+  },
+  "checkbox": {
+    "name": "checkbox",
+    "dependencies": ["lucide-react-native", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/checkbox.tsx"]
+  },
+  "radio-group": {
+    "name": "radio-group",
+    "dependencies": ["lucide-react-native", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/radio-group.tsx"]
+  },
+  "textarea": {
+    "name": "textarea",
+    "dependencies": ["clsx", "tailwind-merge"],
+    "files": ["src/components/ui/textarea.tsx"]
+  },
+  "alert": {
+    "name": "alert",
+    "dependencies": ["class-variance-authority", "clsx", "tailwind-merge"],
+    "files": ["src/components/ui/alert.tsx"]
+  },
+  "progress": {
+    "name": "progress",
+    "dependencies": ["clsx", "tailwind-merge"],
+    "files": ["src/components/ui/progress.tsx"]
+  }
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+import { View } from "react-native"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+import { Text } from "./text"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> &
+    VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <View
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text>
+>(({ className, ...props }, ref) => (
+  <Text
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text>
+>(({ className, ...props }, ref) => (
+  <Text
+    ref={ref}
+    className={cn("text-sm text-muted-foreground [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/avatar.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Image, View, Text } from "react-native"
+import { cn } from "../../lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = "Avatar"
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof Image>,
+  React.ComponentPropsWithoutRef<typeof Image>
+>(({ className, ...props }, ref) => (
+  <Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = "AvatarImage"
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = "AvatarFallback"
+
+const AvatarFallbackText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text>
+>(({ className, ...props }, ref) => (
+  <Text
+    ref={ref}
+    className={cn("text-sm font-medium text-muted-foreground", className)}
+    {...props}
+  />
+))
+AvatarFallbackText.displayName = "AvatarFallbackText"
+
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarFallbackText }

package/src/components/ui/badge.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { View, Text } from "react-native"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const badgeTextVariants = cva("text-xs font-semibold", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      secondary: "text-secondary-foreground",
+      destructive: "text-destructive-foreground",
+      outline: "text-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+export interface BadgeProps
+  extends React.ComponentPropsWithoutRef<typeof View>,
+    VariantProps<typeof badgeVariants> {
+    label?: string
+}
+
+function Badge({ className, variant, label, children, ...props }: BadgeProps) {
+  return (
+    <View className={cn(badgeVariants({ variant }), className)} {...props}>
+      {label ? (
+         <Text className={cn(badgeTextVariants({ variant }))}>{label}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+import { Text, TouchableOpacity, View } from "react-native"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "flex-row items-center justify-center rounded-md",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary",
+        destructive: "bg-destructive",
+        outline: "border border-input bg-background",
+        secondary: "bg-secondary",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const buttonTextVariants = cva(
+  "text-sm font-medium text-primary-foreground",
+  {
+    variants: {
+      variant: {
+        default: "text-primary-foreground",
+        destructive: "text-destructive-foreground",
+        outline: "text-foreground",
+        secondary: "text-secondary-foreground",
+        ghost: "text-foreground",
+        link: "text-primary",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ComponentPropsWithoutRef<typeof TouchableOpacity>,
+    VariantProps<typeof buttonVariants> {
+  label?: string
+  labelClasses?: string
+}
+
+const Button = React.forwardRef<React.ElementRef<typeof TouchableOpacity>, ButtonProps>(
+  ({ className, variant, size, label, labelClasses, children, ...props }, ref) => {
+    return (
+      <TouchableOpacity
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      >
+        {label ? (
+          <Text className={cn(buttonTextVariants({ variant }), labelClasses)}>
+            {label}
+          </Text>
+        ) : (
+          children
+        )}
+      </TouchableOpacity>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,80 @@
+import * as React from "react"
+import { Text, View } from "react-native"
+import { cn } from "../../lib/utils"
+import { Text as UiText } from "./text"
+
+const Card = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "rounded-lg border border-border bg-card shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  React.ElementRef<typeof UiText>,
+  React.ComponentPropsWithoutRef<typeof UiText>
+>(({ className, ...props }, ref) => (
+  <UiText
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  React.ElementRef<typeof UiText>,
+  React.ComponentPropsWithoutRef<typeof UiText>
+>(({ className, ...props }, ref) => (
+  <UiText
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn("flex flex-row items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { Pressable, View } from "react-native"
+import { Check } from "lucide-react-native"
+import { cn } from "../../lib/utils"
+
+interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+}
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof Pressable>, CheckboxProps>(
+  ({ className, checked, onCheckedChange, disabled, ...props }, ref) => {
+    return (
+      <Pressable
+        ref={ref}
+        role="checkbox"
+        aria-checked={checked}
+        disabled={disabled}
+        onPress={() => onCheckedChange?.(!checked)}
+        className={cn(
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          checked && "bg-primary text-primary-foreground",
+          className
+        )}
+        {...props}
+      >
+        {checked && (
+          <View className="flex items-center justify-center h-full w-full">
+            <Check size={12} color={checked ? "hsl(var(--primary-foreground))" : "transparent"} strokeWidth={3} />
+          </View>
+        )}
+      </Pressable>
+    )
+  }
+)
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }

package/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { TextInput, View } from "react-native"
+import { cn } from "../../lib/utils"
+
+export interface InputProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {}
+
+const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
+  ({ className, placeholderTextColor, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        placeholderTextColor={placeholderTextColor || "hsl(var(--muted-foreground))"}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { Text } from "react-native"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-foreground"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <Text ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = "Label"
+
+export { Label }

package/src/components/ui/progress.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { View } from "react-native"
+import { cn } from "../../lib/utils"
+
+interface ProgressProps extends React.ComponentPropsWithoutRef<typeof View> {
+  value?: number
+  max?: number
+}
+
+const Progress = React.forwardRef<React.ElementRef<typeof View>, ProgressProps>(
+  ({ className, value = 0, max = 100, ...props }, ref) => {
+    const percentage = Math.min(Math.max(value || 0, 0), max) / max * 100
+
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+          className
+        )}
+        {...props}
+      >
+        <View
+          className="h-full w-full flex-1 bg-primary transition-all"
+          style={{ width: `${percentage}%` }}
+        />
+      </View>
+    )
+  }
+)
+Progress.displayName = "Progress"
+
+export { Progress }

package/src/components/ui/radio-group.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { View, Pressable } from "react-native"
+import { Circle } from "lucide-react-native"
+import { cn } from "../../lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    value?: string
+    onValueChange?: (value: string) => void
+  }
+>(({ className, value, onValueChange, children, ...props }, ref) => {
+  return (
+    <View ref={ref} className={cn("gap-2", className)} {...props}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, {
+            // @ts-ignore
+            checked: child.props.value === value,
+            // @ts-ignore
+            onPress: () => onValueChange?.(child.props.value),
+          })
+        }
+        return child
+      })}
+    </View>
+  )
+})
+RadioGroup.displayName = "RadioGroup"
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  React.ComponentPropsWithoutRef<typeof Pressable> & {
+    value: string
+    checked?: boolean
+  }
+>(({ className, value, checked, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {checked && (
+        <View className="h-2.5 w-2.5 rounded-full bg-primary" />
+      )}
+    </Pressable>
+  )
+})
+RadioGroupItem.displayName = "RadioGroupItem"
+
+export { RadioGroup, RadioGroupItem }

package/src/components/ui/separator.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { View } from "react-native"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const separatorVariants = cva("bg-border shrink-0", {
+  variants: {
+    orientation: {
+      horizontal: "h-[1px] w-full",
+      vertical: "h-full w-[1px]",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+})
+
+export interface SeparatorProps
+  extends React.ComponentPropsWithoutRef<typeof View>,
+    VariantProps<typeof separatorVariants> {
+  orientation?: "horizontal" | "vertical"
+  decorative?: boolean
+}
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SeparatorProps
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <View
+      ref={ref}
+      className={cn(separatorVariants({ orientation }), className)}
+      role={decorative ? "none" : "separator"}
+      {...props}
+    />
+  )
+)
+Separator.displayName = "Separator"
+
+export { Separator }

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import { Animated, View, StyleSheet, Easing } from "react-native"
+import { cn } from "../../lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) {
+  const pulseAnim = React.useRef(new Animated.Value(0.5)).current
+
+  React.useEffect(() => {
+    const sharedAnimationConfig = {
+      duration: 1000,
+      useNativeDriver: true,
+    }
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, {
+          ...sharedAnimationConfig,
+          toValue: 1,
+          easing: Easing.out(Easing.ease),
+        }),
+        Animated.timing(pulseAnim, {
+          ...sharedAnimationConfig,
+          toValue: 0.5,
+          easing: Easing.in(Easing.ease),
+        }),
+      ])
+    ).start()
+  }, [pulseAnim])
+
+  return (
+    <Animated.View
+      style={{ opacity: pulseAnim }}
+      className={cn("rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui/spinner.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { ActivityIndicator, View } from "react-native"
+import { cn } from "../../lib/utils"
+
+export interface SpinnerProps
+  extends React.ComponentPropsWithoutRef<typeof ActivityIndicator> {
+  className?: string
+}
+
+const Spinner = React.forwardRef<
+  React.ElementRef<typeof ActivityIndicator>,
+  SpinnerProps
+>(({ className, color, ...props }, ref) => {
+  return (
+    <ActivityIndicator
+      ref={ref}
+      color={color}
+      className={cn("text-primary", className)}
+      {...props}
+    />
+  )
+})
+Spinner.displayName = "Spinner"
+
+export { Spinner }

package/src/components/ui/switch.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { Switch as RNSwitch, Platform } from "react-native"
+import { cn } from "../../lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof RNSwitch>,
+  React.ComponentPropsWithoutRef<typeof RNSwitch>
+>(({ className, ...props }, ref) => (
+  <RNSwitch
+    ref={ref}
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    trackColor={{ false: "hsl(var(--input))", true: "hsl(var(--primary))" }}
+    thumbColor={Platform.OS === "android" ? "hsl(var(--background))" : undefined}
+    ios_backgroundColor="hsl(var(--input))"
+    {...props}
+  />
+))
+Switch.displayName = "Switch"
+
+export { Switch }

package/src/components/ui/text.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { Text as RNText } from "react-native"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const textVariants = cva(
+  "text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "text-base",
+        h1: "text-4xl font-extrabold tracking-tight lg:text-5xl",
+        h2: "text-3xl font-semibold tracking-tight first:mt-0",
+        h3: "text-2xl font-semibold tracking-tight",
+        h4: "text-xl font-semibold tracking-tight",
+        p: "leading-7",
+        blockquote: "mt-6 border-l-2 pl-6 italic",
+        lead: "text-xl text-muted-foreground",
+        large: "text-lg font-semibold",
+        small: "text-sm font-medium leading-none",
+        muted: "text-sm text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface TextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText>,
+    VariantProps<typeof textVariants> {}
+
+const Text = React.forwardRef<React.ElementRef<typeof RNText>, TextProps>(
+  ({ className, variant, ...props }, ref) => {
+    return (
+      <RNText
+        className={cn(textVariants({ variant, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Text.displayName = "Text"
+
+export { Text, textVariants }

package/src/components/ui/textarea.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { TextInput } from "react-native"
+import { cn } from "../../lib/utils"
+
+export interface TextareaProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {}
+
+const Textarea = React.forwardRef<React.ElementRef<typeof TextInput>, TextareaProps>(
+  ({ className, numberOfLines = 4, placeholderTextColor, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        multiline
+        numberOfLines={numberOfLines}
+        textAlignVertical="top"
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        placeholderTextColor={placeholderTextColor || "hsl(var(--muted-foreground))"}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/global.css

@@ -0,0 +1,50 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.6%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.6%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.6%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.6%;
+    --input: 240 3.7% 15.6%;
+    --ring: 240 4.9% 83.9%;
+  }
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+export * from "./lib/utils"
+export * from "./components/ui/button"
+export * from "./components/ui/text"
+export * from "./components/ui/input"
+export * from "./components/ui/card"
+export * from "./components/ui/badge"
+export * from "./components/ui/avatar"
+export * from "./components/ui/label"
+export * from "./components/ui/separator"
+export * from "./components/ui/skeleton"
+export * from "./components/ui/spinner"
+export * from "./components/ui/switch"
+export * from "./components/ui/checkbox"
+export * from "./components/ui/radio-group"
+export * from "./components/ui/textarea"
+export * from "./components/ui/alert"
+export * from "./components/ui/progress"
+import "./global.css"

package/tailwind.config.js

@@ -0,0 +1,50 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "react-native",
+    "lib": ["es2017"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "strict": true,
+    "target": "esnext",
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
+}