Sxkit NPM | npm.io

.sxkit

Description

.sxkit is a versatile collection of reusable React components designed to simplify UI development. It offers a wide range of components with customizable props, empowering developers to swiftly create visually appealing and responsive user interfaces.

You can install .sxkit via npm:

    npm install sxkit

UI Components
- Editable Button Variants

UI Components

Button

> component for React custom buttons.

import React from "react";
import { Button } from "sxkit";

const App = () => {
  return (
    <div>
      <Button color="blue" size="large">
        Click me
      </Button>
    </div>
  );
};

export default App;

> Note: Button colors may vary based on the theme applied. If no theme is specified, the default theme (dark) will be used.

Card

> Component for React custom cards, including Header, Body, and Footer sub-components.

import React from "react";
import { Card, Header, Body, Footer } from "sxkit";

const App = () => {
  return (
    <div className="app">
      <Card
        backgroundImage="https://via.placeholder.com/150"
        size="large"
        color="white"
        variant="primary"
      >
        <Header>Daily Mix</Header>
        <Body>
          <h1>Frontend Radio</h1>
          <p>Your daily dose of music</p>
        </Body>
        <Footer>Available Soon</Footer>
      </Card>
    </div>
  );
};

export default App;

> Note: The Card component supports several props to customize its appearance: