new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · all subjects

cli & commands

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Install chat components with CLI

Chat components can be installed with the command: npx shadcn@latest add message-scroller message bubble attachment marker

Install carousel via CLI

Run `npx shadcn@latest add carousel` to install the carousel component.

Alert component installation command

Install the Alert component using the CLI command: npx shadcn@latest add alert

Button component CLI installation

Install the Button component using the command: npx shadcn@latest add button

Checkbox installation via CLI

Install the checkbox component using the command: npx shadcn@latest add checkbox

CLI support for Tailwind prefix

The CLI can now configure a custom Tailwind prefix and will automatically prefix utility classes when adding components. This allows shadcn/ui components to be added to existing projects like Docusaurus and Nextra without conflicts. The prefix works with cn, cva, and CSS variables.

CLI support for tailwind.config.ts

The CLI can now detect and add the TypeScript version of the Tailwind config (tailwind.config.ts) when configuring a project.

Example of Tailwind prefix usage in components

When using a Tailwind prefix like 'tw-', components apply prefixed utility classes: <AlertDialog className="tw-grid tw-gap-4 tw-border tw-bg-background tw-shadow-lg" />

npx shadcn init command with framework detection

The improved init command performs framework detection and can initialize a brand new Next.js app in one command using `npx shadcn init`. It can also accept component names as arguments, for example `npx shadcn init sidebar-01 login-01`.

npx shadcn add command usage

The `npx shadcn add` command is used to install components, themes, hooks, utils and more into a project.

CLI rewrite August 2024 with framework support

The CLI underwent a complete rewrite available from August 2024. It now supports all major React frameworks out of the box including Next.js, Remix, Vite, and Laravel. When initializing into a new app, it updates existing Tailwind files instead of overriding them.

CLI improvements include monorepo support

Recent CLI updates include better error handling and monorepo support.

Install remote components using URL

You can install remote components using a URL with the command `npx shadcn add https://acme.com/registry/navbar.json`.

Local file support for shadcn add

The shadcn CLI supports adding components, themes, hooks, utils and more from local JSON files using the command npx shadcn add ./block.json.

Local file support for shadcn init

The shadcn CLI supports initializing projects from local JSON files using the command npx shadcn init ./template.json.

Give your agent this brain