# Toolbar (/layout/toolbar)





<ComponentPreview name="toolbar-preskok-demo" description="Toolbar with horizontal and vertical orientations." />

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger id="cli">
      CLI
    </TabsTrigger>

    <TabsTrigger id="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent id="cli">
    ```bash
    npx shadcn@latest add @preskok/toolbar
    ```
  </TabsContent>

  <TabsContent id="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.

        <ComponentSource name="toolbar" title="registry/preskok/ui/preskok-ui/toolbar.tsx" />
      </Step>

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import { Toolbar } from "@/components/ui/preskok-ui/toolbar"

export function ToolbarDemo() {
  return (
    <Toolbar aria-label="Toolbars">
      <ToolbarGroup aria-label="Text Formatting Options">
        <ToolbarItem defaultSelected aria-label="Bold" size="sq-sm">
          {({ isSelected }) => (
            <>{isSelected ? <BoltSolid /> : <BoltOutline />}</>
          )}
        </ToolbarItem>
        <ToolbarItem aria-label="Italic" size="sq-sm">
          {({ isSelected }) => (
            <>{isSelected ? <PencilSolid /> : <PencilOutline />}</>
          )}
        </ToolbarItem>
        <ToolbarItem aria-label="Underline" size="sq-sm">
          {({ isSelected }) => (
            <>
              {isSelected ? (
                <CursorArrowRaysSolid />
              ) : (
                <CursorArrowRaysOutline />
              )}
            </>
          )}
        </ToolbarItem>
        <ToolbarItem aria-label="Strikethrough" size="sq-sm">
          {({ isSelected }) => (
            <>{isSelected ? <NoSymbolSolid /> : <NoSymbolOutline />}</>
          )}
        </ToolbarItem>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarGroup aria-label="Alignment">
        <ToolbarItem aria-label="Align Left" size="sq-sm">
          {({ isSelected }) => (
            <>
              {isSelected ? <Bars3BottomLeftSolid /> : <Bars3BottomLeftIcon />}
            </>
          )}
        </ToolbarItem>
        <ToolbarItem size="sq-sm" aria-label="Align Center">
          {({ isSelected }) => (
            <>
              {isSelected ? (
                <AdjustmentsHorizontalSolid />
              ) : (
                <AdjustmentsHorizontalOutline />
              )}
            </>
          )}
        </ToolbarItem>
        <ToolbarItem size="sq-sm" aria-label="Align Right">
          {({ isSelected }) => (
            <>
              {isSelected ? (
                <Bars3BottomRightSolid />
              ) : (
                <Bars3BottomRightIcon />
              )}
            </>
          )}
        </ToolbarItem>
        <ToolbarItem size="sq-sm" aria-label="Align Justify">
          {({ isSelected }) => (
            <>{isSelected ? <Bars3Solid /> : <Bars3Icon />}</>
          )}
        </ToolbarItem>
      </ToolbarGroup>
      <ToolbarSeparator />
      <Checkbox>Spell Check</Checkbox>
      <ToolbarGroup className="ml-auto">
        <Menu>
          <Button aria-label="Other options" size="sm" intent="outline">
            Options...
            <ChevronDownIcon />
          </Button>
          <MenuContent placement="bottom right">
            <MenuItem>
              <ArrowUturnLeftIcon />
              Undo
            </MenuItem>
            <MenuItem>
              <ArrowUturnRightIcon />
              Redo
            </MenuItem>
            <MenuItem>
              <LinkIcon />
              Insert Link
            </MenuItem>
            <MenuItem>
              <PhotoIcon />
              Insert Image
            </MenuItem>
            <MenuItem>
              <Squares2X2Icon />
              Insert Grid
            </MenuItem>
          </MenuContent>
        </Menu>
      </ToolbarGroup>
    </Toolbar>
  )
}
```
