@classytic/clarity

Reusable UI components built on shadcn/ui for Next.js projects.

Install

npm install @classytic/clarity

Usage

import { DialogWrapper, FormInput, DataTable } from "@classytic/clarity";
import { PageHeader, InsetSidebar } from "@classytic/clarity/dashboard";

Components

| Category | Components | |----------|-----------| | Dialogs/Sheets | DialogWrapper, FormDialog, SheetWrapper, FormSheet, ConfirmDialog | | Forms | FormInput, FormTextarea, SelectInput, CheckboxInput, RadioInput, SwitchInput, DateInput, TagInput, ComboboxInput, SlugField, FormErrorSummary, DateRangeFilter | | Tables | DataTable, TableWrapper, SimpleTable | | Layout | CardWrapper, CollapsibleWrapper, ResponsiveSplitLayout, TabsWrapper | | Display | Pill, InfoRow, CopyButton, Thumbnail, DisplayHeading | | Navigation | ApiPagination, CustomPagination | | Dashboard | PageHeader, HeaderSection, InsetSidebar, DualSidebar, ProjectSwitcher, SidebarNav, SidebarUserMenu | | Other | ModeToggle, TooltipWrapper, DropdownWrapper, AccordionWrapper |

Exports

// Main components
import { ... } from "@classytic/clarity";

// Dashboard components (sidebar, header)
import { ... } from "@classytic/clarity/dashboard";

// Layout utilities
import { ... } from "@classytic/clarity/layout";

Requirements

• Next.js 14+ with @/ path alias
• shadcn/ui components at @/components/ui/*
• Tailwind CSS v4 (or v3 with proper content config)

Next.js Configuration

Add @classytic/clarity to transpilePackages in your next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@classytic/clarity"],
};

export default nextConfig;

Tailwind CSS Configuration

Import the clarity styles in your global CSS file to ensure all component classes are included in production builds:

Tailwind v4 (in app/globals.css):

@import "tailwindcss";
@import "@classytic/clarity/styles.css";

Tailwind v3 (in tailwind.config.js):

module.exports = {
  content: [
    // ... your paths
    "./node_modules/@classytic/clarity/dist/**/*.js",
  ],
};

Dev

npm run build   # Build package
npm run dev     # Watch mode

License

UNLICENSED

Copyright © 2026 Classytic. All rights reserved.

This software is the confidential and proprietary information of Classytic. Unauthorized copying of this software, via any medium is strictly prohibited.