JSPM

@syraui/core

0.1.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17
  • Score
    100M100P100Q67676F
  • License MIT

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

Package Exports

  • @syraui/core
  • @syraui/core/native

Readme

@syraui/core

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

npm version TypeScript License: MIT

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