# Facet

> Copy-in UI components for roblox-ts, composed from Lattice UI and Vela.

- Docs: https://docs.astra-void.xyz/facet/
- Source: https://github.com/astra-void/facet
- Full text: https://docs.astra-void.xyz/facet/llms-full.txt
- Every page below is also served as Markdown at its own URL with `.md` appended.

## Overview

- [Facet](https://docs.astra-void.xyz/facet/index.md): Copy-in UI components for roblox-ts, composed from Lattice UI and Vela.

## Getting started

- [Installation](https://docs.astra-void.xyz/facet/getting-started/installation.md): What Facet publishes, what your project has to already be, and what facet init writes.
- [Your first component](https://docs.astra-void.xyz/facet/getting-started/first-component.md): Copy a button in, render it, and read the three things about it that are not the shadcn version.
- [How it works](https://docs.astra-void.xyz/facet/getting-started/how-it-works.md): The three layers, the hosted registry, and exactly what facet add does to a file between the registry and your project.
- [Scope and status](https://docs.astra-void.xyz/facet/getting-started/scope-and-status.md): What exists at 0.4.0, what has actually been looked at in Studio, and which decisions are still open.

## Components

- [Button](https://docs.astra-void.xyz/facet/components/button.md): Six variants, four sizes, two recipes — and the one thing asChild does not carry across.
- [Checkbox](https://docs.astra-void.xyz/facet/components/checkbox.md): The first component with a Lattice primitive underneath it, and the first that has to hold a copy of the state it styles by.
- [Label](https://docs.astra-void.xyz/facet/components/label.md): A form label — one recipe, no variants, and the smallest component in the registry.
- [Radio group](https://docs.astra-void.xyz/facet/components/radio-group.md): One value across a set of dials — and the one component in this tier that mirrors half the state and lets the primitive keep the rest.
- [Slider](https://docs.astra-void.xyz/facet/components/slider.md): Three instances whose geometry is entirely the primitive's — and the one component whose track deliberately has no layout.
- [Switch](https://docs.astra-void.xyz/facet/components/switch.md): A track and a thumb, where the thumb's travel is the primitive's job and this file only says what it looks like.
- [Text field](https://docs.astra-void.xyz/facet/components/text-field.md): Five parts around a TextBox — and the component where a state has to be stated twice because nothing inherits.
- [Textarea](https://docs.astra-void.xyz/facet/components/textarea.md): The one recipe in the registry that declares no height — because the primitive grows it line by line.
- [Toggle group](https://docs.astra-void.xyz/facet/components/toggle-group.md): A set of two-state buttons — and the component that had to write its `className` out twice to keep the compiler able to see it.
- [Dialog](https://docs.astra-void.xyz/facet/components/dialog.md): The first layered component — a provider your app has to have, a panel that is not the primitive's content, and the one class in the registry that names a colour.
- [Accordion](https://docs.astra-void.xyz/facet/components/accordion.md): Seven recipe entries, two contexts, and a divider that moved to the root to survive Roblox.
- [Alert](https://docs.astra-void.xyz/facet/components/alert.md): Three parts, one recipe object, and a variant that has to be repeated on every part that draws something.
- [Avatar](https://docs.astra-void.xyz/facet/components/avatar.md): A circle drawn by the wrapper, because the primitive under it renders no instance at all.
- [Badge](https://docs.astra-void.xyz/facet/components/badge.md): A status pill that hugs its label — four variants, and a lesson in size-fit.
- [Card](https://docs.astra-void.xyz/facet/components/card.md): Six flat parts, one shared recipe object, and the Luau register limit that forced it.
- [Kbd](https://docs.astra-void.xyz/facet/components/kbd.md): A key cap — and the one place in the registry where font-* picks a typeface on purpose.
- [Progress](https://docs.astra-void.xyz/facet/components/progress.md): A track and a fill, where the fill's width is the value — and this file names neither number.
- [Scroll area](https://docs.astra-void.xyz/facet/components/scroll-area.md): A viewport with a drawn scrollbar — and the component whose height has to come from above it.
- [Separator](https://docs.astra-void.xyz/facet/components/separator.md): A one-pixel divider — and the only component whose background is the point.
- [Skeleton](https://docs.astra-void.xyz/facet/components/skeleton.md): A placeholder block — and the component defined by what it deliberately does not do.
- [Tabs](https://docs.astra-void.xyz/facet/components/tabs.md): A list, some triggers, and switched panels — plus one prop you have to pass or nothing looks selected.

## Guides

- [Theming](https://docs.astra-void.xyz/facet/guides/theming.md): Nineteen semantic tokens, four neutral ramps, and why a build carries exactly one mode.
- [Variants and classes](https://docs.astra-void.xyz/facet/guides/variants-and-classes.md): fv() recipes, why cn does not merge conflicts, and the one ordering rule the whole model rests on.
- [Text and labels](https://docs.astra-void.xyz/facet/guides/text-and-labels.md): Why text is an uppercase prop, what TextSlot does, and the two rules every text recipe obeys.
- [Component conventions](https://docs.astra-void.xyz/facet/guides/component-conventions.md): The ten rules every registry component follows — each one correcting a web instinct that is wrong on Roblox.
- [Updating copied components](https://docs.astra-void.xyz/facet/guides/updating-copied-components.md): There is no facet upgrade. What diff and remove can tell you, what they deliberately cannot, and why there is no lock file.
- [Using another registry](https://docs.astra-void.xyz/facet/guides/custom-registry.md): Point the CLI at a fork, a private registry, or a local build — the four-step resolution order and what a registry has to serve.
- [Troubleshooting](https://docs.astra-void.xyz/facet/guides/troubleshooting.md): The failures that produce no error — unstyled UI, zero-pixel components, labels in the wrong font — and the ones that do.

## Reference

- [CLI](https://docs.astra-void.xyz/facet/reference/cli.md): Every command and flag of facet-rbxts, and what each one checks before it writes.
- [facet.json](https://docs.astra-void.xyz/facet/reference/facet-json.md): Every field of the project config — what it controls, what the default is, and why.
- [@facet-ui/theme](https://docs.astra-void.xyz/facet/reference/theme.md): facetTheme(), the nineteen tokens, and the exact ramp step each one resolves to.
- [@facet-ui/react-variants](https://docs.astra-void.xyz/facet/reference/variants.md): fv(), cn(), and the types — including the two roblox-ts quirks the implementation exists to work around.
- [Registry format](https://docs.astra-void.xyz/facet/reference/registry-format.md): The published JSON contract — index, item payloads, and the validation rules an authored registry has to pass.