diff --git a/CHANGELOG.md b/CHANGELOG.md index c1364db65..a9a66e41d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,13 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Comprehensive test suite using Vitest and React Testing Library -- Test coverage for @object-ui/protocol, @object-ui/engine, @object-ui/renderer, @object-ui/ui, and @object-ui/designer packages +- Test coverage for @object-ui/core, @object-ui/react, @object-ui/components, and @object-ui/designer packages - GitHub Actions CI/CD workflows: - CI workflow for automated testing, linting, and building - Release workflow for publishing new versions - Test coverage reporting with @vitest/coverage-v8 - Contributing guidelines (CONTRIBUTING.md) - Documentation for testing and development workflow in README +- README files for all core packages ### Changed @@ -28,14 +29,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Core packages: - - @object-ui/protocol - Pure metadata definitions and types - - @object-ui/engine - Headless logic for handling data - - @object-ui/renderer - Schema to UI component renderer - - @object-ui/ui - High-quality UI components built with Tailwind CSS & Shadcn + - @object-ui/core - Core logic, types, and validation (Zero React dependencies) + - @object-ui/react - React bindings and SchemaRenderer component + - @object-ui/components - Standard UI components built with Tailwind CSS & Shadcn - @object-ui/designer - Drag-and-drop visual editor -- Monorepo structure using pnpm and TurboRepo +- Monorepo structure using pnpm workspaces - Basic TypeScript configuration - Example applications in the examples directory +- Complete documentation site with VitePress [Unreleased]: https://github.com/objectql/objectui/compare/v0.1.0...HEAD [0.1.0]: https://github.com/objectql/objectui/releases/tag/v0.1.0 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a60c48a8a..347bb4cac 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -34,7 +34,7 @@ pnpm test:coverage pnpm build # Build specific package -cd packages/protocol && pnpm build +cd packages/core && pnpm build ``` ### Linting diff --git a/README.md b/README.md index d0eab9714..fa82dd4e3 100644 --- a/README.md +++ b/README.md @@ -172,11 +172,10 @@ This project is organized as a Monorepo: | Package | Description | | --- | --- | -| **`@object-ui/types`** | The protocol definitions. Pure TypeScript interfaces. | -| **`@object-ui/core`** | The logic engine. Data scoping, validation, evaluation. | -| **`@object-ui/react`** | The React framework adapter. | +| **`@object-ui/core`** | Core logic, types, and validation. Zero React dependencies. | +| **`@object-ui/react`** | The React framework adapter with SchemaRenderer. | | **`@object-ui/components`** | The standard UI library implementation (Shadcn + Tailwind). | -| **`@object-ui/plugin-*`** | Lazy-loaded complex components (e.g., AG Grid, Monaco). | +| **`@object-ui/designer`** | Visual schema editor for building UIs without code. | --- diff --git a/docs/api/core.md b/docs/api/core.md index 2db271f36..5b4d7846b 100644 --- a/docs/api/core.md +++ b/docs/api/core.md @@ -1,11 +1,13 @@ # Core API -The `@object-ui/core` package (also published as `@object-ui/protocol`) provides the foundational type definitions and schemas for Object UI. +The `@object-ui/core` package provides the foundational type definitions, schemas, and core logic for Object UI. + +This package is **framework-agnostic** with zero React dependencies, making it suitable for use in Node.js environments, build tools, or other frameworks. ## Installation ```bash -npm install @object-ui/protocol +npm install @object-ui/core ``` ## Type Definitions @@ -19,7 +21,7 @@ import type { FormSchema, ViewSchema, ComponentSchema -} from '@object-ui/protocol' +} from '@object-ui/core' ``` ### BaseSchema @@ -82,7 +84,7 @@ interface InputSchema extends BaseSchema { ### Using Zod ```typescript -import { PageSchema } from '@object-ui/protocol' +import { PageSchema } from '@object-ui/core' import { z } from 'zod' const pageValidator = z.object({ @@ -100,7 +102,7 @@ const result = pageValidator.safeParse(mySchema) ### Type Guards ```typescript -import { isPageSchema, isFormSchema } from '@object-ui/protocol' +import { isPageSchema, isFormSchema } from '@object-ui/core' if (isPageSchema(schema)) { // TypeScript knows schema is PageSchema @@ -108,10 +110,30 @@ if (isPageSchema(schema)) { } ``` -## API Reference +## Component Registry + +The core package provides a framework-agnostic component registry: + +```typescript +import { ComponentRegistry } from '@object-ui/core' + +const registry = new ComponentRegistry() +registry.register('button', buttonMetadata) +``` -Full API documentation coming soon. +## Data Scope + +Data scope management for expression evaluation: + +```typescript +import { DataScope } from '@object-ui/core' + +const scope = new DataScope({ user: { name: 'John' } }) +const value = scope.get('user.name') // 'John' +``` + +## API Reference -For now, see: -- [GitHub Repository](https://github.com/objectql/objectui/tree/main/packages/protocol) -- [TypeScript Definitions](https://github.com/objectql/objectui/blob/main/packages/protocol/src/types) +For detailed API documentation, see: +- [GitHub Repository](https://github.com/objectql/objectui/tree/main/packages/core) +- [TypeScript Definitions](https://github.com/objectql/objectui/blob/main/packages/core/src/index.ts) diff --git a/docs/api/designer.md b/docs/api/designer.md index 6d40578eb..0332c426b 100644 --- a/docs/api/designer.md +++ b/docs/api/designer.md @@ -2,13 +2,15 @@ The `@object-ui/designer` package provides a visual drag-and-drop editor for creating Object UI schemas. -::: warning Coming Soon -The Designer is planned for release in Q3 2026. This documentation is a preview. -::: +## Installation -## Planned Features +```bash +npm install @object-ui/designer @object-ui/react @object-ui/components +``` + +## Features -### Visual Editor +### ✅ Visual Editor ```tsx import { Designer } from '@object-ui/designer' @@ -18,48 +20,130 @@ function App() { return ( ) } ``` -### Component Palette +### ✅ Component Palette + +Drag components from the categorized palette to the canvas. Includes: +- Basic components (text, button, link, image) +- Form inputs (input, textarea, select, checkbox, radio, date picker) +- Layout components (container, grid, flex, tabs, card) +- Data display (table, list, badge) +- Feedback components (alert, toast, dialog) + +### ✅ Property Editor + +Edit component properties visually with a dynamic form in the sidebar panel. + +### ✅ Real-time Preview -Drag components from the palette to the canvas. +See your changes instantly with live preview in the canvas. -### Property Editor +### ✅ Drag and Drop -Edit component properties visually with a sidebar panel. +- Drag components from palette to canvas +- Reorder components within the canvas +- Visual feedback during drag operations -### Real-time Preview +### ✅ JSON Import/Export -See your changes instantly with live preview. +- Export schema as JSON +- Import schema from JSON +- Copy schema to clipboard -### AI Assistant +## Components -Generate schemas using natural language: +### Designer + +The main designer component that includes all functionality. ```tsx ``` -### Collaboration +**Props:** +- `initialSchema?: SchemaNode` - Initial schema to load +- `onSchemaChange?: (schema: SchemaNode) => void` - Callback when schema changes + +### Custom Layout + +Use individual components for custom layouts: + +```tsx +import { + DesignerProvider, + Canvas, + ComponentPalette, + PropertyPanel, + Toolbar +} from '@object-ui/designer' + +function CustomDesigner() { + return ( + +
+ +
+ + + +
+
+ + ) +} +``` + +## API Reference -Real-time multi-user editing like Google Docs. +### useDesigner Hook -## Stay Updated +Access designer state and methods: -Want to be notified when Designer launches? +```tsx +import { useDesigner } from '@object-ui/designer' + +function CustomComponent() { + const { + schema, + setSchema, + selectedNodeId, + setSelectedNodeId, + updateNode, + addNode, + deleteNode, + moveNode + } = useDesigner() + + // Use designer state +} +``` -- ⭐ [Star on GitHub](https://github.com/objectql/objectui) -- 📧 [Email us](mailto:hello@objectui.org) -- 📋 [View Roadmap](/roadmap) +### Context API + +```typescript +interface DesignerContextValue { + schema: SchemaNode + setSchema: (schema: SchemaNode) => void + selectedNodeId: string | null + setSelectedNodeId: (id: string | null) => void + hoveredNodeId: string | null + setHoveredNodeId: (id: string | null) => void + updateNode: (id: string, updates: Partial) => void + addNode: (parentId: string | null, node: SchemaNode, index?: number) => void + deleteNode: (id: string) => void + moveNode: (nodeId: string, targetParentId: string | null, targetIndex: number) => void +} +``` -## Roadmap +## Examples -See the [full roadmap](/roadmap#q3-2026-visual-designer-available-september-2026) for Designer features and timeline. +See [examples/designer-demo](https://github.com/objectql/objectui/tree/main/examples/designer-demo) for a complete working example. diff --git a/docs/guide/installation.md b/docs/guide/installation.md index f3e8b006b..342bd7e88 100644 --- a/docs/guide/installation.md +++ b/docs/guide/installation.md @@ -16,9 +16,9 @@ Object UI is distributed as several packages: | Package | Description | Required | |---------|-------------|----------| -| `@object-ui/protocol` | Type definitions and schemas | Yes | -| `@object-ui/renderer` | The core compiler that turns JSON into React | Yes | -| `@object-ui/ui` | The visual component library (Shadcn extended) | Yes | +| `@object-ui/core` | Core logic, types, and validation (Zero React dependencies) | Yes | +| `@object-ui/react` | React bindings and SchemaRenderer component | Yes | +| `@object-ui/components` | Standard UI library with Shadcn + Tailwind components | Yes | | `@object-ui/designer` | Visual schema editor and builder | Optional | ## Basic Installation @@ -28,29 +28,17 @@ To get started, install the core packages: ::: code-group ```bash [npm] -npm install @object-ui/renderer @object-ui/ui @object-ui/protocol +npm install @object-ui/react @object-ui/components ``` ```bash [pnpm] -pnpm add @object-ui/renderer @object-ui/ui @object-ui/protocol -``` - -```bash [yarn] -yarn add @object-ui/renderer @object-ui/ui @object-ui/protocol -``` - -:::bash [npm] -npm install @object-ui/react @object-ui/components +pnpm add @object-ui/react @object-ui/components ``` ```bash [yarn] yarn add @object-ui/react @object-ui/components ``` -```bash [pnpm] -pnpm add @object-ui/react @object-ui/components -``` - ::: ## Setup Steps @@ -158,19 +146,19 @@ Create React App requires no special configuration. For TypeScript type definitions: ```bash -npm install @object-ui/protocol +npm install @object-ui/core ``` ```typescript -import type { PageSchema, FormSchema } from '@object-ui/protocol' +import type { PageSchema, FormSchema } from '@object-ui/core' ``` -### Engine +### Designer -For advanced state management and data handling: +For visual schema editing: ```bash -npm install @object-ui/engine +npm install @object-ui/designer ``` ## Verification diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md index d518d3c8e..59dec862f 100644 --- a/docs/guide/introduction.md +++ b/docs/guide/introduction.md @@ -119,11 +119,10 @@ Object UI automatically: Object UI is built as a modular ecosystem: ``` -@object-ui/protocol → Type definitions and schemas -@object-ui/engine → Core logic and state management -@object-ui/ui → UI components (Tailwind + Shadcn) -@object-ui/renderer → Schema-to-React transformer -@object-ui/designer → Visual editor (coming Q3 2026) +@object-ui/core → Core logic, types, and validation (Zero React) +@object-ui/react → React bindings and SchemaRenderer +@object-ui/components → UI components (Tailwind + Shadcn) +@object-ui/designer → Visual schema editor ``` This modular design means: diff --git a/docs/protocol/overview.md b/docs/protocol/overview.md index 8671326c5..1bc76237e 100644 --- a/docs/protocol/overview.md +++ b/docs/protocol/overview.md @@ -149,7 +149,7 @@ All schemas can be validated using: Example validation: ```typescript -import { PageSchema } from '@object-ui/protocol' +import { PageSchema } from '@object-ui/core' import { z } from 'zod' const pageSchema = z.object({ @@ -233,7 +233,7 @@ This single schema creates a complete user management interface with: The reference implementation is available in TypeScript: ```bash -npm install @object-ui/protocol +npm install @object-ui/core ``` ```typescript @@ -241,7 +241,7 @@ import { PageSchema, ViewSchema, ObjectSchema -} from '@object-ui/protocol' +} from '@object-ui/core' ``` ## Contributing diff --git a/docs/spec/architecture.md b/docs/spec/architecture.md index b0645c0f2..1ca954fd4 100644 --- a/docs/spec/architecture.md +++ b/docs/spec/architecture.md @@ -71,27 +71,29 @@ Dynamic logic is handled via string expressions in the JSON schema. ## 4. Architecture Layers ``` -Layer 1: @object-ui/protocol (The Language) - - Types definitions for Object, Field, View, Page (from docs/objectql) +Layer 1: @object-ui/core (The Foundation) + - Type definitions for schemas and components + - Core logic with zero React dependencies - Validation Logic (Zod) + - Component Registry + - Data Scope and Expression Evaluation -Layer 2: @object-ui/engine (The Brain) - - Headless State Management - - Data Source / API Connectors - - Expression Evaluation utils +Layer 2: @object-ui/react (The Glue) + - React bindings and hooks + - SchemaRenderer component + - Context providers + - React-specific state management -Layer 3: @object-ui/ui (The Look) +Layer 3: @object-ui/components (The Look) - Shadcn/UI primitives - Tailwind Configuration - - Dumb React Components - -Layer 4: @object-ui/renderer (The Compiler) - - SchemaRenderer - - Component Registry - - Concrete implementations of Page, View, Object renderers + - Component Renderers + - Standard UI implementations -Layer 5: @object-ui/designer (The Tool) - - Visual Editor +Layer 4: @object-ui/designer (The Tool) + - Visual Schema Editor + - Drag-and-Drop Interface + - Property Editing ``` ## 5. Advantages over Traditional Engines diff --git a/docs/spec/project-structure.md b/docs/spec/project-structure.md index 9247b0757..b8ce66db4 100644 --- a/docs/spec/project-structure.md +++ b/docs/spec/project-structure.md @@ -1,6 +1,6 @@ -# AI-Driven Project Structure +# Project Structure -This document defines the directory structure designed to facilitate AI-driven development. The goal is to establish a deterministic 1:1 mapping between the ObjectQL specifications (in `docs/objectql`) and the source code. +This document defines the current directory structure of Object UI, designed for clarity and AI-driven development. ## 1. Top-Level Structure (Monorepo) @@ -8,78 +8,150 @@ We use a standard Monorepo structure managed by `pnpm`. ``` / -├── apps/ # End-user applications -│ ├── design-studio/ # The visual designer (Next.js/Vite) -│ └── docs/ # Documentation site -├── packages/ # Shared libraries -│ ├── protocol/ # (New) Pure Metadata Definitions & Types -│ ├── engine/ # (New) The Core Logic (State, Data, Expressions) -│ ├── ui/ # (New) The Atomic Component Library (Shadcn + Tailwind) -│ └── renderer/ # (Renamed from react) The Schema->React Transformer -├── docs/ -│ ├── objectql/ # The Source of Truth (Specs) -│ └── spec/ # Technical Specs +├── examples/ # Example applications +│ ├── prototype/ # Main prototype/demo app +│ └── designer-demo/ # Designer demonstration +├── packages/ # Shared libraries +│ ├── core/ # Core logic, types, and validation (Zero React) +│ ├── react/ # React bindings and SchemaRenderer +│ ├── components/ # Standard UI components (Shadcn + Tailwind) +│ └── designer/ # Visual schema editor +├── docs/ # Documentation site (VitePress) +│ ├── .vitepress/ # VitePress configuration +│ ├── guide/ # User guides +│ ├── api/ # API documentation +│ ├── protocol/ # Protocol specifications +│ └── spec/ # Technical specifications +└── .github/ # GitHub workflows and configurations ``` ## 2. Package Responsibilities -### `@object-ui/protocol` (was `core`) -**Goal**: Define the "Language" of ObjectQL. -**Mapping**: `docs/objectql/*.md` → `packages/protocol/src/*.ts` +### `@object-ui/core` +**Goal**: The "Brain" - Core logic with zero React dependencies. +**Tech**: Pure TypeScript + Zod + Lodash -* `src/types/object.ts` (Defines ObjectConfig) -* `src/types/field.ts` (Defines FieldConfig) -* `src/types/view.ts` (Defines ViewConfig) -* `src/types/page.ts` (Defines PageConfig) -* `src/utils/validator.ts` (Zod schemas for runtime validation) +**Contents**: +- `src/types/` - TypeScript type definitions (schemas, components) +- `src/registry/` - Component registry system +- `src/data-scope/` - Data scope and expression evaluation +- `src/validators/` - Zod validation schemas -### `@object-ui/engine` (was `react` internals) -**Goal**: The "Brain". Headless logic for handling data. +**Key Principle**: This package can run in Node.js or any JavaScript environment. -* `src/store/` (Zustand stores for Object data) -* `src/data-source/` (React Query wrappers) -* `src/expressions/` (Expression evaluator) -* `src/context/` (DataScope implementation) +### `@object-ui/react` +**Goal**: The "Glue" - React bindings and renderer. +**Tech**: React 18+ with Hooks -### `@object-ui/ui` (was `components`) -**Goal**: The "Look". Dumb, stateless UI atoms. -**Tech**: Radix UI + Tailwind + Shadcn. - -* `src/primitives/` (Button, Input, Dialog) -* `src/layout/` (Grid, Stack, Card) +**Structure**: +``` +src/ +├── SchemaRenderer.tsx # Main renderer component +├── hooks/ # React hooks +│ ├── useRenderer.ts +│ ├── useDataScope.ts +│ └── useRegistry.ts +└── context/ # React Context providers + ├── RendererContext.tsx + └── DataScopeContext.tsx +``` -### `@object-ui/renderer` (was `react` public) -**Goal**: The "Compiler". Turns Metadata into UI. -**Structure**: Strictly organized by Schema Type. +### `@object-ui/components` +**Goal**: The "Body" - Standard UI implementation. +**Tech**: Shadcn UI + Radix UI + Tailwind CSS +**Structure**: ``` src/ -├── renderers/ -│ ├── page/ -│ │ ├── PageRenderer.tsx -│ │ └── index.ts -│ ├── object/ -│ │ ├── ObjectFormRenderer.tsx -│ │ ├── ObjectTableRenderer.tsx -│ │ └── ... -│ ├── view/ -│ │ ├── ViewRenderer.tsx (Dispatcher) -│ │ ├── ListView.tsx -│ │ ├── KanbanView.tsx -│ │ └── ... -│ └── field/ -│ ├── FieldRenderer.tsx (Dispatcher) -│ ├── StringField.tsx -│ └── SelectField.tsx -├── registry.ts # Maps types to renderers -└── SchemaRenderer.tsx # Entry point +├── ui/ # Base Shadcn components +│ ├── button.tsx +│ ├── input.tsx +│ ├── select.tsx +│ └── ... +├── renderers/ # Object UI component renderers +│ ├── basic/ # Basic components +│ ├── form/ # Form components +│ ├── layout/ # Layout components +│ └── data-display/ # Data display components +└── index.ts # Public exports +``` + +### `@object-ui/designer` +**Goal**: The "Tool" - Visual schema editor. +**Tech**: React + Drag-and-Drop + +**Contents**: +- `src/Designer.tsx` - Main designer component +- `src/Canvas.tsx` - Visual editing canvas +- `src/ComponentPalette.tsx` - Component library browser +- `src/PropertyPanel.tsx` - Property editor +- `src/Toolbar.tsx` - Actions toolbar +- `src/context/` - Designer state management + +## 3. Development Workflow + +### Adding a New Component + +When implementing a new component: + +1. **Define Types** in `packages/core/src/types/` + ```typescript + export interface MyComponentSchema extends BaseSchema { + type: 'my-component' + // ... component-specific properties + } + ``` + +2. **Create UI Component** in `packages/components/src/ui/` (if needed) + ```tsx + // Base Shadcn component + export function MyComponent({ ... }) { ... } + ``` + +3. **Create Renderer** in `packages/components/src/renderers/` + ```tsx + export function MyComponentRenderer({ schema, ...props }) { + return + } + ``` + +4. **Register** in `packages/components/src/index.ts` + ```typescript + registry.register('my-component', MyComponentRenderer) + ``` + +### Package Dependencies + +``` +designer + ↓ +components ──→ react ──→ core + ↓ ↓ +ui components types & logic ``` -## 3. Workflow for AI +**Dependency Rules**: +- `core`: NO dependencies on React or any UI framework +- `react`: Depends on `core`, peer depends on React +- `components`: Depends on `core` + `react` + Shadcn/Radix +- `designer`: Depends on `components` -When asked to "Implement the View spec": +## 4. File Naming Conventions -1. **Read** `docs/objectql/view.md`. -2. **Define** `packages/protocol/src/types/view.ts`. -3. **Create** `packages/renderer/src/renderers/view/ViewRenderer.tsx`. -4. **Register** it in `packages/renderer/src/registry.ts`. +- **Components**: PascalCase with `.tsx` extension (e.g., `Button.tsx`) +- **Hooks**: camelCase starting with `use` (e.g., `useRenderer.ts`) +- **Types**: PascalCase with `.ts` extension (e.g., `Schema.ts`) +- **Utilities**: camelCase with `.ts` extension (e.g., `registry.ts`) + +## 5. Import Aliases + +When working within the monorepo, use workspace protocol: + +```typescript +// In packages/react +import { BaseSchema } from '@object-ui/core' + +// In packages/components +import { SchemaRenderer } from '@object-ui/react' +import type { ButtonSchema } from '@object-ui/core' +``` diff --git a/packages/components/README.md b/packages/components/README.md new file mode 100644 index 000000000..20bc35102 --- /dev/null +++ b/packages/components/README.md @@ -0,0 +1,170 @@ +# @object-ui/components + +Standard UI component library for Object UI, built with Shadcn UI + Tailwind CSS. + +## Features + +- 🎨 **Tailwind Native** - Built entirely with Tailwind CSS utility classes +- 🧩 **Shadcn UI** - Based on Radix UI primitives for accessibility +- 📦 **50+ Components** - Complete set of UI components +- ♿ **Accessible** - WCAG compliant components +- 🎯 **Type-Safe** - Full TypeScript support +- 🔌 **Extensible** - Easy to customize and extend + +## Installation + +```bash +npm install @object-ui/components @object-ui/react @object-ui/core +``` + +**Peer Dependencies:** +- `react` ^18.0.0 || ^19.0.0 +- `react-dom` ^18.0.0 || ^19.0.0 +- `tailwindcss` ^3.0.0 + +## Setup + +### 1. Configure Tailwind + +Add to your `tailwind.config.js`: + +```js +module.exports = { + content: [ + './src/**/*.{js,jsx,ts,tsx}', + './node_modules/@object-ui/components/**/*.{js,ts,jsx,tsx}' + ], + // ... your config +} +``` + +### 2. Import Styles + +Add to your main CSS file: + +```css +@import '@object-ui/components/dist/style.css'; +``` + +### 3. Register Components + +```tsx +import { registerDefaultRenderers } from '@object-ui/components' + +registerDefaultRenderers() +``` + +## Usage + +### With SchemaRenderer + +```tsx +import { SchemaRenderer } from '@object-ui/react' +import { registerDefaultRenderers } from '@object-ui/components' + +registerDefaultRenderers() + +const schema = { + type: 'card', + title: 'Welcome', + body: { + type: 'text', + value: 'Hello from Object UI!' + } +} + +function App() { + return +} +``` + +### Direct Import + +You can also import UI components directly: + +```tsx +import { Button, Input, Card } from '@object-ui/components' + +function MyComponent() { + return ( + + + + + ) +} +``` + +## Available Components + +### Form Components +- `input` - Text input +- `textarea` - Multi-line text +- `select` - Dropdown select +- `checkbox` - Checkbox +- `radio` - Radio button +- `date-picker` - Date selection +- `switch` - Toggle switch + +### Layout Components +- `container` - Container wrapper +- `grid` - Grid layout +- `flex` - Flexbox layout +- `card` - Card container +- `tabs` - Tab navigation +- `accordion` - Collapsible sections + +### Data Display +- `table` - Data table +- `list` - List view +- `badge` - Badge label +- `avatar` - User avatar +- `progress` - Progress bar + +### Feedback +- `alert` - Alert messages +- `toast` - Toast notifications +- `dialog` - Modal dialog +- `popover` - Popover overlay + +### Navigation +- `button` - Button component +- `link` - Link component +- `breadcrumb` - Breadcrumb navigation + +## Customization + +### Override Styles + +All components accept `className` for Tailwind classes: + +```json +{ + "type": "button", + "label": "Click Me", + "className": "bg-blue-500 hover:bg-blue-700 text-white" +} +``` + +### Custom Components + +Register your own components: + +```tsx +import { registerRenderer } from '@object-ui/react' +import { Button } from '@object-ui/components' + +function CustomButton(props) { + return