claritykit-svelte
Advanced tools
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
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 with 187+ components across 12 categories.
LATEST v1.8.2: Dual-Export System Restored, ValidatedInput Fixed, TipTap 3 Integration, Enhanced SSR Compatibility
npm install claritykit-svelte
pnpm add claritykit-svelte
yarn add claritykit-svelte
<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>
// app.html or +layout.svelte
import 'claritykit-svelte/styles/tokens.css';
import 'claritykit-svelte/styles/components.css';
<script>
// Tree-shakeable imports
import { Button } from 'claritykit-svelte';
import { Card } from 'claritykit-svelte';
import type { ButtonVariant } from 'claritykit-svelte';
</script>
<script>
// Import specific bundles for optimal performance
import { Button, Input, Card } from 'claritykit-svelte/essentials';
import { ChatThread, AgentCard } from 'claritykit-svelte/agent';
import { LineChart, BarChart } from 'claritykit-svelte/data-viz';
import { BlockEditor } from 'claritykit-svelte/knowledge';
</script>
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;
}
If you see "Unexpected token" errors when importing in SvelteKit, ensure you're using the correct import paths:
// ā
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';
For better TypeScript support, import types explicitly:
import type { ButtonVariant, InputSize } from 'claritykit-svelte';
import { Button, Input } from 'claritykit-svelte/essentials';
If you encounter validation errors, ensure rules are properly formatted:
<script>
import { ValidatedInput } from 'claritykit-svelte/form';
// ā
Correct - Array of validation functions
const rules = [
(value) => value.length > 0 || 'Required',
(value) => value.includes('@') || 'Must be valid email'
];
</script>
<ValidatedInput validationRules={rules} />
For server-side rendering, some components require client-side guards:
<script>
import { browser } from '$app/environment';
import { KnowledgeGraph } from 'claritykit-svelte/knowledge';
</script>
{#if browser}
<KnowledgeGraph {nodes} {edges} />
{/if}
187+ Components Across 12 Categories
ClarityKit provides a complete suite of PKM components designed for building modern knowledge management applications, note-taking tools, and collaborative platforms.
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)}
/>
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}
/>
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)}
/>
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)}
/>
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']}
/>
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)}
/>
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"
/>
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>
ClarityKit now includes specialized components for academic research and paper management workflows.
Format citations in multiple academic styles:
<script>
import { CitationFormatter } from 'claritykit-svelte';
const paper = {
title: "Machine Learning Applications in Healthcare",
authors: ["Smith, J.", "Doe, A."],
year: 2024,
journal: "Journal of AI Research",
volume: 15,
pages: "123-145"
};
</script>
<CitationFormatter
{paper}
style="apa"
editable={true}
onEdit={(updatedPaper) => console.log('Updated:', updatedPaper)}
/>
Display and edit research paper metadata:
<script>
import { PaperMetadataCard } from 'claritykit-svelte';
const metadata = {
title: "Research Paper Title",
authors: ["Author One", "Author Two"],
abstract: "Paper abstract here...",
keywords: ["AI", "machine learning", "research"],
doi: "10.1000/182"
};
</script>
<PaperMetadataCard
{metadata}
editable={true}
showValidation={true}
onSave={(updated) => console.log('Saved:', updated)}
/>
Discover and explore research papers:
<script>
import { ResearchDiscoveryPanel } from 'claritykit-svelte';
let searchQuery = "";
let filters = { year: "2024", field: "computer-science" };
</script>
<ResearchDiscoveryPanel
bind:searchQuery
bind:filters
enableAIRecommendations={true}
onPaperSelect={(paper) => console.log('Selected:', paper)}
/>
ClarityKit maintains the highest standards of quality through comprehensive automated testing and quality gates:
We welcome contributions! Please see our Contributing Guide for:
# 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
# Clone the repository
git clone https://github.com/warkrismagic/ClarityKit_svelte.git
cd ClarityKit_svelte
# Install dependencies
npm install
# Start Storybook
npm run storybook
npm run dev: Start development servernpm run build: Build the librarynpm run storybook: Start Storybooknpm run build-storybook: Build Storybooknpm run test: Run testsnpm run lint: Run lintingApache License 2.0
FAQs
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
The npm package claritykit-svelte receives a total of 281 weekly downloads. As such, claritykit-svelte popularity was classified as not popular.
We found that claritykit-svelte demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Ā It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.