React Native
The same components for the Expo app, with the same prop names.
@smartui/native brings SmartUI to iOS and Android. It depends only on React Native and react-native-svg. Colors, spacing, radius, type and motion come from @smartui/tokens, the same source the web package reads.
import { ThemeProvider, Button, Field, Dock } from '@smartui/native';
export default function App() {
return (
<ThemeProvider>
<Field label="Phone number" placeholder="e.g. 0812 3456 7890" keyboardType="phone-pad" />
<Button fullWidth onPress={() => {}}>Create booking</Button>
</ThemeProvider>
);
}Live preview
The real @smartui/native components, rendered in the browser through react-native-web. Scroll inside the frame. Open it full screen in light or dark.
ThemeProvider follows the device color scheme. Pass scheme="light" or scheme="dark" to fix it.
What is the same
- Prop names:
variant,size,tone,isDisabled,isLoading,isSelected,onPress,onChange. - Token values and the motion curve.
- Icon names and shapes.
What is different on touch
| Topic | Web | Native |
|---|---|---|
| Default control size | md (40) | lg (48) |
| Hover | Yes | None |
| Select, Menu | Popover under the trigger | Opens as a bottom Sheet |
| Combobox | Separate component | Select with isSearchable |
| Stepper | Full row of steps | Summarised as "Step 2 of 4" with a progress bar |
| Glass | backdrop-filter blur | Solid glassFallback surface |
| Tabs | Pill or underline | Pill, same indicator as Segmented |
| Date Picker | Calendar in a popover | Calendar in a bottom Sheet |
| Drop Zone | Drag and drop or browse | Tap to browse. You pass onPick, which opens your file picker (for example expo-document-picker) |
| Chart | Recharts, with hover tooltip | Static SVG, no tooltip |
Components available
| Group | Components |
|---|---|
| Actions | Button, IconButton, Link, Spinner |
| Forms | Field, Textarea, SearchField, Select, Checkbox, RadioGroup, ChoiceCardGroup, Switch, Chip, Segmented, Slider, NumberStepper, OTPInput, DatePicker, DateRangePicker, DropZone |
| Data display | Badge, TrendChip, Avatar, Card, ListRow, ItemCard, Accordion, Separator, Progress, Skeleton, EmptyState, Rating, KPI, Timeline, Agenda, Stepper |
| Feedback and overlays | Alert, toast and ToastRegion, Dialog, Sheet, Menu |
| Navigation | Tabs, Dock, TopBar |
| Charts | Chart (area, bar, stacked bar, horizontal bar, line, composed, pie, radar, radial), drawn with react-native-svg |
Not in the native package
These are dashboard components and are not used in the app: Sidebar, Navbar, Page Header, App Layout, Breadcrumbs, Data Grid, Command, Tooltip and Popover.