[TASK] Add IDE-style Code Viewer for Clippkit Components

[sambowenhughes]

Objective

Improve the way Clippkit displays component examples by introducing a code editor–style view, similar to the shadcn/ui docs.

This new view should replace the current layout, where the component source is shown under “Manual” and usage is shown separately in a main.tsx composition file. The current approach makes it harder for users to understand how everything fits together.

---

Example

This is an example component from Shadcn UI Blocks

Background

• At the moment, Clippkit shows:

  • A raw component source file under a “Manual” section
  • A separate usage example inside a main.tsx composition

• These files are disconnected and don’t clearly reflect how the component is structured or used in a real project

• The shadcn/ui site presents this much more effectively by:

  • Showing a file tree in a sidebar (e.g. /components, /app, etc.)
  • Rendering file contents in a tabbed or IDE-style view

We want to adopt a similar approach so users can immediately see how a Clippkit component works and how it would be installed into their own project.

---

Implementation Steps

1. Create an IdeView component (or similar)

• This new component should be added to the Clippkit repo

• It should render a sidebar file tree (like an IDE)

• On file click, it should show the corresponding file content

• It should support:

  • Syntax highlighting
  • Folder nesting
  • Tabs or file switching (if needed)

2. Define expected props

The IdeView component should take in:

• A list of files (and optional folders), each with:

  • name: the filename (e.g. component.tsx)
  • content: the file’s source code
  • path: (optional) relative file path to show nesting (e.g. components/card-flip/component.tsx)

3. Populate view using existing Clippkit examples

• Show how a component is used in context:

  • component.tsx
  • style.ts (if present)
  • main.tsx composition file

• Optionally include other files like tailwind.config.ts or app/page.tsx to mimic real usage

4. Follow the shadcn/ui structure

• Match the general structure and style used in shadcn/ui:

  • File list on the left
  • Code view on the right
  • Optional tabs or overlays for switching

• Do not overcomplicate — just copy the working pattern

5. Confirm component scope

• Clarify if this is:

  • A Fumadocs-specific component
  • A shared Clippkit UI component
  • Or both (can be abstracted to Clippkit UI and used inside Fumadocs)

---

Deliverables

• A reusable IdeView component exists in the Clippkit repo

• It accepts a list of files/folders and renders them in an editor-style layout

• One or more Clippkit components (e.g. card-flip) use the IdeView for their docs

• It clearly displays:

  • The source component
  • The usage (main.tsx)
  • Any supporting files

• The structure mimics real usage in a project and helps devs understand how to install and use each component

• (Optional) Add documentation or examples on how to add new files to the view for future components