Introduction to Corex

Corex is a UI component library built with web fundamentals: pure HTML, CSS, and vanilla JavaScript/TypeScript. Designed for flexibility and accessibility, Corex provides modular components that integrate seamlessly into any project.

Core Principles

Corex is built on web standards with a focus on accessibility, flexibility, and developer experience. Every component is crafted to work across different environments while maintaining consistent behavior and styling.

Web Standards Foundation

Components are built with semantic HTML, modular CSS, and vanilla JavaScript/TypeScript. This approach ensures compatibility across frameworks, static sites, and any web environment without dependencies or build requirements.

Accessibility First

Interactive components are powered by Zag JS , a headless state machine library that provides robust accessibility patterns. Every component includes proper ARIA attributes, keyboard navigation, and screen reader support by default.

Flexible Architecture

Corex components are designed to adapt to your workflow and design requirements, offering multiple integration paths and styling approaches.

Component Structure

Static Components

Form elements, buttons, badges, and links components built with semantic HTML and CSS. These components require no JavaScript and work immediately upon inclusion.

Interactive Components

Complex components like dialogs, dropdowns, tooltips, and switches built on top of Zag JS . These components provide accessible state management and keyboard interactions while remaining framework-agnostic.

Styling Flexibility

Export Formats

Every component is available in multiple formats to match your preferred development approach:

• Unstyled: Pure HTML structure with semantic markup for complete custom styling
• CSS: Modular CSS files with custom properties for direct customization
• Tailwind CSS: Pre-configured utility classes that integrate with Tailwind workflows

Design Token Integration

Corex supports flexible theming approaches:

• CSS Variables: Direct customization through CSS custom properties
• Design Tokens: Integration with Tokens Studio and Style Dictionary for design tool workflows
• Token Generation: Build comprehensive design systems from centralized token sources

Technical Approach

Built with simplicity in mind, Corex components use standard web technologies that developers can easily understand, modify, and integrate. No complex abstractions or hidden configurations—just straightforward HTML, CSS, and JavaScript that works.