A modern, reusable React component library built with TypeScript and Vite. Includes accessible, customizable UI components for rapid development.
npm install docthub-core-componentsbash
npm install docthub-core-components
or
yarn add docthub-core-components
`
$3
`bash
npm install react@^18.0.0 react-dom@^18.0.0
`
🌀 Usage with Tailwind CSS
To ensure all Tailwind classes (including arbitrary values like text-['#002830']) work with docthub-core-components, follow these steps:
1. Do NOT import docthub-core-components/dist/docthub-core-components.css unless you only want base styles. Let your app's Tailwind build generate all needed utilities.
2. Add the library to your tailwind.config.js content array:
`js
module.exports = {
content: [
"./node_modules/docthub-core-components/dist/*/.js",
"./pages/*/.{ts,tsx,js,jsx}",
"./components/*/.{ts,tsx,js,jsx}",
"./app/*/.{ts,tsx,js,jsx}",
"./src/*/.{ts,tsx,js,jsx}",
],
// ...rest of config
}
`
This ensures all Tailwind classes used in your app and in the component library are available, including arbitrary values.
🚀 Quick Start
`tsx
import {
DoctButton,
DoctTypography,
LabeledInput,
SearchInput,
DatePickerField
} from 'docthub-core-components';
function App() {
return (
Welcome to DocthHub Components
size="large"
/>
type="email"
placeholder="Enter your email"
required
/>
placeholder="Select date"
/>
Cancel
Get Started
);
}
`
🧩 Component Categories
$3
- DoctButton - Flexible button with multiple variants and icon support
- DoctTypography - Comprehensive typography system
- DoctAnimationLoader - Loading states
$3
- LabeledInput - Input with integrated label and validation
- PasswordInput - Password field with show/hide toggle
- OtpInput - One-time password input
- TextareaField - Multi-line text input
- CurrencyInput - Currency-specific input formatting
$3
- DatePickerField - Calendar date picker
- SelectField - Dropdown with search functionality
$3
- SearchInput - Search field with icon
- AutoComplete - Autocomplete with suggestions
- DoctAutocomplete - Enhanced autocomplete
$3
- DoctChip - Tags and labels
- ExpandableCard - Collapsible content cards
$3
- SearchFilterSection - Complete search and filter UI
- UserRegistrationSection - Full registration form
- AddressFormSection - Address input form
- ContactFormSection - Contact information form
$3
- Alert, Avatar, Checkbox, Dialog, Drawer, DropdownMenu
- Popover, RadioGroup, Tabs, Toast, Tooltip
- And more foundational components
🎨 Theming
Components support theming via CSS custom properties:
`css
:root {
--customBlue: #3b82f6;
--foreground: #000000;
--background: #ffffff;
--muted-foreground: #6b7280;
--destructive: #ef4444;
/ ... customize as needed /
}
`
🛠️ Development
$3
`bash
git clone
cd docthub-core-components
npm install
`
$3
`bash
npm run dev # Start development server
npm run build # Build for production
npm run storybook # Start Storybook
npm test # Run test suite
npm run analyze # Bundle size analysis
`
📚 Storybook
Explore all components interactively:
`bash
npm run storybook
`
View component examples, props, and interactive demos at http://localhost:6006
🧪 Testing
Comprehensive test suite with Vitest and Testing Library:
`bash
npm test # Run all tests
npm test -- --watch # Watch mode
npm test -- --coverage # Coverage report
`
Note: Some Radix UI Select component tests are skipped due to JSDOM limitations.
📊 Bundle Analysis
Analyze bundle size and dependencies (local development only):
`bash
npm run analyze
`
Opens dist/bundle-visualizer.html with detailed treemap visualization.
Note: Bundle analysis uses a separate configuration to prevent deployment issues in cloud environments like Vercel. Use npm run build for production builds.
🔗 Peer Dependencies
- react ^18.0.0
- react-dom ^18.0.0
📝 TypeScript
Fully typed with TypeScript. Export interfaces for custom implementations:
`tsx
import type {
DoctButtonProps,
LabeledInputProps,
SearchInputProps
} from 'docthub-core-components';
``