https://github.com/yashkolte/carbon_nextjs
This project is a Login and Dashboard UI built using Next.js, TypeScript, and Carbon Design System. It includes visually appealing components and icons from Carbon Design System to provide a modern and professional look.
https://github.com/yashkolte/carbon_nextjs
carbon-design-system nextjs typescript
Last synced: 2 months ago
JSON representation
This project is a Login and Dashboard UI built using Next.js, TypeScript, and Carbon Design System. It includes visually appealing components and icons from Carbon Design System to provide a modern and professional look.
- Host: GitHub
- URL: https://github.com/yashkolte/carbon_nextjs
- Owner: yashkolte
- Created: 2025-03-12T11:39:55.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-03-19T06:22:36.000Z (3 months ago)
- Last Synced: 2025-03-19T07:28:20.039Z (3 months ago)
- Topics: carbon-design-system, nextjs, typescript
- Language: TypeScript
- Homepage:
- Size: 3.69 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Next.js Carbon UI
This project is a **Login and Dashboard UI** built using **Next.js, TypeScript, and Carbon Design System**. It includes visually appealing components and icons from Carbon Design System to provide a modern and professional look.
## ✨ Features
- 🌟 **Next.js 14** - Fast and optimized React framework.
- 🛠️ **TypeScript** - Type safety and better development experience.
- 🎨 **Carbon Design System** - IBM’s design system for a sleek UI.
- 🔒 **Login Page UI** - Well-structured and responsive login form.
- 📊 **Dashboard UI** - A clean and interactive dashboard layout.
- 📱 **Responsive Design** - Works on desktop and mobile.
## 📂 Project Structure
```
📦 nextjs-carbon-ui
├── 📂 public # Static assets
├── 📂 src
│ ├── 📂 components # Reusable UI components
│ │ └── 📜 Form.tsx # Login form component
│ ├── 📂 styles # Global styles and Carbon overrides
│ └── 📂 pages # Next.js pages (login, dashboard)
│ ├── 📂 dashboard # Next.js pages (dashboard)
│ └── 📜 index.tsx # Main index entry point
├── 📜 package.json # Dependencies and scripts
├── 📜 README.md # Project documentation
└── 📜 tsconfig.json # TypeScript configuration
```
## 🏗️ Installation & Setup
1. **Clone the repository:**
```sh
git clone https://github.com/yashkolte/carbon_nextjs.git
cd carbon_nextjs
```
2. **Install dependencies:**
```sh
npm install
# or
yarn install
```
3. **Run the development server:**
```sh
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to see the UI.
## 📦 Dependencies
- **Next.js** - Framework for server-side rendering.
- **TypeScript** - Adds type safety.
- **Carbon Design System** - IBM's design system.
## 🚀 Deployment
To deploy the application, you can use Vercel:
```sh
npm run build
vercel
```
## 📜 License
This project is licensed under the **MIT License**.
## 🙌 Contributing
Contributions are welcome! Feel free to open an issue or submit a pull request.
---
🚀 Built with ❤️ using Next.js and Carbon Design System.