Karigiri Kit
ComponentsTokensPlaygroundStorybook

Tree

A hierarchical tree view for file systems, org charts, or any nested structure. Keyboard navigable — arrows to move, Right/Left to expand/collapse. Supports controlled selection, defaultExpanded, custom icons, disabled nodes, and configurable indent per level.

File tree

Click a node to select, click a folder to expand/collapse. Arrow keys navigate — Right expands, Left collapses, Up/Down move between visible nodes.

  • src
    • components
      • Button.tsx
      • Input.tsx
      • Card.tsx
    • App.tsx
    • main.tsx
  • package.json
  • tsconfig.json

Org chart

Any hierarchical data works — not just files.

  • CEO
    • CTO
      • Engineering Lead
      • Senior Engineer
      • Frontend Engineer
    • CMO
      • Design Lead
      • Marketing Manager
    • CFO

Custom icons + disabled nodes

Pass any ReactNode as icon. Set disabled to prevent selection.

  • Production
  • Staging
  • Development
    • feature/auth
    • feature/payments
    • fix/typo

Custom indent

Default indent is 16px per level. Set indent to adjust.

indent=8
  • src
    • components
      • Button.tsx
      • Input.tsx
      • Card.tsx
    • App.tsx
    • main.tsx
  • package.json
  • tsconfig.json
indent=24
  • src
    • components
      • Button.tsx
      • Input.tsx
      • Card.tsx
    • App.tsx
    • main.tsx
  • package.json
  • tsconfig.json