Carnation is now in early alpha. Read more

Docs
Tips

Tips

🚧

This page is under construction.

Prefer children over props

On the web, text can appear anywhere in the DOM. On native, text can only appear in Text components (or otherwise you'll receive a fatal error).

To bring your component API closer to a web-feel, we recommend exposing text content as children rather than exposing a separate prop which expects a string:

Don't do this...
<Button title="Report bug" />
Do this!
<Button>Report bug</Button>

How do we resolve the native error? Simply, we ensure our children are wrapped in a c.span component:

packages/ui/components/Button.tsx
import { c } from "carnation-ds";
 
export interface ButtonProps {
  children: string;
}
 
export function Button({ children }: ButtonProps) {
  return (
    <c.button>
      <c.span>{children}</c.span>
    </c.button>
  );
}

Customizing accessibility components

Our accessibility components are built with customization in mind. We recommend wrapping our components with those from your design system and re-exporting for use in your apps:

packages/ui/components/Tabs.tsx
import type { PropsWithChildren } from "react";
import { Tabs } from "carnation/a11y";
import { Button } from "./Button";
 
export const Root = Tabs.Root;
 
export interface ListProps extends PropsWithChildren {
  label: string;
}
export function List({ children, label }: ListProps) {
  return <Tabs.List ariaLabel={label}>{children}</Tabs.List>;
}
 
export interface TriggerProps<T extends Tabs.Identifier> {
  children: string;
  value: T;
}
export function Trigger({ children, value }: TriggerProps) {
  return (
    <Tabs.Trigger asChild value={value}>
      <Button>{children}</Button>
    </Tabs.Trigger>
  );
}
 
export const Content = Tabs.Content;
PatternsStyling