@classytic/fluid

Reusable UI component library built on shadcn/ui and Base UI for Next.js projects. Wraps your project's shadcn components (@/components/ui/*) with higher-level patterns.

Install

npm install @classytic/fluid

Entry Points

| Entry | Purpose | "use client" | Requires | |-------|---------|:-:|----------| | @classytic/fluid | RSC-compatible: utils, layout, display, states, skeletons (no "use client") | No | react | | @classytic/fluid/client/hooks | Hooks + storage utilities | Yes | react, next | | @classytic/fluid/client/core | Interactive components (dialogs, cards, pills, tabs, animations...) | Yes | react, next | | @classytic/fluid/client/table | DataTable + DataTableToolbar | Yes | @tanstack/react-table | | @classytic/fluid/client/theme | ModeToggle | Yes | next-themes | | @classytic/fluid/client/error | ErrorBoundary, AsyncBoundary | Yes | react-error-boundary | | @classytic/fluid/client/calendar | EventCalendar | Yes | date-fns | | @classytic/fluid/forms | Form components with react-hook-form integration | Yes | react-hook-form | | @classytic/fluid/dashboard | Dashboard layout, sidebar presets, headers, nav utils | Yes | next | | @classytic/fluid/compact | Compact form variants (floating labels) | Yes | react | | @classytic/fluid/search | Composable search system | Yes | react, next | | @classytic/fluid/command | Command palette, keyboard shortcuts | Yes | react | | @classytic/fluid/layouts | NavigationBar, DrawerWrapper, ContextMenu, HoverCard | Yes | react, next |

Note: All entries resolve @/components/ui/* from your project's shadcn setup at build time. The root entry omits "use client" so it can be imported in Server Components, but it still requires your shadcn components to be available for resolution.

Usage

// RSC-compatible — layout, display, states
import { Section, Container, EmptyState, LoadingState, cn } from "@classytic/fluid";

// Client sub-entries — import from specific sub-entry for tree-shaking
import { useIsMobile, useDebounce, useLocalStorage } from "@classytic/fluid/client/hooks";
import { DialogWrapper, CardWrapper, TabsWrapper } from "@classytic/fluid/client/core";
import { DataTable } from "@classytic/fluid/client/table";       // needs @tanstack/react-table
import { ModeToggle } from "@classytic/fluid/client/theme";       // needs next-themes
import { ErrorBoundary, AsyncBoundary } from "@classytic/fluid/client/error"; // needs react-error-boundary
import { EventCalendar } from "@classytic/fluid/client/calendar"; // needs date-fns

// Form components — react-hook-form integration
import {
  FormInput, FormTextarea, SelectInput, ComboboxInput,
  DateInput, TagInput, SlugField,
} from "@classytic/fluid/forms";

// Dashboard — layout, sidebar, headers
import {
  DashboardPageLayout, PageHeader, InsetSidebar,
  SidebarNav, ProjectSwitcher,
} from "@classytic/fluid/dashboard";

// Compact form variants (floating labels)
import { CompactInput, CompactSelect } from "@classytic/fluid/compact";

// Search system
import { Search, SearchProvider, useSearch } from "@classytic/fluid/search";

// Command palette + keyboard shortcuts
import { CommandSearch, useKeyboardShortcut } from "@classytic/fluid/command";

Components

@classytic/fluid (RSC-compatible)

| Category | Components | |----------|-----------| | Layout | Section, Container | | Display | DisplayHeading, SocialIcons (Facebook, Google, TwitterX, Instagram, WhatsApp) | | States | EmptyState, EmptyStateNoResults, EmptyStateNoData, EmptyStateNotFound | | Loading | LoadingState, LoadingOverlay | | Skeletons | SkeletonTable, SkeletonList, SkeletonCard, SkeletonGrid | | Utilities | cn, buildFilterParams, buildSearchParams, getApiParams |

@classytic/fluid/client/core

| Category | Components | |----------|-----------| | Dialogs/Sheets | DialogWrapper, FormDialog, SheetWrapper, FormSheet, ConfirmDialog, ConfirmSheet, DeleteConfirmDialog, InfoAlert | | Tables | TableWrapper, SimpleTable | | Layout | CardWrapper, DataCard, LoadingCard, StatsCard, DraggableCard, CollapsibleWrapper, CollapsibleCard, CollapsibleSection, ResponsiveSplitLayout, TabsWrapper, DynamicTabs, AccordionSection, FaqAccordion | | Display | Pill (+ Avatar, Button, Status, Indicator, Delta, Icon, AvatarGroup), InfoRow, CopyButton, CopyText, CopyCodeBlock, Thumbnail, DetailView, DetailItem | | Feedback | ErrorState, ErrorStateInline, StatusBanner, Stepper, Timeline | | Navigation | ApiPagination, CustomPagination, PaginationInfo | | Dropdowns | DropdownWrapper, ActionDropdown, SelectDropdown, CheckboxDropdown, RadioDropdown | | Animations | FadeIn, FadeInUp, SlideIn, ScaleIn, StaggerChildren, AnimatedText, AnimatedCounter | | Other | TooltipWrapper, ButtonTooltip, IconTooltip, InfoTooltip, ActionTooltip, PhoneInput, ClientSubmitButton, FeatureItem, FeatureList |

@classytic/fluid/client/table

DataTable, DataTableToolbar

@classytic/fluid/client/theme

ModeToggle

@classytic/fluid/client/error

ErrorBoundary, FeatureErrorBoundary, AsyncBoundary, FullPageErrorFallback, InlineErrorFallback

@classytic/fluid/client/calendar

EventCalendar, CalendarWithDetail, CalendarDayDetail

@classytic/fluid/forms

| Category | Components | |----------|-----------| | Text | FormInput, FormTextarea, PasswordInput, NumberInput | | Selection | SelectInput, ComboboxInput, MultiSelect, AsyncCombobox, AsyncMultiSelect | | Toggle | CheckboxInput, RadioInput, SwitchInput | | Date/Time | DateInput, DateRangeInput, DateTimeInput, DateRangeFilter | | Tags | TagInput, TagChoiceInput | | Special | SlugField, OTPInput, FileUploadInput, PhoneInput (in client/core) | | Layout | FormSection, FormGrid, FormFieldArray, FormFieldArrayItem | | Feedback | FormErrorSummary |

@classytic/fluid/layouts

DrawerWrapper, FormDrawer, ConfirmDrawer, NavigationBar, ContextMenuWrapper, HoverCardWrapper, UserHoverCard

@classytic/fluid/dashboard

DashboardPageLayout, PageHeader, HeaderSection, DashboardContent, DashboardHeader, InsetSidebar, DualSidebar, FloatingSidebar, MiniSidebar, TopbarRail, SidebarBrand, SidebarNav, SidebarUserMenu, ProjectSwitcher

@classytic/fluid/compact

CompactInput, CompactTextarea, CompactSelect, CompactNumberInput, CompactTagChoice, CompactSlugField

@classytic/fluid/command

CommandSearch (+ Input, List, Group, Item, Empty, Separator), useCommandSearch, useKeyboardShortcut

Hooks

| Hook | Entry | Description | |------|-------|-------------| | useIsMobile | client/hooks | Responsive breakpoint detection | | useMediaQuery | client/hooks | Generic media query hook | | useDebounce | client/hooks | Debounce a value | | useDebouncedCallback | client/hooks | Debounce a function callback | | useCopyToClipboard | client/hooks | Copy text with feedback state | | useBaseSearch | client/hooks | Full search state with URL sync | | useScrollDetection | client/hooks | Detect scroll position/direction | | useLocalStorage | client/hooks | Typed localStorage hook | | useKeyboardShortcut | client/hooks | Register keyboard shortcuts | | useInView | client/core | Intersection observer hook | | useCommandSearch | command | Programmatic command palette control | | useSearch | search | Search context consumer |

Styles

Import the stylesheet in your root layout. This includes both the Tailwind @source directive (so Tailwind scans fluid's dist for class names) and animation keyframes:

import "@classytic/fluid/styles.css";

Requirements

• React 19+ and Next.js 15+
• shadcn/ui components at @/components/ui/*
• Tailwind CSS configured in your project

Optional peer dependencies

| Package | Required by | |---------|------------| | next-themes | ModeToggle component | | react-hook-form | @classytic/fluid/forms entry | | react-error-boundary | ErrorBoundary, AsyncBoundary | | @tanstack/react-table | DataTable component | | date-fns | DateInput, DateRangeInput, EventCalendar |

Dev

npm run build      # Build with tsdown
npm run dev        # Watch mode
npm run typecheck  # Type check
npm run clean      # Remove dist

License

MIT — see LICENSE for details.