https://github.com/adelpro/line-craft
lineCraft is a curated, hand-made collection of NextJS and React UI components, custom hooks, and utilities all built with TypeScript and styled using Tailwind CSS. Designed for performance and ease-of-use.
https://github.com/adelpro/line-craft
copy-paste design hook nextjs reactjs typescript ui
Last synced: 4 months ago
JSON representation
lineCraft is a curated, hand-made collection of NextJS and React UI components, custom hooks, and utilities all built with TypeScript and styled using Tailwind CSS. Designed for performance and ease-of-use.
- Host: GitHub
- URL: https://github.com/adelpro/line-craft
- Owner: adelpro
- Created: 2025-02-02T16:38:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-05T21:51:05.000Z (over 1 year ago)
- Last Synced: 2025-03-28T20:44:09.493Z (over 1 year ago)
- Topics: copy-paste, design, hook, nextjs, reactjs, typescript, ui
- Homepage:
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# lineCraft
lineCraft is a curated, hand-made collection of NextJS and React UI components, custom hooks, and utilities all built with TypeScript and styled using Tailwind CSS. Designed for performance and ease-of-use, lineCraft follows SOLID principles and modern best practices to empower developers with ready-to-use, lightweight building blocks for your web applications. No installation required, simply copy & paste the code into your project.
## Features
- **Modular Components**: Reusable, customizable React components.
- **Custom Hooks**: Enhance your workflow with utility hooks.
- **TypeScript Support**: Strongly typed for reliability and clarity.
- **Tailwind CSS Styling**: Pre-styled components using Tailwind CSS for easy customization.
- **SOLID Principles**: Built to be scalable, maintainable, and testable.
- **Zero Dependencies**: No external libraries required.
- **Responsive Design**: Optimized for all screen sizes.
- **Accessible**: Components follow ARIA and accessibility best practices.
- **Lightweight**: Minimal footprint to keep your project fast.
## Installation
No installation required! Simply copy and paste the components, hooks, or utilities directly into your project.
## Getting Started
1. Browse the collection of components and hooks.
2. Copy the code snippet you need.
3. Paste it into your React project.
4. Customize and use as required.
## Usage Examples
### Button Component
```tsx
import React from 'react';
interface ButtonProps {
label: string;
onClick: () => void;
}
export const Button: React.FC = ({ label, onClick }) => (
{label}
);
```
### Custom Hook: useToggle
```tsx
import { useState } from 'react';
export const useToggle = (initialState: boolean = false): [boolean, () => void] => {
const [state, setState] = useState(initialState);
const toggle = () => setState(prev => !prev);
return [state, toggle];
};
```
## Contributing
Contributions are welcome! Feel free to open issues or submit pull requests.
## License
This project is licensed under the MIT License.
## Contact
For any inquiries, reach out via [contact@adelpro.us.kg](mailto:contact@adelpro.us.kg).
## Acknowledgements
Special thanks to the open-source community for inspiration and resources.