The catalogue
<aurora-grid filterable striped selectable="multiple" page-size="4"></aurora-grid>
grid.columns = [
{ field: 'name', title: 'Project' },
{ field: 'stars', title: 'Stars', align: 'right', formatter: (v) => `★ ${v}` },
]
grid.data = rows
<aurora-treelist selectable></aurora-treelist>
list.columns = [{ field: 'name' }, { field: 'size', align: 'right' }]
list.data = rows // nested children or flat id/parentId
list.template = (row) => `<strong>${row.name}</strong> — ${row.role}`
list.data = people
chat.add({ text: 'Hi!', who: 'them', name: 'Ada' })
chat.addEventListener('aurora-send', (e) => bot.reply(e.detail.text))
box.addEventListener('aurora-send', async (e) => {
box.setAttribute('busy', '')
box.output = await llm(e.detail.prompt)
})
<aurora-tilelayout columns="3"> <aurora-tile heading="Traffic" colspan="2">…</aurora-tile> </aurora-tilelayout>
gantt.tasks = [
{ id: 'build', title: 'Build', start: '2026-07-05', end: '2026-07-12',
progress: 60, dependsOn: ['design'] },
]
pivot.rows = ['region', 'product'] pivot.cols = 'quarter' pivot.measure = 'amount' pivot.data = sales
org.nodes = [{ name: 'Ada', title: 'CEO', children: [...] }]
board.columns = [{ id: 'todo', title: 'To do', cards: [...] }]
board.addEventListener('aurora-move', (e) => save(e.detail))
pg.value = { title: 'Aurora', width: 320, visible: true, accent: '#6d5cff' }
fb.fields = [{ field: 'name' }, { field: 'stars', type: 'number' }]
grid.data = fb.apply(allRows)
fm.fs = [{ name: 'src', type: 'folder', children: [...] }]
fm.addEventListener('aurora-open', (e) => view(e.detail.path))
<aurora-dockmanager> <aurora-dockpane heading="Explorer" zone="left">…</aurora-dockpane> </aurora-dockmanager>
sheet.data = { A1: '120', A2: '80', A3: '=SUM(A1:A2)' }
diagram.nodes = [{ id: 'a', label: 'Ingest', x: 40, y: 60 }]
diagram.edges = [{ from: 'a', to: 'b', label: 'raw' }]
map.geo = featureCollection
map.data = { Norte: 84, Centro: 51, Lisboa: 97, Alentejo: 32, Algarve: 66 }
import 'aurora/pdf' <aurora-pdfviewer src="report.pdf"></aurora-pdfviewer>
<aurora-sparkline type="area"></aurora-sparkline> spark.data = [3, 7, 4, 9, 6, 12]
chart.labels = ['Q1', 'Q2', 'Q3', 'Q4']
chart.series = [{ label: 'Stars', data: [120, 260, 410, 640] }]
<aurora-gauge type="arc" value="72" label="CPU" unit="%"></aurora-gauge>
wiz.data = rows
wiz.addEventListener('aurora-change', (e) => save(e.detail.config))
<aurora-qrcode value="https://auroralib.com"></aurora-qrcode>
<aurora-barcode value="AURORA-0042"></aurora-barcode>
sched.events = [
{ title: 'Standup', start: '2026-07-13T09:00', end: '2026-07-13T09:30' },
]
A self-contained dialog animated with GSAP. Press Escape or click the backdrop.
<aurora-tooltip text="Opens a dialog"> <aurora-button onclick="dlg.show()">Open</aurora-button> </aurora-tooltip> <aurora-modal id="dlg">…</aurora-modal>
Forty components, one import. This drawer traps Tab, closes on Escape, and hands focus back when it leaves.
<aurora-drawer id="panel" side="right">…</aurora-drawer> <button onclick="panel.show()">Open</button>
<aurora-splitter position="40" min="20"> <div slot="a">…</div> <div slot="b">…</div> </aurora-splitter>
Drag me around by the title bar. Escape closes.
<aurora-window id="win" title="Inspector">…</aurora-window> <button onclick="win.show()">Open</button>
<aurora-popover placement="bottom"> <button slot="trigger">Info</button> Any markup here. </aurora-popover>
AuroraToaster.show(…).
import { AuroraToaster } from '@lasitospt/aurora'
AuroraToaster.show('Everything is live.', {
title: 'Changes saved',
variant: 'success',
})
<aurora-accordion label="What is aurora?" open> A set of animated web components. </aurora-accordion>
lines="n" paragraphs.
<aurora-skeleton circle style="width: 48px; height: 48px"></aurora-skeleton> <aurora-skeleton lines="3"></aurora-skeleton>
<aurora-avatar name="Ada Lovelace" status="online"></aurora-avatar> <aurora-badge value="7"><button>Inbox</button></aurora-badge>
<aurora-loader type="dots" label="Syncing"></aurora-loader> <aurora-progressbar value="64" label="Uploading"></aurora-progressbar>
<aurora-videoplayer src="movie.mp4" poster="frame.jpg"></aurora-videoplayer>
import { AuroraConfetti } from '@lasitospt/aurora'
AuroraConfetti.burst({ count: 120 })
ElementInternals — they submit with a real
<form>.
<form> <aurora-input name="email" label="Email" type="email"></aurora-input> <aurora-switch name="newsletter" checked></aurora-switch> <aurora-slider name="volume" min="0" max="100" value="70"></aurora-slider> </form>
form.rules = { email: [{ type: 'email' }, { type: 'required' }] }
form.addEventListener('aurora-submit', (e) => save(e.detail.data))
<aurora-checkbox label="Email me updates" checked></aurora-checkbox> <aurora-radiogroup value="p">…</aurora-radiogroup>
<aurora-checkboxgroup values="grid" name="interests">…</aurora-checkboxgroup> <aurora-togglebutton pressed>Bold</aurora-togglebutton>
<aurora-captcha length="5"></aurora-captcha> <aurora-speechbutton for="field"></aurora-speechbutton>
<aurora-textarea label="Bio" maxlength="280"></aurora-textarea>
Aurora now ships ninety-five components — select this text and make it yours.
<aurora-editor name="body" placeholder="Write…"></aurora-editor>
<aurora-rangeslider start="20" end="70" name="price"></aurora-rangeslider>
<aurora-select name="lang" placeholder="Pick a language"> <option value="ts">TypeScript</option> <option value="go">Go</option> </aurora-select>
<aurora-autocomplete placeholder="Search…"></aurora-autocomplete> ac.options = ['TypeScript', 'Go', 'Rust']
<aurora-combobox allow-custom> <option>TypeScript</option> </aurora-combobox>
<aurora-listbox label="Available" connect="chosen">…</aurora-listbox> <aurora-listbox id="chosen" label="Chosen"></aurora-listbox>
ddt.items = [{ label: 'Engineering', children: [{ label: 'Frontend', value: 'fe' }] }]
mcc.columns = [{ field: 'name' }, { field: 'capital' }]
mcc.data = countries
<aurora-multiselect name="stacks" placeholder="Pick stacks…"> <option value="ts">TypeScript</option> </aurora-multiselect>
<aurora-calendar name="due" value="2026-07-11"></aurora-calendar>
<aurora-multiviewcalendar views="2"></aurora-multiviewcalendar>
<aurora-datepicker name="due" format="locale"></aurora-datepicker>
<aurora-timepicker name="time" step="15"></aurora-timepicker>
<aurora-daterange name="stay"></aurora-daterange>
<aurora-datetimepicker label="Kickoff" step="30"></aurora-datetimepicker>
<aurora-dateinput label="Date of birth" name="dob"></aurora-dateinput>
<aurora-colorpicker value="#6d5cff" swatches="#6d5cff,#22d3ee"></aurora-colorpicker>
<aurora-signature name="signature"></aurora-signature>
<aurora-imageeditor src="photo.jpg"></aurora-imageeditor>
<aurora-colorpalette columns="8"></aurora-colorpalette> <aurora-durationpicker value="01:30:00"></aurora-durationpicker>
<aurora-rating name="stars" value="3" max="5"></aurora-rating>
<aurora-numeric name="qty" min="0" max="10" step="1"></aurora-numeric>
<aurora-masked name="phone" mask="(###) ###-####"></aurora-masked>
<aurora-otp name="code" length="6"></aurora-otp>
<aurora-upload name="attachments" multiple max-size="5242880"></aurora-upload>
by="chars" for a per-character
headline cascade, by="words" (default) for word blocks.
<aurora-text by="chars" stagger="0.03"> Motion, built in. </aurora-text>
hover it replays on
pointer enter — try it.
<aurora-scramble hover duration="1.2"> TRANSMISSION DECODED </aurora-scramble>
<aurora-typewriter speed="18"> The platform types for itself. </aurora-typewriter>
<aurora-glitch hover>SIGNAL LOST</aurora-glitch>
<aurora-shine speed="2.6">Polished by default.</aurora-shine>
<aurora-magnetic strength="0.6"> <aurora-button>Hover near me</aurora-button> </aurora-magnetic>
<aurora-tilt max="16"> <div class="card">Tilt me</div> </aurora-tilt>
<aurora-ripple> <button>Click me</button> </aurora-ripple>
<aurora-flip trigger="hover"> <div slot="front">Front</div> <div slot="back">Back</div> </aurora-flip>
<aurora-carousel> <div class="slide">01</div> <div class="slide">02</div> </aurora-carousel>
<aurora-sortable> <div>Design the API</div> <div>Ship it</div> </aurora-sortable>
<aurora-draggable data="payload">…</aurora-draggable>
zone.addEventListener('aurora-drop', (e) => use(e.detail.data))
<aurora-compare value="62"> <img slot="before" src="/before.jpg" /> <img slot="after" src="/after.jpg" /> </aurora-compare>
data-depth.
<aurora-parallax strength="30"> <img data-depth="0.3" /> <h2 data-depth="0.8">Title</h2> </aurora-parallax>
<aurora-marquee speed="70"> GSAP · Three.js · Web Components · </aurora-marquee>
<aurora-orbit radius="72" speed="12"> <span slot="center">✦</span> <span class="dot"></span>… </aurora-orbit>
<aurora-reveal stagger="0.12"> <div class="card">One</div> <div class="card">Two</div> </aurora-reveal>
value re-tweens live.
<aurora-counter value="4821" duration="1.6"></aurora-counter>
<aurora-progress></aurora-progress>
<aurora-timeline> <aurora-timeline-item date="Jan 2026" heading="v0.1">…</aurora-timeline-item> </aurora-timeline>
<aurora-cursor></aurora-cursor>
/* theme it */
:root { --aurora-cursor-color: rgba(169, 155, 255, 0.55); }
prefers-reduced-motion.
<aurora-nebula color="#6d5cff" color2="#22d3ee" speed="1"></aurora-nebula>
<img> underneath keeps a11y, SEO and no-WebGL
environments intact.
<aurora-lens src="/hero.jpg" alt="…" strength="1"></aurora-lens>
<aurora-spotlight class="card"> Your content </aurora-spotlight>
<aurora-beam speed="4"> <div class="card">Always in motion.</div> </aurora-beam>
aurora/three entry — this card lazy-loads Three.js as it
scrolls into view, exactly like your app would.
import '@lasitospt/aurora/three' // opt-in entry <aurora-scene color="#6d5cff" speed="1.2"></aurora-scene>
aurora/three entry.
<aurora-particles count="2200" color="#6d5cff" color2="#22d3ee"> </aurora-particles>
aurora/three entry.
<aurora-wave color="#6d5cff" amplitude="0.4"></aurora-wave>
Nothing matches — try another word.