Registry
The supplied elements and functions you build with.
A registry catalogs the primitives supplied by Codelab and its libraries. The element registry describes what each kind renders and which props it accepts. The function registry describes callable operations and their parameters.
Elements
Choose an element kind from these libraries, then configure its props.
| Library | What it provides | Example kinds |
|---|---|---|
| HTML | Standard webpage elements for content, links, and forms. | div, h1, a, form |
| COSS | UI components for controls, cards, tables, dialogs, and other interface patterns. | Button, Input, Card, Dialog |
| Radix Themes | Layout primitives for arranging and spacing content. | Box, Flex, Grid, Container, Section |
| Codelab | Image, navigation, and nested-page elements. | codelab.image, codelab.navbar, codelab.outlet |
| Lucide | General-purpose icons selected by name. | lucide.icon |
| Simple Icons | Brand and logo icons selected by name. | simple-icons.icon |
| React | A fragment that groups children without a wrapping element. | react.fragment |
| Motion | Animated versions of HTML and SVG elements. | motion.div, motion.button, motion.svg |
Your own components combine elements into reusable trees. Each instance supplies its own prop values.
Functions
These supplied functions can be called from actions and function bindings. The table groups them by what they provide.
| Source or purpose | Functions | What they do |
|---|---|---|
| Supabase authentication | supabase-login, supabase-signup, supabase-logout | Sign in, create an account, and sign out in the app's connected Supabase project. |
| Supabase data | supabase-query | Read or write tables in the connected project. The visitor's session and the project's access policies govern the operation. |
| State | set-property, abort-controller-create | Update a store field, or place an AbortController in a store to support cancellation. |
| Navigation | navigate | Move to another URL. |
| HTTP | http-request | Send a request to an API. |
| UI feedback | toast, browser-alert | Show a toast or a browser alert. |
| Timing and debugging | delay, log | Wait before continuing, or write a console message. |
| JavaScript | code-action | Run custom JavaScript behavior. |
For example, a COSS Button can bind its onClick prop to an action that calls supabase-login. The element supplies the interface; the function supplies the operation.
See functions and parameters for inputs, and hooks for configured behavior that exposes values and methods.