ui Architecture Docs
Home / File/ toggle-group-demo.tsx — ui Source File

toggle-group-demo.tsx — ui Source File

Architecture documentation for toggle-group-demo.tsx, a tsx file in the ui codebase. 2 imports, 1 dependents.

File tsx DocumentationAtlas ContentSourcing 2 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  71056e20_5a55_111f_6382_572a1ac079fc["toggle-group-demo.tsx"]
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  71056e20_5a55_111f_6382_572a1ac079fc --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  b4580ed6_9186_84ce_6bbc_e5d54313fa54["toggle-group"]
  71056e20_5a55_111f_6382_572a1ac079fc --> b4580ed6_9186_84ce_6bbc_e5d54313fa54
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> 71056e20_5a55_111f_6382_572a1ac079fc
  style 71056e20_5a55_111f_6382_572a1ac079fc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  BoldIcon,
  BookmarkIcon,
  HeartIcon,
  ItalicIcon,
  StarIcon,
  UnderlineIcon,
} from "lucide-react"

import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/registry/new-york-v4/ui/toggle-group"

export function ToggleGroupDemo() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      <ToggleGroup type="multiple" spacing={2}>
        <ToggleGroupItem value="bold" aria-label="Toggle bold">
          <BoldIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Toggle italic">
          <ItalicIcon />
        </ToggleGroupItem>
        <ToggleGroupItem
          value="strikethrough"
          aria-label="Toggle strikethrough"
        >
          <UnderlineIcon />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup
        variant="outline"
        type="single"
        defaultValue="all"
        className="*:data-[slot=toggle-group-item]:w-20"
      >
        <ToggleGroupItem value="all" aria-label="Toggle all">
          All
        </ToggleGroupItem>
        <ToggleGroupItem value="missed" aria-label="Toggle missed">
          Missed
        </ToggleGroupItem>
      </ToggleGroup>

      <ToggleGroup
        variant="outline"
        type="single"
        size="sm"
        defaultValue="last-24-hours"
        className="*:data-[slot=toggle-group-item]:px-3"
      >
        <ToggleGroupItem
          value="last-24-hours"
          aria-label="Toggle last 24 hours"
        >
          Last 24 hours
        </ToggleGroupItem>
        <ToggleGroupItem value="last-7-days" aria-label="Toggle last 7 days">
          Last 7 days
// ... (80 more lines)

Domain

Subdomains

Functions

Dependencies

  • lucide-react
  • toggle-group

Imported By

Source

Frequently Asked Questions

What does toggle-group-demo.tsx do?
toggle-group-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, ContentSourcing subdomain.
What functions are defined in toggle-group-demo.tsx?
toggle-group-demo.tsx defines 1 function(s): ToggleGroupDemo.
What does toggle-group-demo.tsx depend on?
toggle-group-demo.tsx imports 2 module(s): lucide-react, toggle-group.
What files import toggle-group-demo.tsx?
toggle-group-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is toggle-group-demo.tsx in the architecture?
toggle-group-demo.tsx is located at apps/v4/app/(internal)/sink/components/toggle-group-demo.tsx (domain: DocumentationAtlas, subdomain: ContentSourcing, directory: apps/v4/app/(internal)/sink/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free