FireSpark🚀🔥

FireSpark is a blazing-fast, modern, and highly customizable component-based library for web development. Built on top of SparkCSS, FireSpark provides a seamless development experience with a combination of utility-first design, reusable UI components, and a powerful design system.

With FireSpark, developers can create consistent, scalable, and responsive UIs with minimal effort. Its lightweight, modular structure allows you to import only the components you need, ensuring optimal performance and file size.

✨ Features

• ⚡ Blazing-Fast | Lightweight, modular components for optimal load times.
• 🛠️ Reusable Components | Buttons, modals, cards, navbars, and more.
• ♿ Accessible by Default | Components follow best practices for accessibility (ARIA support).

Installation🚀

To get started with FireSpark, you can install is with npm:

npm install firesparkdev --save-dev

or if you prefer yarn

yarn add firesparkdev

⚠️ Important: FireSpark relies on Tailwind CSS v3.4 or higher. Make sure Tailwind is installed and properly configured in your project before using FireSpark components.

Usage⚙️

Here’s a quick example of how to use FireSpark’s Button component in a React application:

import { Button } from 'firesparkdev';

function App() {
  return (
    <div>
      <Button variant="primary" onClick={() => alert('Hello, World!')}>
        Click Me
      </Button>
      <Button variant="secondary">
        Secondary Button
      </Button>
    </div>
  );
}

export default App;

How it works

1. Import the components you need from FireSpark import { Button } from 'firesparkdev'.

2. Add the FireSpark components like <Button /> <Modal />, and <Card /> to name a few.

3. Customize the components to your liking by passing in props like variant size, or disabled for example.

Development Setup🛠️

FireSpark is open-source so we welcome contributions from the community! If you want to contribute to FireSpark, follow these instructions to set up your development environment:

• Clone the repository.

git clone https://github.com/your-username/firespark.git

• Navigate to the project directory

cd firespark

• Install Dependencies

npm install

• Start the development server

npm run dev

You can now edit components in the /src/components/ folder. The development server will hot-reload changes automatically.

Contributing🤝

Follow these instructions to to learn how to contribute to a component:

• Fork the repo and create your branch

git checkout -b feature/new-component

• Make your changes and commit

git commit -m "Add new component"

• Push to the branch and submit a Pull Request

We’ll review your changes and work together to improve FireSpark for everyone.

License

FireSpark is licensed under the MIT License, meaning it’s free to use in personal and commercial projects

Contact

We're here to support you! If you have any questions, need assistance, or want to report a bug, please reach out using one of the options below:

• 🐛 Report Issues | GitHub Issues (Update this link)

• 📧 Email | Contact Us

Special thanks to the developers, maintainers, and contributors who support the development of FireSpark. Your dedication ensures it stays blazing fast, flexible, and easy to use. We’re excited to see what you build with FireSpark!

"Small Spark, Big Fire: UI finally made simple" -n8