Tailgrids Documentation

The Sidebar system uses a provider-consumer pattern to manage state like collapsible modes, mobile viewports, and keyboard shortcuts (CMD + B / CTRL + B).

Core Architecture

• SidebarProvider: The root component that must wrap your application navigation. It manages the collapsible state and persistence.
• Sidebar: The physical container that reacts to the provider's state to expand, collapse, or shrink into an icon-only view.
• SidebarTrigger: A component used to toggle the sidebar's visibility or collapse state.

Typical Layout Pattern

Wrap your application shell in a SidebarProvider, place your Sidebar instance inside, and use a <main> container for the page content.

import {
  SidebarProvider,
  SidebarTrigger
} from "@/components/tailgrids/core/sidebar";
import { AppSidebar } from "./app-sidebar";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      {/* Renders your customized <Sidebar> component instance */}
      <AppSidebar />
      <main className="w-full flex-1">
        {/* Opens/Closes the sidebar on click */}
        <SidebarTrigger />
        {children}
      </main>
    </SidebarProvider>
  );
}

The Tabs component is composed of four main parts that must be nested within a TabRoot to function:

1. TabRoot: The main container that manages the state of the active tab.
2. TabList: A container for the navigation triggers.
3. TabTrigger: The clickable buttons used to switch between views. Each trigger must have a unique value.
4. TabContent: The panels containing the content. Each panel must have a value that matches a TabTrigger's value.

Only the TabContent panel whose value matches the current active tab in TabRoot will be visible.

import {
  TabRoot,
  TabList,
  TabTrigger,
  TabContent
} from "@/components/tailgrids/core/tabs";

const TabsExample = () => (
  <TabRoot defaultValue="tab1">
    <TabList>
      <TabTrigger value="tab1" />
      <TabTrigger value="tab2" />
    </TabList>
    <TabContent value="tab1" />
    <TabContent value="tab2" />
  </TabRoot>
);

The Drawer component follows a composable pattern. It uses a root Drawer component to manage state, a DrawerTrigger to initiate opening, and DrawerContent to define the panel's layout and behavior.

Inside DrawerContent, you can compose several sub-components to build the UI:

• DrawerHeader, DrawerTitle, and DrawerDescription for the top section.
• DrawerBody for the main scrollable content.
• DrawerFooter and DrawerClose for the bottom action area.

This structure allows for flexible layouts while maintaining built-in support for drag gestures, animations, and accessibility.

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerBody,
  DrawerFooter,
  DrawerClose
} from "@/components/tailgrids/core/drawer";

export default function DrawerAnatomy() {
  return (
    <Drawer>
      <DrawerTrigger />
      <DrawerContent side="bottom">
        <DrawerHeader>
          <DrawerTitle />
          <DrawerDescription />
        </DrawerHeader>
        <DrawerBody />
        <DrawerFooter>
          <DrawerClose />
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}