Layout Registry

🎨 shadcn/ui compatible component registry for URPC layout components

A modern component registry server that provides beautiful, pre-built layout components for URPC (Unilang RPC) projects. Install components directly using the familiar shadcn CLI workflow.

🚀 Quick Start

Prerequisites

Make sure you have shadcn/ui initialized in your project:

npx shadcn@latest init

Install Components

# Install a specific layout
npx shadcn@latest add https://layouts.unilab.dev/r/card-layout.json

# Install all layouts at once
npx shadcn@latest add https://layouts.unilab.dev/r/all-layouts.json

Usage with URPC

import { UniRender } from '@unilab/urpc';
import { CardLayout } from './components/custom-layouts';

function MyApp() {
  return (
    <UniRender 
      adapter={dataAdapter}
      entity={MyEntity}
      renderAs={CardLayout}
      options={{ /* layout options */ }}
    />
  );
}

📦 Available Components

Component	Description	Installation
Card Layout	Daily.dev inspired card grid	npx shadcn@latest add https://layouts.unilab.dev/r/card-layout.json
Blog Layout	Modern blog article list	npx shadcn@latest add https://layouts.unilab.dev/r/blog-layout.json
Social Layout	Social media style feed	npx shadcn@latest add https://layouts.unilab.dev/r/social-layout.json
Magazine Layout	Magazine-style articles	npx shadcn@latest add https://layouts.unilab.dev/r/magazine-layout.json
Minimal Layout	Clean minimalist list	npx shadcn@latest add https://layouts.unilab.dev/r/minimal-layout.json
Common UI	Loading & error states	npx shadcn@latest add https://layouts.unilab.dev/r/common-ui.json

🛠️ Development

Local Setup

# Clone the repository
git clone https://github.com/unify-procotol/unify.git
cd unify/packages/layout-installer

# Install dependencies (uses bun based on bun.lock)
bun install

# Build registry files
bun run registry:build

# Start the server
bun run registry:serve

The server will be available at http://localhost:3001

Available Scripts

• bun run registry:build - Build component registry files to public/r/
• bun run registry:serve - Start the Express.js server
• bun run registry:dev - Build and serve (development mode)
• bun run start - Start the server (production)

Project Structure

layout-installer/
├── server.js                    # Express.js server
├── registry.json               # Component registry definition
├── registry/default/           # Component source files
│   ├── card-layout/
│   ├── blog-layout/
│   ├── social-layout/
│   ├── magazine-layout/
│   ├── minimal-layout/
│   └── common-ui/
└── public/r/                   # Built registry files (generated)
    ├── card-layout.json
    ├── blog-layout.json
    └── ...

🔌 API Endpoints

Registry Listing

GET /registry

Returns available components and their metadata.

Component Access

GET /r/{component-name}
GET /r/{component-name}.json

Returns component configuration for shadcn CLI installation.

Health Check

GET /health

Server health status.

🎨 Component Features

Card Layout

• Daily.dev inspired design
• Author avatars with initials
• Interactive engagement metrics (likes, comments)
• Tag system with overlay badges
• Responsive grid layout
• Image placeholders with fallbacks

Blog Layout

• Clean article list design
• Reading time estimation
• Author information display
• Content preview with truncation

Social Layout

• Social media feed styling
• User avatars and profiles
• Engagement interactions
• Timestamp formatting

Magazine Layout

• Editorial-style presentation
• Featured content highlighting
• Category-based organization

Minimal Layout

• Clean, distraction-free design
• Essential information only
• High content density

Common UI

• Loading states with animations
• Error handling components
• Consistent styling

⚡ Why Use This Registry?

✅ No npm dependencies - Components copied directly to your project
✅ Version control friendly - Source code becomes part of your codebase
✅ Fully customizable - Modify components after installation
✅ TypeScript ready - Full type safety included
✅ Tailwind CSS - Modern utility-first styling
✅ URPC optimized - Designed specifically for URPC data structures

🔧 Contributing

Adding New Components

1. Create component directory:

   mkdir registry/default/my-layout

2. Add component file:

   // registry/default/my-layout/my-layout.tsx
   export const MyLayout = (data: any[], options: any) => {
     // Your component implementation
   };

3. Update registry.json:

   {
     "name": "my-layout",
     "type": "registry:component",
     "title": "My Layout",
     "description": "Custom layout description",
     "files": [
       {
         "path": "registry/default/my-layout/my-layout.tsx",
         "type": "registry:component"
       }
     ]
   }

4. Build and test:

   bun run registry:build
   npx shadcn@latest add http://localhost:3001/r/my-layout.json

Submitting Changes

1. Fork the repository
2. Create a feature branch
3. Add your component
4. Test locally
5. Submit a pull request

📊 Technical Details

• Framework: React 16.8+ with hooks
• Language: TypeScript
• Styling: Tailwind CSS
• Server: Express.js with CORS
• Registry: shadcn/ui compatible schema
• Package Manager: Bun (fallback to yarn/npm)

🔗 Links

• Registry Server: https://layouts.unilab.dev
• Documentation: https://docs.unilab.dev
• Main Repository: https://github.com/unify-procotol/unify
• Issues: Report bugs or request features

📄 License

MIT License - see LICENSE for details.

---

Made with ❤️ by the Unilab Team