@classytic/fluid

@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.