@heathmont/moon-core-tw
v10.24.13
Published
A comprehensive collection of UI components for React, designed to streamline development and ensure consistency across applications.
Maintainers
Keywords
Readme
📦 Moon React Core components library
A comprehensive collection of UI components for React, designed to streamline development and ensure consistency across applications.
🚀 Features
- 🏗 Rich set of ready-to-use UI components
- 🎨 Customizable and theme-friendly
- 🔄 Fully typed with TypeScript support
- 📦 Lightweight and optimized for performance
📦 Installation
Install via npm:
npm install @heathmont/moon-core-twOr using pnpm:
pnpm install @heathmont/moon-core-twOr yarn:
yarn @heathmont/moon-core-tw🎯 Usage
Example: Basic UI Elements
import { Button, Input, Modal } from "@heathmont/moon-core-tw/lib";
const App = () => {
const [open, setOpen] = useState(false);
return (
<div>
<Input placeholder="Enter text..." />
<Button onClick={() => setOpen(true)}>Open Modal</Button>
{open && (
<Modal onClose={() => setOpen(false)}>
<p>This is a modal!</p>
</Modal>
)}
</div>
);
};
export default App;📚 Available Components
| Component | Description | | ---------------- | -------------------------------------------- | | Accordion | Expandable sections for content organization | | Alert | Notification messages | | AuthCode | Input field for authentication codes | | Avatar | User profile image display | | Backdrop | Overlay background for modals | | BottomSheet | Slide-up modal panel | | Breadcrumb | Navigation path display | | Button | Clickable action button | | Carousel | Image/content slider | | Checkbox | Toggle option selection | | Chip | Small tag-like UI elements | | CircularProgress | Loading indicator | | Combobox | Selectable input with search | | Drawer | Sidebar navigation or content panel | | Dropdown | Menu-based selection component | | Form | Wrapper for form elements | | Group | UI grouping element | | Hint | Tooltip-like helper text | | IconButton | Button with an icon | | Input | Text input field | | InsetInput | Input with embedded icon or text | | Label | Label for form elements | | Loader | General loading indicator | | MenuItem | List item for menus | | MergeClassnames | Utility for handling CSS class merging | | Modal | Popup dialog box | | Pagination | Page navigation controls | | Popover | Small contextual pop-up | | Progress | Progress bar | | Radio | Radio button selection | | Search | Search input field | | Select | Dropdown selection | | Snackbar | Temporary notification | | Switch | Toggle switch | | Tabs | Tab-based navigation | | Tag | Label-style element | | TextInput | Standard text input field | | Textarea | Multi-line text input | | Tooltip | Hover-triggered information display | | FileInput | File upload field | | Badge | Small status indicator |
🧭 Explore more
🛠️ Contributing
If you're interested in contributing to Moon Design System, please read our contributing docs before submitting a pull request.
