# Teasim

> Components, patterns, and tools for design engineering across web and native.

## Pages

- [Introduction](https://teasim.com/index.md): A design-engineering system for coherent product experiences across platforms.
- [About](https://teasim.com/about.md): Shared foundations, independent platform packages, and the boundaries that connect them.
- [Approach](https://teasim.com/approach.md): How a change gets from an idea to master — measured, reviewed, and written down.
- [Brand](https://teasim.com/brand.md): The frame, the type, and the rules that keep the surface quiet.
- [Native platform](https://teasim.com/native.md): Platform-native interfaces for Apple, Android, and desktop applications.
- [Privacy](https://teasim.com/privacy-policy.md): How the Teasim website handles browser preferences and visitor information.
- [Services](https://teasim.com/services.md): What we do beyond publishing the packages.
- [Team](https://teasim.com/team.md): How the work is organised, and why the group stays small.
- [Web platform](https://teasim.com/web.md): A coherent foundation for websites, interactive applications, and 3D experiences.

## Introduction

- [Introduction](https://teasim.com/docs/index.md): Choose a product and package to start building with Teasim.
- [Project structure](https://teasim.com/docs/project-structure.md): What astrosim create writes, where the boundary with the framework falls, and how the tree becomes the site.

## Packages

- [@teasim/brands](https://teasim.com/packages/brands.md): Typed SVG brand assets for React and Astro, with color and monochrome artwork.
- [@teasim/elements](https://teasim.com/packages/elements.md): Foundational React interface elements.
- [@teasim/icons](https://teasim.com/packages/icons.md): Interface icons for React.
- [@teasim/widgets](https://teasim.com/packages/widgets.md): Higher-level React application experiences.
- [TeaCSS](https://teasim.com/packages/teacss.md): Build a shared styling language with TeaCSS utilities, theme tokens, structural shortcuts, and pure-CSS icons.
- [Installation](https://teasim.com/packages/teacss/installation.md): Install TeaCSS, declare its CSS entry, and connect Astro, Vite, or the standalone CLI.
- [Concepts](https://teasim.com/packages/teacss/concepts.md): The declaration-shaped language, palette, coverage model, editor support, and runtime class composition in TeaCSS.
- [Syntax](https://teasim.com/packages/teacss/concepts/syntax.md): Read TeaCSS declaration tokens, values, importance, conditions, and variant groups.
- [Palette](https://teasim.com/packages/teacss/concepts/palette.md): Select semantic color roles and light or dark appearance at the document root.
- [Coverage](https://teasim.com/packages/teacss/concepts/coverage.md): Understand TeaCSS Standard property coverage and diagnose classes that emit no CSS.
- [Editors](https://teasim.com/packages/teacss/concepts/editors.md): Configure the TeaCSS VS Code extension against the same CSS entry used by the build.
- [Classes](https://teasim.com/packages/teacss/concepts/classes.md): Compose TeaCSS class strings with cn and typed recipes without confusing merging with CSS generation.
- [Standard](https://teasim.com/packages/teacss/standard.md): The TeaCSS atomic vocabulary, conditions, theme, and preflight, with a complete property reference.
- [Bases](https://teasim.com/packages/teacss/standard/bases.md): Variables, conditions, responsive rules, and named themes. TeaCSS Standard reference.
- [Spacing](https://teasim.com/packages/teacss/standard/spacing.md): Padding, margin, sibling spacing, and inset offsets. TeaCSS Standard reference.
- [Sizing](https://teasim.com/packages/teacss/standard/sizing.md): Physical and logical width and height constraints. TeaCSS Standard reference.
- [Layouts](https://teasim.com/packages/teacss/standard/layouts.md): Display, positioning, visibility, and anchored layout. TeaCSS Standard reference.
- [Flexbox](https://teasim.com/packages/teacss/standard/flexbox.md): Flex item sizing, direction, wrapping, and order. TeaCSS Standard reference.
- [Grids](https://teasim.com/packages/teacss/standard/grids.md): Grid tracks, placement, areas, and automatic flow. TeaCSS Standard reference.
- [Alignments](https://teasim.com/packages/teacss/standard/alignments.md): Alignment and distribution in flex and grid layouts. TeaCSS Standard reference.
- [Gutters](https://teasim.com/packages/teacss/standard/gutters.md): Gaps and gap decoration between layout items. TeaCSS Standard reference.
- [Gradients](https://teasim.com/packages/teacss/standard/gradients.md): Background, border, mask, and shared gradient parts. TeaCSS Standard reference.
- [Backgrounds](https://teasim.com/packages/teacss/standard/backgrounds.md): Background colour, image, position, and repetition. TeaCSS Standard reference.
- [Masking](https://teasim.com/packages/teacss/standard/masking.md): Masks, clips, and mask composition. TeaCSS Standard reference.
- [Borders](https://teasim.com/packages/teacss/standard/borders.md): Border edges, radius, colours, and shapes. TeaCSS Standard reference.
- [Outlines](https://teasim.com/packages/teacss/standard/outlines.md): Outlines and outline offsets. TeaCSS Standard reference.
- [Dividers](https://teasim.com/packages/teacss/standard/dividers.md): Rules and spacing between sibling elements. TeaCSS Standard reference.
- [Containments](https://teasim.com/packages/teacss/standard/containments.md): Containment, content visibility, and intrinsic size. TeaCSS Standard reference.
- [Tables](https://teasim.com/packages/teacss/standard/tables.md): Table layout, borders, and captions. TeaCSS Standard reference.
- [Publishing](https://teasim.com/packages/teacss/standard/publishing.md): Paged media and print presentation. TeaCSS Standard reference.
- [Wrapping](https://teasim.com/packages/teacss/standard/wrapping.md): Fragmentation and multi-column layout. TeaCSS Standard reference.
- [Overflows](https://teasim.com/packages/teacss/standard/overflows.md): Overflow, clipping, and text truncation. TeaCSS Standard reference.
- [Scrolling](https://teasim.com/packages/teacss/standard/scrolling.md): Scroll behavior, snapping, padding, and margins. TeaCSS Standard reference.
- [Scrollbars](https://teasim.com/packages/teacss/standard/scrollbars.md): Scrollbar appearance, width, and colour. TeaCSS Standard reference.
- [Fonts](https://teasim.com/packages/teacss/standard/fonts.md): Font families, faces, variants, and synthesis. TeaCSS Standard reference.
- [Typography](https://teasim.com/packages/teacss/standard/typography.md): Text alignment, spacing, layout, and shaping. TeaCSS Standard reference.
- [Decorations](https://teasim.com/packages/teacss/standard/decorations.md): Text decoration and emphasis. TeaCSS Standard reference.
- [Contents](https://teasim.com/packages/teacss/standard/contents.md): Generated content, counters, and quotes. TeaCSS Standard reference.
- [Speech](https://teasim.com/packages/teacss/standard/speech.md): CSS speech properties where supported. TeaCSS Standard reference.
- [Shadows](https://teasim.com/packages/teacss/standard/shadows.md): Box and text shadows. TeaCSS Standard reference.
- [Graphics](https://teasim.com/packages/teacss/standard/graphics.md): Object fitting, images, and visual rendering. TeaCSS Standard reference.
- [SVGs](https://teasim.com/packages/teacss/standard/svgs.md): SVG fill, stroke, markers, and geometry. TeaCSS Standard reference.
- [Filters](https://teasim.com/packages/teacss/standard/filters.md): Filter effects and backdrop filters. TeaCSS Standard reference.
- [Compositing](https://teasim.com/packages/teacss/standard/compositing.md): Opacity, blending, and isolation. TeaCSS Standard reference.
- [Transforms](https://teasim.com/packages/teacss/standard/transforms.md): Transform functions, origins, and perspective. TeaCSS Standard reference.
- [Motions](https://teasim.com/packages/teacss/standard/motions.md): Motion paths and related movement properties. TeaCSS Standard reference.
- [Transitions](https://teasim.com/packages/teacss/standard/transitions.md): Transition properties, duration, delay, and timing. TeaCSS Standard reference.
- [Animations](https://teasim.com/packages/teacss/standard/animations.md): Animation names, timing, and timelines. TeaCSS Standard reference.
- [Adjustments](https://teasim.com/packages/teacss/standard/adjustments.md): Appearance, colour adjustment, and interaction details. TeaCSS Standard reference.
- [Navigations](https://teasim.com/packages/teacss/standard/navigations.md): Directional and spatial navigation properties. TeaCSS Standard reference.
- [Official](https://teasim.com/packages/teacss/official.md): Compose structural shortcuts, typography, surfaces, and component parts with Standard color roles and application-owned behavior.
- [Commons](https://teasim.com/packages/teacss/official/commons.md): Thirteen shared shortcut families for structure, controls, accessibility, type, media, surfaces, patterns, and motion.
- [Accessibility](https://teasim.com/packages/teacss/official/commons/accessibility.md): Keep screen-reader-only content available and expose native keyboard focus on controls and their wrappers.
- [Background patterns](https://teasim.com/packages/teacss/official/commons/background-pattern.md): Decorate application surfaces with transparent grids, lines, dots, and grain.
- [Chevron](https://teasim.com/packages/teacss/official/commons/chevron.md): Four CSS chevrons for decorative direction cues, with current-color borders and reduced-motion support.
- [Content](https://teasim.com/packages/teacss/official/commons/content.md): Allow content to shrink and wrap within its allocated inline space without choosing a layout or type scale.
- [Control](https://teasim.com/packages/teacss/official/commons/control.md): Compose native buttons and fields from Official's shared structure, disabled states, icon sizing, and pressed feedback.
- [Layout](https://teasim.com/packages/teacss/official/commons/layout.md): Compose stacks, centering, filling, and physical or logical scrolling without prescribing colors.
- [Media](https://teasim.com/packages/teacss/official/commons/media.md): Fit media into a defined box or let an image scale with its available width.
- [Overlay](https://teasim.com/packages/teacss/official/commons/overlay.md): Share viewport bounds and padded content while leaving positioning, surface, and interaction to the owner.
- [Reset](https://teasim.com/packages/teacss/official/commons/reset.md): Remove selected browser visual defaults without replacing native form and document semantics.
- [Skeleton](https://teasim.com/packages/teacss/official/commons/skeleton.md): Show a decorative loading shape with a separate readable status and safe reduced-motion and forced-color handling.
- [Surface](https://teasim.com/packages/teacss/official/commons/surface.md): Reuse structural radius, border width, and elevation while choosing colors through Standard roles.
- [Transition](https://teasim.com/packages/teacss/official/commons/transition.md): Reuse motion-safe transition fragments while leaving interactive state and icon composition in the application.
- [Typography](https://teasim.com/packages/teacss/official/commons/typography.md): Apply numbered text and heading scales, semantic type metrics, wrapping, and local text resets without imposing a font or color.
- [Components](https://teasim.com/packages/teacss/official/components.md): Structural component shortcuts supplied by the opt-in TeaCSS Official preset.
- [Alert](https://teasim.com/packages/teacss/official/components/alert.md): A message container with optional icon, title, description, and action.
- [Avatar](https://teasim.com/packages/teacss/official/components/avatar.md): A cropped identity image or fallback, with optional overlapping groups.
- [Badge](https://teasim.com/packages/teacss/official/components/badge.md): A compact status or category label that can also be linked.
- [Breadcrumb](https://teasim.com/packages/teacss/official/components/breadcrumb.md): A wrapping trail of links to parent locations and the current page.
- [Button](https://teasim.com/packages/teacss/official/components/btn.md): Shared control geometry for buttons and button-shaped links.
- [Calendar](https://teasim.com/packages/teacss/official/components/calendar.md): Month-grid geometry for a semantic date table.
- [Card](https://teasim.com/packages/teacss/official/components/card.md): A content surface with header, body, actions, media, and footer.
- [Carousel](https://teasim.com/packages/teacss/official/components/carousel.md): A scroll-snap track with items and directional controls.
- [Chat](https://teasim.com/packages/teacss/official/components/chat.md): A conversation layout for messages on either side.
- [Checkbox](https://teasim.com/packages/teacss/official/components/checkbox.md): Native checkbox geometry and optional sibling mark layers.
- [Collapse](https://teasim.com/packages/teacss/official/components/collapse.md): Disclosure styling for native details or an application-controlled region.
- [Color Input](https://teasim.com/packages/teacss/official/components/color-input.md): Sizing and swatch geometry for a native color input.
- [Divider](https://teasim.com/packages/teacss/official/components/divider.md): A horizontal or block-axis separator with an optional label.
- [Dock](https://teasim.com/packages/teacss/official/components/dock.md): A safe-area-aware bottom navigation band with equal-width items.
- [Dropdown](https://teasim.com/packages/teacss/official/components/dropdown.md): A disclosure surface that can use native popover or application-managed visibility.
- [Empty](https://teasim.com/packages/teacss/official/components/empty.md): A structured empty state with explanation and a next action.
- [Floating action button](https://teasim.com/packages/teacss/official/components/fab.md): A floating action button; the application owns its action and placement.
- [Field](https://teasim.com/packages/teacss/official/components/field.md): Field labels, hints, native inputs, groups, errors, and affixes.
- [File Input](https://teasim.com/packages/teacss/official/components/file-input.md): A native file picker and an optional dropzone presentation.
- [Filter](https://teasim.com/packages/teacss/official/components/filter.md): A compact selection filter and reset control.
- [Footer](https://teasim.com/packages/teacss/official/components/footer.md): A responsive footer arrangement for navigation groups and supporting content.
- [Frame](https://teasim.com/packages/teacss/official/components/frame.md): A side/main split in which the main area can shrink and scroll.
- [Hero](https://teasim.com/packages/teacss/official/components/hero.md): A bounded hero grid for content, actions, and decoration.
- [Indicator](https://teasim.com/packages/teacss/official/components/indicator.md): A small status marker positioned relative to another element.
- [Join](https://teasim.com/packages/teacss/official/components/join.md): Adjacent controls with welded visible edges.
- [Keyboard key](https://teasim.com/packages/teacss/official/components/kbd.md): Keycap and keyboard-chord presentation.
- [List](https://teasim.com/packages/teacss/official/components/list.md): A structured content list with media, body, and secondary columns.
- [Listbox](https://teasim.com/packages/teacss/official/components/listbox.md): A scroll-safe list of options for a consumer-owned selection model.
- [Loading](https://teasim.com/packages/teacss/official/components/loading.md): A decorative rotating glyph and optional inline shell.
- [Menu](https://teasim.com/packages/teacss/official/components/menu.md): Vertical or horizontal navigation with grouped items.
- [Meter](https://teasim.com/packages/teacss/official/components/meter.md): A value label and proportional visual track.
- [Mockup](https://teasim.com/packages/teacss/official/components/mockup.md): Code or device mockups for examples and demonstrations.
- [Modal](https://teasim.com/packages/teacss/official/components/modal.md): A dialog surface with header, body, footer, and optional motion.
- [Navbar](https://teasim.com/packages/teacss/official/components/navbar.md): A navigation bar with brand and start, center, and end regions.
- [One-time code](https://teasim.com/packages/teacss/official/components/otp.md): A row of native one-character code inputs.
- [Pagination](https://teasim.com/packages/teacss/official/components/pagination.md): Page navigation links and an accessible ellipsis.
- [Popover](https://teasim.com/packages/teacss/official/components/popover.md): A positioned panel with heading and description.
- [Progress](https://teasim.com/packages/teacss/official/components/progress.md): Determinate or indeterminate progress geometry.
- [Prose](https://teasim.com/packages/teacss/official/components/prose.md): Scoped long-form typographic defaults for semantic content.
- [Radio](https://teasim.com/packages/teacss/official/components/radio.md): Native radio geometry with a consumer-owned dot color.
- [Range](https://teasim.com/packages/teacss/official/components/range.md): A native range input with a consistent touch target.
- [Rating](https://teasim.com/packages/teacss/official/components/rating.md): A five-item rating row for native inputs, custom controls, or read-only display.
- [Select](https://teasim.com/packages/teacss/official/components/select.md): A native select with optional customizable-picker enhancement.
- [Sheet](https://teasim.com/packages/teacss/official/components/sheet.md): A side or block-edge dialog panel with optional safe-area spacing.
- [Site](https://teasim.com/packages/teacss/official/components/site.md): Shared site framing and aligned content sections.
- [Stat](https://teasim.com/packages/teacss/official/components/stat.md): A labelled metric and a scrollable group of metrics.
- [Status](https://teasim.com/packages/teacss/official/components/status.md): A compact status label whose color is supplied by the application.
- [Steps](https://teasim.com/packages/teacss/official/components/steps.md): A horizontal or vertical sequence of labelled steps.
- [Swap](https://teasim.com/packages/teacss/official/components/swap.md): Overlaid faces switched by a consumer-owned state.
- [Table](https://teasim.com/packages/teacss/official/components/table.md): Data-table geometry with a scroll container and optional pinned edges.
- [Tabs](https://teasim.com/packages/teacss/official/components/tabs.md): Tab list, triggers, and panels with application-owned state.
- [Timeline](https://teasim.com/packages/teacss/official/components/timeline.md): Horizontal or vertical sequence of events.
- [Toast](https://teasim.com/packages/teacss/official/components/toast.md): A notification surface inside a positioned list.
- [Toggle](https://teasim.com/packages/teacss/official/components/toggle.md): Native or ARIA switch geometry.
- [Toolbar](https://teasim.com/packages/teacss/official/components/toolbar.md): A group of controls with optional separators and vertical layout.
- [Tooltip](https://teasim.com/packages/teacss/official/components/tooltip.md): A lightweight explanation positioned around its trigger.
- [Tree](https://teasim.com/packages/teacss/official/components/tree.md): Nested lists and native details for hierarchical navigation.
- [Icons](https://teasim.com/packages/teacss/icons.md): Use the independent TeaCSS Icons preset and its five bundled, searchable icon collections.
- [Lucide](https://teasim.com/packages/teacss/icons/lucide.md): Browse and use monochrome Lucide interface icons through the TeaCSS Icons preset.
- [Carbon](https://teasim.com/packages/teacss/icons/carbon.md): Use IBM Carbon product and data-visualization icons from TeaCSS's bundled Icons preset.
- [Flagpack](https://teasim.com/packages/teacss/icons/flagpack.md): Use multicolor country flags from Flagpack with the TeaCSS Icons preset.
- [Crypto](https://teasim.com/packages/teacss/icons/crypto.md): Use the bundled multicolor cryptocurrency marks with TeaCSS icon classes.
- [Logo](https://teasim.com/packages/teacss/icons/logo.md): Use bundled Boxicons brand glyphs for product and service identities.
- [@teasim/astro](https://teasim.com/packages/astro.md): The content layer — navigation, validation, markdown twins, and machine-readable routes.
- [createNavigation](https://teasim.com/packages/astro/create-navigation.md): Builds the sidebar tree once and binds every navigation lookup to it.
- [@teasim/astra](https://teasim.com/packages/astra.md): Accessible Astro elements with native semantics, shared recipes, and owned browser behavior.
- [Accordion](https://teasim.com/packages/astra/accordion.md): Disclosure rows built on the native details element, with the browser owning the open state.
- [Code](https://teasim.com/packages/astra/code.md): A highlighted listing in CodeBlock's frame, with every Shiki notation drawn.
- [@teasim/aster](https://teasim.com/packages/aster.md): Page-level Astro blocks composed from Astra elements, with explicit layout and responsive boundaries.

## Showcase

- [amkit](https://teasim.com/showcase/amkit.md)
- [reitskit](https://teasim.com/showcase/reitskit.md)
- [joinskit](https://teasim.com/showcase/joinskit.md)
- [datumkit](https://teasim.com/showcase/datumkit.md)
- [viuup](https://teasim.com/showcase/viuup.md)
- [juliakit](https://teasim.com/showcase/juliakit.md)
- [miuup](https://teasim.com/showcase/miuup.md)
- [teakit](https://teasim.com/showcase/teakit.md)
- [heydayup](https://teasim.com/showcase/heydayup.md)

## Notes

- [A class the extractor never saw](https://teasim.com/notes/a-class-the-extractor-never-saw.md)
- [A hairline that vanished in high contrast](https://teasim.com/notes/a-hairline-that-vanished-in-high-contrast.md)
- [Duplication worth keeping](https://teasim.com/notes/duplication-worth-keeping.md)
- [Measure before you believe the audit](https://teasim.com/notes/measure-before-you-believe-the-audit.md)
- [Name the thing focus lands on](https://teasim.com/notes/name-the-thing-focus-lands-on.md)
- [Region or group — let the count decide](https://teasim.com/notes/region-or-group-let-the-count-decide.md)
- [The build that ran twice](https://teasim.com/notes/the-build-that-ran-twice.md)
- [The dev server that died on every build](https://teasim.com/notes/the-dev-server-that-died-on-every-build.md)
- [The gate has to actually gate](https://teasim.com/notes/the-gate-has-to-actually-gate.md)
- [Two packages, one line](https://teasim.com/notes/two-packages-one-line.md)

## Products

- [Android](https://teasim.com/products/android.md): The planned Teasim surface for Android — Kotlin and Jetpack Compose, sharing the design-engineering standards of the web surfaces.
- [Apple](https://teasim.com/products/apple.md): The planned Teasim surface for Apple platforms — Swift and SwiftUI, with the same design-engineering standards as the web.
- [Astro](https://teasim.com/products/astro.md): Accessible elements, page-level blocks and content infrastructure for Astro websites.
- [Desktop](https://teasim.com/products/desktop.md): The planned Teasim surface for native desktop applications, built on GPUI.
- [HarmonyOS](https://teasim.com/products/harmonyos.md): The planned Teasim surface for HarmonyOS — ArkTS and ArkUI, with the same interface standards as every other Teasim platform.
- [React](https://teasim.com/products/react.md): The Teasim surface for interactive application experiences — elements, icons, brands, and higher-level widgets.
- [StyleSheet](https://teasim.com/products/style.md): The shared styling foundation — tokens, utilities, and the visual primitives every Teasim web surface is built on.
- [Three](https://teasim.com/products/three.md): The planned Teasim surface for interactive 3D scenes and product visualisation, built with Three.js.