React Native UI components and design system - Ported from @sudobility/components
npm install @sudobility/components-rnReact Native component library for Sudobility, ported from
@sudobility/components.
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
- React Native (Bare workflow)
- NativeWind v4 (Tailwind CSS for React Native)
- React Navigation (Navigation)
- TypeScript (Type safety)
- npm workspaces (Monorepo management)
`bash`
cd mail_box_components_rn
npm install
npm run build
`bash`
npm install @sudobility/components-rn @sudobility/design
`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 (
value={message}
onChangeText={setMessage}
placeholder="Write your message..."
showCount
maxLength={500}
/>
onChange={setSubscribe}
label="Subscribe to newsletter"
/>
);
}
`
`bashBuild main package
npm run build
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, BodyMetricsEmail (
@sudobility/email-components-rn - 10 components):
- AbTestEmail, ContactCard, EmailAccountsList
- EmailAnalytics, EmailCampaign, EmailInputGroup
- EmailTemplate, FreeEmailBanner
- SubscriberList, SubscriptionPlanWeb3 (
@sudobility/web3-components-rn - 8 components):
- AddressLabel, CryptoPortfolio, GasTracker
- NftGallery, TokenSwap, WalletConnect
- WalletIcon, WalletSelectionMarketing (
@sudobility/marketing-components-rn - 13 components):
- CrmDashboard, CtaBanner, FeatureListItem
- FeatureSpotlight, HeroBannerWithBadge
- InternalLinkClusters, LandingBuilder
- NpsSurvey, SalesReport, SubscriberList
- TestimonialSlider, UseCaseGrid, WelcomeScreenTesting
`bash
Run tests
npm testRun tests in watch mode
npm run test:watchRun tests with coverage
npm run test:coverage
``MIT