@ui8kit/core

Core semantic UI primitives and composite components used by engine blocks and generated templates.

Purpose

@ui8kit/core provides the reusable UI layer for UI8Kit:

• semantic layout primitives (Block, Container, Stack, Group, Box)
• typography primitives (Title, Text)
• interactive primitives (Button, Badge, Field)
• media primitives (Image, Icon)
• composite components (Grid, Card, Sheet, Accordion)

All components are exported from src/components/index.ts and re-exported by src/index.ts.

Basic Usage

import{Block,Stack,Title,Text,Button,Card,CardHeader,CardContent}from'@ui8kit/core';exportfunctionExampleSection(){return(<Blockcomponent="section"data-class="example-section"><Stackgap="6"data-class="example-stack"><Titledata-class="example-title">UI8Kit Core</Title><Textdata-class="example-text">Semantic primitives with constrained props.</Text><Carddata-class="example-card"><CardHeader><Titleorder={3}data-class="example-card-title">Card</Title></CardHeader><CardContent><Buttondata-class="example-button">Action</Button></CardContent></Card></Stack></Block>);}

Component Inventory

• Block, Container, Stack, Group, Box
• Title, Text
• Button, Badge, Field
• Image, Icon
• Grid
• Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter
• Sheet
• Accordion, AccordionItem, AccordionTrigger, AccordionContent

Rules and Conventions

• Prefer semantic props over className and inline styles.
• Add data-class attributes on semantic elements.
• Keep comments and docs in English.