https://github.com/amruthlp12/shadcnui-addon
Enhance your projects with our extended shadcn/ui component library. Free, customizable, and ready for your next application.
https://github.com/amruthlp12/shadcnui-addon
addons components first-issue good-first-issue nextjs15 open-source open-source-project react19 shadcn-addons shadcn-ui typescript ui-components
Last synced: 9 months ago
JSON representation
Enhance your projects with our extended shadcn/ui component library. Free, customizable, and ready for your next application.
- Host: GitHub
- URL: https://github.com/amruthlp12/shadcnui-addon
- Owner: AmruthLP12
- Created: 2024-12-26T08:32:25.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-30T16:12:37.000Z (over 1 year ago)
- Last Synced: 2025-03-28T23:43:35.878Z (over 1 year ago)
- Topics: addons, components, first-issue, good-first-issue, nextjs15, open-source, open-source-project, react19, shadcn-addons, shadcn-ui, typescript, ui-components
- Language: TypeScript
- Homepage: https://shadcnui-addon.vercel.app
- Size: 287 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# shadcnui-addon
## Goal
A collection of UI helper components and demos built on top of [shadcn/ui], Next.js, Tailwind, and Radix UI.
This project makes it easier for new users to explore plug-and-play components with working examples.
## Project Overview
The shadcnui-addon is an extension of the [shadcn/ui](https://github.com/shadcn-ui/ui) component library, offering additional free and customizable components to enhance your projects. Built with Next.js and TypeScript, this library aims to provide developers with ready-to-use components that can be easily integrated into applications. ([github.com](https://github.com/AmruthLP12/shadcnui-addon))
## Installation Instructions
You need Node.js 18+ (latest LTS recommended).
# clone your fork
git clone https://github.com/AmruthLP12/shadcnui-addon.git
cd shadcnui-addon
# install dependencies
Depending on your package manager, run one of the following commands:
- Using npm:
```bash
npm install
```
- Using yarn:
```bash
yarn install
```
- Using pnpm:
```bash
pnpm install
```
- Using bun:
```bash
bun install
'''
# run dev server
Depending on your package manager, run one of the following commands:
- Using npm:
```bash
npm run dev
```
- Using yarn:
```bash
yarn dev
```
- Using pnpm:
```bash
pnpm dev
```
- Using bun:
```bash
bun dev
```
Open your browser and navigate to [http://localhost:3000](http://localhost:3000) to view the application.
## Technologies Used
- **Next.js**
- **TypeScript**
- **Tailwind CSS**
- **Radix UI**
## What’s included
AnimatedProgressBar — animated progress bar with configurable color, height and duration
BackgroundOverlayCard — card component with a background image overlay and content slot
InvoiceTable — a responsive invoice / table layout example
KanbanBoard — small kanban-style board with drag/drag-like UI (no real persistence)
API Route — /app/api/component-code returns component source code (example: /api/component-code?component=AnimatedProgressBar).
## Development notes
Node 18+ recommended.
npm run dev starts Next.js in dev mode.
npm run build builds for production.
The small API route at /app/api/component-code/route.ts exposes file contents for severalcomponents — helpful for example pages
## Adding screenshots
Save images to /public/images/ (create the folder if missing).
Use markdown in README: 
## Contributing
Contributions are welcome! If you have suggestions for new components, improvements, or bug fixes, please open an issue or submit a pull request. For major changes, it's recommended to discuss them first to ensure alignment with the project's goals.
## How to contribute
1. Fork the repo (you already have a fork).
2. Create a feature branch:
git checkout -b enhance/readme-issue-5
3. Make your edits (e.g., README).
4. Commit with a clear message:
git commit -m "docs: improve README for clarity — closes #5"
## License
This project is licensed under the MIT License.