mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
e0ec477433
- Enable all 15 finance component docs (from .disabled → .mdx) - Create stock-market.mdx, 8 chart docs, 8 block docs, 2 framework docs - Add direction.tsx component (RTL/LTR support from upstream shadcn) - Add xs/icon-xs button sizes, data-variant/data-size attributes - Fix build-registry.mts to handle default exports in namespace re-exports - Add default props to order-entry, positions-list, orders-history, trading-panel - Fix 18 navigation stubs → re-export from root implementations - Add 44 orphaned MDX files to nav (installation, dark-mode, desktop, guides, etc) - Migrate 6 framer-motion imports → motion/react - Bump React 19.2.0→19.2.4, Next.js 16.0.1→16.1.6, motion→12.34.0 - Align lucide-react, sonner v2, tailwind-merge v3, postcss-selector-parser v7 - Remove framer-motion dep (superseded by motion) - Fix @types/react-dom, TypeScript versions across workspaces
120 lines
2.3 KiB
Plaintext
120 lines
2.3 KiB
Plaintext
---
|
|
title: React Native
|
|
description: Using @hanzo/ui components in React Native and Expo applications.
|
|
---
|
|
|
|
# React Native Guide (Beta)
|
|
|
|
@hanzo/ui provides React Native components built on top of React Native's core primitives and NativeWind for styling. This integration is currently in beta.
|
|
|
|
## Installation
|
|
|
|
<Steps>
|
|
|
|
### Install the package
|
|
|
|
```bash
|
|
npm install @hanzo/ui
|
|
# or
|
|
pnpm add @hanzo/ui
|
|
```
|
|
|
|
### Install NativeWind
|
|
|
|
```bash
|
|
npm install nativewind
|
|
npm install -D tailwindcss
|
|
```
|
|
|
|
### Configure Tailwind
|
|
|
|
```js title="tailwind.config.js"
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./App.{js,jsx,ts,tsx}",
|
|
"./src/**/*.{js,jsx,ts,tsx}",
|
|
"./node_modules/@hanzo/ui/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
presets: [require("nativewind/preset")],
|
|
theme: {
|
|
extend: {},
|
|
},
|
|
plugins: [],
|
|
}
|
|
```
|
|
|
|
</Steps>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { useState } from "react"
|
|
import { Button, Card, Input } from "@hanzo/ui/native"
|
|
|
|
export default function App() {
|
|
const [count, setCount] = useState(0)
|
|
|
|
return (
|
|
<Card>
|
|
<Button onPress={() => setCount((c) => c + 1)}>
|
|
Clicked {count} times
|
|
</Button>
|
|
<Input value={String(count)} />
|
|
</Card>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Expo Integration
|
|
|
|
```tsx
|
|
// app/(tabs)/index.tsx
|
|
import { Button, Card } from "@hanzo/ui/native"
|
|
|
|
export default function HomeScreen() {
|
|
return (
|
|
<Card>
|
|
<Button>Click me</Button>
|
|
</Card>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Component Coverage
|
|
|
|
**Available:**
|
|
|
|
- Button, Card, Input, Label, Badge
|
|
- Checkbox, Switch, Separator
|
|
- Tabs, Avatar
|
|
|
|
**In Progress:**
|
|
|
|
- Dialog and Sheet (modal-based)
|
|
- Select and Popover
|
|
- Navigation components
|
|
|
|
**Not Available:**
|
|
|
|
- 3D components
|
|
- Browser-specific components (Safari mockup, etc.)
|
|
- Chart components
|
|
|
|
## Platform Differences
|
|
|
|
Some components behave differently on native platforms:
|
|
|
|
- **Dialog** uses React Native's `Modal` component
|
|
- **Sheet** uses bottom sheet gestures via `react-native-gesture-handler`
|
|
- **Animations** use `react-native-reanimated` instead of Framer Motion
|
|
|
|
## Status
|
|
|
|
This integration is in **beta**. Component coverage is limited compared to the web version. Please report issues on [GitHub](https://github.com/hanzoai/ui/issues).
|
|
|
|
## Next Steps
|
|
|
|
- [View all components](/docs/components)
|
|
- [React Guide](/docs/frameworks/react) (stable)
|