### Install shadcn-ng CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/registry/getting-started.mdx This command installs the `shadcn-ng` command-line interface globally, enabling you to use its build and add functionalities for managing component registries. ```bash npm install shadcn-ng ``` -------------------------------- ### Install Dropdown Menu via CLI - Bash Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/dropdown-menu.mdx Installs the dropdown-menu component using the shadcn-ng CLI. This is the recommended method for quick setup. Ensure you have npx installed. ```bash npx shadcn-ng@latest add dropdown-menu ``` -------------------------------- ### Install Skeleton Component using CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/skeleton.mdx Installs the Skeleton component into your project using the shadcn-ng CLI. This is the recommended method for quick setup. ```bash npx shadcn-ng@latest add skeleton ``` -------------------------------- ### Install Badge Component via CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/badge.mdx Installs the Badge component using the shadcn-ng CLI. This is the recommended method for quick setup. ```bash npx shadcn-ng@latest add badge ``` -------------------------------- ### Initialize Project with shadcn-ng CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/cli.mdx Initializes a new project with shadcn-ng, setting up configuration and installing necessary dependencies. It guides the user through configuration questions for `components.json`, including framework verification, color selection, and theming options. ```bash npx shadcn-ng@latest init ``` -------------------------------- ### Install Dialog Component using CLI - shadcn-ng Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/dialog.mdx Installs the Dialog component and its dependencies into your project using the shadcn-ng CLI. This is the recommended method for quick setup. ```bash npx shadcn-ng@latest add dialog ``` -------------------------------- ### Install Textarea Component using CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/textarea.mdx Installs the Textarea component into your project using the shadcn-ng CLI. This is the recommended installation method for quick setup. ```bash npx shadcn-ng@latest add textarea ``` -------------------------------- ### Install Separator Component via CLI - shadcn-ng Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/separator.mdx Installs the Separator component using the shadcn-ng CLI. This is the recommended installation method for quick setup. ```bash npx shadcn-ng@latest add separator ``` -------------------------------- ### Astro Development and Build Commands Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/README.md A collection of essential npm commands for managing an Astro project. These commands cover dependency installation, starting a local development server, building the project for production, and previewing the built site. They are executed from the project's root directory. ```sh npm install ``` ```sh npm run dev ``` ```sh npm run build ``` ```sh npm run preview ``` -------------------------------- ### Install Sonner via CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/sonner.mdx Install the Sonner component using the shadcn-ng CLI. This is the recommended method for quick setup. It involves running a single command. ```bash npx shadcn-ng@latest add sonner ``` -------------------------------- ### Install Alert Component via CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/alert.mdx Installs the Alert component and its dependencies using the shadcn-ng CLI. This is the recommended installation method for quick integration. ```bash npx shadcn-ng@latest add alert ``` -------------------------------- ### Add Registry Item using CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/registry/getting-started.mdx This command uses the `shadcn-ng add` command to install a registry item from a provided URL. It fetches and integrates the specified component into your project. ```bash npx shadcn-ng@latest add http://localhost:4200/r/hello-world.json ``` -------------------------------- ### Create Minimal Astro Project Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/README.md This command initializes a new Astro project using the 'minimal' template. It requires Node.js and npm to be installed. The output is a new Astro project directory ready for development. ```sh npm create astro@latest -- --template minimal ``` -------------------------------- ### Install Toggle Component via CLI - shadcn-ng Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/toggle.mdx Installs the Toggle component using the shadcn-ng CLI. This is the recommended method for quick integration. ```bash npx shadcn-ng@latest add toggle ``` -------------------------------- ### Install Progress Component via CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/progress.mdx Installs the Progress component using the shadcn-ng CLI. This is the recommended method for quick integration. ```bash npx shadcn-ng@latest add progress ``` -------------------------------- ### Install Icon Library for Default Style via npm Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/installation/manual.mdx Installs the @ng-icons/lucide library, required when using the `default` style for components in shadcn-ng. This assumes you have Node.js and npm installed. ```bash npm install @ng-icons/lucide ``` -------------------------------- ### Install Input Component using CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/input.mdx Installs the Input component into your project using the shadcn-ng CLI. This command-line instruction is the quickest way to add the component. ```bash npx shadcn-ng@latest add input ``` -------------------------------- ### Create a Simple Angular Component Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/registry/getting-started.mdx This is an example of a basic Angular component intended for a registry. It imports necessary directives and defines its template. The component can be placed anywhere, but its path must be correctly specified in `registry.json`. ```typescript import { Component } from '@angular/core' import { UbButtonDirective } from '~/components/ui/button' @Component({ selector: 'HelloWorld', imports: [UbButtonDirective], template: `` }) export default class HelloWorld { } ``` -------------------------------- ### CLI Initialization Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/cli.mdx Use the `init` command to initialize configuration and dependencies for a new project. This command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables. ```APIDOC ## init ### Description Initializes your project and installs dependencies. It configures Tailwind CSS and CSS variables for theming. ### Method CLI Command ### Endpoint npx shadcn-ng@latest init ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```bash npx shadcn-ng@latest init ``` ### Response #### Success Response (200) Initializes project configuration and installs dependencies. #### Response Example ```txt ◇ Verifying framework. Found Angular │ ◇ Which color would you like to use as the base color? │ Zinc │ ◆ Would you like to use CSS variables for theming? │ ● Yes / ○ No ``` ### Options - `-c, --cwd `: the working directory. defaults to the current directory. - `-f, --force`: force overwrite of existing configuration. - `-d, --defaults`: use default configuration. - `-y, --yes`: skip confirmation prompt. (default: true) ``` -------------------------------- ### Install Aspect Ratio via CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/aspect-ratio.mdx Installs the Aspect Ratio component using the shadcn-ng CLI. This is the quickest way to add the component to your project. ```bash npx shadcn-ng@latest add aspect-ratio ``` -------------------------------- ### Install Tabs Component using CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/tabs.mdx Installs the Tabs component using the shadcn-ng CLI. This is the recommended method for quick integration. ```bash npx shadcn-ng@latest add tabs ``` -------------------------------- ### Run Registry Build Script Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/registry/getting-started.mdx This command executes the `registry:build` script defined in your `package.json`. It triggers the `shadcn-ng build` process, which compiles and generates the necessary registry JSON files. ```bash npm run registry:build ``` -------------------------------- ### Install Switch Component via CLI - shadcn-ng Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/switch.mdx Installs the Switch component into your project using the shadcn-ng CLI. This is the recommended method for quick integration. ```bash npx shadcn-ng@latest add switch ``` -------------------------------- ### Install Card Component via CLI - shadcn-ng Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/card.mdx Installs the Card component using the shadcn-ng CLI. This is the recommended method for adding components to your project. ```bash npx shadcn-ng@latest add card ``` -------------------------------- ### Install Pagination Component via CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/pagination.mdx Installs the Shadcn-NG pagination component using the provided command-line interface command. This is the recommended method for quick integration. ```bash npx shadcn-ng@latest add pagination ``` -------------------------------- ### Install Icon Library for New York Style via npm Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/installation/manual.mdx Installs the @ng-icons/radix-icons library, necessary when using the `new-york` style for components in shadcn-ng. This requires Node.js and npm to be installed. ```bash npm install @ng-icons/radix-icons ``` -------------------------------- ### Install Project Dependencies via npm Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/installation/manual.mdx Installs essential dependencies for shadcn-ng, including tailwindcss-animate, class-variance-authority, clsx, and tailwind-merge. Ensure you have Node.js and npm installed. ```bash npm install tailwindcss-animate class-variance-authority clsx tailwind-merge ``` -------------------------------- ### Install Breadcrumb Component using CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/breadcrumb.mdx Install the Breadcrumb component into your project using the Shadcn-ng CLI. This command automates the setup process, making it the recommended method for adding the component. ```bash npx shadcn-ng@latest add breadcrumb ``` -------------------------------- ### Install Accordion Component using CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/accordion.mdx Installs the Accordion component using the shadcn-ng CLI. This is the simplest way to add the component to your project. ```bash npx shadcn-ng@latest add accordion ``` -------------------------------- ### Install shadcn-ng Table Component using CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/table.mdx Installs the table component into your project using the shadcn-ng CLI. This is the recommended and simplest method for adding the component. ```bash npx shadcn-ng@latest add table ``` -------------------------------- ### Install Accordion Dependencies Manually Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/accordion.mdx Manually installs the necessary dependencies for the Accordion component using npm. Ensure these are installed before proceeding with manual integration. ```bash npm install @ng-icons/core @ng-icons/lucide ``` -------------------------------- ### Add Build Script to package.json Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/registry/getting-started.mdx This JSON object shows how to add a `registry:build` script to your `package.json` file. This script utilizes the `shadcn-ng build` command to generate the registry JSON files. ```json { "scripts": { "registry:build": "shadcn-ng build" } } ``` -------------------------------- ### Import and Use Button Component in Angular Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/installation/angular.mdx Demonstrates how to import and use the `UbButtonDirective` in an Angular standalone component. The example shows the import statement and the usage of the `ubButton` directive in the template. ```angular-ts import { Component } from "@angular/core"; import { UbButtonDirective } from "~/components/ui/button"; @Component({ standalone: true, imports: [UbButtonDirective], template: ``, }) export class ButtonDemoComponent {} ``` -------------------------------- ### Install Button Component using CLI - shadcn-ng Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/button.mdx Installs the Button component into your project using the shadcn-ng CLI. This is the recommended method for quick integration. ```bash npx shadcn-ng@latest add button ``` -------------------------------- ### Install Dialog Dependencies Manually - shadcn-ng Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/dialog.mdx Manually installs the necessary dependencies for the Dialog component, including primitives, ng-icons core, and lucide icons. This method is useful if you prefer manual control over installations. ```bash npm install @radix-ng/primitives @ng-icons/core @ng-icons/lucide ``` -------------------------------- ### Install Collapsible Component via CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/collapsible.mdx Installs the Collapsible component using the shadcn-ng CLI. This is the recommended and simplest method for adding the component to your project. ```bash npx shadcn-ng@latest add collapsible ``` -------------------------------- ### Initialize Angular Project with shadcn-ng Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/installation/angular.mdx Initializes a new Angular project or sets up an existing one with shadcn-ng. The `-d` flag can be used to apply default settings for style, color, and CSS variables. ```bash npx shadcn-ng@latest init ``` ```bash npx shadcn-ng@latest init -d ``` -------------------------------- ### Define Component Registry JSON Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/registry/getting-started.mdx This JSON file defines the structure and metadata for your component registry. It requires a schema, name, homepage, and a list of items, each with its own definition. ```json { "$schema": "https://ui.adrianub.dev/schema/registry.json", "name": "acme", "homepage": "https://acme.com", "items": [ // ... ] } ``` -------------------------------- ### HTML Example using Custom Warning Colors Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/theming.mdx Demonstrates the usage of the newly added 'warning' and 'warning-foreground' utility classes in HTML after configuring them in CSS and Tailwind. ```html
``` -------------------------------- ### Initialize shadcn-ng CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components-json.mdx Command to initialize the shadcn-ng CLI and generate the components.json file if it does not exist. This is the primary way to start configuring your project for shadcn-ng. ```bash npx shadcn-ui@latest init ``` -------------------------------- ### Install Avatar Component using CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/avatar.mdx This command installs the Avatar component and its dependencies using the shadcn-ng CLI. Ensure you have the CLI installed and configured in your project. ```bash npx shadcn-ng@latest add avatar ``` -------------------------------- ### Basic Switch Usage - HTML Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/switch.mdx Provides a basic HTML example of how to apply the Switch component using its directive. This assumes the directive has been correctly imported and is available in the scope. ```html

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

``` -------------------------------- ### Tabs Component Usage - HTML Structure Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/tabs.mdx Provides an example of the HTML structure for implementing the Tabs component, including triggers and content sections. ```html
Make changes to your account here.
Change your password here.
``` -------------------------------- ### Card Component Usage - HTML Structure - shadcn-ng Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/card.mdx Provides an example of the HTML structure for implementing the Card component using its directives. This structure defines the header, content, and footer sections of the card. ```html

Card Title

Card Description

Card Content

Card Footer

``` -------------------------------- ### Astro CLI Commands Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/README.md Demonstrates how to use the Astro Command Line Interface (CLI) for various project management tasks. These include adding integrations, checking for errors, and accessing help. The `-- --help` flag provides detailed usage information for the CLI. ```sh npm run astro ... ``` ```sh npm run astro -- --help ``` -------------------------------- ### Configure tailwind.config.js for shadcn-ng Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/installation/manual.mdx Configures Tailwind CSS for the shadcn-ng project. It includes settings for dark mode, content sources, container styles, a custom color palette, border-radius, font family, and animation keyframes for accordion components. It also integrates the `tailwindcss-animate` plugin. ```javascript const { fontFamily } = require("tailwindcss/defaultTheme") /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./src/**/*.{html,ts}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: `var(--radius)`, md: `calc(var(--radius) - 2px)`, sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } ``` -------------------------------- ### Configure TypeScript Import Aliases (tsconfig.json) Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/installation/index.mdx This snippet shows how to configure import aliases in your tsconfig.json file. It allows you to use shorthand paths like '~/*' for your project's root directory, simplifying import statements. This configuration is essential for maintaining a clean and organized codebase, especially in larger projects. ```json { "compilerOptions": { "paths": { "~/*": ["./*"] } } } ``` -------------------------------- ### Get Registry Index of Components (TypeScript) Source: https://context7.com/adrian-ub/shadcn-ng/llms.txt Retrieves the complete index of all available components from the registry. This function is useful for listing components, understanding their types, and identifying any direct registry dependencies they might have. The output is an array of component objects, each detailing its name, type, files, and dependencies. ```typescript import { buildRegistry } from './registry/api' const { getRegistryIndex } = buildRegistry('https://ui.adrianub.dev/r') const index = await getRegistryIndex() // Handle the response if (index) { console.log(`Found ${index.length} components`) index.forEach(component => { console.log(`${component.name} - ${component.type}`) if (component.registryDependencies) { console.log(` Dependencies: ${component.registryDependencies.join(', ')}`) } }) } // Example output structure: // [ // { // name: 'button', // type: 'registry:ui', // files: [{ path: 'ui/button.ts', type: 'registry:ui' }], // dependencies: ['class-variance-authority', 'ng-primitives'], // registryDependencies: [] // }, // { // name: 'dialog', // type: 'registry:ui', // files: [{ path: 'ui/dialog.ts', type: 'registry:ui' }], // registryDependencies: ['button'] // } // ] ``` -------------------------------- ### Registry Client Initialization and Basic Operations Source: https://context7.com/adrian-ub/shadcn-ng/llms.txt Demonstrates how to initialize the registry client and perform basic operations like fetching styles, the component index, and individual components. ```APIDOC ## Registry Client Initialization and Basic Operations ### Description Initializes the registry client and shows examples for fetching available styles, the complete component index, and specific component details. ### Method `buildRegistry(registryUrl: string)` ### Endpoint N/A (This is a client-side function) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```typescript import { buildRegistry } from './registry/api' // Create registry client with default URL const registry = buildRegistry('https://ui.adrianub.dev/r') // Fetch available styles const styles = await registry.getRegistryStyles() // Returns: [{ name: 'new-york', label: 'New York' }, { name: 'default', label: 'Default' }] // Get registry index (list of all components) const index = await registry.getRegistryIndex() // Returns: [{ name: 'button', type: 'registry:ui', files: [...], ... }] // Fetch specific component const button = await registry.getRegistryItem('button', 'new-york') // Returns: { name: 'button', type: 'registry:ui', files: [...], dependencies: ['class-variance-authority'] } // Get base color configuration const zincColor = await registry.getRegistryBaseColor('zinc') // Returns: { cssVars: { light: {...}, dark: {...} }, inlineColors: {...} } ``` ### Response #### Success Response (200) Responses vary based on the function called: - `getRegistryStyles()`: An array of style objects, each with `name` and `label`. - `getRegistryIndex()`: An array of component index objects, each with `name`, `type`, `files`, etc. - `getRegistryItem(name, style)`: A component object with `name`, `type`, `files`, `dependencies`, etc. - `getRegistryBaseColor(color)`: An object containing `cssVars` (for light and dark modes) and `inlineColors`. #### Response Example ```json // Example for getRegistryStyles() [ { "name": "new-york", "label": "New York" }, { "name": "default", "label": "Default" } ] // Example for getRegistryIndex() [ { "name": "button", "type": "registry:ui", "files": [...], ... } ] // Example for getRegistryItem('button', 'new-york') { "name": "button", "type": "registry:ui", "files": [...], "dependencies": ["class-variance-authority"] } // Example for getRegistryBaseColor('zinc') { "cssVars": { "light": {"$depth": 0, "color": "#f9fafb"}, "dark": {"$depth": 0, "color": "#1f2937"} }, "inlineColors": {"$depth": 0, "color": "#f9fafb"} } ``` ``` -------------------------------- ### CLI Add Components Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/cli.mdx Use the `add` command to add components and dependencies to your project. You can specify individual components or add all available components. ```APIDOC ## add ### Description Adds specified components and their dependencies to your project. Allows for selection from a list of available components. ### Method CLI Command ### Endpoint npx shadcn-ng@latest add [component] ### Parameters #### Path Parameters * `components` (string) - Required - The components to add or a url to the component. #### Query Parameters None #### Request Body None ### Request Example ```bash npx shadcn-ng@latest add button ``` ### Response #### Success Response (200) Adds the specified component(s) to your project. #### Response Example ```txt Which components would you like to add? › Space to select. A to toggle all. Enter to submit. ◯ accordion ◯ alert ◯ alert-dialog ◯ aspect-ratio ◯ avatar ◯ badge ◯ button ◯ calendar ◯ card ◯ checkbox ``` ### Options - `-y, --yes`: skip confirmation prompt. (default: false) - `-o, --overwrite`: overwrite existing files. (default: false) - `-c, --cwd `: the working directory. defaults to the current directory. - `-a, --all`: add all available components (default: false) - `-p, --path `: the path to add the component to. - `-h, --help`: display help for command ``` -------------------------------- ### Initialize Theme with Local Storage and System Preference (JavaScript) Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/v4/src/index.html This snippet initializes the application's theme by checking 'theme' in local storage. If not found, it falls back to the system's preferred color scheme. It adds or removes the 'dark' class to the document's root element accordingly. Errors during this process are logged to the console. ```javascript (function () { try { const theme = localStorage.getItem('theme') const isDarkMode = theme === 'dark' || (theme === null && window.matchMedia('(prefers-color-scheme: dark)').matches) if (isDarkMode) { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') } } catch (e) { console.error('Error initializing theme:', e) } })() ``` -------------------------------- ### Initialize Project Programmatically (TypeScript) Source: https://context7.com/adrian-ub/shadcn-ng/llms.txt Allows for programmatically initializing a new project with specified components and options, bypassing the command-line interface. It takes an 'InitOptions' object and returns the project configuration upon successful initialization. This leverages Node.js built-in modules and requires specific CLI stage functions. ```typescript import { runInit } from './cli/stages/run-init' import type { InitOptions } from './cli/schemas/init' import path from 'node:path' // Define initialization options const options: InitOptions = { cwd: path.resolve('./my-angular-project'), components: ['button', 'card', 'dialog'], force: false, defaults: false, yes: true, cssVariables: true } // Run initialization try { const config = await runInit(options) console.log('Project initialized successfully!') console.log('Style:', config.style) console.log('Components path:', config.resolvedPaths.components) console.log('CSS variables enabled:', config.tailwind.cssVariables) // Config is now available for further operations // components.json has been created // Initial components have been added } catch (error) { console.error('Initialization failed:', error) } ``` -------------------------------- ### components.json Tailwind CSS Config Path Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components-json.mdx Specifies the path to the Tailwind CSS configuration file. This helps the CLI locate and understand your Tailwind CSS setup for generating compatible components. ```json { "tailwind": { "config": "tailwind.config.js" | "tailwind.config.ts" } } ``` -------------------------------- ### CLI Build Registry Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/cli.mdx Use the `build` command to generate the registry JSON files. This command reads `registry.json` and outputs the registry files to the specified directory. ```APIDOC ## build ### Description Generates registry JSON files from the `registry.json` file. These files are typically used for component discovery and management. ### Method CLI Command ### Endpoint npx shadcn-ng@latest build ### Parameters #### Path Parameters * `registry` (string) - Optional - Path to registry.json file (default: "./registry.json"). #### Query Parameters None #### Request Body None ### Request Example ```bash npx shadcn-ng@latest build ``` ### Response #### Success Response (200) Generates the registry JSON files. #### Response Example ```txt (Generates JSON files in the specified output directory) ``` ### Options - `-o, --output `: destination directory for json files (default: "./public/r"). - `-c, --cwd `: the working directory. defaults to the current directory. - `-h, --help`: display help for command ``` -------------------------------- ### Build Registry Client and Fetch Components (TypeScript) Source: https://context7.com/adrian-ub/shadcn-ng/llms.txt Creates a registry client to fetch components, styles, and configurations from a specified registry URL. It demonstrates fetching available styles, the registry index, individual components, base color configurations, and resolving component dependency trees with provided configurations. This function is crucial for integrating remote or local component libraries. ```typescript import { buildRegistry } from './registry/api' // Create registry client with default URL const registry = buildRegistry('https://ui.adrianub.dev/r') // Fetch available styles const styles = await registry.getRegistryStyles() // Returns: [{ name: 'new-york', label: 'New York' }, { name: 'default', label: 'Default' }] // Get registry index (list of all components) const index = await registry.getRegistryIndex() // Returns: [{ name: 'button', type: 'registry:ui', files: [...], ... }] // Fetch specific component const button = await registry.getRegistryItem('button', 'new-york') // Returns: { name: 'button', type: 'registry:ui', files: [...], dependencies: ['class-variance-authority'] } // Get base color configuration const zincColor = await registry.getRegistryBaseColor('zinc') // Returns: { cssVars: { light: {...}, dark: {...} }, inlineColors: {...} } // Resolve component tree with dependencies const config = { style: 'new-york', tailwind: { baseColor: 'zinc', cssVariables: true }, resolvedPaths: { cwd: './src', components: './src/components', ui: './src/components/ui' } } const tree = await registry.registryResolveItemsTree(['button', 'card'], config) // Returns: { dependencies: [...], devDependencies: [...], files: [...], tailwind: {...}, cssVars: {...} } ``` -------------------------------- ### Add Components with shadcn-ng CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/cli.mdx Adds specified components and their dependencies to an Angular project using the shadcn-ng CLI. Users can select components from a list or add all available components. Options include overwriting existing files and specifying a custom path. ```bash npx shadcn-ng@latest add [component] ``` -------------------------------- ### Collapsible Component Usage (TypeScript and HTML) Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/components/collapsible.mdx Demonstrates how to import and use the Collapsible component in a project. It includes TypeScript for imports and HTML for the component structure, showcasing its interactive expand/collapse functionality. ```typescript import { UbCollapsible, UbCollapsibleContent, UbCollapsibleTrigger } from '~/components/ui/collapsible' ``` ```html
Yes. Free to use for personal and commercial projects. No attribution required.
``` -------------------------------- ### Define and Validate Project Configuration (TypeScript) Source: https://context7.com/adrian-ub/shadcn-ng/llms.txt Defines the structure for project configuration, including paths, theming, and Tailwind CSS settings. It uses Valibot for schema validation and Node.js 'fs' module to write the configuration to a 'components.json' file. Dependencies include 'valibot' and Node.js built-in modules. ```typescript import type { Config } from './registry/schema' import * as v from 'valibot' import { ConfigSchema } from './registry/schema' // Example configuration object const config: Config = { $schema: 'https://ui.adrianub.dev/schema/config.json', style: 'new-york', tailwind: { config: 'tailwind.config.ts', css: 'src/styles.css', baseColor: 'zinc', cssVariables: true, prefix: 'tw-' }, aliases: { components: '@/components', utils: '@/lib/utils', ui: '@/components/ui', lib: '@/lib', services: '@/services' }, iconLibrary: 'lucide-angular', resolvedPaths: { cwd: '/path/to/project', tailwindConfig: '/path/to/project/tailwind.config.ts', tailwindCss: '/path/to/project/src/styles.css', components: '/path/to/project/src/components', ui: '/path/to/project/src/components/ui', lib: '/path/to/project/src/lib', services: '/path/to/project/src/services', utils: '/path/to/project/src/lib/utils.ts' } } // Validate configuration const result = v.safeParse(ConfigSchema, config) if (result.success) { console.log('Valid configuration') // Access validated config const validConfig = result.output } else { console.error('Invalid configuration:', result.issues) } // Write configuration to components.json import fs from 'node:fs/promises' await fs.writeFile( './components.json', JSON.stringify(config, null, 2), 'utf8' ) ``` -------------------------------- ### Define Tailwind CSS cn Helper Function Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/installation/manual.mdx This TypeScript function, `cn`, is defined in `lib/utils.ts` to simplify the process of conditionally applying Tailwind CSS classes. It uses `clsx` for combining classes and `tailwind-merge` to efficiently merge and deduplicate them, preventing conflicts. ```typescript import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } ``` -------------------------------- ### Build Registry JSON Files with shadcn-ng CLI Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/cli.mdx Generates registry JSON files from `registry.json` for use in shadcn. This command is essential for the components to be correctly referenced and utilized. The output directory can be customized using the `--output` option. ```bash npx shadcn-ng@latest build ``` ```bash npx shadcn-ng@latest build --output ./public/registry ``` -------------------------------- ### Configure Tailwind CSS for Registry Items Source: https://github.com/adrian-ub/shadcn-ng/blob/v1/apps/www/src/content/docs/registry/registry-item-json.mdx The `tailwind` property allows configuration of Tailwind CSS aspects such as theme extensions (colors, keyframes, animations) and plugins for a registry item. This ensures consistency when the registry item is integrated into a project's Tailwind setup. Ensure colors are also added to the project's `tailwind.config.js`. ```json { "tailwind": { "config": { "theme": { "extend": { "colors": { "brand": "hsl(var(--brand))" }, "keyframes": { "wiggle": { "0%", "100%": { "transform": "rotate(-3deg)" }, "50%": { "transform": "rotate(3deg)" } } }, "animation": { "wiggle": "wiggle 1s ease-in-out infinite" } } } } } } ```