ui69

Unstyled, accessible UI components for React Native, inspired by shadcn/ui.

What is ui69?

ui69 is a collection of reusable, customizable UI components for React Native. Unlike traditional component libraries, ui69 doesn't publish the components as a package. Instead, it provides a CLI that adds the components directly to your project. This gives you complete control over the components, including the ability to customize them to fit your needs.

Features

• 🚀 Copy and paste - Components are added directly to your project
• 💪 Customizable - Modify components to fit your specific needs
• 🔍 Accessible - Built with accessibility in mind
• 📝 TypeScript - Fully typed components
• 📱 React Native friendly - Works with both Expo and React Native CLI

Installation

1# Install using npx
2npx ui69 add <component>
3
4# Or install the CLI globally
5npm install -g ui69
6ui69 add <component>

Usage

1# Add components to your project
2npx ui69 add button
3
4# Add multiple components interactively
5npx ui69 add
6
7# List all available components
8npx ui69 list

Available Components

• Button - A pressable button component with multiple variants and sizes
• Skeleton - Loading placeholder component with shimmer and wave animations
• Avatar - User profile image with fallback, status indicators, and grouping support
• Badge - Small status indicator with multiple variants and dot style option
• Card - Container component with header, content and footer sections
• Seperator - Simple divider component for separating content
• Accordion - Collapsible content sections with customizable styling and animations
• Input - Text input component with multiple variants, validation, and icon support
• InputOTP - One-time password input component with support for different input types
• Toast - Notification component with animations, gestures, and multiple variants
• Select - Dropdown select component with smooth animations and smart positioning
• More components coming soon!

Select Component Example

1import React, { useState } from 'react';
2import { View } from 'react-native';
3import { SafeAreaProvider } from 'react-native-safe-area-context';
4import {
5    Select,
6    SelectContent,
7    SelectGroup,
8    SelectItem,
9    SelectLabel,
10    SelectTrigger,
11    SelectValue,
12} from './components/ui/select';
13
14export default function App() {
15    const [selectedValue, setSelectedValue] = useState('');
16
17    return (
18        <SafeAreaProvider>
19            <View style={{ padding: 20 }}>
20                {/* Basic Select */}
21                <Select value={selectedValue} onValueChange={setSelectedValue}>
22                    <SelectTrigger style={{ width: 200 }}>
23                        <SelectValue placeholder="Select a fruit" />
24                    </SelectTrigger>
25                    <SelectContent>
26                        <SelectGroup>
27                            <SelectLabel>Fruits</SelectLabel>
28                            <SelectItem value="apple">Apple</SelectItem>
29                            <SelectItem value="banana">Banana</SelectItem>
30                            <SelectItem value="orange">Orange</SelectItem>
31                        </SelectGroup>
32                    </SelectContent>
33                </Select>
34
35                {/* Uncontrolled Select with Default Value */}
36                <Select defaultValue="medium">
37                    <SelectTrigger style={{ width: 200, marginTop: 20 }}>
38                        <SelectValue placeholder="Select size" />
39                    </SelectTrigger>
40                    <SelectContent>
41                        <SelectItem value="small">Small</SelectItem>
42                        <SelectItem value="medium">Medium</SelectItem>
43                        <SelectItem value="large">Large</SelectItem>
44                    </SelectContent>
45                </Select>
46            </View>
47        </SafeAreaProvider>
48    );
49}

Select Features

• Smart positioning: Automatically positions dropdown to avoid screen edges
• Smooth animations: Fade, scale, and slide animations for opening/closing
• Controlled/Uncontrolled: Supports both controlled and uncontrolled usage patterns
• Groups and labels: Organize options with visual groupings
• Disabled states: Component and individual item disable support
• Touch optimized: Designed for mobile touch interactions
• Accessible: Proper accessibility roles and states
• Customizable styling: Easy to customize appearance
• TypeScript: Fully typed for better developer experience

Select Dependencies

The Select component requires:

1npm install react-native-safe-area-context react-native-svg

For Expo projects:

1npx expo install react-native-safe-area-context react-native-svg

For React Native CLI projects, you'll also need to complete the platform-specific installation for react-native-svg. See the react-native-svg documentation for detailed setup instructions.

Toast Component Example

1import React from 'react';
2import { View } from 'react-native';
3import { SafeAreaProvider } from 'react-native-safe-area-context';
4import { GestureHandlerRootView } from 'react-native-gesture-handler';
5import { ToastProvider, useToastController } from './components/ui/toast';
6import { Button } from './components/ui/button';
7
8// Wrap your app with required providers
9export default function App() {
10  return (
11    <SafeAreaProvider>
12      <GestureHandlerRootView style={{ flex: 1 }}>
13        <ToastProvider position="top-center" maxToasts={3}>
14          <ToastExample />
15        </ToastProvider>
16      </GestureHandlerRootView>
17    </SafeAreaProvider>
18  );
19}
20
21// Usage in your components
22function ToastExample() {
23  const { success, error, warning, info } = useToastController();
24
25  return (
26    <View style={{ padding: 20, gap: 10 }}>
27      <Button onPress={() => success({ 
28        title: "Success!", 
29        description: "Your action was completed" 
30      })}>
31        Show Success Toast
32      </Button>
33
34      <Button onPress={() => error({ 
35        title: "Error occurred", 
36        description: "Something went wrong" 
37      })}>
38        Show Error Toast
39      </Button>
40    </View>
41  );
42}

Toast Features

• 5 variants: default, success, error, warning, info
• Gesture support: Swipe to dismiss
• Positioning: 6 different positions (top/bottom + left/center/right)
• Auto-dismiss: Configurable duration or persistent toasts
• Action buttons: Interactive buttons within toasts
• Custom icons: Use your own icons or default variant icons
• Stacking: Multiple toasts with smooth animations
• TypeScript: Fully typed for better developer experience

Toast Dependencies

The Toast component requires these additional packages:

1npm install react-native-gesture-handler react-native-safe-area-context

For Expo projects:

1npx expo install react-native-gesture-handler react-native-safe-area-context

Skeleton Component Example

1import { View } from 'react-native';
2import { Skeleton } from './components/ui/skeleton';
3
4export default function App() {
5  return (
6    <View style={{ padding: 16, gap: 8 }}>
7      {/* Default shimmer animation */}
8      <Skeleton width="100%" height={20} />
9      
10      {/* Wave animation */}
11      <Skeleton 
12        width="80%" 
13        height={20} 
14        animationType="wave" 
15      />
16      
17      {/* Custom styling */}
18      <Skeleton 
19        width={60} 
20        height={60} 
21        borderRadius={30}
22        backgroundColor="#c0c0c0"
23        highlightColor="rgba(255, 255, 255, 0.6)"
24      />
25    </View>
26  );
27}

Accordion Component Example

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/components/ui/accordion"
7
8export function AccordionDemo() {
9  return (
10    <Accordion>
11      <AccordionItem value="item-1">
12        <AccordionTrigger>Is it accessible?</AccordionTrigger>
13        <AccordionContent>
14          Yes. It adheres to the WAI-ARIA design pattern.
15        </AccordionContent>
16      </AccordionItem>
17      
18      <AccordionItem value="item-2">
19        <AccordionTrigger>Is it styled?</AccordionTrigger>
20        <AccordionContent>
21          Yes. It comes with default styles that matches the other
22          components' aesthetic.
23        </AccordionContent>
24      </AccordionItem>
25    </Accordion>
26  )
27}

License

MIT

Acknowledgments

This project is inspired by shadcn/ui, which offers a similar approach for web applications.