Prebuilt Components

A compact, mobile‑first React UI library designed for Mini Apps, PWAs, and modern web applications.

Included components:

• NHeader
• NBottomNav
• NBottomSheet
• NActionSheet
• Overlay
• NEmptyState
• NLoadingComponent
• NSplashScreen
• NToast

---

🚀 Quick Start

npm install prebuilt-components

Import styles and components:

import 'prebuilt-components/dist/index.css';
import { NHeader } from 'prebuilt-components';

Minimal usage:

<NHeader title="Room Type" showBackButton onBack={() => history.back()} />

---

📚 Documentation

Full documentation is available in the docs/ folder:

• 📘 Usage Guide
• 🧩 API Reference
• 🧪 Examples
• � Overlay Docs
• �📖 Full Reference

For local development and package linking (npm link, npm pack, yalc), see
👉 README-LOCAL.md

---

🧩 Components Overview

NHeader

Mobile-style app bar with optional back button, title, and right actions.

Key props:

• title?: string
• showBackButton?: boolean
• background?: 'solid' | 'transparent'
• shadow?: boolean
• height?: number | string

---

NBottomNav

Bottom navigation optimized for mobile UX.

Main Props

Prop	Type	Default	Description
items	BottomNavItem[]	required	Navigation items
activeId	string	required	Active item ID
onItemClick	(item) => void	required	Item click handler
variant	'default' | 'filled' | 'minimal' | 'floating'	default	Style variant
size	'small' | 'medium' | 'large'	medium	Size of navigation

Styling Props

Prop	Type	Default
backgroundColor	string	#ffffff
activeColor	string	#007aff
inactiveColor	string	#8e8e93
borderRadius	number | string	0
roundedTop	number	undefined
height	number | string	undefined

---

NActionSheet

Action sheet modal for presenting a list of actions.

Basic usage:

<NActionSheet
  actions={[
    { id: 'delete', label: 'Delete', destructive: true },
    { id: 'share', label: 'Share' },
    { id: 'cancel', label: 'Cancel', cancel: true },
  ]}
  onActionSelect={(action) => console.log('Selected action:', action.id)}
  onClose={() => setShowActionSheet(false)}
  isVisible={showActionSheet}
/>

---

NBottomSheet

Slide‑up bottom sheet with backdrop; mobile-first, touch-friendly, and draggable.

Basic usage:

<NBottomSheet open={open} onClose={() => setOpen(false)} height="60vh">
  <div>Your content here</div>
</NBottomSheet>

Key props: open, onClose, height, backdrop, closeOnBackdrop, draggable.

For the full API and additional examples, see API Reference and Examples.

---

Overlay

Lightweight overlay and backdrop component used by sheets and action sheets. It provides a small API to render a backdrop, handle backdrop clicks, and host portal content.

Basic usage:

import { Overlay } from 'prebuilt-components';

<Overlay open={open} backdrop onClose={() => setOpen(false)}>
  <div style={{ maxWidth: 520, margin: '0 auto', background: '#fff', borderRadius: 8, padding: 20 }}>
    <h3>Modal title</h3>
    <p>Modal content goes here.</p>
  </div>
</Overlay>

Key props: open, backdrop, closeOnBackdrop, onClose, className, portalClassName, style.

---

NEmptyState

Simple empty state component with title, description, and optional illustration. Basic usage:

<NEmptyState title="No items" description="Check back later." />

---

NToast

Lightweight toast notifications.

Prop	Type	Default	Description
isVisible	boolean	false	Toast visibility
type	'success' | 'error' | 'warning' | 'info'	success	Toast type
message	string	required	Message text
duration	number	8000	Auto-hide duration
position	'top' | 'bottom'	bottom	Screen position
onHide	() => void	—	Hide callback

---

NLoadingComponent

Fullscreen or inline loading indicator.

Prop	Type	Default
visible	boolean	true
size	number	80
spinnerColor	string	#8B4513
fullscreen	boolean	true

---

NSplashScreen

Professional splash screen with branding.

Basic usage:

<NSplashScreen
  isVisible={showSplash}
  duration={3000}
  onHide={() => setShowSplash(false)}
/>

🤝 Contributing

Contributions are welcome!
Please open an issue or submit a pull request.

---

📄 License

MIT © MAIBUNHENG

---

📝 Changelog

See GitHub releases for full change history.