What design philosophy does this skill follow?

It follows a 'Native-First' approach, prioritizing Expo primitives and iOS San Francisco design guidelines to ensure apps feel like native system software.

Can I use these components on the web?

Yes, the skill supports platform-specific overrides (using .web.tsx) and utilizes Tailwind CSS variables for consistent cross-platform styling.

Is it similar to shadcn/ui?

Yes, it adopts the 'copy-paste' architecture and compound component patterns popularized by shadcn/ui but is specifically optimized for React Native and Expo.

Does it support dark mode?

Yes, it includes system-aware color tokens and platform-adaptive colors that automatically respond to the user's light or dark mode settings.

How does it handle accessibility?

Accessibility is built-in by default, providing patterns for keyboard handling, safe area context, and screen reader support for all custom components.

Expo Native UI Components

Name: Expo Native UI Components
Author: EvanBacon

byEvanBacon

•

552

•

Mobile Development

Builds production-quality, portable UI components for Expo Router using native-first design patterns and iOS aesthetics.

This skill provides a comprehensive framework for creating high-performance, accessible UI components specifically optimized for Expo Router environments. It leverages native primitives and CSS variables to ensure components look and feel like system-level elements on iOS, Android, and Web. By implementing compound component patterns and platform-specific overrides, it enables developers to build maintainable, copy-paste ready design systems inspired by industry leaders like shadcn/ui and Radix UI.

主要功能

01552 GitHub stars

02Compound component patterns for flexible, composable UI

03iOS-inspired 'liquid glass' aesthetics with San Francisco design tokens

04Platform-specific file resolution for iOS, Android, and Web

05Native-first architecture using Expo Router primitives

06Built-in accessibility with keyboard handling and screen reader support

使用场景

01Developing cross-platform mobile apps that require a native iOS look and feel

02Modernizing existing React Native apps with a 'copy-paste' component architecture

03Building a custom internal UI library for Expo Router projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evanbacon/crispy reusable-ui-components

For use in Claude.ai and ChatGPT

Download Skill