Karan Design System

Knowledge is growth - 型安全で再利用可能なコンポーネントライブラリ

Overview

Karan Design Systemは、TypeScriptとVanilla Extractを使用した型安全なデザインシステムです。Astro + Starlightで構築されており、高パフォーマンスと優れた開発者体験を提供します。

Quick Links

• Getting Started - デザインシステムの使用方法
• Colors - カラーパレットとデザイントークン
• Typography - タイポグラフィシステム
• Button - ボタンコンポーネント
• Card - カードコンポーネント
• Chart - チャートコンポーネント
• Chip - チップコンポーネント
• DataGridCard - データグリッドカードコンポーネント
• Header - ヘッダーコンポーネント
• Footer - フッターコンポーネント
• Hero - ヒーローセクションコンポーネント
• Input - 入力フィールドコンポーネント
• Modal - モーダルコンポーネント
• NumberInput - 数値入力コンポーネント
• ProgressBar - プログレスバーコンポーネント
• SearchBar - 検索バーコンポーネント
• SkillBadge - スキルバッジコンポーネント
• StatsCard - 統計カードコンポーネント
• TabPanel - タブパネルコンポーネント
• Tag - タグコンポーネント
• TableOfContents - 目次コンポーネント
• Timeline - タイムラインコンポーネント
• TimelineItem - タイムラインアイテムコンポーネント

Features

• 型安全性: TypeScriptとVanilla Extractによる型安全なスタイリング
• 高パフォーマンス: Astroによる静的サイト生成
• アクセシビリティ: WCAG 2.1 AA基準準拠
• 開発者体験: 直感的なAPIと充実したドキュメント

Installation

npm install @karan-monorepo/design-system

Usage

import { Button } from '@karan-monorepo/design-system';

function App() {
  return <Button variant="primary">Hello World</Button>;
}