stylesheet-ui

Copy-paste React Native components for Expo, distributed as source you own.

Plain StyleSheet.create. No DSL. No lock-in.

npx stylesheet-ui init
npx stylesheet-ui add button

See the CLI README for usage details.

What's included

40 components grouped by purpose:

• Layout: Screen, Stack (+ HStack / VStack), Divider
• Display: Text, Avatar, Badge, Card, ListItem, List, Section, SettingsRow, Skeleton, Table
• Inputs: Button, Input, Switch, Checkbox, Radio, Slider, Select
• Feedback: Spinner, Progress, Alert, Toast
• Overlays: Modal, AlertDialog, Tabs, Accordion, BottomSheet, Menu, Tooltip
• Auth: AuthScreen, SignInForm, SignUpForm, ForgotPasswordForm, OtpInput, SocialAuthButtons, SocialIcons, NewPasswordForm, UserCard — backend-agnostic; wire each to your auth provider

Plus theme tokens (colors light + dark, spacing, radius, typography, shadows) and a useThemeMode() hook for in-app Light / Dark / System toggles.

Run npx stylesheet-ui list to see them in your terminal.

Repository layout

This is a monorepo. The published package lives in packages/cli; everything else exists to develop, document, and showcase it.

Path	Description
packages/cli	The stylesheet-ui CLI published to npm. Owns the component registry.
packages/ui	Source of truth for component code and theme tokens. Synced into the CLI registry at build time.
apps/docs-app	Expo Router showcase app that consumes @stylesheet-ui/ui directly.
apps/docs-site	Astro + Starlight documentation site. Embeds the exported docs-app web build.

Component sources live in packages/ui/src. Running npm run registry:sync copies them into packages/cli/registry/files and validates that every hand-authored <name>.json manifest declares its imports correctly.

Development

npm install            # install workspace deps
npm run dev            # start the Expo docs app
npm run cli:dev        # watch-build the CLI
npm run registry:sync  # sync ui/ -> cli/registry
npm run typecheck      # typecheck all workspaces

To preview a CLI change end-to-end:

npm run cli:build
node packages/cli/dist/index.js add button   # run against a test project

Publishing

CI publishes automatically when you push a v*.*.* tag (see .github/workflows/publish-cli.yml):

# bump packages/cli/package.json version, commit, then:
git tag v0.0.4
git push origin v0.0.4

The workflow verifies the tag matches package.json, runs typecheck + registry sync + build, and publishes with npm provenance. Requires an NPM_TOKEN repo secret.

To publish manually instead:

npm publish --workspace stylesheet-ui

The prepublishOnly hook in packages/cli runs sync then build, so either path ships a fresh registry.

License

MIT — see packages/cli/LICENSE.