ClarityKit - Svelte Component Library

A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, and exceptional developer experience. Built with Svelte 5 and TypeScript, ClarityKit provides a complete toolkit for building modern, inclusive web applications.

✨ Features

• 🎯 ADHD-Optimized Design: Components designed with cognitive load reduction in mind
• ♿ Accessibility First: WCAG 2.1 AA compliant with comprehensive screen reader support
• 🏗️ SSR Ready: Full server-side rendering compatibility with SvelteKit
• 🎨 Themeable: Built-in light/dark mode with customizable design tokens
• 📱 Responsive: Mobile-first design with flexible layouts
• 🔧 TypeScript: Fully typed API with excellent IntelliSense support
• 🌳 Tree Shakeable: Import only what you need for optimal bundle size
• 📖 Well Documented: Comprehensive Storybook documentation with examples

📦 Installation

npm install claritykit-svelte

pnpm add claritykit-svelte

yarn add claritykit-svelte

🚀 Quick Start

Basic Usage

<script>
  import { Button, Card, Alert } from 'claritykit-svelte';
  import 'claritykit-svelte/styles/tokens.css';
  import 'claritykit-svelte/styles/components.css';
</script>

<Card>
  <h2>Welcome to ClarityKit</h2>
  <p>A beautiful, accessible component library for Svelte.</p>
  <Button variant="primary" onclick={() => alert('Hello!')}>
    Get Started
  </Button>
</Card>

With SvelteKit

// app.html or +layout.svelte
import 'claritykit-svelte/styles/tokens.css';
import 'claritykit-svelte/styles/components.css';

Individual Component Imports

<script>
  // Tree-shakeable imports
  import { Button } from 'claritykit-svelte';
  import { Card } from 'claritykit-svelte';
  import type { ButtonVariant } from 'claritykit-svelte';
</script>

🎨 Styling

ClarityKit uses CSS custom properties for theming. Import the base styles and customize as needed:

/* 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;
}

Component Categories

• Primitives: Button, Input, Checkbox, Radio, Switch, etc.
• Layout: Container, Grid, Card, Modal, Sidebar, etc.
• Feedback: Alert, Toast, StatusIndicator, LoadingSpinner, etc.
• Data Visualization: Charts (Line, Bar, Area, Pie), Progress indicators, KPI cards, etc.
• Form: Enhanced Select with search/multi-select/async loading, FormField, Textarea, DatePicker, etc.
• Agent: AgentCard, PlanCard, ChatThread, AgentLogView, etc.
• Knowledge Management: BlockEditor, CollaborativeBlockEditor, KnowledgeGraph, SemanticTagger, etc.
• Interactive: Gantt charts, Task management, 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.

Core PKM Components

BlockEditor

A rich TipTap-based block editor with AI assistance capabilities:

<script>
  import { BlockEditor } from 'claritykit-svelte';
  
  let content = '<p>Start typing...</p>';
</script>

<BlockEditor 
  bind:content
  placeholder="What's on your mind?"
  enableAI={true}
  onSave={(html) => console.log('Saved:', html)}
/>

CollaborativeBlockEditor

Real-time collaborative editing powered by Hocuspocus and Yjs:

<script>
  import { CollaborativeBlockEditor, HocuspocusCollaborationProvider } from 'claritykit-svelte';
  
  const provider = new HocuspocusCollaborationProvider({
    url: 'wss://your-collab-server.com',
    name: 'document-123'
  });
</script>

<CollaborativeBlockEditor 
  {provider}
  userName="John Doe"
  userColor="#3b82f6"
  enablePresenceIndicators={true}
/>

KnowledgeGraph

Interactive knowledge graphs using Cytoscape.js:

<script>
  import { KnowledgeGraph } from 'claritykit-svelte';
  
  const nodes = [
    { id: 'concept1', label: 'Machine Learning', category: 'technology' },
    { id: 'concept2', label: 'Neural Networks', category: 'technology' },
    { id: 'concept3', label: 'Deep Learning', category: 'technology' }
  ];
  
  const edges = [
    { source: 'concept1', target: 'concept2', relationship: 'includes' },
    { source: 'concept2', target: 'concept3', relationship: 'enables' }
  ];
</script>

<KnowledgeGraph 
  {nodes}
  {edges}
  layout="cose"
  enablePhysics={true}
  onNodeClick={(node) => console.log('Clicked:', node)}
/>

SemanticTagger

AI-powered semantic tagging and concept extraction:

<script>
  import { SemanticTagger } from 'claritykit-svelte';
  
  let selectedTags = [];
  
  const concepts = [
    { id: 1, term: 'machine learning', definition: 'AI technique for pattern recognition' },
    { id: 2, term: 'neural network', definition: 'Computing system inspired by biological neural networks' }
  ];
</script>

<SemanticTagger
  {concepts}
  bind:selectedTags
  enableAIExtraction={true}
  onTagCreate={(tag) => console.log('New tag:', tag)}
/>

MaterialViewTable

Advanced table component with filtering, sorting, and views:

<script>
  import { MaterialViewTable } from 'claritykit-svelte';
  
  const data = [
    { id: 1, title: 'Research Paper', type: 'document', tags: ['AI', 'ML'] },
    { id: 2, title: 'Meeting Notes', type: 'note', tags: ['meeting', 'planning'] }
  ];
  
  const columns = [
    { key: 'title', label: 'Title', sortable: true },
    { key: 'type', label: 'Type', filterable: true },
    { key: 'tags', label: 'Tags', render: 'tags' }
  ];
</script>

<MaterialViewTable 
  {data}
  {columns}
  searchable={true}
  exportable={true}
  viewModes={['table', 'card', 'list']}
/>

DatabaseView

Notion-style database views with multiple display modes:

<script>
  import { DatabaseView } from 'claritykit-svelte';
  
  const data = [
    { id: 1, name: 'Project Alpha', status: 'active', priority: 'high' },
    { id: 2, name: 'Project Beta', status: 'planning', priority: 'medium' }
  ];
</script>

<DatabaseView
  {data}
  view="kanban"
  groupBy="status"
  enableInlineEditing={true}
  onUpdate={(item) => console.log('Updated:', item)}
/>

RichTextToolbar

Customizable toolbar for rich text editing:

<script>
  import { RichTextToolbar } from 'claritykit-svelte';
  
  let editor; // TipTap editor instance
</script>

<RichTextToolbar
  {editor}
  tools={['bold', 'italic', 'link', 'image', 'code', 'list']}
  variant="floating"
/>

PKM Features

• 🔄 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)

Getting Started with PKM

npm install claritykit-svelte

<script>
  import { 
    BlockEditor,
    KnowledgeGraph,
    SemanticTagger,
    MaterialViewTable 
  } from 'claritykit-svelte';
  import 'claritykit-svelte/styles/tokens.css';
  import 'claritykit-svelte/styles/components.css';
  
  let notes = [];
  let tags = [];
</script>

<!-- Your PKM Application -->
<main class="pkm-app">
  <BlockEditor placeholder="Capture your thoughts..." />
  <KnowledgeGraph nodes={notes} />
  <MaterialViewTable data={notes} />
</main>

Documentation

For detailed documentation, visit the Storybook.

Development

Setup

# Clone the repository
git clone https://github.com/warkrismagic/ClarityKit_svelte.git
cd ClarityKit_svelte

# Install dependencies
npm install

# Start Storybook
npm run storybook

Scripts

• 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

License

Apache License 2.0