Shark UI components

Beautifully designed components built with Ark UI.

Components: 175
Framework: React
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 192
Source: https://github.com/sharkui-inc/shark-ui
Website: https://shark-ui.com
Install: npx shadcn@latest add @shark/{name}

All Shark UI components

Accordion: A collapsible for displaying content.
Action Bar: Display an action bar for selected items.
Alert: Displays an alert for user attention.
Alert Dialog: Dialog for displaying important content.
Announcement: Inline notice for short, prominent updates.
Aspect Ratio: Wrapper that maintains aspect ratio for content.
Autocomplete
Avatar: Displays a user's profile image with fallback.
Badge: A badge or an element styled as a badge.
Bottom Navigation: Fixed bottom nav for mobile-first apps.
Breadcrumb: Shows user location within a hierarchy.
Button: A button or an element styled as a button.
Button Group: Group button elements together.
Calendar: Select a date or a range of dates.
Card: Displays content about a single subject.
Carousel: Lets users cycle through a series of items.
Chart: Visualize data with beautiful charts.
Chart Area Axes
Chart Area Default
Chart Area Gradient
Chart Area Icons
Chart Area Interactive
Chart Area Legend
Chart Area Linear
Chart Area Stacked
Chart Area Stacked Expand: Stacked area chart example normalised to 100%, showing each series as a share of the total.
Chart Area Step
Chart Bar Active
Chart Bar Default
Chart Bar Horizontal
Chart Bar Interactive
Chart Bar Label
Chart Bar Label Custom
Chart Bar Mixed
Chart Bar Multiple
Chart Bar Negative
Chart Bar Stacked
Chart Line Default
Chart Line Dots
Chart Line Dots Colors
Chart Line Dots Custom
Chart Line Interactive
Chart Line Label
Chart Line Label Custom
Chart Line Linear
Chart Line Multiple
Chart Line Step
Chart Pie Donut
Chart Pie Donut Active
Chart Pie Donut Text
Chart Pie Interactive
Chart Pie Label
Chart Pie Label Custom
Chart Pie Label List
Chart Pie Legend
Chart Pie Separator None
Chart Pie Simple
Chart Pie Stacked
Chart Radar Default
Chart Radar Dots
Chart Radar Grid Circle
Chart Radar Grid Circle Fill: Radar chart example with a filled circular polar grid.
Chart Radar Grid Circle No Lines
Chart Radar Grid Custom
Chart Radar Grid Fill: Radar chart example with a filled polygon grid.
Chart Radar Grid None
Chart Radar Icons
Chart Radar Label Custom
Chart Radar Legend
Chart Radar Lines Only
Chart Radar Multiple
Chart Radar Radius
Chart Radial Grid
Chart Radial Label
Chart Radial Shape: Radial chart example where the single bar has rounded ends and a large number in the centre.
Chart Radial Simple
Chart Radial Stacked
Chart Radial Text
Chart Tooltip Advanced
Chart Tooltip Default
Chart Tooltip Formatter
Chart Tooltip Icons
Chart Tooltip Indicator Line
Chart Tooltip Indicator None
Chart Tooltip Label Custom
Chart Tooltip Label Formatter
Chart Tooltip Label None
Checkbox: Control for multiple selections in a set.
Circular Progress: Shows task progress with a circular indicator.
Circular Slider: Circular slider for selecting values.
Client Only: Render content only on the client side.
Clipboard: Copy text to the clipboard.
Collapsible: Collapsible content in a vertical stack.
Color Picker: Pick colors with hue and alpha controls.
Combobox
Command: Searchable command input with filtering.
Context Menu: A menu shown on right-click.
Data List: A list of label-value pairs.
Date Input: Segmented input for dates and times.
Date Picker: Input with a built-in calendar.
Dialog: A dialog for displaying content.
Download Trigger: Trigger file downloads programmatically.
Drawer: A sliding panel with swipe support.
Editable: Allows user to edit text in-place.
Field: Container for inputs, labels, and helper text.
File Upload: A component that allows users to upload files.
Float: Anchor an element to the edge of a container.
Floating Panel: Displays content in a floating window.
Format: Format numbers, bytes, and time with Intl API.
Frame: Bordered box for grouping related content.
Highlight: Highlight search terms within text.
Hint: Minimal tooltip for showing information.
Hover Card: Popover that appears on hover.
Image Cropper: Crop and transform images.
Input: A field that allows users to enter text.
Input Group: Group input elements together.
Input Otp: Accessible one-time password input.
Item: A versatile component for displaying content.
Json Tree View: Display JSON data in an interactive, expandable tree.
Kbd: Styled representation of a single key.
Link Overlay: Makes the whole card or article clickable.
Listbox: Select a single or multiple items from a list.
Locale
Marquee: Scrolls items in a horizontal container.
Menu: List of options on button interaction.
Native Select: Styled native HTML select element.
Number Input: Numeric input for entering values.
Pagination: Navigate through a list of items.
Password Input: A field for entering secure text.
Popover: Overlay with extra info or options on trigger.
Presence: Animate components on mount and unmount.
Progress: Displays task progress with a linear indicator.
Prose: Typography styles for HTML content.
Qr Code: Displays a QR code.
Radio Group: Allows single selection from multiple options.
Rating: Show reviews and ratings in a visual format.
Resizable: Divides the interface into resizable sections.
Scroll Area: Custom scrollable area with styled scrollbars.
Segment Group: Follows the selected item.
Select: Displays a list of options.
Separator: Visually separate content with a line.
Sheet: Content that slides in from the screen edge.
Show: Conditionally render content based on a boolean value.
Sidebar: A sidebar for navigation and app structure.
Sidebar Default
Signature Pad
Skeleton: Displays a loading state.
Skip Nav: Lets keyboard users skip to main content.
Slider: A slider for selecting a value from a range.
Spinner: A spinner for displaying a loading state.
Status: Color-coded status for process or state.
Steps: Steps in a wizard-like format.
Swap: Animate between two visual states with smooth transitions.
Switch: A switch for toggling a binary state.
Table: A responsive table component.
Tabs: A tabs for navigating between content.
Tags Input: Allows users to add tags to an input field.
Template Ai
Template Auth
Template Blog
Template Dashboard
Template Ecommerce
Template Email
Template Landing
Template Podcast
Template Task Manager
Textarea: Form textarea or textarea-styled component.
Timer: Countdown or stopwatch with controls.
Toast: Provides feedback on an action.
Toggle: Two-state button that can be toggled on or off.
Toggle Group: Toggle buttons for selecting a value.
Toggle Tooltip: Display information on click.
Tooltip: Display information on hover or focus.
Tour: Displays a guided tour of the application.
Tree View: Hierarchical data in a tree structure.

Shark UI components

All Shark UI components

Browse by category