@sudobility/components-rn

React Native component library for Sudobility, ported from
@sudobility/components.

Structure

This project mirrors the structure of @sudobility/components:

- Root (/) - Main package @sudobility/components-rn
- /packages/ - Specialized component packages

``text
mail_box_components_rn/
├── src/ # @sudobility/components-rn source
│ ├── ui/ # Core UI components (22 components)
│ │ ├── Alert/
│ │ ├── Avatar/
│ │ ├── Badge/
│ │ ├── Box/
│ │ ├── Button/
│ │ ├── Card/
│ │ ├── Checkbox/
│ │ ├── Divider/
│ │ ├── Flex/
│ │ ├── HelperText/
│ │ ├── Input/
│ │ ├── Label/
│ │ ├── Modal/
│ │ ├── Progress/
│ │ ├── SearchInput/
│ │ ├── Select/
│ │ ├── Skeleton/
│ │ ├── Spinner/
│ │ ├── Stack/
│ │ ├── Switch/
│ │ ├── Tabs/
│ │ └── TextArea/
│ ├── lib/ # Utilities (cn function)
│ └── index.ts
├── packages/ # Specialized packages
│ ├── devops-components-rn/ # @sudobility/devops-components-rn
│ ├── email-components-rn/ # @sudobility/email-components-rn
│ ├── web3-components-rn/ # @sudobility/web3-components-rn
│ └── marketing-components-rn/ # @sudobility/marketing-components-rn
├── package.json # Main package definition + workspaces
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js # NativeWind config
`

Tech Stack

- React Native (Bare workflow)
- NativeWind v4 (Tailwind CSS for React Native)
- React Navigation (Navigation)
- TypeScript (Type safety)
- npm workspaces (Monorepo management)

Getting Started

$3

`bash
cd mail_box_components_rn
npm install
npm run build
`

$3

`bash
npm install @sudobility/components-rn @sudobility/design
`

$3

`tsx
import {
Button, Card, Input, Spinner, Alert,
Box, Flex, Stack, VStack, HStack,
Label, TextArea, Checkbox, Switch, HelperText,
Badge, Divider
} from '@sudobility/components-rn';

export function MyScreen() {
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [subscribe, setSubscribe] = useState(false);

return (



Email Address

We'll never share your email



Message
value={message}
onChangeText={setMessage}
placeholder="Write your message..."
showCount
maxLength={500}
/>


checked={subscribe}
onChange={setSubscribe}
label="Subscribe to newsletter"
/>


Active




Submit



);
}
`

Development

`bash


Build main package

npm run build

Build all packages (main + specialized)

npm run build:all

Watch mode

npm run dev

Type check

npm run type-check
`

Packages

| Package | Description |
| ------------------------------------ | --------------------------------- |
| @sudobility/components-rn | Core React Native UI components |
| @sudobility/devops-components-rn | DevOps monitoring & deployment |
| @sudobility/email-components-rn | Email marketing & contacts |
| @sudobility/web3-components-rn | Web3 wallet & crypto |
| @sudobility/marketing-components-rn| Marketing & landing pages |

Current Components

$3

Core UI:

- Button - Pressable button with variants (primary, secondary, outline,
ghost, link, destructive)
- Card - Container with CardHeader, CardContent, CardFooter
- Input - Text input with variants and states
- Spinner - Loading indicator with size variants
- Alert - Notification with AlertTitle, AlertDescription

Layout:

- Box - Fundamental layout primitive with spacing, sizing, styling props
- Flex - Flexbox layout component with direction, align, justify, gap props
- Stack / VStack / HStack - Flexbox-based layout for arranging children
with spacing
- Divider - Visual separator with optional label

Form:

- Label - Text label for form inputs
- TextArea - Multi-line text input with character counting
- Checkbox - Custom styled checkbox with controlled/uncontrolled modes
- Switch - Toggle switch with smooth animation
- HelperText - Form field descriptions and error messages
- Select - Dropdown select with modal picker
- SearchInput - Search input with icon, clear button, loading state

Display:

- Badge - Status/label component for metadata, tags, counts
- Avatar / AvatarGroup - User avatar with initials fallback and status
indicator
- Skeleton / SkeletonText / SkeletonAvatar - Loading placeholder with
pulse animation

Feedback:

- Progress / ProgressBar - Linear progress indicators
- Modal / ModalHeader / ModalContent / ModalFooter - Modal dialog

Navigation:

- Tabs / TabsList / TabsTrigger / TabsContent - Tab navigation

$3

DevOps (@sudobility/devops-components-rn - 25 components):
- AlertDialog, MetricsGrid, SystemStatusIndicator
- ApiPlayground, ApiReference, AuditLog
- BuildLog, ChangelogDisplay, CodePlayground
- ConflictResolver, DashboardBuilder, DealPipeline
- DeploymentStatus, DriverLog, MemoryUsage
- PageBuilder, PipelineView, RegressionTest
- TestResult, TestRunner, WebhookLogger
- WorkflowBuilder, WorkflowTemplate, XmlParser, BodyMetrics

Email (@sudobility/email-components-rn - 10 components):
- AbTestEmail, ContactCard, EmailAccountsList
- EmailAnalytics, EmailCampaign, EmailInputGroup
- EmailTemplate, FreeEmailBanner
- SubscriberList, SubscriptionPlan

Web3 (@sudobility/web3-components-rn - 8 components):
- AddressLabel, CryptoPortfolio, GasTracker
- NftGallery, TokenSwap, WalletConnect
- WalletIcon, WalletSelection

Marketing (@sudobility/marketing-components-rn - 13 components):
- CrmDashboard, CtaBanner, FeatureListItem
- FeatureSpotlight, HeroBannerWithBadge
- InternalLinkClusters, LandingBuilder
- NpsSurvey, SalesReport, SubscriberList
- TestimonialSlider, UseCaseGrid, WelcomeScreen

Testing

`bash


Run tests

npm test

Run tests in watch mode

npm run test:watch

Run tests with coverage

npm run test:coverage
``

License

MIT