.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> 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.
> 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:
-
backgroundImage: URL of the background image -
size: Size of the card (small,medium,large) -
color: Text color -
variant: Variant of the card (e.g.,primary)