ByHartvig
Go backComponent

Custom Range slider

5%
Dependencies
npm install @radix-ui/react-slider framer-motion motion-number
Component

Custom filter inline dropdown

@ Car
Component

Dynamic Data Table

ID
1
2
3
4
5
6
7
8
9
10
Title
Building a Dynamic Data Table with React and Tailwind CSS
Mastering Next.js 14 App Router: A Complete Guide
Advanced TypeScript Patterns for React Applications
Creating Beautiful Animations with Framer Motion
State Management in 2024: Redux vs. Zustand vs. Jotai
Building a Design System with Radix UI and Tailwind
Optimizing React Server Components for Performance
Modern Authentication Patterns with Next.js and Auth.js
Building Real-time Applications with WebSockets
Implementing Dark Mode with Tailwind and Next.js
Created at
Mar 20, 2024
Mar 18, 2024
Mar 15, 2024
Mar 12, 2024
Mar 10, 2024
Mar 8, 2024
Mar 5, 2024
Mar 2, 2024
Feb 28, 2024
Feb 25, 2024
Status
Published
Published
Draft
Published
Published
Draft
Published
Published
Draft
Published
Sources
Keywords
Component

Range cards

Real range

85% of WLTP

The car can drive up to 435 km, which is 85% of the cars WLTP range.

Based on 750 data points

Winter range

42% of WLTP

The car can drive up to 189 km, which is 42% of the cars WLTP range.

Based on 750 data points

Summer range

109% of WLTP

The car can drive up to 562 km, which is 109% of the cars WLTP range.

Based on 750 data points
Dependencies
npm install framer-motion lucide-react @radix-ui/react-slot