diff --git a/apps/mobile/src/app/index.tsx b/apps/mobile/src/app/index.tsx
index 83a6d7ea..608831af 100644
--- a/apps/mobile/src/app/index.tsx
+++ b/apps/mobile/src/app/index.tsx
@@ -1,65 +1,307 @@
import Feather from "@expo/vector-icons/Feather"
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "@init/native-ui/components/accordion"
import { ActivityIndicator } from "@init/native-ui/components/activity-indicator"
+import { Alert, AlertDescription, AlertTitle } from "@init/native-ui/components/alert"
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@init/native-ui/components/alert-dialog"
+import { AspectRatio } from "@init/native-ui/components/aspect-ratio"
+import { Avatar, AvatarFallback, AvatarImage } from "@init/native-ui/components/avatar"
+import { Badge } from "@init/native-ui/components/badge"
import { Button } from "@init/native-ui/components/button"
-import { Icon } from "@init/native-ui/components/icon"
import {
- LargeTitleHeader,
- type LargeTitleSearchBarRef,
-} from "@init/native-ui/components/large-title-header"
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@init/native-ui/components/card"
+import { Checkbox } from "@init/native-ui/components/checkbox"
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@init/native-ui/components/collapsible"
+import {
+ ContextMenu,
+ ContextMenuCheckboxItem,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuLabel,
+ ContextMenuRadioGroup,
+ ContextMenuRadioItem,
+ ContextMenuSeparator,
+ ContextMenuShortcut,
+ ContextMenuSub,
+ ContextMenuSubContent,
+ ContextMenuSubTrigger,
+ ContextMenuTrigger,
+} from "@init/native-ui/components/context-menu"
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@init/native-ui/components/dialog"
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+} from "@init/native-ui/components/dropdown-menu"
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@init/native-ui/components/hover-card"
+import { CheckIcon, Icon, XIcon } from "@init/native-ui/components/icon"
+import { Input } from "@init/native-ui/components/input"
+import { Label } from "@init/native-ui/components/label"
+import {
+ Menubar,
+ MenubarCheckboxItem,
+ MenubarContent,
+ MenubarItem,
+ MenubarMenu,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+ MenubarSeparator,
+ MenubarSub,
+ MenubarSubContent,
+ MenubarSubTrigger,
+ MenubarTrigger,
+} from "@init/native-ui/components/menubar"
+import { Popover, PopoverContent, PopoverTrigger } from "@init/native-ui/components/popover"
+import { Progress } from "@init/native-ui/components/progress"
+import { RadioGroup, RadioGroupItem } from "@init/native-ui/components/radio-group"
+import {
+ NativeSelectScrollView,
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+ type Option,
+} from "@init/native-ui/components/select"
+import { Separator } from "@init/native-ui/components/separator"
+import { Skeleton } from "@init/native-ui/components/skeleton"
+import { Switch } from "@init/native-ui/components/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@init/native-ui/components/tabs"
import { Text } from "@init/native-ui/components/text"
-import { useRef, useState } from "react"
-import { View } from "react-native"
-import { useCSSVariable } from "uniwind"
+import { Textarea } from "@init/native-ui/components/textarea"
+import { Toggle, ToggleIcon } from "@init/native-ui/components/toggle"
+import {
+ ToggleGroup,
+ ToggleGroupIcon,
+ ToggleGroupItem,
+} from "@init/native-ui/components/toggle-group"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@init/native-ui/components/tooltip"
+import { Stack } from "expo-router"
+import { useState, type ReactNode } from "react"
+import { ScrollView, View } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
import env from "#shared/env.ts"
+type ShowcaseSectionProps = {
+ children: ReactNode
+ description?: string
+ query: string
+ searchTerms?: string[]
+ title: string
+}
+
+function ShowcaseSection({
+ children,
+ description,
+ query,
+ searchTerms,
+ title,
+}: ShowcaseSectionProps) {
+ const normalizedQuery = query.trim().toLowerCase()
+ const normalizedTerms = [title, ...(searchTerms ?? [])].join(" ").toLowerCase()
+
+ if (normalizedQuery.length > 0 && !normalizedTerms.includes(normalizedQuery)) {
+ return null
+ }
+
+ return (
+
+
+ {title}
+ {description ? {description} : null}
+
+ {children}
+
+ )
+}
+
export default function Screen() {
- const backgroundValue = useCSSVariable("--color-background")
- const background = typeof backgroundValue === "string" ? backgroundValue : undefined
- const [isLoading, setIsLoading] = useState(false)
- const [isSearchFocused, setIsSearchFocused] = useState(false)
const [searchQuery, setSearchQuery] = useState("")
- const searchBarRef = useRef(null)
- const isSearching = isSearchFocused || searchQuery.length > 0
+ const [isLoading, setIsLoading] = useState(false)
+ const [isChecked, setIsChecked] = useState(true)
+ const [isSwitchEnabled, setIsSwitchEnabled] = useState(false)
+ const [isCollapsedOpen, setIsCollapsedOpen] = useState(false)
+ const [progressValue, setProgressValue] = useState(42)
+ const [radioValue, setRadioValue] = useState("starter")
+ const [tabValue, setTabValue] = useState("preview")
+ const [togglePressed, setTogglePressed] = useState(false)
+ const [toggleGroupValue, setToggleGroupValue] = useState("bold")
+ const [selectValue, setSelectValue] = useState