@classytic/clarity

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