Component library
Components for Context.dev pages and interfaces. Check the usage notes and examples before adding one.
npx context-ds add <item>Components
37 itemsButtons, forms, menus, and other controls, with site and product variants.
- AccordionSiteExpandable question and answer rows with a rotating chevron.
- AvatarProductProfile image with initials as the fallback.
- BadgeSite and productStatus labels, product tags, and site chips.
- BannerProductPage-level information or error notice with optional actions.
- ButtonSite and productProduct buttons and site pill buttons, with variants for primary, secondary, and contextual actions.
- CardSite and productContent container with product and site variants.
- CheckboxProductCheckbox with checked, unchecked, and disabled states.
- CollapseProductExpandable content with height and opacity transitions.
- CommandProductSearchable command list with grouped results and keyboard navigation. CommandDialog opens it as a palette.
- Copy buttonProductCopy action with a temporary success indicator.
- DialogProductModal dialog with a framed panel, focus management, Escape dismissal, and a scrollable overlay.
- Docs linkProductDocumentation link with a book icon and external-link arrow.
- Dot iconSite and productStatic SVG icon defined by rows of dots and rings.
- Dropdown menuProductAction menu with labels, separators, selection states, and hold-to-confirm actions.
- FieldProductForm field layout with a label, required indicator, help text, and error message.
- Hold buttonProductDestructive action that requires a sustained pointer or key press, with a progress indicator.
- InputSite and productSingle-line text input with hover, focus, invalid, and disabled states.
- KbdProductKeyboard shortcut label.
- LabelSite and productForm control label with support for disabled states.
- PopoverProductFloating panel anchored to a trigger, for short forms and additional details.
- ProgressProductProgress track with a filled portion.
- Scroll areaProductScrollable content with edge fades and a button to scroll down.
- Secret fieldProductMasked API key field with reveal and copy actions.
- Segmented controlProductSingle-choice option group with radio semantics and an animated selection indicator.
- SelectProductSingle-choice menu with toolbar, field, and chip trigger variants.
- SeparatorSite and productHorizontal or vertical divider.
- SheetProductFloating side panel for record details, without a background scrim.
- SkeletonProductLoading placeholder with a shimmer animation.
- ToasterProductToast container and notifications for action feedback.
- SpinnerProductLoading indicator that uses the surrounding text color.
- SwitchProductToggle for settings that apply immediately, with on, off, and disabled states.
- TableProductData table with headers, row separators, and tabular numbers.
- TabsSite and productView tabs with product and site variants and an animated selection indicator.
- Tag filterProductTag filter with removable chips and a searchable selection menu.
- Tags inputProductInput that converts typed or pasted values into tags and marks invalid entries.
- TextareaSite and productMulti-line text input with hover, focus, invalid, and disabled states.
- TooltipProductShort label shown on hover or keyboard focus, with a shared delay between adjacent controls.
Product
23 itemsDashboard navigation, page layouts, cards, charts, and panels.
- App sidebarProductDashboard navigation with workspace controls, search, grouped links, and footer actions. Opens as a drawer on phones.
- App top barProductDashboard top bar with a mobile navigation button and space for credits or account controls.
- Bar chartProductStacked bar chart with animated updates, series selection, and a tooltip.
- Code cardProductCode display with language selection, copy, expand and collapse controls, and footer actions.
- Credits menuProductCredits balance menu with plan details, reset date, rate limit, auto top-up, and billing actions.
- Data toolbarProductSearch and filter controls for data tables and lists.
- Empty stateProductEmpty-page and empty-table layouts with a message and next actions.
- Glide tabsProductTab or radio options with an animated selection indicator. Supports plain and inset track variants.
- Glyph cardProductCards with glyph headers or centered figures, plus status labels and links.
- JSON viewerProductJSON display with line numbers, folding, search, copy, and download.
- Line chartProductLine chart with a filled area, point markers, a pending segment, and a tooltip positioned away from the active point.
- PageProductDashboard page column, centered header, sections, and card entrance animation.
- Playground parametersProductAPI parameter panel with grouped controls, reset actions, a changed count, and scroll indicators.
- Playground result cardProductAPI response card with Preview, JSON, and History views, status, statistics, and loading states.
- Quickstart cardProductOnboarding card with numbered steps, a masked API key, setup snippets, and copy actions.
- Settings sectionProductSettings sections, rows, fields, notices, and destructive-action buttons.
- Sidebar alert cardProductSidebar billing notice with a status indicator and corrective action.
- Stat cardProductDashboard statistic card with a title, tabular figure, footer, and optional meter or action.
- Try API boxProductAPI demo with endpoint tabs, example input, and a run action.
- Usage cardProductDashboard usage chart with breakdown selection, date ranges, stacked bars, and series filtering.
- Usage summaryProductUsage dialog with remaining credits, daily and monthly totals, and usage by API.
- User menuProductSidebar account menu with links, theme selection, and sign-out action.
- Workspace switcherProductWorkspace selector with plan labels, default selection, settings, and creation actions.
Site
31 itemsHeaders, heroes, sections, and footers for Context.dev marketing pages.
- Agent setup windowSiteTabbed agent setup instructions for Prompt, MCP, and CLI, with copy actions and an animated prompt preview.
- Alternative page sectionsSiteComparison cards, tables, pricing comparisons, and quotes for alternatives pages.
- Announcement barSiteA linked announcement strip above the site header.
- Blog cardsSitePost cards with a cover, date, title, and summary, plus the Latest updates section.
- Blog postSiteArticle layout with a title, author, dates, body content, and related posts.
- Code windowSiteSite code and terminal windows, language tabs, copy controls, and install commands.
- Comparison tableSiteComparison table with a highlighted Context.dev column and text or check-mark cells.
- Competitor chartsSiteTabbed benchmark charts for success rate, latency, and cost.
- Call to actionSiteClosing action sections for the home page and product pages.
- Customer storiesSiteScrollable customer story cards with drag, arrow, and pagination controls.
- Customer story pageSiteCustomer story layout with a back link, title, date, and article column.
- FAQ sectionSiteFAQ section with categories, expandable answers, and a contact action.
- HeroSiteSite hero with white or blue backgrounds, title, description, actions, and an optional media panel.
- Logo stripSiteScrolling customer logos with hover pause and an optional rotating quote.
- PricingSitePricing cards, billing interval selection, plan comparisons, discounts, and credit cost tables.
- Product gridSiteProduct cards with a title, description, action, tags, and demo window.
- Product page (water)SiteProduct page sections with a water background, customer logos, numbered steps, FAQ, and closing action.
- Product page (landing)SiteProduct landing sections with capability cards, workflow cards, code examples, and an FAQ.
- Product page (stage)SiteProduct page layout with a hero, demo, metrics, capabilities, code examples, steps, comparisons, and related products.
- SectionSiteSite section layout with column rules, a heading, and an optional divider.
- Site footerSiteSite footer with brand information, link groups, badges, copyright, and an optional watermark.
- Site headerSiteSite navigation with desktop dropdowns, a mobile menu, and a compact scrolled state.
- Stat blockSiteSite statistic card with a figure and caption.
- TestimonialsSiteQuote cards with highlighted text on the active card.
- Trust stripSiteLinked security cards with a mark, title, description, and action.
- Use case featuresSiteUse-case feature cards, comparison tables, and before-and-after panels.
- Use case how it worksSiteNumbered implementation steps with install commands and code examples.
- Use case personasSiteUse-case persona cards with roles, requirements, solutions, and optional animations.
- Use case proofSiteUse-case sections for customer quotes, metrics, examples, and stories.
- Use cases explorerSiteTabbed use-case selector with code examples and optional automatic progression.
- Workflow gridSiteResponsive card grid with titles, descriptions, and media panels.
Blocks
4 itemsPage layouts composed from the library components.
- App shellProductDashboard layout with a sidebar, top bar, credits menu, and scrollable page area.
- Overview pageProductDashboard overview with an API demo, usage chart, credit statistics, quickstart, and usage summary dialog.
- Settings pageProductSettings layout with tabs, form sections, billing details, and destructive actions.
- Table pageProductAPI keys page with search, filtering, usage information, row actions, and empty states.
Visuals
66 itemsDot fields, glyphs, diagrams, and animations.
- Announcement dot stripSiteA three-row dot pattern around the announcement label, with hover and timed highlights.
- API grid glyphProductA grid of API icons with an animated highlight and API labels.
- Credits dot numberSiteA dot-grid number that transitions to Doto text and back.
- Customer logo dotsSiteCustomer logo rendered as dots, with an arrow transition on hover or focus.
- Dot shader imageSiteImage rendered as solid and hollow dots on a white, blue, or black surface.
- Dot shader playgroundSiteInteractive dot-shader preview with image upload, sample images, and SVG or PNG export.
- Footer watermarkSiteDot-rendered Context.dev wordmark with pointer interaction and an animated cursor.
- Glyph loopProductLooping product glyph animation that runs while visible.
- Glyph meltProductProduct glyph that transitions on hover, focus, or while its parent card is visible.
- Glyph storyProductLarge product glyph animation in the fine dot pattern. Supports a static state.
- Glyph tileProductProduct glyph in a bordered tile. Includes static and larger animated variants.
- Hero circle patternSiteRing-pattern background with content exclusion areas and optional diamond clusters.
- Hero data flowSiteAnimated data streams for scrape and answer demos.
- Hero dot fieldSiteDot-pattern hero background with optional streams, labels, logo mark, and pointer interaction.
- Hero globeSiteWireframe globe with animated paths and optional connected statistics on wide screens.
- Hero monitorSiteDot-rendered terminal containing an animated demo.
- Hero stat morphsSiteAnimated hero figures that transition through a sequence of dot shapes on wide screens.
- Hero waterSiteWebGL water background with a static fallback for reduced motion and unsupported devices.
- Pages coverProductDot animation showing several pages combining into one, with input and output labels.
- Persona glyphSiteAnimated glyph tiles for site personas and static menu icons.
- Ring backdropSiteRing-pattern background that excludes marked content and avoids clipping rings at rounded edges.
- Actions storySiteDot animation of browser actions and the resulting page.
- Answer storySiteDot animation of a question, sources, and a structured answer.
- Assets storySiteDot animation of a logo, colors, and company profile.
- Autofill storySiteDot animation of a domain populating a signup form.
- Batch storySiteDot animation of a URL batch becoming a dataset.
- Batches storyProductDot animation of batch processing and progress.
- Blog hero storySiteDot animation of a post and announcement, with captions.
- Brand kit storySiteDot animation of a domain resolving to logo, color, typography, and company data.
- Collect storySiteDot animation of job progress, collected results, and a completion webhook.
- Compare hero storySiteDot animation of feature and benchmark comparisons, with captions.
- Components storySiteDot animation of component shapes and theme changes.
- Context storySiteDot animation of company information filling a profile.
- Crawl storySiteDot animation of a sitemap expanding into a crawl graph.
- Datasets hero storySiteDot animation of source documents becoming table rows, with captions.
- Design system storySiteDot animation of a website's typography, colors, buttons, and spacing being extracted.
- Discover storySiteDot animation of domain discovery and URL results.
- Enrich storySiteDot animation of an identifier resolving to company and person profiles.
- Extract storySiteDot animation of a page converted to Markdown, HTML, JSON, images, and screenshots.
- Free tools hero storySiteDot animation of tools processing a URL, with captions.
- Freshness storySiteDot animation of freshness settings selecting cached or live content.
- Generate storySiteDot animation of company data being used to generate an email, social post, and landing page.
- Glossary hero storySiteDot animation of glossary entries and lookup, with captions.
- Grants hero storySiteDot animation of experiment progress and grant credits, with captions.
- Identity storySiteDot animation of domains, email addresses, names, and tickers resolving to a brand.
- Metadata storySiteDot animation of titles and descriptions being added to URLs.
- Monitor ways storiesSiteDot animations for page changes, sitemap changes, and extracted-record monitoring.
- Output storySiteDot animation of output format selection and returned files.
- Parse storySiteDot animation of a PDF converted to Markdown through OCR.
- Persona storySiteDot animation of a team's task and API result, with captions.
- Question storySiteDot animation of pages being searched to answer a question.
- RAG storySiteDot animation of a query retrieving relevant pages.
- Research storySiteDot animation of company research producing a brand profile.
- Scope storySiteDot animation of subdomain scope and crawl limits.
- Scrape storySiteDot animation of a URL producing Markdown, images, and a screenshot.
- Search storySiteDot animation of a search query and ranked results.
- Setup storySiteDot animation of API key and package setup.
- Site map storySiteDot animation of a domain's page tree and page selection.
- Sources storySiteDot animation of an answer with numbered source links.
- Spacing storySiteDot animation demonstrating spacing and shadow values.
- Structure storySiteDot animation of prose converted to structured fields.
- Tenant theme storySiteDot animation of a dashboard switching between tenant themes.
- Type storySiteDot animation demonstrating font weights and color values.
- URL list storySiteDot animation of a URL batch and its metadata.
- Watch storySiteDot animation of scheduled page checks and change notifications.
- Upgrade glyphProductDot animation that transitions between a gift and a rocket. Uses a static gift with reduced motion.