@tsuz/components

Lightweight UI primitives for projects generated by Tsu templates.

This package is not a full design system. It provides small, framework-specific building blocks that make generated Vue and React projects start with consistent page and state patterns.

Install

pnpm add @tsuz/components

Install the peer dependency for your framework:

pnpm add vue
# or
pnpm add react

Exports

import { PageContainer, EmptyState, LoadingState, ErrorState } from "@tsuz/components/vue";
import { PageContainer, EmptyState, LoadingState, ErrorState } from "@tsuz/components/react";

Vue Example

import { defineComponent, h } from "vue";
import { PageContainer, LoadingState } from "@tsuz/components/vue";

export default defineComponent({
  setup() {
    return () =>
      h(PageContainer, { title: "Dashboard", description: "Generated by Tsu" }, () => [
        h(LoadingState, { label: "Loading dashboard..." })
      ]);
  }
});

React Example

import React from "react";
import { PageContainer, EmptyState } from "@tsuz/components/react";

export function Dashboard() {
  return React.createElement(
    PageContainer,
    { title: "Dashboard", description: "Generated by Tsu" },
    React.createElement(EmptyState, { title: "No data", description: "Connect your API client." })
  );
}

API

| Export | Purpose | | --- | --- | | PageContainer | Standard page title, description, action area, and body wrapper | | EmptyState | Empty data placeholder | | LoadingState | Loading placeholder with role="status" | | ErrorState | Error placeholder with optional actions | | vueComponentPreset | Vue package metadata | | reactComponentPreset | React package metadata |

In Tsu Templates

The Vue3 and React templates use these primitives in their generated dashboard starter page together with @tsuz/sdk and @tsuz/utils.