// Machine Speed, Human Vibe
Conri Coding UI System
Professional-grade atomic components built for speed and precision. Deep dark mode. Electric accents. Zero compromise.
Next.js 14
Tailwind CSS
Radix UI
Framer Motion
TypeScript
01 — ConriButton
Button Component
High-end button with hover-glow, loading states, and multiple variants.
primary variant
ghost variant
lime variant
02 — WolfInput
Input Fields
Minimalist form fields with animated floating labels and validation states.
default state
validation states
✓ Valid email address
✗ Minimum 8 characters required
disabled state
// cursor: not-allowed
search variant
Active
Warning
Error
03 — GlassCard
Glass Container
Reusable containers with background blur and circuit-trace borders.
Speed Optimized
Built for sub-100ms render times. Every component is lazy-loaded and tree-shaken by default.
Fully Accessible
WCAG 2.1 AA compliant. Radix UI primitives ensure keyboard navigation and screen reader support.
Type-Safe APIs
Full TypeScript support with exported interfaces, generic props, and zero implicit any throughout.
Dark + Light Mode
CSS variable system adapts all tokens automatically. No flash. No jank. Just seamless switching.
24
components
100%
typescript
4.8kb
gzip size
04 — ProjectBriefModal
Accessible Modal
Radix Dialog with Framer Motion fade-and-scale entry animation.
modal trigger
Click to launch the Project Brief modal with backdrop blur and spring animation.
05 — SpeedNavbar + Utilities
Navigation & UI Utilities
Sticky navbar with active indicators, toggles, progress bars, and tooltips.
progress bar
Build Progress
78%
Tests Passing
94%
toggle switches
tooltips
Electric Blue Accent
Cyber Lime Variant
status indicators
API Online
Build Queued
Deploy Failed
06 — Code Reference
TypeScript Usage
Copy-paste ready component usage with full type annotations.
conributton.tsx
import { ConriButton } from '@conri/ui'
// ConriButton variant types
type ButtonVariant = 'primary' | 'ghost' | 'lime' | 'danger'
type ButtonSize = 'sm' | 'md' | 'lg'
interface ConriButtonProps {
variant?: ButtonVariant
size?: ButtonSize
isLoading?: boolean
disabled?: boolean
onClick?: () => void
}
// Usage example
export default function Page() {
return (
<ConriButton
variant="primary"
size="lg"
isLoading={false}
onClick={() => console.log('Wolf speed!')}
>
Deploy Project
</ConriButton>
)
}