ui/components/icons

Icons

SVG icon components for use as indicators, triggers, and decorative elements. The item is the shared icon namespace; it currently ships Chevron, the one glyph the library draws as SVG (every other system glyph is mono text).

Preview

tsx

1 import { Chevron } from "@/components/ui/icons";2 3 export default function ChevronDefault() {4   return (5     <div className="flex items-center gap-4 text-muted-foreground">6       <Chevron />7       <span className="text-sm font-mono">Default chevron (right, sm)</span>8     </div>9   );10 }11

Installation

$pnpm exec dgadd add ui/icons

[Installs to]src/components/ui/icons[Item]ui/icons

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Chevron } from "@/components/ui/icons";2 3 export default function ChevronDefault() {4   return (5     <div className="flex items-center gap-4 text-muted-foreground">6       <Chevron />7       <span className="text-sm font-mono">Default chevron (right, sm)</span>8     </div>9   );10 }11

Examples

All Directions

Preview

tsx

1 import { Chevron } from "@/components/ui/icons";2 3 export default function ChevronDirections() {4   return (5     <div className="flex flex-col gap-4">6       {(["right", "down", "left", "up"] as const).map((dir) => (7         <div key={dir} className="flex items-center gap-3 text-muted-foreground">8           <Chevron direction={dir} size="md" />9           <span className="text-sm font-mono">{dir}</span>10         </div>11       ))}12     </div>13   );14 }15

Animated Toggle

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import { Chevron } from "@/components/ui/icons";5 6 export default function ChevronAnimated() {7   const [open, setOpen] = useState(false);8 9   return (10     <div className="flex flex-col gap-6">11       <button12         type="button"13         onClick={() => setOpen((v) => !v)}14         className="flex w-fit items-center gap-2 text-sm font-mono text-muted-foreground hover:text-foreground transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-0"15       >16         <Chevron open={open} />17         <span>Click to toggle ({open ? "open" : "closed"})</span>18       </button>19 20       {/* Static pair: the rotation contract is verifiable without interacting. */}21       <div className="flex items-center gap-6 text-muted-foreground">22         <div className="flex items-center gap-2">23           <Chevron />24           <span className="text-xs font-mono">open={"{false}"} — points right</span>25         </div>26         <div className="flex items-center gap-2">27           <Chevron open />28           <span className="text-xs font-mono">open — rotated 90°</span>29         </div>30       </div>31 32       <div className="flex items-center gap-6 text-muted-foreground">33         <div className="flex items-center gap-2">34           <Chevron open={open} size="sm" />35           <span className="text-xs font-mono">sm · 12px</span>36         </div>37         <div className="flex items-center gap-2">38           <Chevron open={open} size="md" />39           <span className="text-xs font-mono">md · 16px</span>40         </div>41         <div className="flex items-center gap-2">42           <Chevron open={open} size="lg" />43           <span className="text-xs font-mono">lg · 20px</span>44         </div>45       </div>46     </div>47   );48 }49

API Reference

Chevron

Name	Type	Default	Description
direction	"down" \| "up" \| "left" \| "right"	"right"	Base direction the chevron points before any rotation.
open	boolean	false	Rotates 90 degrees clockwise from the base direction. Use for expand/collapse toggles.
size	"sm" \| "md" \| "lg"	"sm"	Icon size token.

Accessibility

Notes

Animation

Set open={true} to rotate the chevron 90° clockwise from its base direction. Uses CSS transition-transform for smooth animation. The Animated Toggle example also renders the closed and open states side by side, so the rotation is verifiable without interacting.

Accessibility

Chevron defaults to `aria-hidden="true"` for decorative use. For a meaningful standalone icon, set `aria-hidden={false}`, `role="img"`, and an accessible name such as `aria-label`.

Reusability

Chevron is used as the default trigger indicator by Accordion, Select, and Sidebar. Installing any of these components auto-installs Icons via registryDependencies. Each supports a handle prop to customize or hide it.

Source

Install via CLI: pnpm exec dgadd add ui/icons.

Highlighted source loads after this disclosure opens. Browse the source repository.

Icons

Installation

Usage

Examples

All Directions

Animated Toggle

API Reference

Chevron

Accessibility

Notes

Animation

Accessibility

Reusability

Source

View component source (6 files)