Sushi is the Angular component library in Ramen Suite, published as @sushi-kit/angular. It provides accessible, themeable components with typed signal APIs. Application state stays in Angular; interactions use native HTML semantics, Angular Aria, and the CDK.
- Angular 22
- A modern browser
Sushi ships the compiled CSS required by its components.
The Getting started guide contains the same setup as the Playground and is the maintained setup reference.
See Styling and themes for theme tokens, component tokens, recommended Tailwind usage, and custom themes.
npm install @sushi-kit/angularImport the public stylesheet from the application's global src/styles.css:
@import '@sushi-kit/angular/styles.css';No Sushi-specific PostCSS or Tailwind configuration is required.
Every public declaration is standalone. Import only what the consuming component uses:
import { Component } from '@angular/core';
import { Button } from '@sushi-kit/angular';
@Component({
selector: 'app-checkout',
imports: [Button],
template: `<button suiButton severity="primary">Place order</button>`,
})
export class Checkout {}Sushi includes form controls, navigation, overlays, feedback, data display, layout utilities, and image presentation. Consumer APIs use typed Angular inputs, models, outputs, projection, and template contexts rather than internal DOM access or styling hacks.
sushi is the default light theme and sushi-dark follows the operating-system dark preference. Set data-theme when the application offers an explicit theme choice:
<html data-theme="sushi-dark">
<!-- application -->
</html>Shared colors, radii, density, and effects use semantic CSS properties. Component-specific customization uses the documented --sui-* tokens shown on each playground Styling page.
The playground is both the visual documentation and the source-level integration application:
nvm use
npm install
npm startIt contains copyable examples plus generated Interface and Theming references. npm run package:check builds the playground against the library output and installs the packed tarball in a separate minimal Angular app. This catches package exports, peer-dependency resolution, and stylesheet imports that source-based tests cannot catch.
Use npm test for quick unit feedback. Before handing off a change, run:
npm run verifyThis checks formatting and linting, unit coverage, documentation tooling, browser-dependent E2E contracts, both applications, and the packed library contents.
- Contribution workflow
- Create or change a component
- Component styling
- Coding conventions
- Testing conventions
- AI conventions
- Code of conduct
- Security policy
The reusable library lives in sushi/; the documentation application lives in playground/; repository-only tooling lives in tools/. Playground and tooling code are excluded from the published package.
Sushi is available under the MIT License. Third-party software remains subject to its respective license terms.