Strike Todos
Installation
npx shadcn@latest add https://uibrik.com/r/strike-todos.jsonAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Set up squircle corners
Needs
@squircle/core,@squircle/tailwindcssand a few lines of CSS. See squircle setup.Copy the source into your project
components/uibrik/strike-todos/strike-todos.tsx"use client"; import { useId, useRef, useState } from "react"; import { cn } from "@/lib/utils"; type Item = { id: number; label: string; done: boolean }; export const SAMPLE_TODOS = [ "Design the interface", "Build the components", "Polish the details", "Ship it to production", ]; export type StrikeTodosProps = { /** To-dos listed at the start. */ initialItems?: string[]; placeholder?: string; /** Longest to-do, in characters. */ maxLength?: number; /** Seconds the line takes to cross a to-do. */ strikeDuration?: number; /** Fade finished to-dos so the open ones stand out. */ dim?: boolean;
Adds the files to
components/uibrik/strike-todos. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/strike-todos.Props
StrikeTodos- placeholder
- Type string
- "Add a to-do"
- strikeDuration
- Type number
- 0.35
- How long the line takes to cross a to-do.
- dim
- Type boolean
- true
- Fade finished to-dos so the open ones stand out.
- width
- Type number
- 416
- Width of the list.
- maxLength
- Type number
- 32
- Longest to-do, in characters.
- initialItems
- Type string[]
- SAMPLE_TODOS
- To-dos listed at the start.
- onAdd
- Type (label: string) => void
- –
- Called when a to-do is added.
- onToggle
- Type (label: string, done: boolean) => void
- –
- Called when a to-do is checked or unchecked.
- className
- Type string
- –
- Classes for the list.
