🧩 SnappyKit UI

SnappyKit UI is a lightweight React component library built with TypeScript and inline styles. It offers essential UI elements with customizable color variants — perfect for modern web apps without the overhead of external styling frameworks.

🚀 Features

• 🔧 Built with TypeScript for strong typings
• 🎨 Centralized color system (COLORS) for consistent theming
• 🧱 Essential UI components: Button, IconButton, TextField, SelectField, TextareaField, Pagination, and more
• ✨ Easy to compose and extend
• 📦 No external CSS frameworks (no Tailwind, no styled-components)
• 💡 Supports states like error, loading, disabled, readOnly, and floatingLabel

📦 Installation

npm install snappykit-ui
# or
yarn add snappykit-ui

🧪 Basic Usage

import React, { useState } from "react";
import { Button, TextField, SelectField } from "snappykit-ui";

function App() {
  const [form, setForm] = useState({ name: "", role: "" });

  const handleChange = ({ name, value }: { name: string; value: string }) => {
    setForm((prev) => ({ ...prev, [name]: value }));
  };

  return (
    <>
      <TextField
        label="Name"
        name="name"
        value={form.name}
        onChange={handleChange}
        floatingLabel
      />

      <SelectField
        label="Role"
        name="role"
        value={form.role}
        onChange={handleChange}
        options={[
          { label: "Developer", value: "dev" },
          { label: "Designer", value: "design" },
        ]}
        floatingLabel
      />

      <Button label="Submit" onClick={() => alert("Submitted")} />
    </>
  );
}

🎨 Color Variants

All components support the following color options via the color prop:

• primary (default)
• secondary
• success
• danger
• dark
• light

You can customize the appearance of components like this:

<Button label="Danger" color="danger" />
<TextField label="Name" color="secondary" />
<IconButton icon={<EditIcon />} color="success" />

📃 License

MIT © 2025 Jean Carlos Lerma Rojas