Installation
Bloxa components are added to your project as source code, not as a package. Install them with the shadcn CLI and keep the code in your repo.
1. Prepare your project
Initialize shadcn in a Next.js or React project that uses Tailwind CSS v4:
npx shadcn@latest init2. Add the Bloxa registry
Add Bloxa to your components.json file:
{
"registries": {
"@bloxa": "https://bloxa.dev/r/{name}.json"
}
}3. Add a component
The theme, helpers and dependencies are installed together with the component.
npx shadcn@latest add @bloxa/buttonBloxa CLI
npx @bloxa/cli sets up the registry for you and adds components by name.
npx @bloxa/cli init
npx @bloxa/cli add button select date-picker
npx @bloxa/cli listOr import from npm
Prefer a package over copying code? Install @bloxa/react, add the theme and import components directly. Free components only.
npm install @bloxa/react@import "tailwindcss";
@import "@bloxa/react/theme.css";
@source "../node_modules/@bloxa/react/dist";import { BloxaProvider, Button, DatePicker } from "@bloxa/react";
export default function Page() {
return (
<BloxaProvider locale="tr-TR">
<Button>Başla</Button>
<DatePicker clearable />
</BloxaProvider>
);
}Components
Grid
Bootstrap-style Container, Row and Col with a 12-column responsive grid, gutters, offsets and ordering.
Button
Button with variants, sizes, start/end icons, loading state and ButtonGroup. Supports asChild.
Toggle Group
Segmented control with a sliding highlight, plus outline and ghost toolbars; single or multiple choice.
Dropdown Menu
Menu with items, icons, shortcuts, checkbox and radio items, labels, separators and submenus.
Context Menu
Right-click / long-press menu with submenus, checkbox and radio items and shortcuts.
Field
Label, Field, FieldDescription and FieldError to compose accessible form fields.
Input
Text input with start/end icons, clear button, password reveal, character count and sizes.
Input Group
Input with text or button addons on either side; borders and corners merge.
Textarea
Multi-line input that can grow with its content, with an optional character count.
Checkbox
Checkbox with an animated check, indeterminate state, and CheckboxField with label, description and card style.
Radio Group
Radio group with animated selection and RadioField with label, description and card style.
Switch
Toggle switch in two sizes with optional icons inside the thumb.
Select
Select with icons, descriptions, groups, search and multi-select with removable chips.
Combobox
Autocomplete field that filters, highlights matches, picks with the keyboard, creates new values and loads async.
Color Picker
Saturation area, hue slider, hex field, swatches and an eyedropper that picks from the screen.
Rating
Star rating with halves, hover preview, labels, keyboard support and a read-only mode.
Slider
Slider with single or range values, value bubbles, steps and labelled marks.
Number Input
Number field with steppers, min/max, step, unit suffix, hold-to-repeat and keyboard stepping.
OTP Input
One-time code field with slots, grouping, masking, paste and SMS autofill support.
Tag Input
Type and press Enter to add tags; delimiters, paste, validation, suggestions and a max count.
File Upload
Drag-and-drop zone with type and size validation, image previews, file list and progress bars.
Calendar
Dependency-free calendar with single and range selection, localized names, min/max, disabled days and keyboard navigation.
Date Picker
Date and date-range picker built on Calendar and Popover, localized with Intl.
Tabs
Tabs with pill and underline styles.
Nav Menu
Vertical navigation with icons, badges, nested collapsible groups and a highlight that glides to the active page.
Sidebar
App sidebar that collapses to an icon rail on desktop (⌘B) and becomes a left drawer on mobile.
Breadcrumb
Location trail with a collapsible middle, icons, separators and BreadcrumbList structured data.
Pagination
Page links with ellipses, a sliding current marker, first/last buttons, a compact mode and SEO-friendly hrefs.
Stepper
Horizontal or vertical multi-step progress with filling connectors, errors and optional steps.
Popover
Floating panel anchored to a trigger, with a smooth scale-in.
Tooltip
Short label on hover and focus, with shortcut keys, an arrow and shared delays.
Dialog
Modal window with sizes, a blurred backdrop, scale in/out motion and a focus trap.
Alert Dialog
Confirmation that must be answered, with destructive and warning tones; outside clicks don't close it.
Drawer
Panel that slides in from any edge with spring motion and can be dragged closed.
Alert
Inline info, success, warning and error messages with actions and dismiss.
Toast
Notifications from anywhere with toast(): types, actions, promises, pause on hover and swipe to dismiss.
Command
Command palette with search, groups, shortcuts and keyboard navigation; opens with ⌘K.
Table
Responsive table with striped, hover, bordered, compact, sticky header and stack-on-mobile modes.
Data Table
Table with search, column filters, sorting, pagination, row selection and column visibility.
Badge
Small pill label for status and tags.
Avatar
Colored initials fallback, sizes, a status dot and AvatarGroup with +N.
Kbd
Keyboard keys and shortcuts; mod becomes ⌘ or Ctrl depending on the platform.
Timeline
Activity feed along a line with icons, tones, times and a scroll-in animation.
Tree View
File-style tree with expandable folders, selection, guide lines and full keyboard support.
Carousel
Scroll-snap slider with swipe, mouse drag, arrows, dots, autoplay and loop. No carousel library.
Image
Image with a loading placeholder, soft fade-in, error fallback, aspect ratio, caption and hover zoom.
Hover Card
Rich preview card that opens on hover or focus, with delays and an optional arrow.
Line Chart
Smooth or straight lines with a hover tooltip, dots and toggleable series.
Area Chart
Gradient, solid or unfilled areas; stackable.
Bar Chart
Grouped or stacked bars that grow in; the hovered column is highlighted.
Combo Chart
Bars with lines on a right axis: Pareto, volume vs. rate, actual vs. target.
Scatter Chart
Dots on two numeric axes with bubble sizes and colored groups.
Donut Chart
Donut or pie with animated slices; the hovered slice shows in the center.
Radar Chart
Compares several measures at once; one polygon per series.
Funnel Chart
Stages that narrow as people drop off, with step-by-step conversion.
Gauge
Semicircle KPI gauge with colored bands and an optional needle.
Heatmap
Calendar heatmap (contribution graph) with localized month and day names.
Spark Chart
Tiny line, area or bar trend for tables and cards.
Bar List
Ranked horizontal bars with names, icons and values.
Tracker
Status blocks for uptime and daily checks.
Stat
Metric card with a counting value, a colored change and a sparkline.
Progress
Linear and circular progress with an animated fill, labels, localized values and an indeterminate mode.
Spinner
Loading indicator in ring, dots and bars styles with sizes, tones and a localized label.
Skeleton
Pulsing placeholders for blocks, avatars and text lines while content loads.
Empty
Empty state with an icon, title, description and actions.
Card
Surface container with header, title, description, content and footer parts.
Accordion
Expandable sections in line, card and ghost styles with icons, descriptions and a smooth height animation.
Collapsible
Shows and hides content with an animated height and a turning chevron.
Separator
Line between content with an optional label, in solid, dashed or gradient style.
Bento Grid
Uneven feature tiles for landing pages with a visual area and a call-to-action that appears on hover.
Scroll Area
Scroll container with slim theme-colored scrollbars and optional edge fades.
Reveal
Fades and lifts content into view on scroll. Respects reduced motion.
Number Ticker
Counts up to a number when it scrolls into view; localized and reduced-motion aware.
Text Animate
Word or letter reveals (blur, fade, slide, scale), WordRotate and Typewriter; accessible and reduced-motion aware.
Marquee
Endless logo or testimonial strip in any direction that eases to a stop on hover.
Spotlight Card
Card with a cursor-following glow on its surface and border, plus BorderBeam for a travelling edge light.
Tilt Card
Card that tilts in 3D toward the cursor with spring physics and a glare highlight.
Dock
macOS-style dock whose icons magnify as the cursor passes.
Theme Provider
App-wide theme provider for light/dark/system mode, brand color, radius and font — remembered per visitor, with no flash on load. ThemeCustomizer lets visitors change it themselves.