Design Principles
Understanding the design philosophy and principles behind Harukit UI
Harukit UI is a simple, copy-paste component library built with Tailwind CSS. Our design principles focus on giving you control, keeping things accessible, and making development straightforward.
Core Philosophy
Copy & Paste Components
Harukit UI components are copied directly into your project, giving you complete control over the code. This approach means:
- No runtime overhead: Components become part of your code, not external packages
- Full customization: Change anything you want without worrying about breaking updates
- You control updates: Add new components when you need them
- Transparency: All code is in your project, nothing hidden
Accessibility First
Every component is built with accessibility as a primary concern:
- Keyboard navigation: All interactive elements work with keyboard
- Screen reader friendly: Proper ARIA labels and descriptions for assistive technology
- Good color contrast: Meets accessibility standards for readability
- Focus management: Logical tab order and focus indicators
- Semantic HTML: Uses proper HTML elements that work well with accessibility tools
TypeScript Ready
TypeScript is not an afterthought - it's built into the core of every component:
- Type safety: Props and events are properly typed
- Better autocomplete: Your IDE will help you use components correctly
- Catch errors early: TypeScript helps prevent common mistakes
- Better DX: Enhanced developer experience with type checking
Built with Tailwind CSS
Designed specifically to work great with Tailwind:
- Use Tailwind classes: Style components with familiar utility classes
- Responsive design: Easy to make components work on all screen sizes
- Dark mode support: Works with Tailwind's dark mode
- Small bundle size: Only includes the CSS you actually use
What You Get
Harukit UI's design principles are centered around creating a component library that is:
- Accessible: Built for everyone, regardless of ability
- Customizable: Adapts to your design system and brand
- Performant: Optimized for speed and efficiency
- Developer-friendly: Great developer experience with TypeScript and clear APIs
- Maintainable: Easy to understand, modify, and extend
By following these principles, Harukit UI provides a solid foundation for building beautiful, accessible, and maintainable user interfaces. Perfect for getting your project up and running quickly while maintaining quality and accessibility standards.
Support
- GitHub: Github Repository
- Issues: Github Issues