NOVA Kit React - Component Library


A modern collection of reusable React UI components, layouts, and utility methods — built for fast and flexible development.

📚 Live documentation:

Click here to access the Storybook.

---

⚡️ Installation

Install with your preferred package manager:

``bash


npm

npm install nova-kit-react

yarn

yarn add nova-kit-react

pnpm

pnpm add nova-kit-react
`

⚙️ Prerequisites

Before using nova-kit-react, make sure your project meets the following requirements:

- React: ^18.0.0
- Node.js: >= 20 recommended
- Tailwind CSS: Strongly recommended for styling

➤ Tailwind CSS Installation Guide

TanStack Query: Used for data fetching and state management

➤ TanStack Query

React Hook Form: For form handling and validation

➤ React Hook Form

🚀 Usage

Here’s a quick example of how to use a component:

`tsx
import { Button } from 'nova-kit-react';

export default function Example() {
return (



);
}
`

🧪 Example: Form with React Hook Form

`tsx
import { useForm } from 'react-hook-form';
import { Input, Button } from 'nova-kit-react';

type FormData = {
email: string;
};

export default function ContactForm() {
const { register, handleSubmit, formState: { errors } } = useForm();

const onSubmit = (data: FormData) => {
console.log('Form submitted:', data);
};

return (



label="Email"
{...register('email', { required: 'Email is required' })}
error={errors.email?.message}
/>

Submit


);
}


``

✨ - Components

Browse the source code here.

🎨 Styling

This library is styled using Tailwind CSS.
Ensure it's correctly configured in your project to use nova-kit-react seamlessly.
Template is available here.

⭐️ - Background story

The name was inspired by the concept of a "nova" – a
stellar explosion that signifies a powerful and luminous burst of energy against
the dark backdrop of space. Just as a nova illuminates the cosmos, our library
aims to shine a light on best practices, modern sleek components and shared
layouts & utilities.

Nova is a React-based library. The concept of a "Supernova" – an even more powerful and transformative event - can transcend its initial form.
In the future the transition from Nova Kit to Supernova Kit could mark a pivotal moment in our journey by introducing a technology-agnostic library that can be used across different platforms.

---
Built and maintained with ❤️ by Sebastien Schaeffler - 2024