Battle-tested primitives built on
@ra9/tan-compose.
Every component is a real custom element — works in plain HTML,
React, Vue, Astro, anywhere a custom element is allowed. Theme
via CSS custom properties on the host.
Variants (primary / secondary / ghost / danger), three sizes, disabled and loading states, full-width modifier. Content via the default slot.
Pass href and the button renders as an
<a> instead — same styling, link semantics.
Use target="_blank" for new-window links (gets
rel="noopener" automatically).
Submits with native <form> via
ElementInternals. Label, helper or error text,
disabled / required flags. Resets cleanly with the parent form.
Form-associated dropdown wrapping a native
<select>. Same chrome as
<tc-input>; submits with
<form>.
Searchable dropdown with optional multi-select, tag chips,
and per-option icon prefixes — the "select N from many"
widget that the native <select multiple>
isn't. Form-associated; submits one entry per selected
value with a name.
Tablist with arrow-key roving focus, named slots per panel, and ARIA roles. Active tab reflects to attribute.
Backed by the native <dialog> for proper
focus trap and ESC handling. Backdrop click closes when
dismissible (default). Footer slot for actions.
This action will publish the changes to all subscribers.
You can undo this within 10 minutes.
Inline notification with variant, auto-dismiss, and a close
button. Set duration="0" to keep it open until
the user closes it.
Pure-presentation card for a metric. Label, value, optional prefix/suffix, optional delta with up/down/neutral trend.
Paginated, filterable, sortable. Pass rows and
columns as JSON props. Emits
tc-row-click when a row is clicked.
Multi-line form-associated input. Same chrome as
<tc-input>; submits with
<form>.
Single-choice form-associated control. Pass options as a JSON prop; layout horizontally or vertically.
Form-associated file picker with a styled trigger button.
multiple and accept work the same as
the native <input type="file">.
Styled code surface with optional copy button
and a language/filename label. The
kit doesn't ship a syntax highlighter — pre-tokenize with
.tc-kw, .tc-str, .tc-com,
.tc-num, .tc-tag spans inside the
slot. They project through and pick up the kit's colors.
Note / info / success / warning / danger admonition box
with an icon, optional title, and a colored left border.
danger uses role="alert"; others
use role="note".
render on a column only takes effect when columns are set via the JS property, not via a JSON attribute.
Auto-builds a sticky sidebar of links by scanning a target
container for h2/h3 headings.
Tracks the currently-visible heading via
IntersectionObserver. Headings without
id get one assigned, so anchor links work out
of the box.
Click a link on the left to jump to a heading.
Use deno add jsr:@ra9/tan-compose-kit.
Drop a <tc-button> in your HTML.
The kit's primitives compose nicely — see the admin demo.
Full API at docs.html.
Three small components for the most common compositions:
vertical flow (stack), horizontal flow with wrap
(cluster), and an auto-fit grid (grid).
Use the --tc-space-N scale or any CSS length for
the gap.
tc-stack gap="3"
tc-cluster gap="2" justify="between"
tc-grid min="160px"
Form-associated checkbox wrapping a native input. Label, helper/error text, indeterminate state.
Accessible toggle with role="switch". Form-associated; keyboard-operable with Space and Enter.
Layout primitive with title/subtitle and named slots for media / header / footer. Padded, bordered, and elevated modifiers.
Compact label for status. Five variants and two sizes; opt into pill rounding.
Placeholder shown while content loads. Configure
width, height, rounded
for circular shapes (avatars). Respects
prefers-reduced-motion.
Prev/next plus a windowed list of page numbers. Set
current and total; the component
emits tc-page-change with the requested page —
the parent decides whether to accept. siblings
and boundaries control the window shape.
Slide or fade through a default slot of children. Autoplay, indicators, controls, pointer swipe, keyboard nav, vertical mode — all opt-in via props. Top-layer-free; pairs with any page layout.
Disclosure group built on native <details>.
Single-open by default; mode="multi" lets several
stay open. Keyboard nav between summaries, animated caret.
Hover or focus tooltip anchored to a slotted trigger. Renders in the browser top-layer (popover API), so nothing clips it. Auto-flips placement when it would overflow.
Click-triggered floating panel — menus, filter forms, quick
actions. Outside click and Esc dismiss by
default. Auto-flips placement on overflow.
Side sheet that slides in from any edge. Backed by the native
<dialog>: focus is trapped and the page
scroll stays put. side picks the edge,
size the width or height.
This pattern works well on mobile for action sheets.
Linear or circular, determinate or indeterminate, three sizes.
Proper ARIA progressbar semantics, and the indeterminate
animations respect prefers-reduced-motion.
Multi-step indicator for wizards, onboarding, checkout.
Horizontal or vertical, optional clickable mode
to let users jump between steps.
User avatar with image and deterministic-tint initials fallback
— Mia is always blue, Jamal is always brown. Status dot, ring
for stacking, and an avatar-group for clusters
with overflow "+N".
Star rating input with optional half-stars, keyboard nav, hover preview, and a read-only display mode. Clip-path keeps the half-fill exact at any zoom.
Themed range input. Built on native
<input type="range"> so keyboard and touch
behavior come for free. Optional ticks, label, suffix.
Pure-SVG charts in five flavors — line, area, bar, sparkline, donut — themeable through CSS tokens and accessible by default. Every point and segment is a real DOM node a screen reader can reach. ~11 KB minified, no canvas.