For demo purpose only

This component is for demo purposes only. It is not a finished layout component yet and should not be used in production.

It is meant to serve as a starting point for building out a more complete layout solution in the future.

Demo

Dashboard

Welcome back, Jane. Here is an overview of your project.

Components

Versions

Installations

847

Installation

npx shadcn add @rdc-ui/two-column

Usage

import { Layout } from "@/components/TwoColumn"

export function AppShell() {
  return (
    <Layout>
      <Layout.Sidebar>
        <Layout.Logo>
          <img src="/logo.svg" alt="Logo" />
        </Layout.Logo>
        <Layout.Nav>
          <a href="/dashboard">Dashboard</a>
          <a href="/settings">Settings</a>
        </Layout.Nav>
        <Layout.Profile>
          <span>Jane Johnson</span>
        </Layout.Profile>
      </Layout.Sidebar>
      <Layout.Content>
        <h1>Page content</h1>
      </Layout.Content>
    </Layout>
  )
}

This is a MANUAL step. Usually, you would let the LLM decide what colors to apply by analyzing the design and component context.

LLM Example Prompt

To have an LLM set up the Two Column Layout for you, simply instruct it:

"Use the RDC UI two column layout for this page. Add a title 'My App' and 3 nav buttons in the sidebar. The nav buttons are labeled Dashboard, Projects and Settings. For the content, add a title 'Dashboard' with a subtext welcoming the user. Then add 3 card elements for Components, Versions and Installations and display the corresponding number."

The LLM will install the component from the registry and configure it according to your instructions.

Sub-components

The Two Column Layout uses the compound component pattern. All sub-components must be nested within <Layout>.

Component	Description
`Layout`	Root container — renders a CSS grid with sidebar and content columns
`Layout.Sidebar`	Fixed sidebar with right border
`Layout.Logo`	Top section of the sidebar for branding
`Layout.Nav`	Navigation section with vertical stacking
`Layout.Profile`	Bottom section of the sidebar for user info
`Layout.Content`	Main content area, scrollable

Layout.Content

Prop	Type	Default	Description
`children`	`ReactNode`	—	Page content
`className`	`string`	—	Additional CSS classes on the main element

Customization

The layout uses CSS Grid with grid-cols-[auto_1fr]. Override column widths with Tailwind, prefined values or using arbitrary values like this:

<Layout className="grid-cols-[280px_1fr]">
  {/* ... */}
</Layout>