Ty Components - Modern Web Components Library


Modern web components library built with ClojureScript that provides reusable UI components as native Web Components. Zero runtime dependencies, semantic design system, and advanced modular architecture.

⚡ Quick Start with CDN

$3

``html



`

$3


`html




`

$3

`html












Click me!











`

📦 Module Architecture

Ty uses an advanced modular system where you can load only what you need:

$3


- ty.js - Core web component utilities, CSS variables system, base functionality

$3

- ty-calendar-month.js - Month grid calendar component
- ty-calendar.js - Full calendar with navigation (depends on ty-calendar-month)
- ty-date-picker.js - Complete date picker interface (depends on ty-calendar)
- ty-dropdown.js - Dropdown selection components
- ty-multiselect.js - Multi-selection component (depends on ty-dropdown)

$3

`
ty.js (core)
│
├── ty-calendar-month.js
│ └── ty-calendar.js
│ └── ty-date-picker.js
│
├── ty-dropdown.js
│ └── ty-multiselect.js
`

🎨 CSS Design System

Ty uses a sophisticated 5-variant semantic CSS variables system:

$3

`html




`

$3


`css
/ Text Colors (5-variant emphasis system) /
--ty-color-primary-strong: #0034c7; / Maximum emphasis /
--ty-color-primary-mild: #1c40a8; / High emphasis /
--ty-color-primary: #4367cd; / Base emphasis /
--ty-color-primary-soft: #60a5fa; / Reduced emphasis /
--ty-color-primary-faint: #93c5fd; / Minimal emphasis /

/ Background Colors /
--ty-bg-primary-mild: #bfdbfe; / Stronger background /
--ty-bg-primary: #dbeafe; / Base background /
--ty-bg-primary-soft: #eff6ff; / Softer background /

/ Available for: primary, secondary, success, danger, warning, info, neutral /
`

$3


`html


`

🚀 Available Components

$3

`html
Primary Button

Removable Tag
`

$3

`html



`

$3

`html

Option 1
Option 2


`

$3


`html

Modal Content

Your content here...

Click me

Popup content


Hover for tooltip

`

🔧 Framework Integration

$3


`jsx
export function MyComponent() {
return (

Click me

);
}
`

$3

`vue

`

$3

`typescript
// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
// ...
})
`
`html
Click me

`

🌍 Internationalization

`html

`

📊 Bundle Sizes

| Module | Gzipped Size | Components |
|--------|--------------|------------|
| ty.js (core) | ~45KB | Base system, utilities |
| ty-calendar-month.js | ~8KB | Calendar month grid |
| ty-calendar.js | ~12KB | Full calendar + navigation |
| ty-date-picker.js | ~6KB | Date picker interface |
| ty-dropdown.js | ~15KB | Dropdown components |
| ty-multiselect.js | ~10KB | Multi-selection |

🎯 Version Management

$3


`html



`

$3

- Global CDN: 700+ locations worldwide
- HTTP/2 Support: Optimized delivery
- Compression: Automatic gzip/brotli
- Caching: Intelligent edge caching
- Fallback: Multiple CDN providers

🔒 Content Security Policy (CSP)

`html

`

🎪 Examples & Demos

$3


`html

Ty Components Demo

Primary Action






`

$3


`html

Toggle Dark Mode
`

📚 API Documentation

$3

All ty components dispatch standard DOM events:

`javascript
// Calendar date selection
element.addEventListener('date-select', (event) => {
const { date, value, context } = event.detail;
});

// Input value changes
element.addEventListener('input', (event) => {
const { value, formattedValue, rawValue } = event.detail;
});

// Multiselect changes
element.addEventListener('change', (event) => {
const { values, action, item } = event.detail;
});
`

$3

Customize the entire design system:

`css
:root {
/ Override brand colors /
--ty-color-primary: #your-brand-color;
--ty-color-secondary: #your-secondary-color;

/ Adjust spacing /
--ty-spacing-base: 1rem;

/ Modify typography /
--ty-font-sans: 'Your Font', system-ui, sans-serif;
}
``

🤝 Contributing

Visit our GitHub repository to:
- Report issues
- Request features
- Submit pull requests
- View source code

📄 License

MIT License - feel free to use in personal and commercial projects.

🔗 Links

- NPM Package
- jsDelivr CDN
- GitHub Repository
- Documentation
- Live Examples

---

Made with ❤️ using ClojureScript and Web Standards