Dakik// Bits
Dakik.co.uk

// shadcn registry

Bits.

Production-ready React components, installable straight from the shadcn CLI. Drop them in and ship.

npx shadcn@latest add @dakik/button
// Data Display

Accordion

A collapsible for displaying content.

npx shadcn@latest add @dakik/accordion
// Navigation

Action Bar

Display an action bar for selected items.

npx shadcn@latest add @dakik/action-bar
// Feedback

Alert

Displays an alert for user attention.

npx shadcn@latest add @dakik/alert
// Overlays

Alert Dialog

Dialog for displaying important content.

npx shadcn@latest add @dakik/alert-dialog
// Feedback

Announcement

Inline notice for short, prominent updates.

npx shadcn@latest add @dakik/announcement
// Layout

Aspect Ratio

Wrapper that maintains aspect ratio for content.

npx shadcn@latest add @dakik/aspect-ratio
// Forms

Autocomplete

Displays a searchable list of options.

npx shadcn@latest add @dakik/autocomplete
// Data Display

Avatar

Displays a user's profile image with fallback.

npx shadcn@latest add @dakik/avatar
// Data Display

Badge

A badge or an element styled as a badge.

npx shadcn@latest add @dakik/badge
// Navigation

Bottom Navigation

Fixed bottom nav for mobile-first apps.

npx shadcn@latest add @dakik/bottom-navigation
// Navigation

Breadcrumb

Shows user location within a hierarchy.

npx shadcn@latest add @dakik/breadcrumb
// Forms

Button

A button or an element styled as a button.

npx shadcn@latest add @dakik/button
// Forms

Button Group

Group button elements together.

npx shadcn@latest add @dakik/button-group
// Forms

Calendar

Select a date or a range of dates.

npx shadcn@latest add @dakik/calendar
// Layout

Card

Displays content about a single subject.

npx shadcn@latest add @dakik/card
// Data Display

Carousel

Lets users cycle through a series of items.

npx shadcn@latest add @dakik/carousel
// Data Display

Chart

Visualize data with beautiful charts.

npx shadcn@latest add @dakik/chart
// Forms

Checkbox

Control for multiple selections in a set.

npx shadcn@latest add @dakik/checkbox
// Feedback

Circular Progress

Shows task progress with a circular indicator.

npx shadcn@latest add @dakik/circular-progress
// Forms

Circular Slider

Circular slider for selecting values.

npx shadcn@latest add @dakik/circular-slider
// Data Display

Clipboard

Copy text to the clipboard.

npx shadcn@latest add @dakik/clipboard
// Data Display

Collapsible

Collapsible content in a vertical stack.

npx shadcn@latest add @dakik/collapsible
// Forms

Color Picker

Pick colors with hue and alpha controls.

npx shadcn@latest add @dakik/color-picker
// Forms

Combobox

Displays a searchable list of options.

npx shadcn@latest add @dakik/combobox
// Navigation

Command

Searchable command input with filtering.

npx shadcn@latest add @dakik/command
// Navigation

Context Menu

A menu shown on right-click.

npx shadcn@latest add @dakik/context-menu
// Data Display

Data List

A list of label-value pairs.

npx shadcn@latest add @dakik/data-list
// Forms

Date Picker

Input with a built-in calendar.

npx shadcn@latest add @dakik/date-picker
// Overlays

Dialog

A dialog for displaying content.

npx shadcn@latest add @dakik/dialog
// Overlays

Drawer

A sliding panel with swipe support.

npx shadcn@latest add @dakik/drawer
// Forms

Editable

Allows user to edit text in-place.

npx shadcn@latest add @dakik/editable
// Forms

Field

Container for inputs, labels, and helper text.

npx shadcn@latest add @dakik/field
// Forms

File Upload

A component that allows users to upload files.

npx shadcn@latest add @dakik/file-upload
// Layout

Float

Anchor an element to the edge of a container.

npx shadcn@latest add @dakik/float
// Layout

Floating Panel

Displays content in a floating window.

npx shadcn@latest add @dakik/floating-panel
// Layout

Frame

Bordered box for grouping related content.

npx shadcn@latest add @dakik/frame
// Overlays

Hint

Minimal tooltip for showing information.

npx shadcn@latest add @dakik/hint
// Overlays

Hover Card

Popover that appears on hover.

npx shadcn@latest add @dakik/hover-card
// Data Display

Image Cropper

Crop and transform images.

npx shadcn@latest add @dakik/image-cropper
// Forms

Input

A field that allows users to enter text.

npx shadcn@latest add @dakik/input
// Forms

Input Group

Group input elements together.

npx shadcn@latest add @dakik/input-group
// Forms

Input OTP

Accessible one-time password input.

npx shadcn@latest add @dakik/input-otp
// Layout

Item

A versatile component for displaying content.

npx shadcn@latest add @dakik/item
// Data Display

Kbd

Styled representation of a single key.

npx shadcn@latest add @dakik/kbd
// Navigation

Link Overlay

Makes the whole card or article clickable.

npx shadcn@latest add @dakik/link-overlay
// Forms

Listbox

Select a single or multiple items from a list.

npx shadcn@latest add @dakik/listbox
// Data Display

Marquee

Scrolls items in a horizontal container.

npx shadcn@latest add @dakik/marquee
// Navigation

Menu

List of options on button interaction.

npx shadcn@latest add @dakik/menu
// Forms

Native Select

Styled native HTML select element.

npx shadcn@latest add @dakik/native-select
// Forms

Number Input

Numeric input for entering values.

npx shadcn@latest add @dakik/number-input
// Navigation

Pagination

Navigate through a list of items.

npx shadcn@latest add @dakik/pagination
// Forms

Password Input

A field for entering secure text.

npx shadcn@latest add @dakik/password-input
// Overlays

Popover

Overlay with extra info or options on trigger.

npx shadcn@latest add @dakik/popover
// Feedback

Progress

Displays task progress with a linear indicator.

npx shadcn@latest add @dakik/progress
// Data Display

Prose

Typography styles for HTML content.

npx shadcn@latest add @dakik/prose
// Data Display

QR Code

Displays a QR code.

npx shadcn@latest add @dakik/qr-code
// Forms

Radio Group

Allows single selection from multiple options.

npx shadcn@latest add @dakik/radio-group
// Forms

Rating

Show reviews and ratings in a visual format.

npx shadcn@latest add @dakik/rating
// Layout

Resizable

Divides the interface into resizable sections.

npx shadcn@latest add @dakik/resizable
// Layout

Scroll Area

Custom scrollable area with styled scrollbars.

npx shadcn@latest add @dakik/scroll-area
// Navigation

Segment Group

Follows the selected item.

npx shadcn@latest add @dakik/segment-group
// Forms

Select

Displays a list of options.

npx shadcn@latest add @dakik/select
// Layout

Separator

Visually separate content with a line.

npx shadcn@latest add @dakik/separator
// Overlays

Sheet

Content that slides in from the screen edge.

npx shadcn@latest add @dakik/sheet
// Navigation

Sidebar

A sidebar for navigation and app structure.

npx shadcn@latest add @dakik/sidebar
// Forms

Signature Pad

Capture hand-drawn signatures.

npx shadcn@latest add @dakik/signature-pad
// Feedback

Skeleton

Displays a loading state.

npx shadcn@latest add @dakik/skeleton
// Navigation

Skip Nav

Lets keyboard users skip to main content.

npx shadcn@latest add @dakik/skip-nav
// Forms

Slider

A slider for selecting a value from a range.

npx shadcn@latest add @dakik/slider
// Feedback

Spinner

A spinner for displaying a loading state.

npx shadcn@latest add @dakik/spinner
// Feedback

Status

Color-coded status for process or state.

npx shadcn@latest add @dakik/status
// Navigation

Steps

Steps in a wizard-like format.

npx shadcn@latest add @dakik/steps
// Forms

Switch

A switch for toggling a binary state.

npx shadcn@latest add @dakik/switch
// Data Display

Table

A responsive table component.

npx shadcn@latest add @dakik/table
// Navigation

Tabs

A tabs for navigating between content.

npx shadcn@latest add @dakik/tabs
// Forms

Tags Input

Allows users to add tags to an input field.

npx shadcn@latest add @dakik/tags-input
// Forms

Textarea

Form textarea or textarea-styled component.

npx shadcn@latest add @dakik/textarea
// Data Display

Timer

Countdown or stopwatch with controls.

npx shadcn@latest add @dakik/timer
// Feedback

Toast

Provides feedback on an action.

npx shadcn@latest add @dakik/toast
// Forms

Toggle

Two-state button that can be toggled on or off.

npx shadcn@latest add @dakik/toggle
// Forms

Toggle Group

Toggle buttons for selecting a value.

npx shadcn@latest add @dakik/toggle-group
// Overlays

Toggle Tooltip

Display information on click.

npx shadcn@latest add @dakik/toggle-tooltip
// Overlays

Tooltip

Display information on hover or focus.

npx shadcn@latest add @dakik/tooltip
// Overlays

Tour

Displays a guided tour of the application.

npx shadcn@latest add @dakik/tour
// Navigation

Tree View

Hierarchical data in a tree structure.

npx shadcn@latest add @dakik/tree-view
// Utilities

useIsMobile

Hook that tracks whether the viewport is below the mobile breakpoint.

npx shadcn@latest add @dakik/use-is-mobile
// Utilities

cn (utils)

Tailwind class-merge helper (clsx + tailwind-merge).

npx shadcn@latest add @dakik/utils