@benchcutlogic/ui

Shared Svelte 5 component library for web applications, built with Tailwind CSS v4.

Install

pnpm add @benchcutlogic/ui

For local development from a sibling project, build the package before installing it. This example expects the Bench checkout at ../bench relative to the consumer:

pnpm --dir ../bench/packages/ui run package
pnpm add ../bench/packages/ui

Usage

Import each component from its own subpath:

<script lang="ts">
	import { Article } from '@benchcutlogic/ui/article';
	import { CardContent, CardHeader, CardLink, CardTitle } from '@benchcutlogic/ui/card';
</script>

<CardLink href="/projects/update">
	<CardHeader>
		<CardTitle>Project update</CardTitle>
	</CardHeader>
	<CardContent>
		<span>View update →</span>
	</CardContent>
</CardLink>

<Article>
	<h1>Support</h1>
	<p>
		Long-form native headings, paragraphs, lists, links, code, blockquotes, and tables inherit a
		readable token-driven rhythm.
	</p>
</Article>

Tailwind setup

In your app stylesheet, import Tailwind first, then the library stylesheet, and scan the installed component output:

@import 'tailwindcss';
@import '@benchcutlogic/ui/styles.css';
@source '../node_modules/@benchcutlogic/ui/dist';

Token names follow shadcn/ui exactly — paste any shadcn-compatible theme (e.g. tweakcn output) over :root/.dark with no renaming. Brand the components by overriding semantic custom properties such as --background, --primary, and --radius.

Available exports

Each component is a separate, tree-shakeable subpath export:

@benchcutlogic/ui/article
@benchcutlogic/ui/alert
@benchcutlogic/ui/alert-dialog
@benchcutlogic/ui/avatar
@benchcutlogic/ui/badge
@benchcutlogic/ui/breadcrumb
@benchcutlogic/ui/button
@benchcutlogic/ui/card
@benchcutlogic/ui/checkbox
@benchcutlogic/ui/dialog
@benchcutlogic/ui/dropdown-menu
@benchcutlogic/ui/empty-state
@benchcutlogic/ui/input
@benchcutlogic/ui/label
@benchcutlogic/ui/loading-state
@benchcutlogic/ui/popover
@benchcutlogic/ui/progress
@benchcutlogic/ui/radio-group
@benchcutlogic/ui/scroll-area
@benchcutlogic/ui/section-header
@benchcutlogic/ui/select
@benchcutlogic/ui/separator
@benchcutlogic/ui/sheet
@benchcutlogic/ui/skeleton
@benchcutlogic/ui/slider
@benchcutlogic/ui/spinner
@benchcutlogic/ui/stat-card
@benchcutlogic/ui/switch
@benchcutlogic/ui/table
@benchcutlogic/ui/tabs
@benchcutlogic/ui/textarea
@benchcutlogic/ui/tooltip
@benchcutlogic/ui/utils
@benchcutlogic/ui/styles.css

@benchcutlogic/ui/utils exports cn and the library's type helpers.

Development

pnpm install
pnpm run check
pnpm run test
pnpm run build-storybook

Notes

• Keep this package generic and reusable.
• Do not include references to internal or private projects in docs or examples.