Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bogaralex135/moderncomponents
https://github.com/bogaralex135/moderncomponents
Last synced: 26 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/bogaralex135/moderncomponents
- Owner: Bogaralex135
- Created: 2024-01-17T02:34:19.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-01-17T23:51:50.000Z (10 months ago)
- Last Synced: 2024-09-23T07:38:22.636Z (about 2 months ago)
- Language: TypeScript
- Size: 63.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modern Components
Experience the evolution in web development with our React component library designed to deliver a unique and modern user interface development experience. With a focus on customization and seamless integration, our library offers a wide variety of components to elevate the aesthetics and functionality of your applications.
Key Features:
- Customizable Components: Each component has been meticulously designed to offer a high degree of customization. From backgrounds to text effects, you can tailor each element to perfectly fit your creative vision.
- Scroll-based Animations: Add dynamism to your applications with animations that respond to user scrolling. Create immersive and captivating experiences with smooth transitions and visually appealing effects.
- Attractive Backgrounds: Transform the look of your components and pages with eye-catching backgrounds. From subtle gradients to intricate patterns, our library provides a wide range of options to customize the aesthetics of your projects.
- Compatibility with Tailwind and Vanilla CSS: We adapt to your workflow. Whether you prefer the concise structure of Tailwind CSS or the flexibility of Vanilla CSS, our library effortlessly integrates into both environments, providing a seamless development experience.
## Usage/Examples
```javascript
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure dolorum iste,
atque ab, ipsam tempore vero molestiae quasi tenetur velit fuga ad incidunt,
eaque exercitationem aut? Ipsum esse consectetur natus!
```
| Prop | Description | Type |
| -------------- | -------------------------------------------- | ------- |
| children | The content to be revealed. | String |
| textColor | The color of the text. | Colors |
| bgTextColor | The color of the background text. | Colors |
| gradient | Whether to use a gradient background. | Boolean |
| gradientColor1 | The first color of the gradient background. | Colors |
| gradientColor2 | The second color of the gradient background. | Colors |
```javascript
```
| Props | Description | Type |
| --------- | --------------------------------------------------------------- | ------------------- |
| size | The size of the grid. Default is md. | sm, md, lg, xl, 2xl |
| color | The color of the grid. Default is white. | Colors |
| gridColor | The color of the grid lines. Default is semi-transparent black. | Colors |
## Types
**CssColor:** Any value of vanilla css Color
**TailwindColor:** Values like "bg-white" or "text-sky-400"
**Colors:** Combination of CssColor and TailwindColor
## Authors
- [Bogar Alejandro Vazquez Mata](https://github.com/Bogaralex135)