Cojeev UI components

Warm, expressive React components with considered motion. MIT licensed shadcn registry and Fumadocs documentation.

Components: 172
Framework: React
Stack: React, TypeScript, JavaScript, Tailwind
License: MIT
GitHub stars: 52
Source: https://github.com/luv-jeri/cojeev-ui
Website: https://000h.cojeev.com
Install: npx shadcn@latest add https://cojeev.com/ui/r/{name}.json

All Cojeev UI components

Accordion: Organizes related sections into expandable panels so readers can open the details they need.
Accordion Gallery: A selected image panel opens to reveal its label, story and action.
Action dock: A reusable action dock composed from Cojeev base components.
Activity feed: An ordered, date-grouped history in three looks (a living thread, a quiet ledger or gathered bursts), with readable actors and timestamps…
Motion Adjuster: Provides live controls for the shared motion settings and editable body profiles used across the library.
Agent chat: A composable agent conversation with a bounded thread, draft composer, attachments, progress, explicit permissions and choice prompts.
Agent state: A sculpted, living status field that changes contour and color as an agent thinks, works, asks for input, or finishes.
Alert: An authored note, attached-action banner or folded dispatch that makes the message and its next step clear.
Alert Dialog: Pauses a workflow for a focused confirmation before a consequential action proceeds.
Ambient background: Adds a quiet animated composition around content, with decorative shapes kept behind a readable surface.
Animated icon: Replayable micro-interactions for the full Cojeev icon library, with semantic motion families and optional visual treatments.
Animated number: A smooth, interruptible number transition for totals, metrics and small moments of progress.
Appearance: Choose from six coordinated palettes and adjust reading contrast across the application.
Area chart: Layered area charts with shared series colors, responsive bounds and a keyboard data inspector.
Article Headings: Semantic article headings resolve through a brief, grapheme-safe noise frontier.
Aspect Ratio: Keeps a media container at a chosen width-to-height ratio as its available width changes.
Assembly part: A persistent native component moving between a floating organism and its measured layout.
Attachment: Presents a file name, type, metadata, and nearby actions as a compact attachment row.
Avatar: Portraits, identity rows and participant groups that keep the person recognizable—with artwork, initials and independent shape choices.
Badge: Stamp a review state, attach a filing tag or count a collection. Three compact treatments with one clear meaning in text.
Bar chart: Compare series with grouped, stacked or horizontal bars and a shared interactive tooltip.
Bento Builder: An editable Bento canvas with complete partitions, content swapping, snapped neighbor resizing, history and usable layout export.
Bento Grid: A complete canvas of rounded cards or organically interlocking pieces. Compose a layout, then install just the lightweight renderer.
Breadcrumb: Find your place with a complete trail, a pocket-sized ancestor menu or a connected directory path.
Bubble: Groups conversational content and timestamps into visually distinct message bubbles.
Button: Triggers an action with native button behavior and an optional busy indicator.
Button Group: Places related actions together and can track one selected button value.
Buy Me Coffee: A support poster reveals an inviting cup illustration and a real caller destination.
Calendar: Choose one appointment day, a continuous date range, or separate days in an accessible month grid.
Card: Groups related content, metadata, and actions into a distinct surface.
Caret Swap: A colored caret block consumes a phrase before typing its replacement in whole graphemes.
Carousel: Browse a peeking shelf, a full reading spread or a miniature index of ideas, with native scrolling and a shared organic scrollbar.
Chart: Compose an understandable chart from a frame, labelled series, inspectable plot and accessible values.
Dynamic chart tooltip: Compare a point, read its known subtotal or rank its series. Values update in place and keep their series colours.
Checkbox: Captures an independent checked, unchecked, or indeterminate choice.
Click Spark: A finite spray of accent marks responds to a real activation.
Code block: Displays a code snippet with an optional caption, language label, wrapping, and copy feedback.
Collapsible: Shows or hides one optional section without leaving the surrounding layout.
Combobox: Filters a list of options through text input and stores one selected value.
Command: Builds a searchable command list that users can navigate and activate from the keyboard.
Compact dashboard: Historical compatibility alias for WorkSidePanel; use the dedicated panel composition in new work.
Context Menu: Reveals contextual actions for a target through a context-menu interaction.
Contour field: Original topographic lines on the inherited paper surface, with a bounded GPU renderer.
Contours background: Nested organic contour lines with generous space between islands.
Conversation panel: A reusable conversation panel composed from Cojeev base components.
Data Table: Displays records with client-side filtering, sortable columns, and paginated rows.
Date Picker: Choose one day, a range, or multiple dates from a labelled field and calendar popover.
Depth background: Layered pollen, contours and orbital shapes with perspective, native-scroll depth and pointer response.
Dialog: A decision slip, focused editor or illustrated exhibit. Give one task your attention without losing your place.
Direction: Sets a text direction for a subtree and shares it with direction-aware primitives.
Dither Dissolve: Caller scenes exchange beneath a deterministic ordered dither cover.
Dither sculpture: Depth-tested sculptural forms printed as ordered dots, halftone, error diffusion or stipple.
Dock: A compact workspace launcher with a magnifying glass bar, raised shelf and labelled vertical rail.
Dots background: An evenly spaced field of fine points for quiet, familiar structure.
Drawer: Presents dialog content in a drawer surface while keeping the current page underneath.
Dropdown Menu: Opens a compact menu of actions or stateful choices from a visible trigger.
Dropzone: Collects local files through drag and drop or a native file picker and reports the selection.
Elastic Mesh: A triangulated printed sheet stretches toward the pointer and springs home.
Empty: Explains an empty collection or unavailable result and creates space for a useful next step.
Falling Text: Measured word rectangles fall, collide and settle inside a bounded stage.
Field: Connects a form control with its label, description, and validation message.
Float layer: An entrance, scroll depth and gentle idle movement for a real component or a group of elements.
Flow sculpture: A rendered form responds to pointer strokes through a fluid distortion field.
Focus session: A local focus timer composed from Cojeev cards, progress, badges and native controls.
Folds background: Quiet faceted planes inspired by folded paper, without busy linework.
Ghost Cursor: A translucent ink impression follows a local pointer with soft inertia.
Glass sculpture: Translucent geometry bends an original patterned studio through a softly lit glass surface.
Glyph sculpture: A real 3D surface drawn with glyphs, optional contour marks and your own local geometry.
Grain Dissolve: Caller scenes dissolve through a grainy pigment field with a soft focus exchange.
Grid background: Hairline rules that give canvases and working surfaces a gentle rhythm.
Guided pointer: An illustrated pointer moves between story waypoints, with a small arrival or hold cue.
Hero button: Twelve tactile calls to action: living ink, paper, keys, tickets and small moments of motion around one native button.
Hover Card: A person, an excerpt or a small visual study—three considered previews, close to the thing you are exploring.
Icon library: 1,722 icon names with Cojeev micro-interactions, outline, duotone and organic treatments, built on Lucide geometry.
Image Masking: Caller images are framed by original Cojeev silhouettes using CSS masks or SVG clip paths.
Image Trail: Distance-triggered image impressions follow the pointer and fade away.
Infinite Spiral: Helical image cards recycle through depth with explicit previous, next and pause controls.
Ink sculpture: Hatched and engraved marks follow the light and relief of a 3D form.
Input: Collects a single-line value through a native input with optional composed affixes and clearing controls.
Input Group: Combines a text control with adjacent prefixes, suffixes, or actions in one input surface.
Input OTP: Presents a single code input as a sequence of visible character slots.
Invite card: An event invitation with participant avatars and a reversible local RSVP, composed from Cojeev primitives.
Item: A notebook ledger, an illustrated collection or an actionable detail. Three readable arrangements for the things you want to keep together.
Item adornment: Coloured organic shapes for list items, with deterministic automatic selection and custom icon or no-icon options.
Kbd: Formats a key or key combination as a recognizable keyboard instruction.
Label: Provides a native form label plus compact stat-label primitives for named values.
Line chart: Track changes using linear, smooth or step lines with accessible point inspection.
Linear Modal: Follow a card, image and title into a full detail, then back. Card, Centered and browsable Gallery preserve the reference's shared-layout…
Living link: A native link with a drawn ink contour, directional underline reveals, or an organic pigment wash.
Magic Rings: Open concentric rings expand in Cojeev colors and respond to pointer position.
Marker: Separates or annotates a sequence with a short event, status, or time label.
Marquee: A measured moving list with optional perspective and a rhythm that follows scrolling.
Menubar: Groups application commands into a horizontal row of keyboard-navigable menus.
Message: Structures a conversational or activity entry with a main content area and supporting description.
Message Scroller: Keeps a conversation near its latest content while allowing readers to scroll back without being pulled down.
Meta Balls: Moving scalar-field bodies merge and separate through liquid contours.
Milestone path: Follow caller-owned progress or a running workflow as a connected Journey, a scrollable Sequence or a compact checkpoint Review, with…
Motion Drawer: A reference-faithful edge drawer, floating quick panel, layered workspace and bottom action tray.
Multi-select: Searchable multiple choices with removable selections, form values and clear validation.
Native Select: Uses the browser’s native select control to choose from a compact list of options.
Navigation Menu: Organizes destination links and optional expandable navigation panels.
Number input: A number field with readable formatting, a native editing caret and expressive stepping.
Option Wheel: A paper dial, aligned reel or compact readout for choosing one direction with pointer, wheel or keyboard.
Orbit Images: An orbit of supplied images frames stationary content.
Organism assembly: An interactive studio that gathers floating shapes into six reusable compositions.
Organism composition: Six useful compositions made from persistent Cojeev base components, with organic assembly and native controls.
Pagination: Lets users move between numbered pages and see their current position.
Particle sculpture: A cloud sampled from a real surface yields to the pointer and springs back into form.
Particle Text: Particles sampled from real glyph pixels gather into a readable phrase and repel the local pointer.
Pattern background: Eight distinct, lightweight backgrounds behind content, with a plain option and adjustable spacing, color and strength.
Pebbles background: Sparse, softly irregular pebble outlines distributed across the surface.
Pie chart: Show proportions using themed pie and donut layouts, with readable totals and segment inspection.
Pigment field: An original GPU pigment wash using the current Cojeev palette.
Pixel Swap: A staggered tile mask exchanges two compositions without duplicating their interactive content.
Popover: Places a dismissible panel next to a trigger for a small contextual task or set of controls.
Portal Field: An organically warped luminous halo with a soft chromatic fringe behind real content.
Presence: MotionPresence keeps keyed children mounted for their exits. MotionSurface adds coordinated lifecycle states to an existing primitive.
Component preview: Pairs a live component example with a code view and a copy action.
Profile card: A reusable profile card composed from Cojeev base components.
Progress: One measured amount, explained as an inline task, a small report or connected milestones—with independent organic track geometry.
Questionnaire: A little guided brief: open questions, a focused journey or a two-column worksheet with living choice marks and honest completion progress.
Radar chart: Compare several dimensions with a shared radar scale and contextual series highlighting.
Radial chart: Show progress against a shared maximum using full rings or semicircles.
Radio group: Lets users select one option from a labeled set of mutually exclusive choices.
Reading trail: Keep your place with a connected spine, an expandable bookmark or a descriptive chapter overview—all following actual reading progress.
Resizable: Divides a region into panels whose relative sizes can be adjusted with a separator.
Ripple Distortion: Pointer impulses send expanding waves through a textured print.
Scroll Area: Contains overflowing content in a bounded viewport with styled scrollbars.
Scroll Expand: A framed composition opens as native scroll or controlled progress advances.
Scroll organism: A softly stretching companion driven by native document scrolling.
Scroll Reveal: Native scroll progress resolves word opacity and blur while leveling the phrase.
Sculpture orbit: A shared sculpture viewer with pointer rotation, touch-friendly navigation and complete keyboard controls.
Select: Opens a list of options from a trigger and stores one selected value.
Semantic bloom: A living wordmark whose particles wander, connect and gather into a liquid organism. Adapted from ThreeUI with Cojeev colors and motion…
Separator: Divides adjacent content with a horizontal or vertical rule.
Shape studio: One shape studio: twelve compatible living contours, layered artwork and the complete original mask inventory. Compose it here, then take…
Shape artwork: An original SVG silhouette with a cast shadow and a rotated rear outline. The same vector layers power its live preview and standalone SVG…
Shape scene: A tactile 3D composition made from Cojeev shapes, with a static fallback and motion preferences built in.
Sheet: Opens a side surface for focused secondary content while the current page remains in place.
Sidebar: A paper folio, a readable compact index and a motion drawer. Three calm ways to keep the same workspace within reach.
Skeleton: Give unavailable content a useful outline: a reading page, a person or a board of ideas, with three quiet-safe paint effects.
Slider: Adjusts one or more numeric values by moving labeled thumbs along a track.
Loading: Three indeterminate signals: a morphing Bloom, gathering Orbit or handing-off Relay. The original small seed stays the default.
Sprouts background: Small paired leaves and seed-like marks with plenty of open space.
Strands: A bundle of colored ribbons moves through a bounded sine field.
Sunwash background: Broad, soft pools of color that leave the content in focus.
Swapy: Cards swap positions through a drag handle or keyboard controls and retain their order in React state.
Swarm Cursor: A local flock of colored seeds follows the pointer and scatters on activation.
Switch: Turns a named binary setting on or off.
Tables: Scan a compact ledger, explore detailed records or compare them side by side. One Tables guide for native parts and the composed DataTable.
Tabs: Switches between related content panels while keeping the available views visible.
Target Cursor: Local corner brackets follow real controls on hover and keyboard focus.
Text reveal: Readable word, grapheme, phrase or measured-line arrivals with soft focus, fold and organic scale choices.
Text ribbon: A measured phrase follows six original SVG paths, with direct manipulation and gentle changes of pace.
Textarea: Collects multiline text and offers composer and character-count parts for longer input.
Theme toggle: A controlled light/dark switch with a morphing sun and moon and a smooth organic page reveal.
Toast: Reports a brief outcome in a notification area without moving the user away from the current task.
Toggle: A small action with a lasting state: a toolbar tool, a paper bookmark or a descriptive preference. Native targets stay put while the…
Toggle Group: Groups pressable choices that can allow one or several selected values.
Tooltip: Precise ink callouts, useful keyboard hints and small paper annotations. Short explanations that appear where attention already is.
Tree: A controlled branch ledger for supplied hierarchical data, with separate disclosure, selection and trailing actions.
Typography: Provides text roles for headings, body copy, metadata, values, and identifiers.
Typography Vortex: Nested rotating glyph rings with a local dissolution lens and a finite suction pulse.
Variable Proximity: Pointer distance changes the real variable-font weight of individual graphemes.
Warp Text: Rendered text deforms through a slowly changing noise displacement.
Wave Wipe: An organic wave rises across caller content to reveal the next scene.
Weave background: Interlaced thread-like strokes with visible over-and-under crossings.
Word relay: Exchanges phrases, words or letters inside a stable wrapping footprint, with interruptible motion and explicit navigation.
Word Stream: Phrases build word by word, drift left and run out before the final phrase holds.
Work side panel: A reusable work side panel composed from Cojeev base components.
Writing caret: A quiet writing mark with a short, deliberate blink sequence.
Zoom Words: An enlarged camera follows measured centers along a growing word line.

Cojeev UI components

All Cojeev UI components

Browse by category