@everystack/ui

React Native UI components styled with className props (Tailwind CSS via react-native-tailwind). No StyleSheet.create — pure className composition.

Install

pnpm add @everystack/ui react react-native

Optional peer dependencies for charts:

pnpm add react-native-svg d3-array d3-scale d3-shape d3-time d3-time-format d3-interpolate

Entry Points

| Import | Description | |--------|-------------| | @everystack/ui | All components and charts | | @everystack/ui/image-url | buildImageUrl() utility |

Components

Primitives

import { Button, Card, Badge, Avatar, Divider, Skeleton, EmptyState } from '@everystack/ui';

<Button variant="primary" onPress={handlePress}>Save</Button>
<Button variant="secondary" onPress={handleCancel}>Cancel</Button>
<Button variant="danger" onPress={handleDelete}>Delete</Button>

<Card className="p-4">
  <Text>Card content</Text>
</Card>

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="danger">Failed</Badge>

<Avatar src="https://example.com/photo.jpg" size={48} fallback="JD" />

<Divider />

<Skeleton width={200} height={20} />

<EmptyState
  title="No posts yet"
  description="Create your first post to get started."
  action={{ label: 'Create Post', onPress: handleCreate }}
/>

Data Display

import { DataTable, PaginationBar, FilterBar, LoadingState, ErrorState } from '@everystack/ui';

<DataTable
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'Email' },
    { key: 'status', label: 'Status', render: (val) => <Badge>{val}</Badge> },
  ]}
  data={users}
  onRowPress={(row) => navigate(`/users/${row.id}`)}
/>

<PaginationBar
  page={1}
  totalPages={10}
  onPageChange={setPage}
/>

<FilterBar
  filters={[
    { key: 'status', label: 'Status', options: ['active', 'inactive'] },
  ]}
  values={filterValues}
  onChange={setFilterValues}
/>

<LoadingState message="Loading posts..." />
<ErrorState message="Failed to load data" onRetry={refetch} />

Forms

import { FormField, TextInput, SelectInput, SwitchInput } from '@everystack/ui';

<FormField label="Name" error={errors.name}>
  <TextInput value={name} onChangeText={setName} placeholder="Enter name" />
</FormField>

<FormField label="Role">
  <SelectInput
    value={role}
    onValueChange={setRole}
    options={[
      { label: 'Admin', value: 'admin' },
      { label: 'User', value: 'user' },
    ]}
  />
</FormField>

<FormField label="Active">
  <SwitchInput value={isActive} onValueChange={setIsActive} />
</FormField>

Images and Upload

import { ImageInput, UploadProgress, ResponsiveImage, AvatarUpload } from '@everystack/ui';

<ImageInput
  value={imageUri}
  onChange={setImageUri}
  placeholder="Tap to select image"
/>

<UploadProgress
  status="uploading"  // 'idle' | 'uploading' | 'processing' | 'complete' | 'error'
  progress={0.65}
/>

<ResponsiveImage
  src="https://cdn.example.com/images/photo.jpg"
  width={800}
  height={600}
  alt="Photo"
/>

<AvatarUpload
  value={avatarUri}
  onChange={setAvatarUri}
  size={96}
/>

Image URL Builder

Build transform URLs for CDN-hosted images:

import { buildImageUrl } from '@everystack/ui/image-url';
import type { ImageTransformOptions } from '@everystack/ui/image-url';

const url = buildImageUrl('uploads/photo.jpg', {
  width: 400,
  height: 300,
  format: 'webp',
  quality: 80,
  fit: 'cover',
  cdnUrl: 'https://cdn.example.com',
});
// → https://cdn.example.com/images/uploads/photo.jpg?w=400&h=300&f=webp&q=80&fit=cover

Charts

SVG-based chart components using react-native-svg and D3.

import { Sparkline, StatCard, BarChart, DonutChart, LineChart } from '@everystack/ui';

<Sparkline
  data={[{ x: 0, y: 10 }, { x: 1, y: 25 }, { x: 2, y: 18 }]}
  width={100}
  height={30}
/>

<StatCard
  label="Total Users"
  value={12345}
  format="number"
  trend={{ value: 12, direction: 'up' }}
/>

<BarChart
  data={[
    { label: 'Mon', value: 10 },
    { label: 'Tue', value: 25 },
    { label: 'Wed', value: 18 },
  ]}
  width={300}
  height={200}
/>

<DonutChart
  data={[
    { label: 'iOS', value: 60, color: '#007AFF' },
    { label: 'Android', value: 35, color: '#34C759' },
    { label: 'Web', value: 5, color: '#FF9500' },
  ]}
  width={200}
  height={200}
/>

<LineChart
  data={[{
    label: 'Revenue',
    points: [{ x: 0, y: 100 }, { x: 1, y: 150 }, { x: 2, y: 130 }],
    color: '#007AFF',
  }]}
  width={400}
  height={200}
/>

Peer Dependencies

| Package | Version | Required | |---------|---------|----------| | react | >=18.0.0 | Yes | | react-native | >=0.72.0 | Yes | | react-native-svg | >=13.0.0 | For charts | | d3-array | optional | For charts | | d3-scale | optional | For charts | | d3-shape | optional | For charts | | d3-time | optional | For charts | | d3-time-format | optional | For charts | | d3-interpolate | optional | For charts |

Part of everystack — a self-hosted application stack for Expo apps on AWS.

License

MIT