@syraui/core

Cross-platform UX components for React & React Native — zero-config, same API across platforms.

Installation

npm install @syraui/core

Platform Support

| Platform | Import | | ------------ | --------------------- | | React | @syraui/core | | Next.js | @syraui/core | | Vite | @syraui/core | | React Native | @syraui/core/native | | Expo | @syraui/core/native |

Components

• <Skeleton> — Auto-generates shimmer from any component's shape

Skeleton

Wrap any component. Get its skeleton. Zero config.

Web — React / Next.js / Vite

import { Skeleton } from "@syraui/core";

<Skeleton loading={isLoading}>
  <ProfileCard user={user} />
</Skeleton>;

React Native / Expo

Wrap elements you want shimmer'd with <SkeletonItem>. It reads dimensions directly from the child's style — no duplication needed.

import { Skeleton, SkeletonItem } from "@syraui/core/native";

<Skeleton loading={isLoading}>
  <View style={s.card}>
    <SkeletonItem>
      <Image source={{ uri: user.avatar }} style={s.avatar} />
    </SkeletonItem>
    <SkeletonItem>
      <Text style={s.name}>{user.name}</Text>
    </SkeletonItem>
    <SkeletonItem>
      <Text style={s.bio}>{user.bio}</Text>
    </SkeletonItem>
    <Button title="Follow" />
  </View>
</Skeleton>;

Expo — requires expo prebuild or bare workflow. Does not run in Expo Go.

Props

<Skeleton>

| Prop | Type | Default | Description | | ---------------- | -------------------------------- | ----------- | ------------------------------------------------- | | loading | boolean | — | Toggle between shimmer and real content | | children | ReactNode | — | Your real component | | animation | "shimmer" \| "pulse" \| "none" | "shimmer" | Animation style | | baseColor | string | "#EAECF0" | Background color of skeleton blocks | | highlightColor | string | "#F8F9FB" | Shimmer highlight color | | speed | number | 1.8 | Animation speed in seconds. Higher = slower | | borderRadius | string \| number | auto | Override border radius on all blocks | | direction | "ltr" \| "rtl" | "ltr" | Shimmer sweep direction | | fadeDuration | number | 250 | Fade-in duration (ms) when loading ends. Web only | | className | string | — | CSS class on wrapper. Web only | | style | CSSProperties \| ViewStyle | — | Inline styles |

<SkeletonItem> (React Native only)

| Prop | Type | Default | Description | | -------------- | -------------- | ------- | ------------------------------------- | | children | ReactElement | — | The element to shimmer | | borderRadius | number | auto | Override border radius for this block |

Theming

// Dark mode
<Skeleton loading={isLoading} baseColor="#1E293B" highlightColor="#334155">
  <Card />
</Skeleton>

// Pulse animation
<Skeleton loading={isLoading} animation="pulse" speed={1.5}>
  <Card />
</Skeleton>

// RTL
<Skeleton loading={isLoading} direction="rtl">
  <Card />
</Skeleton>

License

MIT © SyraUI