cyberfuture v0.1.46
The Cyberfuture package provides several components for React that can be used to quickly and easily create styled and customizable user interfaces.
All of these components can be customized using CSS variables or by passing in props to modify their appearance and behavior. By using the Cyberfuture package, developers can save time and effort when building user interfaces and create more visually appealing and engaging experiences for their users.
CyberButton Component
The CyberButton component is a customizable button with an animated clip-path effect. It receives a text prop, which sets the text that appears inside the button.
Props
text string Yes - The text that appears inside the button.
import { CyberButton } from 'cyberfuture';
function App() {
return (
<div>
<CyberButton text="Click me!" />
</div>
);
}
Customization
The CyberButton component can be customized by modifying the following CSS variables:
CSS Variable Default Value Description
.Cyber-green-button {
--cyber-button-color: #000;
--cyber-button-background: linear-gradient(106deg, #ff296d 8%, #8e52f5 44%, #95f11c 87%);
}
Additional Notes
The CyberButton component is part of a larger theme object that contains additional colors and text styles. These can be used to further customize the component and the app as a whole.
Card Component
A styled card component for React with customizable styles and a responsive layout. It includes a title, body, and footer, and can be used in various scenarios such as displaying product information or showcasing team members.
Usage
import { Card } from "cyberfuture";
<Card
title="Card Title"
body={<div>Card Body</div>}
end={<div>Card Footer</div>}
variant="Matrix"
background="#333333"
/>
Props
title
(string, required)
The title of the card.
body
(React node, required)
The content of the card body.
end
(React node)
The content of the card footer.
variant
(string)
The variant of the card style. Can be one of the following:
- Matrix
- Rose
- Punk
- Gold
background
(string)
The background color of the card. Defaults to rgba(17, 25, 40, 0.75).
CardCarousel Component
A variation of the Card component that includes a horizontal carousel of card body items.
Usage
import { CardCarousel } from "cyberfuture";
<CardCarousel
title="Carousel Title"
end={<div>Carousel Footer</div>}
variant="Matrix"
background="#333333"
/>
Props
title
(string, required)
The title of the card.
end
(React node)
The content of the card footer.
variant
(string)
The variant of the card style. Can be one of the following:
- Matrix
- Rose
- Punk
- Gold
background
(string)
The background color of the card. Defaults to rgba(17, 25, 40, 0.75).
CyberInput Component
The CyberInput component is a reusable React input component with an optional label. It renders an HTML input element with a label if the label prop is provided.
Props
The component accepts the following props:
type
(string, optional, default "text"): the type of the input element, such as "text", "password", etc.
label
(string, optional): the label to display for the input element.
value
(string): the value of the input element.
Example Usage
import React, { useState } from "react";
import { CyberInput } from "cyberfuture";
const MyForm = () => {
const [username, setUsername] = useState("");
const handleUsernameChange = (event) => {
setUsername(event.target.value);
};
return (
<form>
<CyberInput
type="text"
label="Username"
value={username}
onChange={handleUsernameChange}
/>
</form>
);
};
In this example, the CyberInput component is used inside a form. The type prop is set to "text", the label prop is set to "Username", and the value prop is set to the value of the username state variable. The onChange prop is also provided to handle changes to the input element.
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago