@concourse/ui contains the shared React interface components and class-name utility for Concourse apps.
Complete the repository quick start. Open the application before you change a shared component.
Import components through package entry points:
import { Button } from "@concourse/ui/components/button";
import { cn } from "@concourse/ui/lib/utils";Do not import another package's internal source path.
Run the root Shadcn command:
pnpm add:componentThe root command uses packages/ui/components.json. It writes components into this package and reads shared CSS from @concourse/tailwind-config.
Review generated code before you keep it. Match the existing Base UI, Phosphor icon, accessibility, and export patterns.
Keep shared components independent from application authentication, database, and route code. Put product-specific composition in the consuming app.
Use semantic elements, keyboard behavior, visible focus, and accessible labels. Keep touch targets at least 44 pixels where the component contract requires them.
Use cn from @concourse/ui/lib/utils to combine conditional Tailwind classes.
| Command | Purpose |
|---|---|
pnpm add:component | Add a Shadcn component to this package |
pnpm --filter @concourse/ui check-types | Run the package type check |
pnpm lint | Run workspace lint rules |
pnpm format | Check workspace formatting |
pnpm build | Build consuming apps |
After a behavior change, verify the component in the running application and its keyboard flow.
The component catalog uses the base-mira Shadcn style, CSS variables, the olive base color, and Phosphor icons.
Theme tokens and Tailwind source discovery live in @concourse/tailwind-config. Do not duplicate them in this package.
@concourse/ui contains the shared React interface components and class-name utility for Concourse apps.
Complete the repository quick start. Open the application before you change a shared component.
Import components through package entry points:
import { Button } from "@concourse/ui/components/button";
import { cn } from "@concourse/ui/lib/utils";Do not import another package's internal source path.
Run the root Shadcn command:
pnpm add:componentThe root command uses packages/ui/components.json. It writes components into this package and reads shared CSS from @concourse/tailwind-config.
Review generated code before you keep it. Match the existing Base UI, Phosphor icon, accessibility, and export patterns.
Keep shared components independent from application authentication, database, and route code. Put product-specific composition in the consuming app.
Use semantic elements, keyboard behavior, visible focus, and accessible labels. Keep touch targets at least 44 pixels where the component contract requires them.
Use cn from @concourse/ui/lib/utils to combine conditional Tailwind classes.
| Command | Purpose |
|---|---|
pnpm add:component | Add a Shadcn component to this package |
pnpm --filter @concourse/ui check-types | Run the package type check |
pnpm lint | Run workspace lint rules |
pnpm format | Check workspace formatting |
pnpm build | Build consuming apps |
After a behavior change, verify the component in the running application and its keyboard flow.
The component catalog uses the base-mira Shadcn style, CSS variables, the olive base color, and Phosphor icons.
Theme tokens and Tailwind source discovery live in @concourse/tailwind-config. Do not duplicate them in this package.