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.
Then import "@ra9/tan-compose-kit" for everything, or a
single component like import "@ra9/tan-compose-kit/button".
The CDN tags register every <tc-*> element on load —
no import needed.
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).
block stretches a button full-width — handy at the
end of a mobile form. The default slot accepts inline icons
alongside text.
Submits with native <form> via
ElementInternals. Label, helper or error text,
disabled / required flags. Resets cleanly with the parent form.
The type prop forwards to the native input, so you
get the right mobile keyboard and validity rules per field.
Form-associated dropdown wrapping a native
<select>. Same chrome as
<tc-input>; submits with
<form>.
Pass options as a JSON attribute to render entirely
from markup — no script required. Match value to a
value to preselect it, or mark an option
"disabled": true.
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.
options is a JSON prop, so a combobox can render
from pure markup too. Each entry takes an optional
icon. Preselect via value (single) or a
comma-separated list (multiple).
Tablist with arrow-key roving focus, named slots per panel, and ARIA roles. Active tab reflects to attribute.
Define tabs inline with the tabs JSON attribute and
slot panels by id — no script needed. Set active to
open a tab other than the first.
active="props".
tc-tab-change fires on
every switch.
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.
Add the open attribute and the dialog shows on load —
useful for a server-rendered confirmation step. The footer slot
holds the action row; omit title for a plain prompt.
This action is permanent. The post will be removed from your blog and feed.
Inline notification with variant, auto-dismiss, and a close
button. Set duration="0" to keep it open until
the user closes it.
With open set, a toast renders inline immediately —
here with duration="0" so it stays put. Leave
message empty to use the default slot for links or
formatting, and add dismissible="false" to drop the
close button.
Pure-presentation card for a metric. Label, value, optional prefix/suffix, optional delta with up/down/neutral trend.
Drop the delta prop for a bare metric, or override
the trend tokens for a custom palette. trend only
colors the delta — pick it for the visual you want.
Paginated, filterable, sortable. Pass rows and
columns as JSON props. Emits
tc-row-click when a row is clicked.
declarative rows + columns via JSON attributes
empty state · custom empty-text · filter off
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.
build() before v2.
title for short, standalone asides.
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.
A deeper TOC that also lists h4 headings.
Core ideas before the API.
Design tokens drive theming.
Project content into components.
Compose fields with a stack.
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"
tc-stack gap="5" align="center"
tc-grid columns="4" gap="3"
tc-cluster gap="2" justify="center"
tc-cluster gap="1.5rem" align="baseline" wrap="false"
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.
media slot on top; header and body
padded below it.
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.
mode="multi", opening this leaves the others open.bordered="false" the frame and dividers are dropped — useful when nesting inside a panel that already has its own border.mode="single" still applies: opening one item closes the rest.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.
? anywhere to reopen this panel.
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.
Complete page templates composed from the kit primitives — a login page, signup, an admin shell, a settings page, and pricing. Each one is a single element that emits an event on interaction, and each has its own docs page.
Emits tc-block-login-submit with the typed
credentials.
Emits tc-block-signup-submit with name, email,
password, and consent.
Emits tc-block-dashboard-nav. Content is slotted
into the main region.
Emits tc-block-settings-change. Each section is a
named slot.
Emits tc-block-pricing-select. Tiers come from a
single JSON prop.