Components.

The soft olive or amber corner glow from the Lantern hero, as a decorative background layer.

A code panel with a filename bar, language badge, copy button, optional line numbers and highlighted lines. No syntax highlighter required.

A package manager switcher that shows the same command for npm, pnpm, yarn and bun, with a copy button. The chosen manager is remembered and shared by every instance on the page.

TurtleDeck's log console: timestamped lines in four levels that stay scrolled to the newest entry, over a command row with an orange prompt.

The TurtleDeck movement pad: a 3x3 grid of buttons with icons, labels and key hints. Optional keyboard binding presses the matching button.

The Lantern directory listing: a grid banner with an icon and hub address, category, title, description, tags and a status footer.

The mono uppercase label that sits above Lantern headings.

A list of signed messages with a composer, like the Lantern guestbook. Entries show initials, a name, relative time and the message.

TurtleDeck's inventory: square slots on a faint grid with beveled item swatches, short names and stack counts. The selected slot gets an orange border and the arrow keys move it.

TurtleDeck's show-once key box: the key in mono type with a copy button, an optional masked mode with a reveal toggle, and a warning that it will not be shown again.

The Lantern site header: diamond mark, name and outlined tag, nav links and a bordered call to action. On phones the links move into a sheet behind a menu button.

The dashed elliptical rings behind the Lantern hero terminal, as a decorative background layer with optional slow rotation.

A Minecraft server status card with a copyable address, online state, a player bar, version badge, MOTD and an initials stack of who is on.

The numbers strip from the Lantern site: large orange figures with a muted caption, split by dividers and stacked on mobile.

A small glowing dot for online, running, error and offline states. Pulses by default.

The TurtleDeck status label: a colored dot and a mono uppercase word for online, offline, running and idle. Running pulses.

The in-game terminal window from the Lantern hero: title bar, address line, prompt lines, output and a blinking cursor.

Terminal lines that type themselves out, with a pause between lines, an optional loop and a blinking cursor. Use it inside a Terminal or on its own.

Orange primary actions and quiet outlined secondaries, with sizes, icons and link rendering.

Joins buttons, inputs and text into one control with shared borders, laid out horizontally or vertically.

A month grid for picking a day or a range of days, built on React DayPicker with orange selection and today marked.

A square toggle for yes or no choices, with checked, indeterminate and disabled states.

A searchable picker built from a popover and a command list, with a single-value Combobox and a multi-select ComboboxMulti that shows picks as badges.

An icon button that copies a value to the clipboard and flashes a green check. Failures show a red cross instead of throwing.

A button that opens a calendar in a popover, for picking a single date or a range, with optional presets.

Building blocks for accessible forms: labels, descriptions, errors, fieldsets and legends in vertical, horizontal or responsive layouts.

Form building blocks wired to react-hook-form, with zod validation, accessible labels, descriptions and error messages.

A single-line text field for text, email, passwords and files, with invalid and disabled states.

An input or textarea with icons, text prefixes like hub://, and inline buttons attached inside one border.

A row of single-character slots for pairing codes and one-time passwords, with paste support.

An accessible label for form controls.

A styled native select element with the Input look, a chevron, options and option groups.

A set of options where exactly one can be picked, navigable with the arrow keys.

A dropdown for picking one value from a list, with groups, labels, icons and full keyboard support.

Pick a number or a range by dragging square thumbs along a track, or with the arrow keys.

An on and off control for settings that take effect right away.

A text field that turns what you type into removable tags. Enter or comma adds a tag, Backspace on an empty field removes the last one, and pasting a comma separated list adds several.

A multi-line text field that grows with its content, with invalid and disabled states.

A button that stays pressed, for switching a single tool or view on and off.

A row of toggles joined together, allowing one or many to be pressed.

Stacked questions that open one panel at a time, with a rotating chevron and orange open state.

Keeps media and placeholders at a fixed width to height ratio as the container resizes.

A round player portrait with an image and mono initials as the fallback. Group several into an overlapping stack.

Small mono labels, including the square outlined tag used for HUB and DEV.

A panel with header, content and footer slots, plus the grid-patterned art banner from the Lantern directory.

A swipeable row of slides with previous and next buttons and dot indicators. Built on Embla.

A flexible row for lists of things: media, title, description and actions, with outline and muted variants.

Mono key caps for keyboard shortcuts. KbdGroup lines several keys up with even spacing.

A one-pixel rule in the border color, horizontal or vertical.

A plain, responsive table with mono uppercase column heads, hover rows, a footer and a caption. Scrolls sideways on narrow screens.

A vertical changelog or roadmap: a dot or icon on a connecting line, a mono date or version label, a title and a description, marked done, current or planned.

Long-form text styles: headings, paragraphs, lead, lists, quotes, inline code and tables as small components, plus a Prose wrapper that styles raw HTML or rendered markdown.

Recharts v3 wrappers: a responsive ChartContainer driven by a ChartConfig of series labels and colors, plus a Lantern tooltip and legend. Axes and grid lines pick up border and muted colors.

A reusable TanStack Table v9 data table with a global filter, sortable headers, a column visibility menu, row selection and pagination, built on the Lantern table, input, checkbox, dropdown menu and select.

Shows and hides a section of content with an animated height.

Sets the reading direction for Radix components below it, so menus, selects and sliders mirror correctly in right to left layouts.

A bottom sheet with a grab handle that can be dragged closed. Built on vaul.

Panels split by draggable handles, for editors and dashboards. Built on react-resizable-panels.

A scroll container with a thin custom scrollbar that turns orange on hover.

A composable app sidebar that collapses off canvas or down to icons, and turns into a sheet on phones.

A modal that interrupts to confirm an important action. It does not close on outside click, so the reader has to choose.

A menu opened by right-clicking an area, with labels, shortcuts, checkbox and radio items and submenus.

A modal window over a dimmed backdrop, for short forms and focused reading. Focus is trapped inside and Escape closes it.

A menu of actions opened from a button, with labels, separators, shortcuts, checkbox and radio items and submenus.

A preview card that opens when a pointer rests on a link, such as a creator profile behind a username.

A small floating panel anchored to a trigger, for quick settings and short forms.

A dialog that slides in from an edge of the screen, for settings panels and mobile navigation.

A dark label in small mono type that appears on hover or keyboard focus. Good for naming icon buttons.

Shows where a page sits in the site, in small mono uppercase with chevron separators.

A searchable command palette with grouped items and shortcuts, inline or in a dialog opened with Cmd K.

An accessible tree of folders and files with indentation guides, an orange selected border and status letters like M for modified.

A row of menus like a desktop app's menu bar, with shortcuts, checkbox and radio items and submenus.

A header menu whose triggers open panels of links in a shared viewport, with an orange indicator under the open trigger.

Page links with previous and next controls. The current page gets an orange outline.

Numbered steps with zero-padded mono numbers in bordered squares. Complete steps turn green with a check and the current step is orange.

Mono uppercase tabs with an orange underline on the active tab, plus a boxed variant for switching between panels.

An inline callout with an icon, title and description. Default, success, warning and destructive variants each carry a colored left edge.

A slim full-width bar for the top of a site with an optional badge, a message, a link and a dismiss button that can remember the dismissal.

An empty state with an icon in a grid-patterned square, a display title that ends in an orange period, a short description and actions.

A thin orange bar on a dark 2px to 6px track, modeled on the turtle fuel gauge.

A pulsing placeholder block to hold space while content loads.

Toast notifications from the sonner package, dressed in Lantern colors with a hard offset shadow and lucide status icons.

A spinning orange loader, plus a block spinner that pulses three squares like a terminal waiting on a reply.

Small file chips with an icon, name and size, plus idle, uploading, error and done states.

Chat bubbles in the Lantern style: sent messages in a raised panel with an orange edge, replies in the card panel.

Mono uppercase dividers and status notes for a thread, like day breaks, joins and system events.

Layout for one chat message: avatar, header, content and footer, aligned to the start or end of the thread.

A chat scroll area that starts at the newest message, follows new messages and shows a jump to latest button when you scroll up.