# cock > An open-source Svelte 5 and Tailwind 4 component kit: 66 accessible components, dark mode, theming from three colours and a theme generator. Svelte 5 and Tailwind 4 only. Install with `npm install @joshicodes/cock`. Theming is three CSS variables (`--ck-bg`, `--ck-fg`, `--ck-accent`); every other colour is mixed from them with `color-mix`, so overriding one re-skins the rest. ## Docs - [Getting started](https://cock.joshicodes.de/docs/getting-started): install, Tailwind setup, and the hook that prevents a dark-mode flash - [Theming](https://cock.joshicodes.de/docs/theming): the token system, scoped themes and the runtime API - [Helpers and actions](https://cock.joshicodes.de/docs/utilities): cn, uid, lockScroll, confetti, hotkeys and the four actions - [Types](https://cock.joshicodes.de/docs/types): every exported type, written out - [How it compares](https://cock.joshicodes.de/docs/comparison): next to shadcn-svelte, Bits UI and Skeleton, with measured bundle sizes - [Component index](https://cock.joshicodes.de/components): all components with examples and props - [Theme generator](https://cock.joshicodes.de/themes): generate a palette and copy the CSS - [Full API as one file](https://cock.joshicodes.de/llms-full.txt): every component, prop, default and keyboard shortcut ## Primitives - [Button](https://cock.joshicodes.de/components/button): Six variants, five sizes, a loading state and an anchor mode. - [Badge](https://cock.joshicodes.de/components/badge): A small status label, with an optional leading dot. - [Avatar](https://cock.joshicodes.de/components/avatar): Picture, initials or a fallback glyph, with a status dot. - [CopyButton](https://cock.joshicodes.de/components/copy-button): Copies a string and confirms it in place. - [ThemeToggle](https://cock.joshicodes.de/components/theme-toggle): Light and dark, or a segmented control that adds system. - [Spinner](https://cock.joshicodes.de/components/spinner): A borrowed-border spinner that takes the current text colour. - [Skeleton](https://cock.joshicodes.de/components/skeleton): Grey placeholder blocks, with a shortcut for stacked text lines. - [Separator](https://cock.joshicodes.de/components/separator): A hairline, horizontal or vertical, optionally with a label. - [Kbd](https://cock.joshicodes.de/components/kbd): A key cap for documenting shortcuts. - [Code](https://cock.joshicodes.de/components/code): Inline code, bordered so it separates from the sentence. ## Layout - [Card](https://cock.joshicodes.de/components/card): A bordered box with optional header, content and footer parts. - [EmptyState](https://cock.joshicodes.de/components/empty-state): The dashed box for lists that have nothing in them yet. ## Forms - [Field](https://cock.joshicodes.de/components/field): Wires a label, help text and error message to one control. - [Input](https://cock.joshicodes.de/components/input): Text input in three sizes, with slots inside either end. - [NumberInput](https://cock.joshicodes.de/components/number-input): A quantity field with step buttons that does not lose what you typed. - [Textarea](https://cock.joshicodes.de/components/textarea): Multi-line input that can grow with its content. - [Select](https://cock.joshicodes.de/components/select): The native select, styled, with an options array or your own markup. - [Checkbox](https://cock.joshicodes.de/components/checkbox): Checkbox with a label, help text and an indeterminate state. - [RadioGroup](https://cock.joshicodes.de/components/radio-group): A set of radios that share a name and a bound value. - [SegmentedControl](https://cock.joshicodes.de/components/segmented-control): A short list of options as one strip, for choices worth seeing. - [Switch](https://cock.joshicodes.de/components/switch): An on/off toggle for settings that apply immediately. - [Slider](https://cock.joshicodes.de/components/slider): A styled range input with an optional formatted value. - [PinInput](https://cock.joshicodes.de/components/pin-input): One box per character, for verification codes. - [TagInput](https://cock.joshicodes.de/components/tag-input): Free-text tags with keyboard editing and a limit. - [FileDrop](https://cock.joshicodes.de/components/file-drop): A drop zone that is also a real file input. - [Label](https://cock.joshicodes.de/components/label): A form label with an optional required marker. ## Feedback - [Alert](https://cock.joshicodes.de/components/alert): An inline message in six tones, optionally dismissible. - [Toaster](https://cock.joshicodes.de/components/toaster): The toast container, plus the `toast` function that feeds it. - [Progress](https://cock.joshicodes.de/components/progress): A determinate or indeterminate bar. - [ProgressRing](https://cock.joshicodes.de/components/progress-ring): The round version, for tight spots and dashboards. - [Tooltip](https://cock.joshicodes.de/components/tooltip): A short hint on hover and on keyboard focus. ## Overlays - [Modal](https://cock.joshicodes.de/components/modal): A centred dialog with a backdrop, focus trap and footer slot. - [Drawer](https://cock.joshicodes.de/components/drawer): The same dialog, sliding in from any edge. - [Popover](https://cock.joshicodes.de/components/popover): A positioned panel anchored to a trigger you supply. - [DropdownMenu](https://cock.joshicodes.de/components/dropdown-menu): An anchored menu with full keyboard control. - [CommandPalette](https://cock.joshicodes.de/components/command-palette): Fuzzy search over a list of commands, on a global shortcut. ## Navigation - [Tabs](https://cock.joshicodes.de/components/tabs): Underlined or pill tabs with arrow-key navigation. - [Accordion](https://cock.joshicodes.de/components/accordion): Collapsible sections, one at a time or several at once. - [Breadcrumb](https://cock.joshicodes.de/components/breadcrumb): The trail back up, from an array of items. - [Pagination](https://cock.joshicodes.de/components/pagination): Page numbers with ellipses, and a compact mode on phones. ## Data - [Table](https://cock.joshicodes.de/components/table): Styling for plain table markup, in two tones. - [Stat](https://cock.joshicodes.de/components/stat): A single number with a label and a trend. - [Sparkline](https://cock.joshicodes.de/components/sparkline): A trend line that fills its container, without a chart library. - [Heatmap](https://cock.joshicodes.de/components/heatmap): One cell per value, shaded with the accent. ## Effects - [Typewriter](https://cock.joshicodes.de/components/typewriter): Types a line, pauses, deletes it and moves to the next. - [Terminal](https://cock.joshicodes.de/components/terminal): A fake shell session that types itself. - [Caret](https://cock.joshicodes.de/components/caret): The blinking bar on its own, in three shapes. - [Scramble](https://cock.joshicodes.de/components/scramble): Settles from random glyphs into the real text. - [CountUp](https://cock.joshicodes.de/components/count-up): Counts to a number when it scrolls into view. - [Odometer](https://cock.joshicodes.de/components/odometer): Digits that roll like a mechanical counter. - [Marquee](https://cock.joshicodes.de/components/marquee): A looping strip that pauses on hover. - [Reveal](https://cock.joshicodes.de/components/reveal): Fades content in as it scrolls into view. - [Highlight](https://cock.joshicodes.de/components/highlight): A marker stroke that draws itself across the text.