@bluehat8/my-own
v0.5.0
Published
Customizable UI components library for React and Next.js
Downloads
40
Maintainers
bluehat8Readme
@bluehat8/my-own
Customizable UI components for React/Next.js with automatic dark/light mode.
Installation
npm install @bluehat8/my-ownSetup (3 steps)
1. Import styles in your App.tsx
import "@bluehat8/my-own/styles";2. Add source/content for Tailwind
Tailwind v4+ (use @source in CSS):
/* global.css */
@source "../node_modules/@bluehat8/my-own/dist/**/*.js";Tailwind v3.x (use content in config):
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@bluehat8/my-own/dist/**/*.js"
],
}3. Set theme (optional)
<!-- Light mode -->
<body data-theme="light">
<!-- Dark mode (default) -->
<body>Auto-detect: The package automatically uses light/dark based on system preference.
Components
BirthDateSelect
import { BirthDateSelect } from '@bluehat8/my-own';
<BirthDateSelect
value={date}
onChange={setDate}
minAge={18}
maxAge={100}
/>SearchableSelect
import { SearchableSelect } from '@bluehat8/my-own';
<SearchableSelect
options={[{ value: 'us', label: 'United States' }]}
value={selected}
onChange={setSelected}
placeholder="Select..."
/>PhoneInput
import { PhoneInput } from '@bluehat8/my-own';
<PhoneInput
value={phone}
onChange={(e) => setPhone(e.target.value)}
onRegionChange={setCode}
defaultCountryCode="+1"
/>CedulaInput
import { CedulaInput } from '@bluehat8/my-own';
<CedulaInput
value={cedula}
onChange={setCedula}
format="NI" // "NI", "CR", or "custom"
/>FormField
import { FormField } from '@bluehat8/my-own';
import { Mail, Lock, User } from 'lucide-react'; // or any icon library
// With icon (ReactNode)
<FormField
label="Email"
placeholder="Enter email"
type="email"
icon={<Mail size={18} />}
value={email}
onChange={setEmail}
error={errors.email}
/>
// With icon (image URL)
<FormField
label="Username"
placeholder="Enter username"
icon="/icons/user.svg"
value={username}
onChange={setUsername}
/>
// Password with toggle and icon
<FormField
label="Password"
placeholder="Enter password"
icon={<Lock size={18} />}
showPasswordToggle
value={password}
onChange={setPassword}
/>
// Multiline with icon
<FormField
label="Description"
placeholder="Enter description"
icon={<User size={18} />}
multiline
rows={4}
value={description}
onChange={setDescription}
/>Customization
classNames prop
All components accept a classNames prop for granular styling:
<PhoneInput
classNames={{
container: '',
inputContainer: 'bg-white',
dialCode: 'text-gray-800',
dropdown: 'bg-white',
searchContainer: 'bg-gray-50',
searchInput: 'bg-white text-gray-900',
countryList: 'bg-white',
countryOption: 'hover:bg-gray-100',
countryName: 'text-gray-900',
countryDialCode: 'text-gray-500',
phoneInput: 'text-gray-900',
}}
/>CSS Variables
Override in your CSS:
:root {
--my-primary: #your-brand-color;
--my-bg-base: #ffffff;
--my-border: #e5e7eb;
--my-text: #111827;
--my-radius: 0.5rem;
}License
MIT