"After playing around with Replicant, I realized I could build Web Components without React — actually, even without Replicant.

I'm wondering if it's called 'Replicant' because of Blade Runner (I love Blade Runner).

Maybe I could name my own library something similar... Tyrell? No, that feels pretentious.

Anyway, I don't really want to type something long like tyrell-button. It should be shorter — maybe ty-button.

Yes! Let's call it ty."

Framework-agnostic web components built with ClojureScript. Standards-based. Designed to last. Works with React, Vue, HTMX—or no framework at all.

ty is actively being developed. Components work, examples run, but expect rough edges. This is a real project with a real vision - web components that work everywhere, built on standards that won't break next year.

Working well:

• ✅ Button - Semantic buttons with flavors and sizes
• ✅ Input - Enhanced inputs with validation and formatting
• ✅ Textarea - Auto-resizing textarea
• ✅ Calendar - Full calendar system with navigation, custom rendering, and form integration
• ✅ Date Picker - Date selection with calendar popup
• ✅ Dropdown - Rich dropdown with HTML content support
• ✅ Multiselect - Multi-select with tags and search
• ✅ Modal - Accessible modals with focus trapping
• ✅ Popup - Positioned popovers
• ✅ Tooltip - Smart tooltips with positioning
• ✅ Tag - Chip/tag component with removable option
• ✅ Icon - 8000+ icons built-in (Material, Font Awesome, Lucide, Hero)
• ✅ Semantic design system - Automatic theming with CSS variables

Coming soon:

• 🚧 Tabs component
• 🚧 Better mobile adaptations
• 🚧 More layout components
• 🚧 Enhanced accessibility features

See it in action →

React: @gersak/ty-react typeScript wrappers handle the custom events and refs. Works with React 16-19.

HTMX: Just works. Server-side rendering with dynamic interactions.

Vue/Angular: Import the components, use them. Web Components are web standards.

ClojureScript: Built-in router, i18n, and responsive layout system if you want them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/css/ty.css">
<script src="https://cdn.jsdelivr.net/npm/@gersak/ty@latest/ty.js"></script>

<ty-button flavor="primary">Hello World</ty-button>
<ty-calendar value="2024-12-25"></ty-calendar>

See full documentation →

Ty components require the ty.css stylesheet to display correctly. The CSS file contains:

• CSS Variables - Design tokens for all colors, surfaces, spacing, and typography
• Utility Classes - Semantic classes like .ty-bg-primary, .ty-text++, .ty-elevated
• Theme System - Light/dark mode definitions that swap automatically
• Component Styles - Base styling that components depend on

• Lazy: ~89KB (50KB if you're using ClojureScript)
• Everything: ~134KB total (GZIP)

Comparable to other component libraries, with superior tree-shaking via Google Closure Compiler.

This project grows with community input. Every issue, PR, and discussion helps shape the direction.

Ways to contribute:

• 🐛 Report Issues - Found a bug? Let us know
• 💬 Discussions - Share ideas, ask questions, show what you've built
• 🌟 Star on GitHub - Show support for the project
• 🔧 Pull Requests - Documentation, components, examples - all contributions matter

Especially interested in:

• Mobile interaction improvements
• New components
• Real-world usage feedback
• Documentation improvements

• 📚 Docs & examples: gersak.github.io/ty
• 💻 Source: github.com/gersak/ty
• 📦 ClojureScript: clojars.org/dev.gersak/ty
• ⚛️ React: @gersak/ty-react
• 🌐 CDN: jsdelivr.net/npm/@gersak/ty

git clone https://github.com/gersak/ty.git
cd ty
npm install
npm run dev  # http://localhost:8000

Built with ClojureScript and Web Components. MIT licensed.

Work in progress. Getting better every day.