klun-ui
v0.1.23
Published
Klun UI — a themeable React + TypeScript component library and design system (light/dark, 6 accent themes, global radius axis).
Maintainers
stcn52Readme
klun-ui
A themeable React + TypeScript component library and design system — 84 components, light/dark modes, and five accent themes, all driven by a deep --klun-* CSS design-token layer.
- Standard architecture — every component is a thin
forwardRefwrapper that maps props to CSS classes (classNameandstylepass through,displayNameset). Styling lives in one stylesheet driven by design tokens, so real:hover/:focus-visible/:disabledstates work and consumers can override with their own CSS. - Dual ESM + CJS with bundled type declarations.
- No styling runtime — import one stylesheet once; the JS is fully tree-shakeable.
Install
pnpm add klun-ui react react-dom
# npm i klun-ui react react-dom / yarn add klun-ui react react-domreact and react-dom (>=18) are peer dependencies.
Quick start
Import the stylesheet once at your app root, then use components:
import "klun-ui/styles.css";
import { Button, Card, Badge, Input } from "klun-ui";
export function Example() {
return (
<Card variant="shadow">
<Badge color="green">Active</Badge>
<Input placeholder="Email" />
<Button variant="primary" appearance="filled" size="medium">
Save changes
</Button>
</Card>
);
}Icons
Components accept icons as React nodes. The design system uses Remix Icon:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" /><Button leadingIcon={<i className="ri-add-line" />}>Add item</Button>Theming
data-theme (light/dark) and data-mode (accent + neutral ramp) compose on any ancestor — usually <html>. Components reference only semantic tokens, so they re-theme automatically.
<html data-theme="dark"> <!-- dark mode -->
<html data-mode="purple"> <!-- purple accent (also: orange, green) -->
<html data-mode="slate"> <!-- cooler neutral ramp -->
<html data-theme="dark" data-mode="green"><!-- compose both -->You can also override tokens directly:
:root { --klun-primary-base: #7d52f4; }Components
| Group | Components | |---|---| | Buttons | Button, IconButton, CompactButton, LinkButton, ButtonGroup, FancyButton | | Forms | Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Label, Hint, DigitInput, FileUpload, ImageUpload, ColorPicker, ColorDot, ColorSlider, DatePicker, DateRangePicker, TimePicker, RichEditorToolbar, CharacterCounter, CheckboxCard, CompactSelect, CompactSelectForInput, InlineInput, InlineSelect, SelectMenu, CounterInput, PasswordStrength | | Data display | Avatar, AvatarGroup, CompactAvatarGroup, Badge, Chip, Tag, ContentLabel, Tooltip, Table, Rating, Kbd, KeyIcon, PaymentIcon, StatCard, FileFormatIcon, ChatBubble, ChartLegend, ChartTooltip, IntegrationSwitch, PeriodRange | | Feedback | Alert, Banner, InlineTip, Toast, NotificationItem, ProgressBar, GaugeBar, CircularProgress, SegmentedProgress, Spinner, Skeleton, EmptyState | | Navigation | Tabs, SegmentedControl, Breadcrumb, Pagination, StepIndicator, Divider, ContentDivider, HorizontalFilter, PageHeader | | Overlays | Modal, Drawer, Dropdown, Popover, CommandMenu | | Disclosure | Accordion, Collapse | | Layout | Card, ContentCard, FeatureCard |
All components and their prop types are named exports; a cx classnames helper is exported too.
Templates
Full-screen example compositions are available from the klun-ui/templates subpath — copy-and-go starting points built entirely from klun-ui components:
import "klun-ui/styles.css";
import { DashboardTemplate, AIAssistantTemplate, AgentChatTemplate, CryptoTemplate, MarketingTemplate } from "klun-ui/templates";
export default function App() {
return <DashboardTemplate />;
}TypeScript
Types ship with the package. Every component exports its *Props interface:
import type { ButtonProps, BadgeColor } from "klun-ui";License
MIT