Klarden UI is an ecosystem of high-quality React components designed with fluid motion and tactile precision. Built for modern design engineers, it prioritizes physics-based animations over traditional duration-fixed easings.
Core Principles
- Tactile Feedback: Every interaction should feel physical. We use spring physics to mimic real-world inertia and momentum.
- Low-Level Primitives: Components are designed to be composable. We provide the building blocks, you orchestrate the experience.
- Type-First Design: Full TypeScript support ensures that your IDE becomes your best documentation.
- Copy & Paste: No complex npm packages. Use the registry CLI to add only what you need to your project.
How it works
Klarden UI follows the standard "Registry Pattern" popularized by Shadcn UI. Instead of installing a massive library, you "add" individual components directly into your source code.
1. Requirements
Ensure you have the following dependencies installed in your project:
pnpm add framer-motion lucide-react clsx tailwind-merge
2. Installation
Use our registry to download a component. For example, to add the Accordion:
3. Import Logic
Once a component is added, it will be placed in your @/components folder (or your configured components path).
Important: You should import components from your local directory, not from the registry.
// Correct import pattern after installation
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent
} from "@/components/accordion";
Community & Contribution
Klarden UI is built by and for design-conscious engineers. If you have an idea for a new tactile module or want to improve an existing one, feel free to contribute to our GitHub repository.