A comprehensive Svelte 5 component library with 187+ components focused on accessibility, ADHD-optimized design, and full SSR compatibility. Features specialized bundles for agent/AI interfaces, knowledge management, therapeutic tools, and advanced data v
npm install claritykit-sveltebash
npm install claritykit-svelte
`
`bash
pnpm add claritykit-svelte
`
`bash
yarn add claritykit-svelte
`
🚀 Quick Start
$3
`svelte
Welcome to ClarityKit
A beautiful, accessible component library for Svelte.
`
$3
`javascript
// app.html or +layout.svelte
import 'claritykit-svelte/styles/tokens.css';
import 'claritykit-svelte/styles/components.css';
`
$3
`svelte
`
$3
`svelte
`
🎨 Styling
ClarityKit uses CSS custom properties for theming. Import the base styles and customize as needed:
`css
/ Import base styles /
@import 'claritykit-svelte/styles/tokens.css';
@import 'claritykit-svelte/styles/components.css';
/ Customize theme /
:root {
--ck-color-primary: #3b82f6;
--ck-color-secondary: #6366f1;
--ck-border-radius: 8px;
}
`
🔧 Troubleshooting
$3
#### SvelteKit Import Errors
If you see "Unexpected token" errors when importing in SvelteKit, ensure you're using the correct import paths:
`javascript
// ✅ Correct - Use specialized bundles
import { Button } from 'claritykit-svelte/essentials';
import { ChatThread } from 'claritykit-svelte/agent';
// ❌ Avoid - May cause import issues
import { Button, ChatThread } from 'claritykit-svelte';
`
#### TypeScript Errors
For better TypeScript support, import types explicitly:
`typescript
import type { ButtonVariant, InputSize } from 'claritykit-svelte';
import { Button, Input } from 'claritykit-svelte/essentials';
`
#### ValidatedInput Issues
If you encounter validation errors, ensure rules are properly formatted:
`svelte
`
#### SSR Compatibility
For server-side rendering, some components require client-side guards:
`svelte
{#if browser}
{/if}
`
$3
- Chrome: 90+ ✅
- Firefox: 88+ ✅
- Safari: 14+ ✅
- Edge: 90+ ✅
Component Categories
187+ Components Across 12 Categories
- Primitives: Button, Input, Checkbox, Radio, Switch, Avatar, Loader, StatusDot, etc.
- Layout: Container, Grid, Card, Modal, Sidebar, Popover, GalleryView, ListView, etc.
- Feedback: Alert, Toast, StatusIndicator, LoadingSpinner, Progress indicators, etc.
- Data Visualization: Charts (Line, Bar, Area, Pie, Scatter, Network), KPI cards, Metrics, Dashboard widgets, etc.
- Form: Enhanced Select with search/multi-select/async loading, FormField, Textarea, DatePicker, validation, etc.
- Navigation: Tabs, Badge, CommandPalette, WorkspaceSelector, Breadcrumbs, etc.
- Agent & AI: AgentCard, PlanCard, ChatThread, AgentLogView, AISettings, CollaborativeWorkspace, etc.
- Knowledge Management: BlockEditor, CollaborativeBlockEditor, KnowledgeGraph, SemanticTagger, etc.
- Research: NEW CitationFormatter, PaperMetadataCard, ResearchDiscoveryPanel, PaperIngestionProgress, etc.
- BMS: Business Management System components for workflow automation and integration
- Therapeutic: ADHD-specific components like CrisisModeToggle, MoodTracker, EnergyLevelIndicator, etc.
- Interactive: Gantt charts, Task management, Kanban boards, etc.
🧠 Personal Knowledge Management (PKM)
ClarityKit provides a complete suite of PKM components designed for building modern knowledge management applications, note-taking tools, and collaborative platforms.
$3
#### BlockEditor
A rich TipTap-based block editor with AI assistance capabilities:
`svelte
placeholder="What's on your mind?"
enableAI={true}
onSave={(html) => console.log('Saved:', html)}
/>
`
#### CollaborativeBlockEditor
Real-time collaborative editing powered by Hocuspocus and Yjs:
`svelte
userName="John Doe"
userColor="#3b82f6"
enablePresenceIndicators={true}
/>
`
#### KnowledgeGraph
Interactive knowledge graphs using Cytoscape.js:
`svelte
{edges}
layout="cose"
enablePhysics={true}
onNodeClick={(node) => console.log('Clicked:', node)}
/>
`
#### SemanticTagger
AI-powered semantic tagging and concept extraction:
`svelte
bind:selectedTags
enableAIExtraction={true}
onTagCreate={(tag) => console.log('New tag:', tag)}
/>
`
#### MaterialViewTable
Advanced table component with filtering, sorting, and views:
`svelte
{columns}
searchable={true}
exportable={true}
viewModes={['table', 'card', 'list']}
/>
`
#### DatabaseView
Notion-style database views with multiple display modes:
`svelte
view="kanban"
groupBy="status"
enableInlineEditing={true}
onUpdate={(item) => console.log('Updated:', item)}
/>
`
#### RichTextToolbar
Customizable toolbar for rich text editing:
`svelte
tools={['bold', 'italic', 'link', 'image', 'code', 'list']}
variant="floating"
/>
`
$3
- 🔄 Real-time Collaboration: Multi-user editing with presence indicators
- 🤖 AI Integration: Smart suggestions, auto-tagging, and content enhancement
- 🔗 Bidirectional Linking: Create and navigate knowledge connections
- 📊 Multiple Views: Table, kanban, graph, timeline, and calendar views
- 🏷️ Semantic Tagging: AI-powered concept extraction and organization
- 📱 Responsive Design: Optimized for desktop and mobile PKM workflows
- 🔍 Advanced Search: Full-text search with semantic understanding
- 📤 Export Capabilities: Multiple format support (Markdown, JSON, CSV)
$3
`bash
npm install claritykit-svelte
`
`svelte
`
🔬 Research Components (NEW in v1.6.0)
ClarityKit now includes specialized components for academic research and paper management workflows.
$3
Format citations in multiple academic styles:
`svelte
style="apa"
editable={true}
onEdit={(updatedPaper) => console.log('Updated:', updatedPaper)}
/>
`
$3
Display and edit research paper metadata:
`svelte
editable={true}
showValidation={true}
onSave={(updated) => console.log('Saved:', updated)}
/>
`
$3
Discover and explore research papers:
`svelte
bind:filters
enableAIRecommendations={true}
onPaperSelect={(paper) => console.log('Selected:', paper)}
/>
`
$3
- 📄 Citation Management: Support for APA, MLA, Chicago, and IEEE citation styles
- 🔍 Paper Discovery: AI-powered research paper recommendations
- 📊 Metadata Validation: Ensure citation completeness and accuracy
- 🏷️ Keyword Extraction: Automatic keyword and topic identification
- 📈 Progress Tracking: Monitor research paper processing and analysis
- 🔗 DOI Integration: Automatic metadata fetching from DOI lookups
🛡️ Quality Assurance
ClarityKit maintains the highest standards of quality through comprehensive automated testing and quality gates:
$3
- Multi-Node Testing: Automated testing across Node.js 18, 20, and 22
- Accessibility Testing: Automated WCAG 2.1 AA compliance verification
- Cross-Browser Testing: Chromium, Firefox, Safari, and Edge support
- Visual Regression Testing: Chromatic integration for visual consistency
- Security Auditing: Automated vulnerability scanning and dependency updates
$3
- Test Coverage: Minimum 85% code coverage requirement
- Type Safety: Full TypeScript coverage with strict mode
- Accessibility Compliance: Automated axe-core testing
- Component Testing: Individual component and utility testing
- Build Verification: Package integrity and SSR compatibility checks
$3
- Automated Releases: Semantic versioning with Changesets
- Dependency Updates: Automated security updates via Dependabot
- Code Quality: ESLint, Prettier, and Stylelint enforcement
- Performance Monitoring: Bundle size analysis and optimization
📖 Documentation
$3
- Storybook Documentation - Interactive component examples and API documentation
- Contributing Guide - Comprehensive guide for contributors
- Accessibility Guidelines - WCAG compliance and accessibility patterns
- ADHD Design Principles - Cognitive load optimization strategies
$3
- Component API Reference - Complete API documentation
- SSR Integration Guide - Server-side rendering setup
- Migration Guides - Version upgrade instructions
- Design System - Design tokens and styling guidelines
🤝 Contributing
We welcome contributions! Please see our Contributing Guide for:
- Development setup and workflow
- Component development guidelines
- Testing requirements
- Accessibility standards
- ADHD optimization principles
- Pull request process
$3
`bash
Fork and clone the repository
git clone https://github.com/your-username/ClarityKit_svelte.git
cd ClarityKit_svelte
Install dependencies
npm ci
Start development environment
npm run storybook
Run tests
npm test
`
Development
$3
`bash
Clone the repository
git clone https://github.com/warkrismagic/ClarityKit_svelte.git
cd ClarityKit_svelte
Install dependencies
npm install
Start Storybook
npm run storybook
`
$3
- npm run dev: Start development server
- npm run build: Build the library
- npm run storybook: Start Storybook
- npm run build-storybook: Build Storybook
- npm run test: Run tests
- npm run lint`: Run linting