@campminder/ui
v1.3.4
Published
Reusable UI components for CampMinder apps
Downloads
623
Keywords
Readme
@campminder/ui
A comprehensive UI component library for CampMinder applications, built with React and Chakra UI.
📦 Installation
npm install @campminder/ui
# or
yarn add @campminder/ui
# or
pnpm add @campminder/ui🚀 Quick Start
React Applications
import React from 'react'
import { UIProvider, Button, Chip } from '@campminder/ui'
import { AddIcon, SearchIcon } from '@campminder/ui'
function App() {
return (
<UIProvider>
<div>
<h1>My CampMinder App</h1>
<Button colorScheme="blue" onClick={() => alert('Hello!')}>
<AddIcon boxSize={4} />
Add Item
</Button>
<Chip colorScheme="green">
Active
</Chip>
</div>
</UIProvider>
)
}
export default AppNon-React Applications (HTML/JavaScript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My App</title>
<!-- Load React & ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Load CampMinder UI -->
<script src="https://unpkg.com/@campminder/ui@latest/dist/index.umd.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const { UIProvider, Button } = window.CampMinderUI
const App = React.createElement(UIProvider, {
children: React.createElement(Button, {
colorScheme: 'blue',
children: 'Click me'
})
})
ReactDOM.render(App, document.getElementById('app'))
</script>
</body>
</html>