@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