ClarityKit Svelte

A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, and developer experience.

Features

• ADHD-Friendly Design: Components designed to reduce cognitive load, enhance focus, and support executive function
• Accessibility First: WCAG 2.1 AA compliant components with proper ARIA attributes and keyboard navigation
• Consistent API: Standardized prop patterns and naming conventions across all components
• Theming System: CSS variable-based theming with dark mode and high contrast support
• Comprehensive Documentation: Detailed documentation with examples and therapeutic purpose explanations

Installation

npm install claritykit-svelte

Usage

<script>
  import { Button } from 'claritykit-svelte';
</script>

<Button variant="primary" size="md">Click Me</Button>

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.
• Interactive: Gantt charts, Task management, etc.

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