Every registered Texuli example, live from the shared registry. Filter by package and kind. Static site, no foreign network.
157 registered · showing 157
astro-site-doc · astro/layouts/ContentLayout
A visual preview of a documentation page over the Astro content layout: compact hero, reading-width prose and a surface strip in light and dark token themes.
densitydescriptionthemetitleLive example loads in an isolated same-origin preview frame.
astro-site-hero · astro/sections/Hero
A visual preview of an Astro static content layout with a responsive hero, feature section and light/dark token themes.
descriptionthemetitleLive example loads in an isolated same-origin preview frame.
blocks-code · blocks/CodeBlockView
Code blocks with an owned tokenizer: TypeScript, Python, SQL, JSON, shell and plain text, line numbers, stepped highlights and a caption from block data, copy and an RTL page. Fictional content.
blockcopyablehighlightshostSteplabelslineNumbersstepLive example loads in an isolated same-origin preview frame.
blocks-code-hostile · blocks/CodeBlockView
Markup in code stays text, and bidi overrides, injected language tokens or foreign block types show a notice.
blockoninvalidLive example loads in an isolated same-origin preview frame.
blocks-data · blocks/data
Table, stat, KPI and chart content blocks with validation and a hostile rejection sample. Fictional metrics only.
columnsitemskindrowsseriestypeLive example loads in an isolated same-origin preview frame.
blocks-data-charts · blocks/data
Chart content blocks across every chart family: pie, gauge, sankey, histogram, pack, calendar, combo, annotated line and scatter with series labels. Fictional metrics only.
descriptionkindpointspropsseriestitleLive example loads in an isolated same-origin preview frame.
blocks-diagram · blocks/DiagramFamily
Flow, org chart, board and terminal diagrams from validated data, plus a hostile rejection. Fictional Harbor team copy only.
blockoninvalidLive example loads in an isolated same-origin preview frame.
blocks-embed · blocks/EmbedBlockView
A host starts the validated app only after activation; link previews render bounded text and a safe HTTPS link.
blockmountEmbedLive example loads in an isolated same-origin preview frame.
blocks-interactive · blocks/interactive
Poll, quiz, calculator and checklist blocks from validated data. Fictional Harbor Notes copy only.
blockLive example loads in an isolated same-origin preview frame.
blocks-map · blocks/MapBlockView
Places and a delivery route on the fictional Port Meridian basemap, keyboard pan and zoom, and a hostile block the guard rejects. No tiles or network.
blockheadingLevellabelslocaleoninvalidonselectLive example loads in an isolated same-origin preview frame.
blocks-media · blocks/MediaBlockView
Image, figure, video and gallery blocks rendered from validated data. Fictional Harbor Notes copy; embedded raster swatches only.
blocklabelsresolveAvatarLive example loads in an isolated same-origin preview frame.
blocks-media-hostile · blocks/MediaBlockView
Remote image URLs, executable video sources and SVG paths are refused; rejected blocks show an inert notice.
blockoninvalidLive example loads in an isolated same-origin preview frame.
blocks-structure · blocks/StructureFamily
Columns, grid, tabs, accordion, cards, divider and CTA from validated data, plus a hostile rejection. Fictional Harbor copy only.
blockoninvalidLive example loads in an isolated same-origin preview frame.
blocks-text · blocks/TextBlockView
Heading, rich text, list, quote and callout blocks rendered from validated data. Fictional example.com content.
blocklabelsLive example loads in an isolated same-origin preview frame.
blocks-text-hostile · blocks/TextBlockView
Raw HTML stays text, executable links lose their href, and bidi overrides or foreign block types show a notice.
blockoninvalidLive example loads in an isolated same-origin preview frame.
charts-calendar · charts/CalendarHeatmap
A UTC calendar grid shows fictional daily activity with sequential tokens and explicit missing days.
endstartvaluesweekStartsOnLive example loads in an isolated same-origin preview frame.
charts-canvas · charts/canvas
A 100,000-point series rendered on Canvas in light and dark themes, with an accessible description and data table.
moderendererseriesLive example loads in an isolated same-origin preview frame.
charts-cartesian · charts/cartesian
Line, area, grouped bar, stacked bar and combo charts with descriptions and table fallbacks in light and dark modes.
descriptionmodeseriesLive example loads in an isolated same-origin preview frame.
charts-compact · charts/CompactChartsDemo
A sparkline, bullet chart, gauge and progress ring use the active theme tokens and include data table fallbacks.
maxtargetvaluevaluesLive example loads in an isolated same-origin preview frame.
charts-flow · charts/flow
Sankey, funnel and network graphs use token palettes, accessible descriptions and expandable data tables in light and dark modes.
linksnodesstepsLive example loads in an isolated same-origin preview frame.
charts-geo · charts/geo
Offline choropleth and point maps using bundled schematic regions, token colors and accessible data tables.
datapointsshapeLive example loads in an isolated same-origin preview frame.
charts-histogram · charts/HistogramChart
A fictional response-time distribution uses math-backed bins, theme tokens and a data table fallback.
binCountthresholdsvaluesLive example loads in an isolated same-origin preview frame.
charts-interaction · charts/interaction
Keyboard and pointer exploration, tooltips, legend series toggles, brush and zoom hooks, and a data table. Fictional Harbor Notes metrics.
formattershiddenonselectseriesLive example loads in an isolated same-origin preview frame.
charts-matrix · charts/matrix
Heatmap, scatter and bubble charts with accessible descriptions and data table fallbacks in light and dark modes. Fictional metrics only.
cellsdescriptionmodepointsseriesLive example loads in an isolated same-origin preview frame.
charts-pack · charts/PackChart
Fictional team capacity is shown as nested circles backed by the public pack layout math.
paddingrootLive example loads in an isolated same-origin preview frame.
charts-part-whole · charts/part-whole
Pie, donut, treemap and sunburst views with accessible descriptions and expandable data tables in light and dark token palettes.
datalabelsrootLive example loads in an isolated same-origin preview frame.
charts-rtl · charts/rtl
Line, heatmap, scatter, sankey and gauge charts inside dir="rtl" with fictional Arabic labels: captions, legends and tables mirror, while each plot keeps a left-to-right coordinate system.
cellsdescriptionlabellinksnodespointsseriestitleLive example loads in an isolated same-origin preview frame.
charts-statistical · charts/statistical
Box plot, violin and ECDF charts summarize fictional response-time samples with theme tokens and data table fallbacks.
bandwidthdomaingroupsserieswhiskerLive example loads in an isolated same-origin preview frame.
charts-windowed · charts/LineChart
A 200-request fictional latency series shown through a movable visibleDomain window: axes, marks and keyboard exploration follow the window.
seriesvisibleDomainLive example loads in an isolated same-origin preview frame.
chat-composer · chat/composer
An autosizing, IME-safe message composer with attachment actions, pending and error feedback, and an announced typing indicator.
attachmentslabelsnamesonSubmitsendingvalueLive example loads in an isolated same-origin preview frame.
chat-thread · chat/thread
Grouped messages, safe inline formatting, timestamps, own-message alignment, and a long virtualized history with fictional people.
currentUserIddraftlocalemessagesonSendtypingLive example loads in an isolated same-origin preview frame.
core-safe-href · core/safeHref
Shows how safeHref keeps https and mailto links and drops javascript: schemes. Fictional example.com only.
trustvalueLive example loads in an isolated same-origin preview frame.
data-activity · data/activity
Day-grouped activity with avatars, mention tokens, reactions, kind filters and load-more pagination on a fictional CRM timeline.
filteritemsnowpageSizepersonaIdreactionsThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live exampledata-board · data/board
Shows pointer and keyboard card moves, swimlane-ready board structure, RTL layout and work-in-progress limits.
canMovecolumnsitemslanesLive example loads in an isolated same-origin preview frame.
data-calendar · data/calendar
Month, week, day and agenda views with overlapping events, explicit time zones, locale-aware dates and keyboard navigation.
anchordireventslocaletimeZoneviewLive example loads in an isolated same-origin preview frame.
data-files · data/files
Grid and list file browser with breadcrumbs, multi-select, side preview and keyboard navigation on a fictional workspace library.
entriesfolderIdgetPreviewSrclayoutselectedLive example loads in an isolated same-origin preview frame.
data-grid-columns · data/grid-columns
Resize, reorder, pin, hide and group the columns of a grid of fictional deals; every pointer action has a keyboard path in the column menu.
columnStategroupshideablepinnablereorderableresizableLive example loads in an isolated same-origin preview frame.
data-grid-columns-rtl · data/grid-columns
The same grid in a right-to-left layout: the start pin sits on the right and the resize edges, arrows and drags follow the reading direction.
columnStatedensityLive example loads in an isolated same-origin preview frame.
data-grid-core · data/grid-core
Sortable columns (Shift for more keys), search, a filter, row selection and APG grid keyboard navigation on the texuli Table, with an RTL grid. Fictional deals.
columnsfilterlabelsrowssearchselectableselectedsortLive example loads in an isolated same-origin preview frame.
data-grid-editing · data/grid-editing
Inline cell editors with validation, undo/redo and TSV clipboard on the data grid. Fictional Harbor deals.
columnslabelsonApplyonCommitrowsLive example loads in an isolated same-origin preview frame.
data-grid-editing-virtual · data/grid-editing
The editable data grid windows its rows above a threshold: 100,000 fictional records stay editable, with inline edits, the active cell and keyboard navigation kept across scrolling.
columnsonCommitoverscanRowsrowsrowSizeviewportHeightvirtualizeAboveLive example loads in an isolated same-origin preview frame.
data-grid-virtual · data/grid-virtual
A two-axis virtualized grid keeps 100,000 fictional records and wide tables bounded to the visible rows and columns, with keyboard navigation and RTL support.
columnsoverscanColumnsoverscanRowsrowsrowSizeLive example loads in an isolated same-origin preview frame.
data-map · data/map
Fictional vector basemap with clustered locations, a synchronized list, keyboard controls and no network tiles.
basemapcellPxdirectionfencesglyphlabellistPlacementmarkersonPickonSelectonViewChangeroutesselectedIdshapetoneLive example loads in an isolated same-origin preview frame.
data-timeline · data/timeline
Time-scaled Gantt with dependencies, zoom, critical path, RTL and keyboard rescheduling on a fictional launch plan.
dependenciesdirectionnowtaskszoomLive example loads in an isolated same-origin preview frame.
data-tree-view · data/tree-view
Outline tree with lazy folders, multi-select checkboxes, drag reorder and keyboard indent on fictional workspace pages.
checkboxesexpandeditemsloadChildrenonMoveselectedLive example loads in an isolated same-origin preview frame.
data-virtual-list · data/virtual-list
Shows variable row measurements, keyboard navigation, RTL layout and threshold-based loading with fictional records.
countestimateSizeoverscanthresholdLive example loads in an isolated same-origin preview frame.
editor-basic · editor/RichTextEditor
A labelled multiline textbox over the closed editor model: headings, marks, lists, todos, quotes and code rendered as real elements, with Markdown in and out.
labelonChangeplaceholderreadonlytoolbarvalueLive example loads in an isolated same-origin preview frame.
editor-long-document · editor/RichTextEditor
Four hundred blocks rendered in full and keyed by id, with off-screen blocks skipping layout and paint through content-visibility.
labelonChangevalueLive example loads in an isolated same-origin preview frame.
editor-toolbar · editor/EditorToolbar
The roving formatting toolbar with pressed states and shortcuts, the link dialog that refuses unsafe addresses visibly, and the Markdown the document saves as.
controlleronCommandonLinkRequesttrustLive example loads in an isolated same-origin preview frame.
layout-blog-content · texuli/layouts/content/blog
A readable article layout with author metadata, responsive contents navigation and safe in-page links.
authordatedirectionreadingTimeThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live examplelayout-docs-content · texuli/layouts/content/docs
Responsive documentation frame with section navigation, a generated table of contents and keyboard-friendly heading anchors.
directionnavoptionsThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live examplelayout-editorial-content · texuli/layouts/content/editorial
A long-form editorial frame with an eyebrow, introduction, reading metadata and responsive table of contents.
directioneyebrowreadingTimesummaryThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live examplelayouts-auth-settings · texuli/layouts/auth-settings
Authentication split, onboarding wizard and settings shell — responsive and RTL. Fictional Harbor Labs copy.
formmountScreensectionsstepsThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live examplelayouts-dashboard · texuli/layouts/dashboard
Dashboard-grid layout with top chrome, container-query widget spans and an analytics auto-fit KPI grid. LTR and RTL.
dirlayoutnavoptionsThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live examplelayouts-marketing · texuli/layouts/marketing
Landing hero, pricing tiers (integer cents) and marketing sections on the shared marketing frame. Responsive and RTL-ready.
brandLabelnavLinksprimaryCtatierstitleThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live examplelayouts-mobile-drawer · texuli/layouts/mobile
The drawer layout at a desktop width on a detail screen: Back and the screen title in the header, and the whole navigation in a side drawer.
layoutnavoptionspathThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live examplelayouts-mobile-rtl · texuli/layouts/mobile
The tab bar layout in a right-to-left document: the tabs, Back and its chevron mirror.
dirThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live examplelayouts-mobile-tabs · texuli/layouts/mobile
A phone-sized app with a bottom tab bar, a More sheet for the sixth item, a primary action and stacked navigation with Back on a detail screen. Fictional sales app.
layoutnavoptionspathThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live examplemedia-animation · media/animation
Keyframes and easing on composition layers with a timeline scrubber and reduced-motion stills. Fictional example data only.
animationcompositioninitialTimeMsreducedMotionLive example loads in an isolated same-origin preview frame.
media-audio · media/AudioPlayer
Play/pause and keyboard seek on a waveform built from peak samples. Untrusted sources go through the media URL policy; unsafe URLs are refused.
allowedOriginsbarCountlabelpeakssrctrustLive example loads in an isolated same-origin preview frame.
media-captions · media/CaptionsPanel
WebVTT captions with a chapter menu, transcript seek, active caption line, and a blocked unsafe track. Fictional harbor tour copy only.
chapterscuescurrentTimekindonSeeksrctrustvttLive example loads in an isolated same-origin preview frame.
media-composition-canvas · media/CompositionCanvas
Draws a fictional layered poster with gradients, a blend mode, a luminance mask and 160 shapes on a canvas, with keyboard zoom and pan, and refuses a hostile scene.
compositiondirlabellabelsonrenderpixelRatiotrustLive example loads in an isolated same-origin preview frame.
media-composition-model · media/compositionModel
Validates a fictional layered scene with a gradient, masked image, transforms and text without rendering untrusted markup.
blendModelayersmasktransformLive example loads in an isolated same-origin preview frame.
media-composition-svg · media/composition-svg
Renders a validated composition document to an accessible SVG with real text nodes. Fictional example.com / example data only.
compositiontitletrustLive example loads in an isolated same-origin preview frame.
media-export · media/CompositionExport
Export a composition as PNG or SVG and its animation (with OKLCH color keyframes) as WebM in the browser; an unsafe image source is refused. Fictional data.
animationbackgroundcompositionfilenamefpslabelspixelRatiotrustLive example loads in an isolated same-origin preview frame.
media-gallery · media/Gallery
A grid of fictional landscape photos with captions. A tile opens an accessible lightbox with keyboard, swipe and zoom.
aspectRatioindexitemslayoutloopopenLive example loads in an isolated same-origin preview frame.
media-gallery-blocked · media/Gallery
HTTP, script and data URLs fail the media URL policy: their tiles show a labeled fallback, are never requested and are skipped by the lightbox.
itemstrustLive example loads in an isolated same-origin preview frame.
media-gallery-masonry · media/Gallery
The same photos in a masonry layout: each keeps its shape, packed into the shortest column, with captions over the image.
columnsgaplayoutminColumnWidthLive example loads in an isolated same-origin preview frame.
media-generator-slot · media/GeneratorSlot
Host-provided generate UI with loading, cancel and error states. Texuli ships no model; the demo mock returns a local SVG. Unsafe results are blocked.
allowedOriginsgeneratekindprompttrustLive example loads in an isolated same-origin preview frame.
media-image · media/Image
Responsive srcset, focal-point crops, blur-up and color placeholders, link and button images, and fallbacks for blocked or missing sources.
fitfocalPointhrefloaderonactivateplaceholdersizessrcwidthsLive example loads in an isolated same-origin preview frame.
media-image-editor · media/ImageEditor
Crop, rotate, flip, resize, adjust and annotate a fictional harbor photo without changing it, then export the result.
altonexportsrctrustvalueLive example loads in an isolated same-origin preview frame.
media-image-editor-blocked · media/ImageEditor
An untrusted HTTP source fails the media URL policy: the editor shows a note and never requests the image.
srctrustLive example loads in an isolated same-origin preview frame.
media-image-editor-edited · media/ImageEditor
Opens a validated saved edit: a crop, three adjustments, an ellipse, an arrow and a text label over the photo.
onexportvalueLive example loads in an isolated same-origin preview frame.
media-video · media/VideoPlayer
Accessible custom playback controls with captions toggle (C), track picker, on-video cue text, chapter menu, optional transcript, picture-in-picture, and blocked-source state.
allowedOriginscaptionsDefaultloopmutedplaysInlinepostershowTranscriptsrctitletrackstrustLive example loads in an isolated same-origin preview frame.
player-blueprint-preview · player/Player
The Player paints a fictional weekly report blueprint (document layout, KPIs, a chart and a callout) at the untrusted tier, with its trust badge.
blueprintlabelLive example loads in an isolated same-origin preview frame.
player-dashboard · player/Player
The Player paints a fictional fleet dashboard blueprint: a KPI row, a two-column grid of line, donut, bar and gauge charts, and an incidents table.
blueprintlabelLive example loads in an isolated same-origin preview frame.
player-deck · player/Player
The Player paints a fictional four-slide planning deck blueprint (agenda, progress stats, a burn-down chart and a decision callout).
blueprintlabelLive example loads in an isolated same-origin preview frame.
slides-fragments · slides/DeckStage
A DeckStage slide at reveal step 2 of 4: two of three list items shown, a line struck through, and a callout still hidden in its reserved space. Fictional launch plan.
deckinitialSlideIdinitialSteploadThememediaTrustLive example loads in an isolated same-origin preview frame.
slides-media-deck · slides/DeckPrint
Every slide of a media deck in DeckPrint: a media-left figure (cover fit), a media-right image and a body gallery. Embedded swatches only.
deckloadThememediaTrustonReadyLive example loads in an isolated same-origin preview frame.
slides-presenter-screen · slides/DeckStage
DeckStage in presenter mode at reveal step 1 of 4: the slide, speaker notes with the step progress, and the next step. Timer-free, so the view is deterministic.
deckinitialSlideIdinitialSteploadThememediaTrustpresenterLive example loads in an isolated same-origin preview frame.
slides-slot-masters · slides/DeckPrint
Every slide of a slot-master deck in DeckPrint: dividers split blocks into a title footer, two columns with a footer, and a quote with its attribution. Fictional Example Co. data.
deckloadThememediaTrustonReadyLive example loads in an isolated same-origin preview frame.
slides-template-pitch · slides/DeckStage
The pitch starter deck in DeckStage on its media-right solution slide. Fictional Harborline copy.
deckinitialSlideIdloadThememediaTrustLive example loads in an isolated same-origin preview frame.
slides-template-report · slides/DeckStage
The report starter deck (createDeckFromTemplate) in DeckStage on its media-left trend slide. Fictional Example Co. data.
deckinitialSlideIdloadThememediaTrustLive example loads in an isolated same-origin preview frame.
slides-template-review · slides/DeckStage
The review starter deck in DeckStage on its media-left demo slide with a code block. Fictional sprint data.
deckinitialSlideIdloadThememediaTrustLive example loads in an isolated same-origin preview frame.
slides-tour · slides/DeckStage
One DeckStage deck that tours the stage: slot masters, reveal steps, code highlights, speaker notes for the presenter view, the overview and fullscreen. Fictional Example Co. content.
deckloadThememediaTrustLive example loads in an isolated same-origin preview frame.
texuli-alert · texuli/Alert
Inline alerts, documentation callouts and page banners with every tone, actions, dismiss, RTL and dark. Fictional copy only.
actionHrefactionLabeldismissiblelayouttexttitletoneLive example loads in an isolated same-origin preview frame.
texuli-app-layouts · texuli/layouts/app
Responsive sidebar, icon rail, master-detail, top navigation, split view and three-pane layouts with fictional workspace content.
asidedetailActivedirlayoutnavoptionsThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live exampletexuli-badge · texuli/Badge
Status badges in every tone, removable tags (including RTL), and a filter chip with pressed state. Fictional labels only.
labelonRemoveselectedvariantLive example loads in an isolated same-origin preview frame.
texuli-button · texuli/Button
Styled buttons on the token contract: every variant and size, loading, safe href, groups, RTL and dark. Fictional example.com copy only.
disabledhrefloadingsizevariantLive example loads in an isolated same-origin preview frame.
texuli-card · texuli/Card
Elevated and flat cards, media, footer actions, auto-fit grid and a clickable card with URL policy. Fictional example.com only.
gaphreflinkLabelminItemWidthvariantLive example loads in an isolated same-origin preview frame.
texuli-choice · texuli/Checkbox
Styled choice controls with labels, descriptions, indeterminate checkbox, card radios, sizes and RTL. Fictional Harbor Notes preferences.
checkeddescriptionindeterminatelabelorientationvariantLive example loads in an isolated same-origin preview frame.
texuli-combobox · texuli/Combobox
Styled combobox with async loading, empty and error chrome, multi-select chips. Fictional Harbor Notes people and tags.
disableditemsloadOptionsmultiplesizevariantLive example loads in an isolated same-origin preview frame.
texuli-date · texuli/DatePicker
Styled Calendar, DatePicker and DateRangePicker with presets, on the owned APG primitives: sizes, required, invalid, disabled, bounds, RTL and dark.
descriptiondisablederrorlabelmaxValueminValuepresetssizetodayvalueLive example loads in an isolated same-origin preview frame.
texuli-empty · texuli/EmptyState
EmptyState with actions and sizes, RTL compact empty, and ErrorState with pending retry. Fictional Harbor Notes copy.
descriptiononRetryretryLabelsizetitleLive example loads in an isolated same-origin preview frame.
texuli-feedback · texuli/Progress
Loading placeholders, status spinners, and linear/circular progress (determinate and indeterminate) on the token contract. Fictional Harbor Notes copy.
labelloadingLabelshapeshowValuesizetonevalueLive example loads in an isolated same-origin preview frame.
texuli-field · texuli/Field
Labeled fields with description and error states, horizontal RTL layout, and a form validate hook. Fictional Harbor workspace copy only.
descriptionerrorlabelonValidateorientationrequiredLive example loads in an isolated same-origin preview frame.
texuli-file-upload · texuli/FileUpload
Styled drop zone with file list, image previews, progress and rejection errors. Fictional Harbor Notes copy; no real network upload.
acceptdisabledmaxFilesmaxSizeprogressvariantLive example loads in an isolated same-origin preview frame.
texuli-icons · texuli/Icon
A small built-in icon set, size variants, decorative and labelled states, custom SVG compatibility, RTL and dark mode.
iconlabelsizestrokeWidthLive example loads in an isolated same-origin preview frame.
texuli-input · texuli/Input
Styled text fields with clearable input, adornment group, autosize textarea, character count, invalid and disabled states, RTL and dark. Fictional copy only.
autosizeclearabledisabledendinvalidmaxlengthstartvalueLive example loads in an isolated same-origin preview frame.
texuli-kbd-code · texuli/Kbd
Keyboard keys, escaped inline and block code, and copy-with-feedback on the token contract. Fictional example.com only.
labelsizevaluevariantLive example loads in an isolated same-origin preview frame.
texuli-menus · texuli/DropdownMenu
Styled menus with shortcuts, checkbox and radio items, submenus, context regions and an application menubar. Fictional Harbor Notes chrome.
iconopenshortcutsizevariantLive example loads in an isolated same-origin preview frame.
texuli-number-pin · texuli/NumberField
Locale-aware number controls and one-time-code cells with sizes, disabled states, RTL and dark surfaces.
dirdisabledlocalemaskmaxlengthsizevalueLive example loads in an isolated same-origin preview frame.
texuli-rating · texuli/Rating
Star rating input and display: whole and half stars, clearable, sizes, tones, read-only, disabled, ten stars, averages and RTL. Fictional Harbor Notes Cafe reviews.
allowHalfclearabledisableddisplaylabelsmaxreadonlyshowValuesizetonevalueLive example loads in an isolated same-origin preview frame.
texuli-resizable · texuli/ResizablePanelGroup
Styled resizable panel groups: plain and bordered, side by side and stacked, collapsible, disabled, RTL and a remembered layout. Fictional content only.
autoSaveIdcollapsibledirectionlayoutsizevariantwithGripLive example loads in an isolated same-origin preview frame.
texuli-scroll-area · texuli/ScrollArea
Native, keyboard-accessible scrolling with styled scrollbar visibility, size variants, RTL and dark mode.
dirlabelsizetypeLive example loads in an isolated same-origin preview frame.
texuli-separator-aspect · texuli/Separator
Layout utilities: horizontal and vertical separators, aspect-ratio boxes, and screen-reader-only text. Fictional Harbor Notes copy.
customdecorativeorientationratiovariantLive example loads in an isolated same-origin preview frame.
texuli-sheet · texuli/Sheet
Token-styled sheets, snap-point drawer, non-modal detail panel and responsive modal with logical sides.
dirmodalopensidesizesnapPointsLive example loads in an isolated same-origin preview frame.
texuli-sidebar · texuli/Sidebar
Collapsible app sidebar with sections and badges, plus AppNav mobile drawer. Fictional Harbor Notes navigation.
collapsedcollapsibledrawersectionsvariantThis is a full-page layout example. It keeps its own landmarks in an isolated preview so it does not collide with the site shell.
Open the live exampletexuli-slider · texuli/Slider
Styled single and range sliders with sizes, marks, vertical orientation, RTL and dark. Fictional controls only.
marksmaxminorientationsizesteptypevalueLive example loads in an isolated same-origin preview frame.
texuli-stat · texuli/Stat
Stat tiles with delta tone and sparkline slot; KPI with unit formatting, previous-period comparison, loading and empty. Fictional Harbor Notes metrics.
deltahreflabelpositiveprevioustrendunitvalueLive example loads in an isolated same-origin preview frame.
texuli-stepper · texuli/Stepper
Horizontal and vertical steppers (including RTL), plus a multi-step wizard with validation. Fictional Harbor workspace copy only.
canAdvancecompletedcurrentorientationstepsvalidateLive example loads in an isolated same-origin preview frame.
texuli-table · texuli/Table
Static tables with caption, plain, striped and grid rows, three densities, numeric and footer cells, a selected row, an empty state, a sticky header in a capped area, stacked rows on narrow widths and RTL. Fictional data only.
busydensitylabelmaxBlockSizestackstickyHeadervariantLive example loads in an isolated same-origin preview frame.
texuli-tabs-accordion · texuli/Tabs
Styled tabs (line, pills, enclosed), bordered accordion and collapsible disclosure. Fictional Harbor Notes copy; RTL pills demo.
itemslabeltypevaluevariantLive example loads in an isolated same-origin preview frame.
texuli-tags-color · texuli/TagsInput
Styled tags field (RTL) and color pickers with swatches. Fictional Harbor Notes topics and brand colors.
formatlabelmaxswatchesvalueLive example loads in an isolated same-origin preview frame.
texuli-timeline · texuli/Timeline
Vertical and horizontal timelines: every status and tone, links through the URL policy, composed items, right to left and dark. Fictional data only.
hrefTrustitemslabelmessagesorientationLive example loads in an isolated same-origin preview frame.
texuli-toast · texuli/Toaster
Styled toast stack with success, error, info, warning, actions, promise toasts, and RTL. Fictional Harbor copy only.
labeloffsetstoreLive example loads in an isolated same-origin preview frame.
texuli-toaster-positions · texuli/Toaster
Two styled toasters (top end and bottom start) with two toasts in each tone, logical placement and enter/exit motion. Fictional Harbor copy only.
labeloffsetpositionstoreLive example loads in an isolated same-origin preview frame.
texuli-toggle · texuli/Toggle
Styled pressable toggles and segmented groups (single and multiple) with variants, sizes, RTL and dark. Fictional labels only.
orientationpressedsizetypevaluevariantLive example loads in an isolated same-origin preview frame.
texuli-toolbar · texuli/Toolbar
Styled toolbars with buttons, links, separators and single/multiple groups. Variants, vertical, RTL and dark. Fictional actions only.
orientationsizetypevariantLive example loads in an isolated same-origin preview frame.
texuli-tooltip · texuli/Tooltip
Styled tooltips with optional keyboard shortcut chips on the token contract. Fictional Harbor Notes copy.
aligncontentdelayDurationdisabledopenshortcutsideLive example loads in an isolated same-origin preview frame.
texuli-tree · texuli/TreeView
A nested tree with keyboard navigation, expandable folders, single and multiple selection, disabled items, density variants, RTL and dark mode. Fictional content only.
densityexpandeditemsselectedselectionModevariantLive example loads in an isolated same-origin preview frame.
ui-avatar · texuli/Avatar
Styled avatars with initials, presence status and a stacked group with overflow. Fictional Harbor names only.
maxnamesizesrcstatusLive example loads in an isolated same-origin preview frame.
ui-avatar-dark · texuli/Avatar
Avatars and groups on the dark theme using only token colors.
Live example loads in an isolated same-origin preview frame.
ui-avatar-rtl · texuli/Avatar
Arabic labels and stacked group in a right-to-left layout.
Live example loads in an isolated same-origin preview frame.
ui-avatar-states · texuli/Avatar
Presence dots, unsafe src fallback and decorative pairing.
decorativesrcstatusLive example loads in an isolated same-origin preview frame.
ui-avatar-variants · texuli/Avatar
Every avatar size from xs to lg on the token contract.
sizeLive example loads in an isolated same-origin preview frame.
ui-carousel · texuli/Carousel
A labelled carousel of fictional destinations with previous and next buttons and a slide picker that roves with the arrow keys.
childrenindexitemslabelLive example loads in an isolated same-origin preview frame.
ui-carousel-autoplay · texuli/Carousel
Rotates every four seconds with a rotation control first in tab order; hovering pauses it, keyboard focus stops it, and reduced motion keeps it off.
autoplayintervalonPlayingChangeLive example loads in an isolated same-origin preview frame.
ui-carousel-dark · texuli/Carousel
The same carousel on a dark color scheme, using only token fallbacks.
Live example loads in an isolated same-origin preview frame.
ui-carousel-overlay · texuli/Carousel
The previous and next buttons sit on the inline edges of the slides.
controlsLive example loads in an isolated same-origin preview frame.
ui-carousel-rtl · texuli/Carousel
Arabic labels in a right-to-left layout: the slides, arrows, swipe and edge buttons all follow the inline direction.
controlsmessagesLive example loads in an isolated same-origin preview frame.
ui-carousel-states · texuli/Carousel
No loop at the first slide, buttons without a picker, a single slide with no controls, and translated labels.
loopmessagesshowControlsshowDotsLive example loads in an isolated same-origin preview frame.
ui-command · texuli/Command
Modal command palette with recent items, search groups and a ⌘K trigger. Fictional Harbor actions only.
openrecentItemssearchsizevariantLive example loads in an isolated same-origin preview frame.
ui-command-dark · texuli/Command
Command palette on the dark theme using only token colors.
Live example loads in an isolated same-origin preview frame.
ui-command-rtl · texuli/Command
Arabic labels for an inline command panel in a right-to-left layout.
Live example loads in an isolated same-origin preview frame.
ui-command-states · texuli/Command
Empty filter, disabled option and the ⌘K trigger chrome.
disabledvalueLive example loads in an isolated same-origin preview frame.
ui-command-variants · texuli/Command
Inline command panels across sm/md/lg and outline/soft.
sizevariantLive example loads in an isolated same-origin preview frame.
ui-dialog · texuli/Dialog
Styled modal with header, scrollable body and footer actions. Fictional Harbor Labs copy.
descriptionfooteropensizetitleLive example loads in an isolated same-origin preview frame.
ui-dialog-dark · texuli/Dialog
Dialog and alert trigger on the dark theme using only token colors.
Live example loads in an isolated same-origin preview frame.
ui-dialog-rtl · texuli/Dialog
Arabic labels in a right-to-left layout with logical padding.
closeLabeltitleLive example loads in an isolated same-origin preview frame.
ui-dialog-states · texuli/Dialog
Closed dialog trigger beside an open destructive confirm pattern.
destructiveonConfirmopenLive example loads in an isolated same-origin preview frame.
ui-dialog-variants · texuli/Dialog
sm, md and lg dialog widths side by side on the token contract.
sizeLive example loads in an isolated same-origin preview frame.
ui-navigation · texuli/Navigation
Styled breadcrumb, navigation menu flyouts and pagination on the token contract. Fictional example.com links only.
itemspagesizevaluevariantLive example loads in an isolated same-origin preview frame.
ui-navigation-dark · texuli/Navigation
Navigation pieces on the dark theme using only token colors.
Live example loads in an isolated same-origin preview frame.
ui-navigation-rtl · texuli/Navigation
Arabic labels for breadcrumb, menu and pagination in a right-to-left layout.
Live example loads in an isolated same-origin preview frame.
ui-navigation-states · texuli/Navigation
Collapsed breadcrumb, closed menu, blocked href and disabled pagination.
disabledmaxItemsLive example loads in an isolated same-origin preview frame.
ui-navigation-variants · texuli/Navigation
Breadcrumb sizes and pagination outline/soft across sm, md and lg.
sizevariantLive example loads in an isolated same-origin preview frame.
ui-popover · texuli/Popover
Styled floating account menu with an arrow, header, list and close control. Fictional example.com copy.
alignarrowopensidesizevariantLive example loads in an isolated same-origin preview frame.
ui-popover-dark · texuli/Popover
Popover and hover card on the dark theme using only token colors.
Live example loads in an isolated same-origin preview frame.
ui-popover-rtl · texuli/Popover
Arabic labels in a right-to-left layout with logical padding and arrow placement.
alignsideLive example loads in an isolated same-origin preview frame.
ui-popover-states · texuli/Popover
Closed popover, open without arrow, and an open hover card profile preview.
arrowopenopenDelayLive example loads in an isolated same-origin preview frame.
ui-popover-variants · texuli/Popover
Elevated, flat and size variants of the popover surface side by side.
sizevariantLive example loads in an isolated same-origin preview frame.
ui-select · texuli/Select
Styled single-select listbox with groups, option descriptions and a chevron trigger. Fictional plans only.
itemsopenplaceholdersizevaluevariantLive example loads in an isolated same-origin preview frame.
ui-select-dark · texuli/Select
Soft variant select with groups and a separator on the dark theme.
Live example loads in an isolated same-origin preview frame.
ui-select-rtl · texuli/Select
Arabic labels in a right-to-left layout with logical padding.
Live example loads in an isolated same-origin preview frame.
ui-select-states · texuli/Select
Placeholder, disabled trigger and open list with a disabled option.
disabledopenplaceholderLive example loads in an isolated same-origin preview frame.
ui-select-variants · texuli/Select
Outline and soft triggers across sm, md and lg sizes.
sizevariantLive example loads in an isolated same-origin preview frame.