andy-b-ui

Personal shared component library built on shadcn/ui patterns, Tailwind CSS v4, and Radix UI primitives. Documented with Storybook.

First-time publish setup

1. Check/claim your package name. The current name is andy-b-ui. Verify it's available on npmjs.com, or rename it to a scoped package (e.g. @yourusername/ui) by updating the "name" field in package.json.

2. Log in to npm:

   npm login

3. Publish:

   npm publish

   The prepublishOnly script runs npm run build automatically before publishing, so dist/ is always up to date.

Publishing updates

Bump the version, then publish:

npm version patch   # or minor / major
npm publish

That's it — no manual build step needed.

Consuming in another project

1. Install

npm install andy-b-ui

2. Set up your app's global CSS

Your consuming app needs Tailwind CSS v4 installed. Then in your global CSS entry file (e.g. globals.css or index.css):

@import "tailwindcss";
@import "andy-b-ui/styles";
@source "../node_modules/andy-b-ui/dist";

• @import "andy-b-ui/styles" — loads the shadcn color tokens (CSS variables for --primary, --background, etc.)
• @source "../node_modules/andy-b-ui/dist" — tells Tailwind to scan the library's built JS so it includes all utility classes the components use

Next.js note: the @source path may need to be "../../node_modules/andy-b-ui/dist" depending on where your CSS file lives relative to node_modules.

3. Use components

import { Button } from 'andy-b-ui'
import { Card, CardHeader, CardTitle, CardContent } from 'andy-b-ui'
import { Badge } from 'andy-b-ui'

export function MyPage() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello</CardTitle>
      </CardHeader>
      <CardContent className="flex gap-2">
        <Button>Click me</Button>
        <Badge variant="secondary">New</Badge>
      </CardContent>
    </Card>
  )
}

Available components

| Component | Import | |-----------|--------| | Button | import { Button } from 'andy-b-ui' | | Input | import { Input } from 'andy-b-ui' | | Label | import { Label } from 'andy-b-ui' | | Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction | import { Card, ... } from 'andy-b-ui' | | Badge | import { Badge } from 'andy-b-ui' | | Separator | import { Separator } from 'andy-b-ui' | | Avatar, AvatarImage, AvatarFallback | import { Avatar, ... } from 'andy-b-ui' | | Tabs, TabsList, TabsTrigger, TabsContent | import { Tabs, ... } from 'andy-b-ui' | | Switch | import { Switch } from 'andy-b-ui' | | Checkbox | import { Checkbox } from 'andy-b-ui' | | cn (utility) | import { cn } from 'andy-b-ui' |

Development

Run Storybook

npm run storybook

Opens at http://localhost:6006. Use the Light/Dark toggle in the toolbar to preview components in both themes.

Adding a new component

1. Create src/components/ui/my-component.tsx
2. Create src/components/ui/my-component.stories.tsx alongside it
3. Export from src/index.ts

Project structure

src/
  components/ui/     — components + co-located stories
  styles/
    variables.css    — shadcn color tokens (exported as andy-b-ui/styles)
  lib/
    utils.ts         — cn() utility (clsx + tailwind-merge)
  index.ts           — all package exports
  index.css          — full Tailwind + variables (used by Storybook/dev only)