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.