Library

Components

Everything exported from @teralith/ui, with a live demo of each in a template theme.

Name	Kind	What it does
ButtonLink	Primitive	Link styled as a button: solid accent, outline, and inverse pair for accent backgrounds.
Count	Primitive	Bracketed, zero-padded monospace number for headings and filters.
Crosshair	Primitive	Thin registration mark. Decorative, hidden from assistive technology.
CursorReadout	Primitive	Decorative pointer coordinates, like a camera monitor overlay. Mouse only.
FilterChips	Primitive	Outlined filter chips; the active chip fills with ink.
LiveClock	Primitive	Ticking local time for the studio's city, hydration safe.
Media	Primitive	The one image slot every block uses: next/image filling a sized box, marked for wireframe mode.
MonoLabel	Primitive	Small uppercase monospace label with an optional bracketed index. The eyebrow and caption style.
PillLink	Primitive	Outlined pill call to action with a diagonal arrow that fills on hover.
RoleCycler	Primitive	Steps through a list of roles. Reads the full list to screen readers; still under reduced motion.
SectionHeading	Primitive	Eyebrow, h2, lead and an optional action: the opener for any page section.
SegmentedToggle	Primitive	"View 1\|2" switch. Pressed-state buttons inside a labelled group.
UnderlineLink	Primitive	Uppercase link whose underline retracts on hover. Off-site links open safely in a new tab.
Wordmark	Primitive	Text wordmark in the template's wordmark face, linked home.
BeforeAfter	Block	Two pictures of the same subject under a draggable divider. A real range input, so touch, mouse and arrow keys all work.
BentoGrid	Block	Tiles of different sizes in one grid: large, wide, tall and small, with optional picture or icon.
CardGrid	Block	Even cards on a raised surface with icon, text, meta line and link.
CinemaHero	Block	Full-bleed featured reel with cross-fades, a slow push-in, a film ruler and a pause control.
ConditionIndex	Block	A to Z list with a sticky letter bar that jumps to each group.
ContactForm	Block	Accessible enquiry form: checks on blur and submit, announced errors, honeypot, pending state, honest result from a server action.
CreditsList	Block	Film credits as a definition list.
CtaBand	Block	Full-width call to action on the accent colour.
Dialog	Block	Modal on the native dialog element, in centre, drawer and sheet forms. Focus trap, Escape, focus return and scroll lock come from the browser.
DisplayHeading	Block	Oversized page title with an optional bracketed count at its shoulder.
DragCarousel and FrameCard	Block	Horizontal strip with drag, snap and arrow paging, filled with tall frame-numbered cards.
EmptyState	Block	A screen or panel for nothing here: a 404, an empty list, no results. Always names the next step.
FactList	Block	Label and value pairs in a ruled grid, read as one definition list: bedrooms, floor area, year built, tenure.
FactsGrid	Block	A short row of label and value pairs under a hairline.
FaqList	Block	Questions that open in place, on native details elements.
FilmstripMarquee	Block	Stills drifting sideways under a two-word header. Pauses on hover; scrolls by hand under reduced motion.
FooterBar	Block	One-line footer: place code and cycling roles, a link, a note, back to top.
FooterColumns	Block	Multi-column footer: brand and blurb, link groups, contact, legal line.
FrameRuler	Block	Film-edge ruler with numbered segments and a playhead. Drives CinemaHero.
FullscreenMenu	Block	Full-screen numbered index menu on a modal dialog: focus trap, Escape, scroll lock, closes on navigation.
ImageGrid	Block	Thumbnails that open in a full-screen viewer with arrow keys, previous and next, a counter and captions. Built on Dialog.
ListingCard	Block	One property: picture, status tag, price, title, place and bed, bath and floor area. The whole card is a single link named by the title; land shows its type instead of room counts.
ListingFilters	Block	Filters and a grid of listings in one client block: buying or renting, type, minimum bedrooms and a price sort. A live count announces each change, and an empty result offers a way back.
LocationCard and HoursTable	Block	Address, phone, email and directions with a photo, plus opening hours as a table.
LogoWall	Block	Client logos at low contrast, full strength on hover, with a count.
NavBar	Block	Sticky bar with inline links and a booking button; a calm full-screen menu on phones.
NewsletterSignup	Block	One-field signup for a newsletter or waitlist. Checks the address, hides a honeypot, and shows exactly what the action reports.
PageHeader	Block	Subpage opener with breadcrumb, eyebrow, h1 and lead.
PhotoViewer	Block	Single-frame viewer: thumbnail rail, registration marks, counter and shot details. Arrow keys step.
PriceList	Block	A grouped menu of services and prices with a dotted leader from name to price. Spa, salon, clinic and restaurant menus all fit; each line can link to its own page.
PricingTiers	Block	Two to four packages side by side with one featured. Prices are written strings with the currency, never computed.
ProfileIntro	Block	About-page opener: label row, the name at display size, roles and city.
SiteHeader	Block	Fixed top bar: wordmark, clock, call to action and the menu button that opens FullscreenMenu.
SplitBio	Block	Long-form bio beside a portrait that stays in view.
SplitHero	Block	Headline, lead, actions and reassurances beside a tall image with a floating card.
StatementBand	Block	One huge bracketed line between registration marks.
StatsStrip	Block	A row of headline numbers with labels and sources. The label reads first for screen readers; the number leads on screen.
StepsList	Block	Numbered steps in a row: first visit, how it works, what happens next.
Tabs	Block	Accessible tabs: arrow keys, Home and End move and open, one tab stop, every panel in the page.
TeamGrid	Block	People with photo or initials, role, credentials and a short bio.
TestimonialWall	Block	Customer quotes as figures with a cited name, packed into columns, or one large featured quote. Initials stand in for photos.
WorkGrid	Block	Project cards in alternating rows of two and three, framed by hairlines.
WorkIndex	Block	Projects page body: heading, view switch, category filter, then WorkGrid or WorkList.
WorkList	Block	The same projects as an index: number, title, credits, year, category.
CountUp	Motion	A whole number that counts up when it scrolls into view. The server HTML and screen readers carry the final figure from the start.
CursorRing	Motion	A soft ring that trails the mouse and swells over links and buttons. Decoration on top of the normal cursor; mouse and pen only.
Magnetic	Motion	Pulls a button or link a few pixels toward the pointer as it nears. Mouse and pen only; touch, keyboard and reduced motion get the plain element.
MaskReveal	Motion	Heading lines rise from behind a mask, 0.35 s apart. On load or on entering view; never hides a heading that is already on screen.
PageTransition	Motion	Animates one page out and the next in with the browser's view transitions: a curtain wipe or a fade and lift. Goes in a template.tsx. Needs React 19.3.
ParallaxScene	Motion	Layers drift at different depths as the scene scrolls past. Pure CSS scroll timeline; still layers where unsupported or when less motion is asked for.
PinnedSteps	Motion	Scrollytelling: a pinned panel changes as each step crosses the middle of the screen, with a progress rail. Phones get each visual inline instead.
Reveal	Motion	Brings a block in as it scrolls on screen: rise, fade or scale, with an optional delay for staggering. Visible without scripts; blocks already on screen never flash.
ScrollProgress	Motion	A thin bar that fills as the page scrolls. Pure CSS scroll timeline; hidden where unsupported or when motion is reduced. Here it sits at the top of the demo frame.
TextMarquee	Motion	A big ticker of words that drifts sideways. Pauses on hover; becomes a plain wrapped line when motion is reduced. The repeat is hidden from screen readers.
TiltCard	Motion	A card that leans toward the pointer in 3D and settles when it leaves. Mouse and pen only.
ToastProvider and useToast	Motion	Small notices that stack in a corner and leave on their own. Hover or focus pauses them; errors are announced at once, others politely.
WordReveal	Motion	A large statement whose words light up one at a time, in reading order, as it scrolls past. Pure CSS scroll timeline; muted words stay at 3:1 contrast, and every word shows at full strength where unsupported or when less motion is asked for.