@esuiss/ui 0.5.0 → 0.5.2

package/README.md

@@ -1,12 +1,157 @@
 # @esuiss/ui
 
-Add esuiss-ui components to Next.js and React (Vite) projects.
+Copy-paste React components with a clean, minimal design, built on [Base UI](https://base-ui.com) and [Tailwind CSS](https://tailwindcss.com) v4.
+
+`@esuiss/ui` is a command-line tool. It does not ship components as a dependency. Instead, it copies their source into your project so you own the code and can change it however you like.
+
+- 61 accessible components and 3 hooks, from buttons and dialogs to sidebars, charts, and chat views
+- A refined color palette for light and dark mode, written in oklch
+- [Phosphor](https://phosphoricons.com) icons
+- Next.js and React (Vite) with TypeScript
+- No runtime dependency on this CLI: it runs with `npx` and is never installed in your project
+
+## Requirements
+
+- Next.js or React with Vite
+- TypeScript
+- Tailwind CSS 4.2 or later (installed for you if missing)
+- Node.js 18 or later
+
+## Quick start
+
+Set up a project once:
 
 ```bash
 npx @esuiss/ui@latest init
-npx @esuiss/ui@latest add sidebar
+```
+
+Then add components:
+
+```bash
+npx @esuiss/ui@latest add button dialog sidebar
+```
+
+Use them:
+
+```tsx
+import { Button } from "@/components/ui/button"
+
+export function Example() {
+  return <Button>Continue</Button>
+}
+```
+
+## What `init` does
+
+1. Detects Next.js or Vite and checks for TypeScript and Tailwind CSS 4.2+.
+2. Adds the `@/*` import alias to `tsconfig.json` if it is missing.
+3. Installs and wires up Tailwind CSS if needed (`postcss.config.mjs` for Next.js, `vite.config.ts` for Vite).
+4. Writes the theme stylesheet to `app/globals.css` (Next.js) or `src/index.css` (Vite). It asks before replacing a stylesheet that already has content.
+5. Installs [`@esuiss/tailwind`](https://www.npmjs.com/package/@esuiss/tailwind), which provides the variants, animations, and utilities the components rely on.
+6. Adds the `button` component.
+
+## Commands
+
+### `init`
+
+```bash
+npx @esuiss/ui@latest init [options]
+```
+
+### `add`
+
+```bash
+npx @esuiss/ui@latest add <component...> [options]
+```
+
+Components are written to `components/ui/` (and hooks to `hooks/`) under your `@/*` alias root. Components they depend on are added too, and missing npm packages are installed with your package manager (npm, pnpm, yarn, or bun).
+
+### Options
+
+| Option | Description |
+| --- | --- |
+| `-o, --overwrite` | Replace local files that differ from the registry |
+| `--diff` | Show how your local files differ from the registry |
+| `-a, --all` | Add every component |
+| `-y, --yes` | Skip confirmation prompts |
+| `-c, --cwd <dir>` | Run in another project directory |
+| `-h, --help` | Show help |
+| `-v, --version` | Show the version |
+
+## Updating components
+
+Components are your code, so updates never overwrite your changes silently. Review the latest version first, then replace your copy if you want it:
+
+```bash
 npx @esuiss/ui@latest add button --diff
 npx @esuiss/ui@latest add button --overwrite
 ```
 
-`init` sets up Tailwind CSS (4.2 or later), the `@/*` import alias, the theme stylesheet with `@esuiss/tailwind`, and the button. Requires TypeScript.
+Running `add` for a component you already have keeps your file and tells you when it differs from the registry.
+
+## Theming
+
+Your stylesheet holds the whole theme:
+
+```css
+@import "tailwindcss";
+@import "@esuiss/tailwind";
+
+:root {
+  --background: oklch(1 0 0);
+  --primary: oklch(0.6321 0.2018 254.09);
+  --radius: 0.75rem;
+}
+
+.dark {
+  --background: oklch(0 0 0);
+  --primary: oklch(0.651471 0.191972 251.4696);
+}
+
+@theme inline {
+  --font-sans: system-ui, sans-serif;
+  --color-background: var(--background);
+  --color-primary: var(--primary);
+}
+```
+
+- **Change a color:** edit its value under `:root` (light) and `.dark` (dark).
+- **Add a color:** define it under `:root` and `.dark`, then map it in `@theme inline`, for example `--color-brand: var(--brand);`. Classes such as `bg-brand` and `text-brand` become available.
+- **Change the font:** set `--font-sans` in `@theme inline`. By default each device's own system font is used, so nothing has to be downloaded.
+- **Corner radius:** `--radius` scales every rounded component.
+
+## Dark mode
+
+Dark mode is enabled by the `dark` class on `<html>`. With Next.js, [next-themes](https://github.com/pacocoursey/next-themes) works out of the box:
+
+```tsx
+import { ThemeProvider } from "next-themes"
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+## Components
+
+accordion, alert, alert-dialog, aspect-ratio, attachment, avatar, badge, breadcrumb, bubble, button, button-group, calendar, card, carousel, chart, checkbox, collapsible, combobox, command, context-menu, dialog, direction, drawer, dropdown-menu, empty, field, hover-card, input, input-group, input-otp, item, kbd, label, marker, menubar, message, message-scroller, native-select, navigation-menu, pagination, popover, progress, questionnaire, radio-group, resizable, scroll-area, select, separator, sheet, sidebar, skeleton, slider, spinner, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip
+
+Hooks: use-message-scroller, use-mobile, use-questionnaire
+
+## Troubleshooting
+
+- **"Tailwind CSS 4.2 or later is required"**: upgrade with `npm install tailwindcss@latest` and run `init` again.
+- **"No `@/*` import alias found"**: run `init` first, or add `"paths": { "@/*": ["./src/*"] }` to `compilerOptions` in `tsconfig.json`.
+- **A newly published version is not found**: npm can take a few minutes to make new versions available. Run `npx --prefer-online @esuiss/ui@latest ...`.
+
+## License
+
+MIT

package/package.json

@@ -1,7 +1,25 @@
 {
   "name": "@esuiss/ui",
-  "version": "0.5.0",
-  "description": "Add esuiss-ui components to Next.js and React projects.",
+  "version": "0.5.2",
+  "description": "Copy-paste React components with a clean, minimal design, built on Base UI and Tailwind CSS v4. CLI for Next.js and React (Vite).",
+  "keywords": [
+    "react",
+    "nextjs",
+    "vite",
+    "components",
+    "ui",
+    "design-system",
+    "tailwindcss",
+    "tailwind",
+    "base-ui",
+    "oklch",
+    "dark-mode",
+    "cli",
+    "copy-paste",
+    "typescript",
+    "phosphor-icons"
+  ],
+  "author": "ademceper",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,6 +27,9 @@
     "directory": "packages/cli"
   },
   "homepage": "https://github.com/e-suiss/ui",
+  "bugs": {
+    "url": "https://github.com/e-suiss/ui/issues"
+  },
   "type": "module",
   "bin": {
     "esuiss": "index.mjs"