@reallygoodwork/coral-core

Core utilities, schemas, and CLI for the Coral specification format. This package provides the foundational types, Zod schemas, utility functions, and CLI tools for working with Coral UI specifications.

What is Coral?

Coral is a specification format for describing UI components in a framework-agnostic way. It enables you to define component structure, styling, variants, interactivity, and responsive behavior in a portable JSON format that can be transformed into various output formats (HTML, React, Vue, etc.).

Features

Component Variants System - CVA-style variant definitions with per-node responses
Package System - coral.config.json manifest for organizing design systems
Component Composition - Embed components within components with prop/slot bindings
Typed Props & Events - Full type definitions for component APIs
Conditional Rendering - Expression-based conditional logic
Reference Types - Token, prop, asset, and component references
CLI Tools - Initialize, validate, and build packages
TypeScript Generation - Generate TypeScript interfaces from components
Type-safe schemas using Zod for runtime validation

Installation

npm install @reallygoodwork/coral-core

pnpm add @reallygoodwork/coral-core

yarn add @reallygoodwork/coral-core

Quick Start

import { parseUISpec, transformHTMLToSpec } from '@reallygoodwork/coral-core'

// Parse and validate a specification
const spec = await parseUISpec({
  name: 'Button',
  elementType: 'button',
  styles: { padding: '10px', backgroundColor: '#007bff' },
})

// Or transform HTML to Coral spec
const htmlSpec = transformHTMLToSpec('<button class="btn">Click me</button>')