craftui

Minimal React Native UI primitives for Expo apps using Uniwind, Pressto, and rn-squircle.

Installation

bun expo install @candiesocean/craftui

Install the required peer dependencies in the host app as well:

bun expo install expo expo-image pressto rn-squircle uniwind react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import {
  Button,
  IconButton,
  Pressable,
  Squircle,
  Text,
  useIconButtonTintColor,
} from '@candiesocean/craftui';

<Squircle borderRadius={24} className="bg-card p-6">
  <Text variant="title">Hello</Text>
  <Button label="Continue" />
  <Button
    label="Book"
    leadingAccessory={<YourIcon name="check" size={20} color="#fff" />}
  />
</Squircle>;

function NotifyBell({ onPress }: { onPress: () => void }) {
  const tint = useIconButtonTintColor('ghost');

  return (
    <IconButton variant="ghost" onPress={onPress}>
      <YourIcon name="bell" size={22} color={tint} />
    </IconButton>
  );
}

Button primitives

| Component | Role | |-----------|------| | Pressable | Scale-on-press hit target (pressto). Child owns shape/layout. | | Button | Labeled CTA — variants, sizes, loading, accessories. | | IconButton | Icon-only action on rn-squircle SquircleButton. | | Squircle / SquircleButton | Continuous-corner view / pressable from rn-squircle. |

Button variants: primary | secondary | outline | ghost | destructive | destructive-light
Button sizes: sm | default | lg | icon
IconButton variants: default | filled | ghost

Compose navigation chrome (e.g. back) in the host with IconButton + your router — craftui stays router-free.

Notes

• craftui is provider-free. It reads your Uniwind theme from CSS variables.
• The host app should define the color tokens used by the library, such as --color-primary, --color-foreground, and --color-border.
• Icons stay app-owned. Pass them through leadingAccessory / trailingAccessory on Button, or as children on IconButton.
• Use useButtonForegroundColor / useIconButtonTintColor when a native icon needs a runtime color.
• Keep token names semantic so different apps can skin the same components without changing library code.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT