uilaunchuisource: ok · hit

Launch UI Base

Base styles, CSS utilities, and configuration for Launch UI components.

npx shadcn add "https://www.launchuicomponents.com/r/launchui.json"

free

No selection tags yet — empty means no evidence, not lack of support.

Files10 · source cached 10/8/2026, 10:23:39 PM

app/globals.css

@import "tailwindcss";
@import "../styles/utils.css";

@import "tw-animate-css";

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  /* Colors */
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
  --color-light: var(--light);
  --color-light-foreground: var(--light-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);

  /* Radius */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  /* Spacing */
  --spacing-container: 1280px;
  --spacing-container-lg: 1536px;

  /* Shadows */
  --shadow-md: 0 4px 6px -1px var(--shadow), 0 2px 4px -2px var(--shadow);
  --shadow-xl: 0 20px 25px -5px var(--shadow), 0 8px 10px -6px var(--shadow);
  --shadow-2xl: 0 25px 50px -12px var(--shadow);
  --shadow-mockup: -12px 16px 48px var(--shadow-strong);

  /* Separators */
  --line-width: 1px;

  /* Animations */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-appear: appear 0.6s forwards ease-out;
  --animate-appear-zoom: appear-zoom 0.6s forwards ease-out;

  /* Breakpoints */
  --breakpoint-xs: 30rem;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
  @keyframes appear {
    0% {
      opacity: 0;
      transform: translateY(1rem);
      filter: blur(0.5rem);
    }
    50% {
      filter: blur(0);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
  @keyframes appear-zoom {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}

:root {
  /* Accent colors */
  --brand: oklch(66.5% 0.1804 47.04);
  --brand-foreground: oklch(75.77% 0.159 55.91);

  /* Customized shadcn/ui colors */
  --background: oklch(97.65% 0.001 17.18);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(66.5% 0.1804 47.04);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.927 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);

  /* Illustrations colors */
  --light: var(--brand);
  --light-foreground: var(--brand-foreground);

  /* Shadows */
  --shadow: #00000008;
  --shadow-strong: #00000008;
}

.dark {
  /* Accent colors */
  --brand: oklch(83.6% 0.1177 66.87);
  --brand-foreground: oklch(75.77% 0.159 55.91);

  /* Customized shadcn/ui colors */
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.141 0.005 285.823);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.141 0.005 285.823);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.885 0.006 286.033);
  --input: oklch(0.274 0.006 286.033);
  --ring: oklch(0.442 0.017 285.786);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.274 0.006 286.033);
  --sidebar-ring: oklch(0.442 0.017 285.786);

  /* Illustrations colors */
  --light: var(--foreground);
  --light-foreground: var(--foreground);

  /* Shadows */
  --shadow: #00000020;
  --shadow-strong: #00000088;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

styles/utils.css

/* Glass effects */
@utility glass-1 {
  @apply border-border from-card/80 to-card/40 dark:border-border/10 dark:border-b-border/5 dark:border-t-border/20 dark:from-card/5 dark:to-card/0 border bg-linear-to-b;
}
@utility glass-2 {
  @apply border-border from-card/100 to-card/80 dark:border-border/10 dark:border-b-border/5 dark:border-t-border/20 dark:from-card/10 dark:to-card/5 border bg-linear-to-b;
}
@utility glass-3 {
  @apply border-border from-card/30 to-card/20 dark:border-border/10 dark:border-t-border/20 dark:border-b-border/5 dark:from-primary/5 dark:to-primary/2 border bg-linear-to-b;
}
@utility glass-4 {
  @apply border-border border-b-input/90 from-card/60 to-card/20 dark:border-border/10 dark:border-t-border/30 dark:from-primary/10 dark:to-primary/5 border bg-linear-to-b dark:border-b-0;
}
@utility glass-5 {
  @apply border-border border-b-input from-card/100 to-card/20 dark:border-border/10 dark:border-t-border/30 dark:from-primary/15 dark:to-primary/5 border bg-linear-to-b dark:border-b-0;
}

/* Fade effects */
@utility fade-x {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%
  );
}
@utility fade-y {
  mask-image: linear-gradient(
    to top,
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%
  );
}
@utility fade-top {
  mask-image: linear-gradient(to bottom, transparent 0%, black 35%);
}
@utility fade-bottom {
  mask-image: linear-gradient(to top, transparent 0%, black 35%);
}
@utility fade-top-lg {
  mask-image: linear-gradient(to bottom, transparent 15%, black 100%);
}
@utility fade-bottom-lg {
  mask-image: linear-gradient(to top, transparent 15%, black 100%);
}
@utility fade-left {
  mask-image: linear-gradient(to right, transparent 0%, black 35%);
}
@utility fade-right {
  mask-image: linear-gradient(to left, transparent 0%, black 35%);
}
@utility fade-left-lg {
  mask-image: linear-gradient(to right, transparent 15%, black 100%);
}
@utility fade-right-lg {
  mask-image: linear-gradient(to left, transparent 15%, black 100%);
}

@utility line-y {
  @apply border-border dark:border-border/10;
  border-width: 0 var(--line-width, 0);
}

@utility line-x {
  @apply border-border dark:border-border/10;
  border-width: var(--line-width, 0) 0;
}

@utility line-b {
  @apply border-border dark:border-border/10;
  border-width: 0 0 var(--line-width, 0);
}

@utility line-t {
  @apply border-border dark:border-border/10;
  border-width: var(--line-width, 0) 0;
}

@utility line-dashed {
  @apply border-dashed;
}

components/ui/section.tsx

import * as React from "react";

import { cn } from "@/lib/utils";

function Section({ className, ...props }: React.ComponentProps<"section">) {
  return (
    <section
      data-slot="section"
      className={cn("line-b px-4 py-12 sm:py-24 md:py-32", className)}
      {...props}
    />
  );
}

export { Section };

public/placeholder-light.svg

<svg width="1280" height="800" viewBox="0 0 1280 800" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <rect width="1280" height="800" fill="#f4f4f5"/>
  <g transform="translate(592, 352)" stroke="#71717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <rect width="72" height="72" x="12" y="12" rx="8" ry="8"/>
    <circle cx="36" cy="36" r="8"/>
    <path d="M84 60l-12.34-12.34a8 8 0 0 0-11.32 0L24 84"/>
  </g>
</svg>

public/placeholder-dark.svg

<svg width="1280" height="800" viewBox="0 0 1280 800" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <rect width="1280" height="800" fill="#27272a"/>
  <g transform="translate(592, 352)" stroke="#a1a1aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <rect width="72" height="72" x="12" y="12" rx="8" ry="8"/>
    <circle cx="36" cy="36" r="8"/>
    <path d="M84 60l-12.34-12.34a8 8 0 0 0-11.32 0L24 84"/>
  </g>
</svg>

public/placeholder-portrait-light.svg

<svg width="450" height="920" viewBox="0 0 450 920" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <rect width="450" height="920" fill="#f4f4f5"/>
  <g transform="translate(177, 412)" stroke="#71717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <rect width="72" height="72" x="12" y="12" rx="8" ry="8"/>
    <circle cx="36" cy="36" r="8"/>
    <path d="M84 60l-12.34-12.34a8 8 0 0 0-11.32 0L24 84"/>
  </g>
</svg>

public/placeholder-portrait-dark.svg

<svg width="450" height="920" viewBox="0 0 450 920" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <rect width="450" height="920" fill="#27272a"/>
  <g transform="translate(177, 412)" stroke="#a1a1aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <rect width="72" height="72" x="12" y="12" rx="8" ry="8"/>
    <circle cx="36" cy="36" r="8"/>
    <path d="M84 60l-12.34-12.34a8 8 0 0 0-11.32 0L24 84"/>
  </g>
</svg>

public/placeholder-square-light.svg

<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <rect width="400" height="400" fill="#f4f4f5"/>
  <g transform="translate(152, 152)" stroke="#71717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <rect width="72" height="72" x="12" y="12" rx="8" ry="8"/>
    <circle cx="36" cy="36" r="8"/>
    <path d="M84 60l-12.34-12.34a8 8 0 0 0-11.32 0L24 84"/>
  </g>
</svg>

public/placeholder-square-dark.svg

<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <rect width="400" height="400" fill="#27272a"/>
  <g transform="translate(152, 152)" stroke="#a1a1aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <rect width="72" height="72" x="12" y="12" rx="8" ry="8"/>
    <circle cx="36" cy="36" r="8"/>
    <path d="M84 60l-12.34-12.34a8 8 0 0 0-11.32 0L24 84"/>
  </g>
</svg>

public/placeholder-avatar.svg

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <rect width="100" height="100" fill="#a1a1aa"/>
  <g transform="translate(26, 26)" stroke="#f4f4f5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none">
    <circle cx="24" cy="16" r="10"/>
    <path d="M40 42a16 16 0 0 0-32 0"/>
  </g>
</svg>

More from Launch UI

Badgeui Bento Gridblock Buttonui Cardui Carouselblock CTA Sectionblock FAQ Sectionblock Feature Sectionblock

Browse all components in this library →