- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Styling
A guide to styling components with our color system.
Overview
This UI library is optimized to work with specific color tokens that provide crisp, contrasted borders and enhanced visual depth. Our styling system builds upon shadcn/ui's CSS variables approach to ensure consistency and maintainability.
Our components use opaque borders instead of solid ones to ensure crisp, contrasted borders even when backgrounds lack sufficient contrast. These opaque borders mix with bottom shadows to create enhanced contrast and visual depth.
While this color system is optional, it's designed to provide optimal visual results. Using conventional color tokens may result in inconsistent borders and shadows that don't achieve the intended design quality.
Installation
pnpm dlx shadcn@latest add @coss/colors-neutral
This command will override your existing color variables. We're currently providing a default configuration based on neutral colors, but we plan to add more color variants in the future to give you more styling options while maintaining the same optimization principles.
Extended Color Variables
We've introduced additional color variables beyond the standard shadcn/ui palette to provide more control for specific components like badges and alerts:
--destructive-foreground: Foreground color for destructive actions--info: Information state color--info-foreground: Foreground color for information states--success: Success state color--success-foreground: Foreground color for success states--warning: Warning state color--warning-foreground: Foreground color for warning states
These additional variables ensure consistent styling across components that need to communicate different states or levels of importance.
Base UI Setup
Since this library is built on Base UI, you need to configure CSS isolation to ensure portaled components (Dialogs, Popovers, Selects, etc.) render correctly above page content.
Application Root Isolation
Add isolation: isolate to your application's root wrapper div. This creates a separate stacking context so portaled components always appear above page contents without z-index conflicts.
<body>
<div className="isolate relative flex min-h-svh flex-col">
{children}
</div>
</body>iOS Safari Compatibility
For iOS Safari 26+ compatibility, add position: relative to the body element. This ensures backdrops properly cover the visual viewport after page scrolling.
<body className="relative">
<div className="isolate relative flex min-h-svh flex-col">
{children}
</div>
</body>These styles ensure Base UI components maintain proper rendering hierarchy and visual layering throughout your application. Without isolation, you may experience z-index conflicts where page content appears above modal dialogs or popovers.