---
title: "@vinicunca/taman-ui"
description: "Unstyled Vue admin components on pohon-ui — base widgets, popup, form, layout, menu, and tabs."
canonical_url: "https://vinicunca.dev/taman/packages/taman-ui"
---
# @vinicunca/taman-ui

> Unstyled Vue admin components on pohon-ui — base widgets, popup, form, layout, menu, and tabs.

Version **0.1.1**. ESM, built for Vite. Peers: `vue` ^3.5, `pohon-ui` ^2.0.0-rc7.9, `@internationalized/date` and `@internationalized/number` ^3.

The package ships **no CSS**. Styling is your (or the template's) job.

## Setup

```ts
// vite.config.ts
vitePohon({ scanPackages: ['@vinicunca/taman-ui'] });
optimizeDeps: {
  exclude: ['pohon-ui', '@vinicunca/taman-ui'];
}
resolve: {
  dedupe: ['pohon-ui', 'vue'];
}
```

```ts
// uno.config.ts
import { TAMAN_UI_CONTENT } from '@vinicunca/taman-ui/unocss';

content: {
  pipeline: {
    include: [/\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|marko|html)($|\?)/, TAMAN_UI_CONTENT],
  },
}
```

`TAMAN_UI_CONTENT` is `/@vinicunca[\\/]taman-ui[\\/]dist[\\/].*\.mjs$/`.

`theme.unstyled: true` + your `ui` config = custom design (the Taman template). Leave Pohon styled for the default look.

`skipLibCheck: false` is **not** supported: pohon-ui's own declarations do not type-check in strict mode.

## `@vinicunca/taman-ui`

Base components and primitives (`src/components` + `src/ui`). Also `createContext`, `Slot`, `VisuallyHidden` from akar, and `export type * from 'pohon-ui'`.

| Component | File |
| --- | --- |
| `TamanAuthForm` | auth |
| `TamanBackToTop` |  |
| `TamanButtonCheckGroup`, `TamanButtonIcon` |  |
| `TamanDescription`, `TamanDescriptionItem` |  |
| `TamanFileUpload` |  |
| `TamanFullScreen` |  |
| `TamanIcon` |  |
| `TamanInputCurrency`, `TamanInputPassword` |  |
| `TamanInputDate` |  |
| `TamanLoading` |  |
| `TamanLogo` |  |
| `TamanRenderContent` |  |
| `TamanScrollbar` |  |

UI primitives (Akar/Pohon wrappers): alert-dialog, dialog, form field parts, label, scroll-area, sheet.

## `@vinicunca/taman-ui/popup`

`useTamanDialog`, `createTamanDialog`, `setDefaultDialogProps`, `TamanDialog`

`useTamanDrawer`, `createTamanDrawer`, `setDefaultDrawerProps`, `TamanDrawer`

`tamanAlert`, `tamanConfirm`, `tamanPrompt`, `clearAllAlerts`, `Alert`, `useAlertContext`

See [Dialogs and alerts](https://vinicunca.dev/taman/guides/dialogs-and-alerts).

## `@vinicunca/taman-ui/form`

`useTamanForm`, `setupTamanForm`, codecs, `z`, `isEmptyFormValue`, `FormCodecError`. See [Forms](https://vinicunca.dev/taman/guides/forms).

## `@vinicunca/taman-ui/layout`

```ts
import type { /* layout props */ } from '@vinicunca/taman-ui/layout';
import { TamanCoreLayout } from '@vinicunca/taman-ui/layout';
```

Admin shell used by `apps/web/src/layouts/core.vue`.

## `@vinicunca/taman-ui/menu`

`TamanMenu`, `MenuBadge`, normal-menu pieces, `menu.types`.

## `@vinicunca/taman-ui/tabs`

`TamanTabsView`, tab widgets (`tool-refresh`, `tool-screen`, `tool-more`), `strict-context-menu`, `tabs.types`.

## `@vinicunca/taman-ui/unocss`

`TAMAN_UI_CONTENT` only (build time).

---

- [GitHub](https://github.com/vinicunca/taman/tree/main/packages/taman-ui)
- [npm](https://www.npmjs.com/package/@vinicunca/taman-ui)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.