ShadcnVaults - GitLite

KO | EN

gitlite — search

#javascript #react #typescript #golang #deep-learning #linux #docker #nodejs #java #cli #vue #awesome-list #mcp #open-source

ShadcnVaults

(★ 81)

Collection of blocks for Internal Tools UI built on top of shadcn/ui

파일 탐색기

최종 버전 다운로드 (.zip)

- settings.json
- file.svg
- globe.svg
- next.svg
- og-image.png
- vercel.svg
- window.svg
- - favicon.ico
  - globals.css
  - layout.tsx
  - page.tsx
- - block-component-not-found.tsx
  - block-details-client.tsx
  - codeblock.tsx
  - command-palette-navigation.tsx
  - copy.tsx
  - dots-background.tsx
  - license.tsx
  - responsive-preview.tsx
  - theme-provider.tsx
  - theme-toggle.tsx
- - use-click-outside.tsx
  - use-mobile.ts
- - block-source.ts
  - block-utils.ts
  - getBaseURL.ts
  - icons_data.tsx
  - static-block-data.ts
  - utils.ts
.gitignore
components.json
CONTRIBUTING.md
LICENSE
LICENSE.components
next.config.ts
package-lock.json
package.json
postcss.config.mjs
README.md
RESPONSIVE_PREVIEW_GUIDE.md
tailwind.config.ts
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <h1>ShadcnUI Vaults</h1>
</div>

<br />

ShadcnUI Vaults is a collection of various interactive components & blocks for Internal Tools UI like Dashboard, Monitoring, Admin, CMS, and more. The blocks are built with Tailwind CSS and ShadCN/UI, and are fully customizable, responsive, and accessible.

![ShadcnUI_Vaults16x9](https://github.com/user-attachments/assets/82855d40-1d96-4120-a57e-cd1e2d3e5029)

<div align="center">
  <a href="https://shipwrecked.hackclub.com/?t=ghrm" target="_blank">
    <img src="https://hc-cdn.hel1.your-objectstorage.com/s/v3/739361f1d440b17fc9e2f74e49fc185d86cbec14_badge.png" 
         alt="This project is part of Shipwrecked, the world's first hackathon on an island!" 
         style="width: 35%;">
  </a>
</div>

## Features

- **Block Library**
  - Hero sections and landing page headers
  - Dashboard bills and billing UI blocks
- **Copy & Paste**
  - Instantly copy code for any block and use it in your own project.
- **Customization**
  - Built with Tailwind CSS and ShadCN/UI for easy customization of colors, spacing, and style.
- **Production Ready**
  - All blocks are responsive, accessible, and optimized for real-world use.
- **Modern Stack**
  - Built with Next.js, React, Tailwind CSS, and ShadCN/UI components.

## Block Categories

- **Hero**: Hero sections and landing page headers.
- **Dashboard Bills**: Dashboard UI for billing and subscription management.

## Getting Started

1. Install dependencies:
   ```bash
   npm install
   ```
2. Run the development server:
   ```bash
   npm run dev
   ```
   Open [http://localhost:3000](http://localhost:3000) in your browser.

## How to Use

- Browse the available block categories on the homepage.
- Click on a category to view all blocks in that section.
- Preview blocks visually (with images or videos).
- Click to copy the code for any block and paste it into your own project.

## Tech Stack

- Next.js
- React
- Tailwind CSS
- ShadCN/UI
- Radix UI
- TypeScript

## Customization

All blocks are built with utility-first Tailwind CSS classes and ShadCN/UI components, making them easy to adapt to your brand and needs.

## Contributing

Contributions are welcome! Feel free to open issues or pull requests. Please read [CONTRIBUTING.md](CONTRIBUTING.md) for the guide on how you submit a new block or new category block.

## Contributors

Thanks to these amazing contributors ✨

- [@Aldhanekaa](https://github.com/Aldhanekaa) – Creator & Maintainer
- [@milogodoy](https://github.com/milogodoy) – Component Contributor

<a href="https://github.com/Aldhanekaa/ShadcnVaults/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=Aldhanekaa/ShadcnVaults" />
</a>

## Incoming Blocks (Planned)

The following UI blocks are planned for future addition:

- **Users Table**: Display and manage user data in a sortable, filterable table.
- **Empty State**: Friendly UI for when there is no data to show.
- **Loading Screen**: Animated loading indicators and skeleton screens.
- **ToDo List**: Task management UI with add, check, and delete features.
- **Notifications Panel**: List of notifications or alerts for users.
- **Profile Card**: User profile summary with avatar, name, and actions.
- **Settings Form**: Editable form for user or app settings.
- **Activity Feed**: Timeline of recent actions or events.
- **Error State**: UI for displaying errors or failed actions.
- **Pagination Controls**: Navigation for paginated data sets.
- **Search Bar**: Search input with suggestions and results dropdown.
- **Modal Dialogs**: Pop-up dialogs for confirmations or forms.
- **Sidebar Navigation**: Vertical navigation menu for dashboards.
- **Stats Overview**: Summary cards for key metrics or analytics.
- **Kanban Board**: Drag-and-drop task management board.

Have an idea for a new block? [Open an issue or PR!](#contributing)