# Technical Documentation: ln-dev7/square-ui > ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/ln-dev7/square-ui) ### Overview (`README.md`) # Square UI Square UI is a collection of free, open-source admin dashboard templates for [shadcn/ui](https://ui.shadcn.com/). The layouts are built with Next.js and Tailwind CSS, and each one is a complete starting point you can clone, copy, and ship — dashboards, email, chat, calendars, file managers, and more. Browse the live catalog at [square.lndevui.com](https://square.lndevui.com). **Want the Pro collection?** [Shadcn Dashboard](https://shadcndashboard.com) has 20+ more premium shadcn admin templates — commercial license, full pages, and lifetime updates. ## Free Templates > **Note:** Templates using Radix UI are located in `templates/`, while templates using Base UI are in `templates-baseui/`. | Template | Description | Live Demo | GitHub (Radix UI) | GitHub (Base UI) | Design | | ----------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------- | | **Habit Tracker** | Beautiful habit tracking app with streaks, contribution heatmap, statistics, and daily completion tracking. | [View Demo](https://square-ui-habit-tracker.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/habit-tracker) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/habit-tracker) | [LN](https://x.com/ln_dev7) | | **Marketing Dashboard** | Creator marketing dashboard with campaigns, analytics, views chart, and recent uploads management. | [View Demo](https://square-ui-marketing-dashboard.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/marketing-dashboard) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/marketing-dashboard) | [Augustas](https://x.com/AugustasDesign) | | **Dashboard 5** | Modern dashboard with stats, today's tasks, performance chart, and projects table. | [View Demo](https://square-ui-dashboard-5.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/dashboard-5) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/dashboard-5) | [LN](https://x.com/ln_dev7) | | **Rentals** | Modern rental property platform with interactive map, property listings, filters, and search. | [View Demo](https://square-ui-rentals.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/rentals) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/rentals) | [LN](https://x.com/ln_dev7) | | **Bookmarks** | Modern bookmarks manager with collections, tags, favorites, archive, and trash. | [View Demo](https://square-ui-bookmarks.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/bookmarks) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/bookmarks) | [LN](https://x.com/ln_dev7) | | **Maps** | Modern maps dashboard with location search, favorites, recents, and interactive map controls. | [View Demo](https://square-ui-maps.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/maps) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/maps) | [LN](https://x.com/ln_dev7) | | **Files** | Modern file manager with folders, storage overview, file grid/list view, and navigation. | [View Demo](https://square-ui-files.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/files) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/files) | [LN](https://x.com/ln_dev7) | | **Dashboard 4** | Modern dashboard with workgroups, multi-line leads chart, top performers, and lead management table. | [View Demo](https://square-ui-dashboard-4.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/dashboard-4) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/dashboard-4) | [Augustas](https://x.com/AugustasDesign) | | **Leads** | Modern leads management dashboard with statistics, charts, and data table with filters. | [View Demo](https://square-ui-leads.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/leads) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/leads) | [Rico](https://x.com/_heyrico) | | **Dashboard 3** | Modern HR dashboard with financial flow chart, employee list with filters, and layout customization. | [View Demo](https://square-ui-dashboard-3.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/dashboard-3) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/dashboard-3) | [Rico](https://x.com/_heyrico) | | **Dashboard 2** | Modern CRM dashboard with revenue charts, lead sources, deals table with pagination, and filters. | [View Demo](https://square-ui-dashboard-2.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/dashboard-2) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/dashboard-2) | [Rico](https://x.com/_heyrico) | | **Employees** | Modern employee management dashboard with statistics, hire/exit charts, and data table. | [View Demo](https://square-ui-employees.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/employees) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/employees) | [Rico](https://x.com/_heyrico) | | **Payrolls** | Modern payroll management dashboard with expense charts, filters, and data table. | [View Demo](https://square-ui-payrolls.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/payrolls) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/payrolls) | [Rico](https://x.com/_heyrico) | | **Tasks** | Modern task management dashboard with statistics, charts, and kanban board. | [View Demo](https://square-ui-tasks.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/tasks) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/tasks) | [Rico](https://x.com/_heyrico) | | **Projects Timeline** | Timeline interface for managing projects. | [View Demo](https://square-ui-projects-timeline.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/projects-timeline) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/projects-timeline) | [Rico](https://x.com/_heyrico) | | **Calendar** | Modern calendar interface with week view, event management, and scheduling. | [View Demo](https://square-ui-calendar.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/calendar) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/calendar) | [Rico](https://x.com/_heyrico) | | **Dashboard** | Modern dashboard interface with statistics, charts, people table, and recent documents. | [View Demo](https://square-ui-dashboard-1.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/dashboard-1) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/dashboard-1) | [Augustas](https://x.com/AugustasDesign) | | **Chat** | Modern AI chat interface with conversation history and intelligent assistant. | [View Demo](https://square-ui-chat.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/chat) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/chat) | [Rico](https://x.com/_heyrico) | | **Emails** | Modern email client interface with inbox, folders, and email details. | [View Demo](https://square-ui-emails.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/emails) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/emails) | [Rico](https://x.com/_heyrico) | | **Task Management** | Simple board interface for managing tasks. | [View Demo](https://square-ui-task-management.vercel.app) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates/task-management) | [Source](https://github.com/zerostaticthemes/square-ui/tree/master/templates-baseui/task-management) | [Rico](https://x.com/_heyrico) | ## Pro Templates These are the [Shadcn Dashboard](https://shadcndashboard.com) Pro templates — commercial license, Radix + Base UI variants, full pages, and lifetime updates. | Template | Description | Live Demo | Get Pro | | --- | --- | --- | --- | | **Shadcn Admin** | A premium multi-app admin dashboard with 5 complete applications and 145+ pages. | [View Demo](https://shadcnblocks-admin.vercel.app) | [Get Pro](https://shadcndashboard.com/templates/admin) | | **Circle** | A Linear-grade project hub for ambitious teams. | [View Demo](https://square-ui-circle-baseui.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/circle-baseui) | | **Nexus** | A Notion-inspired connected workspace with editable pages, teamspaces and AI. | [View Demo](https://square-ui-nexus.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/nexus) | | **Sojourn** | An Airbnb-inspired travel marketplace with interactive maps, stays, experiences and services. | [View Demo](https://square-ui-sojourn.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/sojourn) | | **Axiom** | A Claude-inspired AI chat workspace with projects, skills and connectors. | [View Demo](https://square-ui-axiom.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/axiom) | | **Tribune** | A refined social-conversation client inspired by Threads. | [View Demo](https://square-ui-tribune.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/tribune) | | **Mainline** | A polished GitHub-inspired source-hosting and collaboration dashboard. | [View Demo](https://square-ui-mainline.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/mainline) | | **Skyport** | A live air-traffic and flight operations dashboard. | [View Demo](https://square-ui-skyport.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/skyport) | | **Vault** | A polished file storage and team collaboration hub. | [View Demo](https://square-ui-vault.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/vault) | | **Régate** | A yacht regatta and sailing operations console. | [View Demo](https://square-ui-regate.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/regate) | | **Atelier** | A producer-grade music studio dashboard with sound built in. | [View Demo](https://square-ui-atelier.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/atelier) | | **Cookbook** | A recipe dashboard that earns its place in the kitchen. | [View Demo](https://square-ui-cookbook.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/cookbook) | | **Inventory** | A product and orders dashboard built to ship. | [View Demo](https://square-ui-inventory.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/inventory) | | **Cellar** | A connoisseur's wine cellar, organized at last. | [View Demo](https://square-ui-cellar.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/cellar) | | **Contacts** | A modern contact book that actually keeps up. | [View Demo](https://square-ui-contacts.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/contacts) | | **Vellum** | A refined library for rare books and antiquarian collections. | [View Demo](https://square-ui-vellum.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/vellum) | | **Maestro** | A chamber-orchestra operations console. | [View Demo](https://square-ui-maestro.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/maestro) | | **Media Vault** | A gallery-first media library for visual teams. | [View Demo](https://square-ui-media-vault.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/media-vault) | | **Finance Tracker** | A personal finance dashboard you actually want to open. | [View Demo](https://square-ui-finance-tracker.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/finance-tracker) | | **Notes App** | A focused, fast note-taking app, polished end-to-end. | [View Demo](https://square-ui-notes.vercel.app/) | [Get Pro](https://shadcndashboard.com/templates/notes) | [Browse all Pro templates on Shadcn Dashboard →](https://shadcndashboard.com/templates) ## 🛠️ Technologies - **Framework**: [Next.js](https://nextjs.org/) - **Langage**: [TypeScript](https://www.typescriptlang.org/) - **UI Components**: [shadcn/ui](https://ui.shadcn.com/) - **Styling**: [Tailwind CSS](https://tailwindcss.com/) ## Star History Star History Chart ## Powered by Shadcnblocks.com Also see [Shadcnblocks](https://www.shadcnblocks.com/) for 2000+ shadcn/ui blocks and components. --- ### Overview (`home/scripts/README.md`) # Scripts de Migration du Registry Ce dossier contient les scripts utilitaires pour gérer et maintenir les fichiers JSON du registry. ## 📋 Scripts disponibles ### `add-content-to-registry.js` Script principal qui ajoute automatiquement le champ `content` aux fichiers JSON du registry. Ce champ contient le contenu complet des fichiers référencés par les URLs GitHub. ## 🚀 Utilisation ### Commande de base ```bash cd home node scripts-migration/add-content-to-registry.js ``` ### Options disponibles | Option | Raccourci | Description | |--------|-----------|-------------| | `--help` | `-h` | Affiche l'aide intégrée | | `--verbose` | `-v` | Mode verbeux (affiche tous les détails) | | `--dry-run` | `-d` | Mode simulation (ne modifie rien) | | `--force` | `-f` | Force la mise à jour même si `content` existe déjà | ### Exemples d'utilisation #### 1. Exécution normale Ajoute le champ `content` aux nouveaux fichiers JSON qui n'en ont pas encore. ```bash node scripts-migration/add-content-to-registry.js ``` #### 2. Mode simulation (dry-run) Voir ce qui sera fait sans modifier les fichiers. ```bash node scripts-migration/add-content-to-registry.js --dry-run ``` #### 3. Mode verbeux Afficher tous les détails de traitement, y compris les fichiers déjà à jour. ```bash node scripts-migration/add-content-to-registry.js --verbose ``` #### 4. Forcer la mise à jour Mettre à jour tous les fichiers, même ceux qui ont déjà un `content`. ```bash node scripts-migration/add-content-to-registry.js --force ``` #### 5. Combinaison d'options Combiner plusieurs options pour un contrôle total. ```bash # Simulation avec détails node scripts-migration/add-content-to-registry.js --dry-run --verbose # Mise à jour forcée avec détails node scripts-migration/add-content-to-registry.js --force --verbose ``` ## 📖 Comment ça fonctionne ### Processus 1. **Détection automatique** : Le script parcourt automatiquement tous les fichiers `.json` dans `home/public/registry/` 2. **Validation** : Chaque fichier JSON est validé avant traitement 3. **Traitement** : Pour chaque fichier JSON : - Parcourt le tableau `files` - Extrait les `path` qui pointent vers GitHub (`https://raw.githubusercontent.com/ln-dev7/square-ui/master/templates/...`) - Convertit l'URL GitHub en chemin local (`templates/...`) - Lit le contenu du fichier local - Ajoute le champ `content` avec le contenu complet 4. **Sauvegarde** : Les fichiers JSON sont mis à jour avec le nouveau champ `content` ### Format du champ `content` Le champ `content` est ajouté juste après le champ `path` dans chaque entrée du tableau `files` : ```json { "files": [ { "path": "https://raw.githubusercontent.com/ln-dev7/square-ui/master/templates/chat/components/chat/chat-input-box.tsx", "type": "registry:component", "target": "components/chat-input-box.tsx", "content": "import { ... } from \"lucide-react\";\n..." } ] } ``` ## 📊 Statistiques Le script affiche un résumé détaillé après l'exécution : ``` 📊 RÉSUMÉ ============================================================ 📁 Fichiers JSON: Total: 22 Traités: 22 Mis à jour: 0 Déjà à jour: 22 Ignorés: 0 Erreurs: 0 📄 Fichiers de contenu: Total: 89 Ajoutés: 0 Déjà présents: 89 Introuvables: 0 Erreurs: 0 ``` ## ⚠️ Gestion des erreurs Le script gère plusieurs types d'erreurs : - **JSON invalide** : Fichier JSON mal formé - **Fichier introuvable** : Le fichier référencé n'existe pas localement - **Erreur de lecture** : Impossible de lire le fichier - **Erreur d'écriture** : Impossible de sauvegarder le JSON Toutes les erreurs sont affichées dans le résumé avec les détails nécessaires pour le débogage. ## 🔄 Workflow recommandé ### Ajouter un nouveau composant au registry 1. Créer le fichier JSON dans `home/public/registry/` 2. Ajouter les `path` avec les URLs GitHub 3. Exécuter le script : ```bash node scripts-migration/add-content-to-registry.js ``` Le script détectera automatiquement le nouveau fichier et ajoutera le `content` pour tous les fichiers référencés. ### Vérifier avant de commiter Avant de commiter vos changements, utilisez le mode dry-run pour vérifier : ```bash node scripts-migration/add-content-to-registry.js --dry-run --verbose ``` ## 📁 Structure des fichiers ``` home/ ├── scripts-migration/ │ ├── add-content-to-registry.js # Script principal │ ├── copy-registry-files.js # Script de copie (ancien) │ ├── verify-registry.js # Script de vérification (ancien) │ └── README.md # Cette documentation ├── public/ │ └── registry/ # Fichiers JSON du registry │ ├── chat.json │ ├── chat-input-box.json │ └── ... └── templates/ # Templates source ├── chat/ ├── emails/ └── task-management/ ``` ## 🛠️ Prérequis - Node.js (version 12 ou supérieure) - Accès au répertoire `templates/` avec les fichiers sources ## 💡 Conseils - **Utilisez `--dry-run`** avant de faire des modifications importantes - **Utilisez `--verbose`** pour déboguer les problèmes - **Utilisez `--force`** avec précaution, seulement si vous voulez vraiment tout mettre à jour - Le script est **idempotent** : vous pouvez l'exécuter plusieurs fois sans problème ## 🐛 Dépannage ### Le script ne trouve pas les fichiers Vérifiez que : - Les fichiers existent dans `templates/` - Les URLs GitHub dans les JSON sont correctes - Le format de l'URL correspond à : `https://raw.githubusercontent.com/ln-dev7/square-ui/master/templates/...` ### Le script ne met pas à jour certains fichiers - Vérifiez que les fichiers ont bien un tableau `files` - Vérifiez que les `path` commencent par l'URL GitHub correcte - Utilisez `--verbose` pour voir les détails - Utilisez `--force` si le `content` existe déjà et que vous voulez le mettre à jour ## 📝 Notes - Le script préserve le formatage JSON existant (indentation de 2 espaces) - Les fichiers sont triés alphabétiquement pour un traitement cohérent - Le script ignore automatiquement les fichiers qui n'ont pas de tableau `files` - Les chemins non-GitHub sont ignorés silencieusement (sauf en mode verbose) ## 🔗 Liens utiles - [Documentation shadcn/ui Registry](https://ui.shadcn.com/docs/registry) - [Format du registry JSON](https://ui.shadcn.com/schema/registry-item.json) --- ### Overview (`templates-baseui/chat/README.md`) This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). ## Getting Started First, run the development server: ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. --- ### Overview (`templates-baseui/dashboard-1/README.md`) This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). ## Getting Started First, run the development server: ```bash npm run dev # or yarn dev # or pnpm dev # or bun dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! ## Deploy on Vercel The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. --- --- METRICS --- - Files Extracted: 4 - Estimated Token Budget: ~6331 tokens - Canonical Reference: https://codewiki.google/github.com/ln-dev7/square-ui