Tech Stack
- Lit: For building fast, reusable Web Components.
- Vite: For a lightning-fast development experience.
- SchmancyUI: A UI component library for elegant interfaces.
- Tailwind CSS: For utility-first CSS styling.
- TypeScript: For type-safe code.
- ESLint and Prettier: For code quality and formatting.
- Husky and Commitlint: For enforcing commit conventions and pre-commit hooks.
- Features
- Demo
- Getting Started
- Prerequisites
- Installation
- Running the Development Server
- Building for Production
- Project Structure
- Usage
- Contributing
- License
- Web Components with Lit: Build efficient and lightweight web components.
- Vite as Build Tool: Benefit from instant server start and HMR.
- SchmancyUI Integration: Use pre-built UI components to speed up development.
- Tailwind CSS: Style your application rapidly with utility classes.
- TypeScript Support: Write type-safe code with TypeScript.
- ESLint and Prettier: Maintain code quality and consistency.
- Husky and Commitlint: Enforce commit conventions and run pre-commit hooks.
- Atomic CSS Structure: Organized CSS for scalable projects.
Check out the live demo here.
- Node.js (version 14 or higher)
- npm or Yarn
-
Clone the repository:
git clone https://github.com/mhmo91/reuse.git
-
Navigate to the project directory:
cd reuse -
Install dependencies:
Using npm:
npm installOr using Yarn:
yarn installStart the development server with hot module replacement:
Using npm:
npm run devUsing Yarn:
yarn devOpen your browser and navigate to http://localhost:3000.
Build the application for production:
Using npm: bash npm run build
Using Yarn: bash yarn build
The output will be in the dist directory.
├── src
│ ├── components
│ │ └── my-component.ts
│ └── main.ts
├── public
│ └── assets
├── tailwind.config.js
├── vite.config.ts
├── tsconfig.json
├── package.json
├── README.md
└── index.md
• src/: Main source directory.
• index.html: Entry HTML file.
• main.ts: Entry TypeScript file.
• public/: Static assets.
• tailwind.config.js: Tailwind CSS configuration.
• vite.config.ts: Vite configuration in TypeScript.
• tsconfig.json: TypeScript configuration.
• package.json: Project dependencies and scripts.
-
Customize the Template
• Update package.json with your project details. • Modify the README.md to reflect your project. • Customize the components in the src/components directory.
-
Add New Components
Create new components in the src/ directory using Lit:
import { LitElement, html, css, customElement } from 'lit'
@customElement('my-new-component')
export class MyNewComponent extends $litElement(
css`
/* Your styles here */
`,
) {
render() {
return html` <!-- Your template here -->`
}
}- Import Components
Import your components in index.ts:
import './components/my-new-component'- Use Components in HTML
Use your components in index.html:
<body>
<my-new-component></my-new-component>
</body>Contributing
Contributions are welcome! Please open an issue or submit a pull request.
License
This project is licensed under the MIT License.