v0.2.1 · 108 components · 153+ blocks
LaunchApp Design System
A comprehensive component library built on Radix UI Primitives and Tailwind CSS. Accessible, customizable, and production-ready.
108
Components
153+
Blocks
9
Categories
100%
Accessible
Inputs & Controls
ButtonDisplays a button or a component that looks like a button with multiple variants and sizes.CalendarA date field component that allows users to enter and edit date.CheckboxA control that allows the user to toggle between checked and not checked.ComboboxAn autocomplete input combined with a dropdown list for selecting from options.DatePickerA date picker input that combines a button trigger with a calendar popover.InputDisplays a form input field or a component that looks like an input field.MultiSelectAn input component for selecting multiple options from a dropdown list.RadioGroupA set of checkable buttons—known as radio buttons—where no more than one can be checked at a time.SelectDisplays a list of options for the user to pick from—triggered by a button.SliderAn input where the user selects a value from within a given range.SwitchA control that allows the user to toggle between checked and not checked.TextareaDisplays a form textarea or a component that looks like a textarea.ToggleA two-state button that can be either on or off.ToggleGroupA set of two-state buttons that can be toggled on or off.Chat InputMessage input bar with send button, emoji picker, and attachment support.Color PickerColor selection input with hex input, opacity slider, and recent colors.Inline EditableClick-to-edit text field that toggles between display and input modes.Tag InputMulti-value tag input that creates removable tags on Enter or comma.
Display
AccordionA vertically stacked set of interactive headings that reveal or hide associated sections of content.AvatarAn image element with a fallback for representing users or entities.BadgeDisplays a badge or a component that looks like a badge.CardDisplays a card with header, content, and footer sections.CollapsibleAn interactive component which expands/collapses a panel.SeparatorVisually or semantically separates content.Animated BackgroundAnimated gradient or particle background for hero sections and landing pages.Animated BorderComponent with an animated gradient border effect for highlighting cards or CTAs.Animated TextText with typewriter, fade-in, or word-reveal animation effects.BackgroundStatic decorative background with grid, dots, or gradient patterns.CarouselTouch-friendly carousel with navigation arrows, dot indicators, and auto-play.ChangelogVertical timeline of product changelog entries grouped by version.Chat BubbleIndividual chat message bubble with avatar, timestamp, and own/other variants.Image ComparisonSide-by-side image comparison slider with drag handle.Magic CardCard with mouse-tracking gradient spotlight effect.MarqueeInfinite horizontal or vertical scrolling marquee for logos, testimonials, etc.Privacy DashboardUser-facing privacy dashboard for managing data, consents, and downloads.SpotlightMouse-tracking spotlight overlay effect for dark backgrounds.Staggered ListList where items animate in with a sequential stagger delay.Status PagePublic status page showing system health, incidents, and uptime metrics.Streaming TextCharacter-by-character streaming text display for AI response simulation.Tab Content CrossfadeTabs with animated crossfade transition between content panels.TerminalStyled terminal emulator for displaying command output and code execution.Text AnimateAdvanced text animation with letter-by-letter, word, or line reveal variants.Theme CardPreview card for displaying a color theme with swatches and name.Theme PreviewLive preview of a design theme applied to common UI patterns.Video PlayerCustom video player with playback controls, progress bar, and fullscreen.
Layout
AspectRatioDisplays content within a desired ratio, preventing layout shifts.ResizableAccessible resizable panel groups and layouts with keyboard support.ScrollAreaAugments native scroll functionality for custom, cross-browser styling.Animated HeightWrapper that animates height changes smoothly for expand/collapse transitions.Bento GridCSS Grid layout for bento-style feature showcases with variable-size cards.Dashboard GridDraggable and resizable dashboard widget grid layout.MasonryCSS masonry layout for variable-height items like photos or cards.Multi Panel LayoutConfigurable multi-panel layout with primary, secondary, and tertiary panes.Multi Step WizardConfigurable step-by-step wizard with validation and progress indicator.
Navigation
BreadcrumbDisplays the path to the current resource using a hierarchy of links.MenubarA visually persistent menu common in desktop applications providing quick access to commands.NavigationMenuA collection of links for navigating websites with full keyboard support.PaginationPagination with page navigation, next and previous links.TabsA set of layered sections of content—known as tab panels—that are displayed one at a time.ToolbarA container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.DockmacOS-style magnifying dock with icon zoom effect on hover.Mobile NavBottom navigation bar optimized for mobile with icon and label items.
Overlays
AlertDialogA modal dialog that interrupts the user with important content and expects a response.CommandFast, composable command menu component built on cmdk.ContextMenuDisplays a menu located at the pointer, triggered by a right-click or long-press.DialogA window overlaid on either the primary window, rendering the content underneath inert.DropdownMenuDisplays a menu to the user — such as a set of actions — triggered by a button.PopoverDisplays rich content in a portal, triggered by a button.SheetExtends the Dialog component to display content that complements the main content of the screen from a side edge.TooltipA popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.Cookie Preferences DialogDialog for granular cookie preference management with category toggles.Copilot PanelSliding AI copilot panel with chat interface and suggested prompts.LightboxFull-screen image viewer with navigation, zoom, and keyboard controls.
Feedback
AlertDisplays a callout for user attention with support for different severity levels.ProgressDisplays an indicator showing the completion progress of a task.SkeletonUse to show a placeholder while content is loading.SonnerAn opinionated toast notification component built on Sonner.ToastA succinct message that is displayed temporarily, with support for actions.BannerTop-of-page announcement banner with dismiss action and optional CTA.Cookie ConsentGDPR-compliant cookie consent manager with categories and preferences.Cookie Consent BannerSlim bottom banner for cookie consent with accept and customize options.Live IndicatorPulsing dot indicator for showing real-time or live status.Notification BellBell icon with unread count badge that opens a notification dropdown.Thinking IndicatorAnimated indicator for AI 'thinking' state with bouncing dots or spinner.
Data & Charts
ChartA collection of chart components built on top of Recharts for data visualization.DataTableA powerful data table component with sorting, filtering, and pagination built on TanStack Table.KPICardA card component for displaying key performance indicators with trend information.StatDisplayA compact component for displaying a statistic with optional label and trend indicator.TableA responsive table component with thead, tbody, and pagination support.Consent History TableTable showing user consent history with timestamps, types, and status.Funnel ChartVisual funnel chart for conversion and pipeline data visualization.GaugeCircular gauge meter for displaying a single metric as a percentage.HeatmapCalendar-style heatmap for visualizing activity over time (GitHub-style).Realtime TickerLive-updating metric ticker that streams values with directional change indicators.Sankey DiagramFlow diagram showing proportional relationships between categories.SparklineMiniature inline chart for showing trends within a small space.Tree MapHierarchical tree map visualization for proportional data analysis.
Forms
Utilities
FocusScopeA utility that traps focus within a container, useful for accessible modals and overlays.PortalA utility component that renders its children into a different DOM node.VisuallyHiddenHides content visually while keeping it accessible to screen readers.Page TransitionWrapper for animating page-to-page transitions with fade, slide, or scale effects.Palette SwitcherColor palette switcher for dynamically changing the app's theme palette.Scroll AnimateWrapper that triggers entrance animations when elements scroll into view.Scroll EffectsParallax and scroll-driven animation effects for immersive layouts.Smart Theming GeneratorAI-powered theme generator that creates a full design token set from a base color.Theme GeneratorInteractive tool for generating a complete design token theme from a brand color.