TNTStack

The design system layer. shadcn/ui components, Tailwind themes, global styles, and the cn() utility. Both apps/native and apps/web consume this package for visual primitives.

Directory Structure

button.tsx, card.tsx, input.tsx, sidebar.tsx, ... (15+ primitives)

Components

15+ shadcn/ui components (new-york style) in the root of src/components/:

avatar, breadcrumb, button, card, collapsible, dropdown-menu, input, label, scroll-area, select, separator, sheet, sidebar, skeleton, tooltip

All built on Radix UI primitives except card, input, breadcrumb (native HTML), skeleton (CSS animation), and sidebar (custom compound component).

Landing page components. All animations use the Motion library.

Component	What it does
`animated-group.tsx`	Staggered entrance animations
`infinite-slider.tsx`	Auto-scrolling horizontal slider
`logo-cloud.tsx`	Tech logos display
`logo.tsx`	App logo
`progressive-blur.tsx`	Gradient blur overlay
`text-effect.tsx`	Animated text reveal

Hooks

Hook	What it does
`use-mobile.ts`	Returns `true` below the mobile breakpoint (required by `sidebar.tsx`)

Utilities

File	What it provides
`utils.ts`	`cn()` — Tailwind class merge utility (`clsx` + `tailwind-merge`)

Exports

Wildcard exports in package.json. No barrel files.

package.json (exports)

{
  "./globals.css": "./src/styles/globals.css",
  "./postcss.config": "./postcss.config.mjs",
  "./components/*": "./src/components/*.tsx",
  "./lib/*": "./src/lib/*.ts",
  "./hooks/*": "./src/hooks/*.ts"
}

// Usage
import { Button } from "@workspace/ui/components/button";
import { Sidebar } from "@workspace/ui/components/sidebar";
import { cn } from "@workspace/ui/lib/utils";

Direct path imports (no barrel index). Tree-shaking works out of the box and circular dependency issues are avoided.

Global Styles

packages/ui/src/styles/globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "./themes.css";

@source "../../../../apps/**/*.{ts,tsx}";
@source "../../../core/src/**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}";

@custom-variant dark (&:is(.dark *));

The @source directives tell Tailwind to scan the UI package, the core package, and all apps for class usage. Both apps import this stylesheet via @workspace/ui/globals.css.

Don't create separate Tailwind entry points in the apps. Use the shared globals.css so all workspaces share the same design tokens and utilities.

UI Package