Tailark Registry

repository·main·Indexed 24 days ago

https://github.com/tailark/blocks

An open-source registry for Tailark blocks and pages designed for the shadcn/ui ecosystem. It provides two component bases, Base UI and Radix UI, and allows users to install items via the shadcn CLI by configuring the @tailark-oss namespace. The registry includes tools for developing items using createRegistryHelpers and functions to resolve package names across ecosystems like core, motionPrimitive, and magicUi.

Tokens
1.7K
Snippets
2
Records
18
Agent score
80%

What's inside tailark-blocks

  1. Understand the Tailark Registry endpoints

    main

    The Tailark Registry provides two distinct bases for components: Base UI (base) and Radix UI (radix).

    • Base UI is the default base and is served under the /r path segment.
    • Radix UI is served under the /r/radix path segment.

    You can fetch the full registry index or individual items using the following patterns:

    Base UI (Default):

    • Full index: /r/registry.json
    • Single item: /r/[name]

    Radix UI:

    • Full index: /r/radix/registry.json
    • Single item: /r/radix/[name]
  2. Develop the Tailark Registry locally

    main

    To run the registry in a development environment:

    1. Install dependencies using pnpm.
    2. Start the development server.
    3. Inspect the registry index at http://localhost:3003/registry.
    pnpm install
    pnpm dev
  3. Install Tailark blocks or pages via shadcn CLI

    main

    Once the registry is configured in your components.json, you can install any block or page by its name using the npx shadcn@latest add command.

    To find available item names, browse the registry index at /r/registry.json (for Base UI) or /r/radix/registry.json (for Radix UI).

  4. Configure shadcn/ui to use the Tailark Registry

    main

    To use Tailark blocks and pages, you must add the @tailark-oss namespace to your project's components.json file. This allows the shadcn CLI to resolve components from the Tailark registry.

    Depending on which UI base you want to use, add one of the following configurations to the registries key in components.json.

    ### For Base UI (Default)
    ```json
    {
      "registries": {
        "@tailark-oss": "https://oss-tailark.com/r/{name}"
      }
    }

    For Radix UI

    {
      "registries": {
        "@tailark-oss": "https://oss-tailark.com/r/radix/{name}"
      }
    }
  5. Resolve package names with registry helpers

    main

    The createRegistryHelpers factory provides several functions to generate standardized package names for different Tailark ecosystems. These are useful when defining dependencies for registry items.

    Given a kit name (e.g., base), the following functions are available:

    • ui(name): Returns @tailark-oss/${kit}-${name}
    • core(name): Returns @tailark-oss/core-${name}
    • motionPrimitive(name): Returns @tailark-oss/motion-primitives-${name}
    • magicUi(name): Returns @tailark-oss/magic-ui-${name}
    • shadcn(name): Returns @shadcn/${name}
  6. Get a registry component by name

    main

    Use getRegistryComponent to asynchronously load the actual code module for a registry entry. This function resolves the component's import path and returns the default export of the module.

    If the component cannot be found or the import fails, it returns null.

  7. Identify and switch between registry bases

    main

    The registry supports multiple bases, primarily base and radix. Use the following utility functions to manage base selection:

    • isRegistryBase(base: string): Returns true if the provided string is a valid registry base ('base' or 'radix').
    • getRegistryBase(base?: string): Returns the provided base if valid; otherwise, defaults to 'base'.
  8. Create registry items with createRegistryHelpers

    main

    The createRegistryHelpers function is a factory that returns a set of helper functions (block, component, page) used to generate standardized RegistryItem objects for the Tailark registry. It also provides utility functions for resolving package names for various ecosystems like ui, core, motionPrimitive, magicUi, and shadcn.

    To use these helpers, you must provide a kit name (e.g., 'base'). You can optionally pass componentTarget: true to automatically set a default file target for components.

  9. Get the import path for a registry component

    main
    The getRegistryComponentImportPath function returns the file path (without extension) required to import a registry component. This is useful for dynamic imports or mapping registry entries to filesystem locations.
  10. Resolve and fetch registry items

    main

    Use getRegistryItem to retrieve a complete RegistryItem by its name. This function resolves the item's files from the registry, reads their content, and automatically rewrites import specifiers so they are compatible with a consumer's project structure (e.g., converting registry-internal paths to @/components/... aliases).

    Supported registry bases are base and radix. If no base is provided, it defaults to base.