https://github.com/codenkoffee/uplift-ui
https://github.com/codenkoffee/uplift-ui
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codenkoffee/uplift-ui
- Owner: CodeNKoffee
- License: other
- Created: 2024-10-01T08:38:28.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-05T23:56:11.000Z (about 1 year ago)
- Last Synced: 2025-05-30T20:13:46.561Z (8 months ago)
- Language: TypeScript
- Size: 495 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# AnajUI
[](https://github.com/CodeNKoffee)
[](https://linkedin.com/in/h4temsoliman)
[](https://twitter.com/h4temsoliman)
[](https://hatemsoliman.dev)
## Introduction
**AnajUI** is a React component library offering customizable elements for landing pages, such as Hero sections, Features, and Footers. It empowers developers to build responsive, modern designs effortlessly, while maintaining flexibility and brand uniqueness.
## Supported React.js
This package supports React.js `18.2.0` and above.
## Installation
To install anaj-ui, simply run:
```bash
npm install anaj-ui
```
Or with Yarn:
```bash
yarn add anaj-ui
```
## Usage
### Navigation
To use the `Navigation` component from AnajUI, first import it into your React project:
```tsx
import { Navigation } from 'anaj-ui';
```
Then, you can use it in your component like so:
```tsx
const App = () => {
const navLinks = [
{ name: "Home", href: "/", isSpecial: false },
{ name: "About", href: "/about", isSpecial: false },
{ name: "Services", href: "/services", isSpecial: true, specialColor: "blue-500" },
{ name: "Contact", href: "/contact", isSpecial: false },
];
const logo = {
src: "/path/to/logo.png",
alt: "Logo Alt Text",
};
return (
{/* Other components */}
);
};
```
---
### Footer
To use the `Footer` component from AnajUI, first import it into your React project:
```tsx
import { Footer } from 'anaj-ui';
```
Then, you can use it in your component like so:
```tsx
import React from 'react';
import { Footer } from 'anaj-ui';
const App = () => {
const footerLinks = [
{
title: "Docs",
links: [
{
name: "Develop",
href: "/docs",
},
],
},
{
title: "Community",
links: [
{
name: "Feedback",
href: "mailto:packshipcli@gmail.com",
},
{
name: "LinkedIn",
href: "https://linkedin.com/in/h4temsoliman",
},
{
name: "GitHub",
href: "https://github.com/codenkoffee",
},
{
name: "X",
href: "https://x.com/h4temsoliman",
},
{
name: "Portfolio",
href: "https://hatemsoliman.dev",
},
],
},
{
title: "More",
links: [
{
name: "Purchase",
href: "#start-packshipping",
},
{
name: "Contact",
href: "mailto:packshipcli@gmail.com",
},
{
name: "Fund Me",
href: "https://paypal.me/h4temsoliman?country.x=EG&locale.x=en_US",
},
],
},
];
return (
);
};
export default App;
```
This example demonstrates how to integrate the `Footer` component from AnajUI into your application, providing a customizable footer for your website.
## Features
- Light and dark themes
- Versatile and customizable components
- Support for different types of content
## Contributing
Contributions are welcome! Please open an issue or submit a pull request to contribute to the AnajUI project.
## License
This project is licensed under the GPL-3.0 license.