SUI (WIP)

A dynamic component rendering system that allows developers to design components and render them with AI assistance without hardcoding them into applications. The SUI Component System is a collection of libraries that enable dynamic component rendering based on schemas. It allows backend systems to send component schemas that are then rendered by the frontend without requiring code changes.

Project Structure

This is a monorepo managed with Yarn workspaces and Turborepo, containing the following packages:

• @sui/core: Core definitions and utilities for component schemas
• @sui/components: UI components built with shadcn and Tailwind CSS, but comes with an adapter pattern to use your own
• @sui/renderer: Component renderer for the SUI component system
• @sui/layout-engine: Layout engine for the SUI component system
• playground: A demo application to showcase the SUI library

Features

• Opiniated way to build components with standardized schemas
• Runtime component rendering based on schemas
• Support for both simple and complex components (including those with HTTP calls, validation, etc.)
• Dynamic layout engine
• AI-friendly component descriptions for intelligent rendering decisions

The SUI Component System will:

1. Parse the schema
2. Identify required components
3. Arrange them according to the layout
4. Pass the appropriate props to each component
5. Render the complete UI without any frontend code changes

Getting Started

Prerequisites

• Node.js 18 or later
• Yarn 4.0.2 or later

Installation

# Clone the repository
git clone https://github.com/kavinda1995/sui.git
cd sui

# Install dependencies
yarn install

Development

# Start all packages in development mode
yarn dev

# Start only the playground
yarn workspace playground dev

# Build all packages
yarn build

# Lint all packages
yarn lint

# Clean all packages
yarn clean

Working with Yarn

This project uses Yarn 4 with workspaces. Here are some common commands:

# Add a dependency to a specific package
yarn workspace @sui/core add zod

# Add a dev dependency to a specific package
yarn workspace @sui/components add -D @types/react

# Add a dependency to all packages
yarn workspaces foreach add lodash

# Run a command in all packages
yarn workspaces foreach run build

License

MIT